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

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

一、创建Bottom Navigation

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

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

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;
                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里面修改。

源码下载