Android Studio 自带模板Bottom Navigation Activity 结合Fragment创建主页

网上很多Bottom Navigation的列子，但往往今天讲的有点不一样，网上的列子大多是结合使用了ViewGroup来实现app的主页，我这边讲的是只结合Fragment。好了，废话不多说，进入正题。

一、创建Bottom Navigation

使用Android Studio创建工程在选择activity的时候不要选择Empty Activity，而是选择Bottom Navigation Activity，如下图

创建完成之后呢xml文件如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.tang.bottomnavigation.bottomnavigation.MainActivity">
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="@+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/activity_vertical_margin"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text="@string/title_home" />
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/navigation" />

</LinearLayout>

activity代码如下

package com.tang.bottomnavigation.bottomnavigation;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

private TextView mTextMessage;

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
mTextMessage.setText(R.string.title_home);
return true;

4000
case R.id.navigation_dashboard:
mTextMessage.setText(R.string.title_dashboard);
return true;
case R.id.navigation_notifications:
mTextMessage.setText(R.string.title_notifications);
return true;
}
return false;
}

};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mTextMessage = (TextView) findViewById(R.id.message);
BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
}

}


现在编译的话就可以正常在手机上跑起来了，当然这么简单就不需要讲了。还有下一步。

二、结合Fragment使用

首先我们创建空白的Fragment，如下图。主页要几个页面就创建几个（注意，不能是任意个，主页界面是3-5个）。创建完成之后呢，Fragment类里面的代码很多，我们不需要这些，把他删掉，只剩下这一个方法onCreateView这一个方法就行了。删完后代码如下，所有添加的Fragment类都是这样。

package com.tang.bottomnavigation.bottomnavigation;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_fragment1, container, false);
}

}

然后在MainActivity添加如下代码

private FragmentTransaction transaction;
private FragmentManager fragmentManager;

// 设置默认进来是tab 显示的页面
private void setDefaultFragment(){
fragmentManager = getSupportFragmentManager();
transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.content,new Fragment1());
transaction.commit();
}在mOnNavigationItemSelectedListener里面添加
transaction.replace(R.id.content,new
Fragment1());transaction.commit();代码如下
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
fragmentManager = getSupportFragmentManager();
transaction = fragmentManager.beginTransaction();
switch (item.getItemId()) {
case R.id.navigation_home:
transaction.replace(R.id.content,new Fragment1());
transaction.commit();
return true;
case R.id.navigation_dashboard:
transaction.replace(R.id.content,new Fragment2());
transaction.commit();
return true;
case R.id.navigation_notifications:
transaction.replace(R.id.content,new Fragment3());
transaction.commit();
return true;
}
return false;
}

};

最后再对应的xml文件添加控件就完成了主页。
最后再讲下，再Fragment里面是无法直接findviewbyid找到控件的，必须要在前面加getView().才行，最后注意一点，需要重写onStart方法，所有的控件放到这里面初始化。@Override
public void onStart() {
TextView textView = getView().findViewById(R.id.textOne);
textView.setText("我是第一个视图哦");
super.onStart();
}好了，到此结束。需要添加或更改Bottom图标和文字的需要在

Navigation.xml里面修改。
源码下载