demo:https://github.com/linliangliang/BottomNavagationBar

android底部導航欄的實現方式比較多，今天學習其中兩種方式：

一、使用tabLayout+Fragment實現。

二、使用BottomNavigationBar實現。

第二種實現方式：https://blog.csdn.net/qq_25066049/article/details/84647988

下面介紹tablayou+fregment的實現：

1、在app的gradle新增

implementation 'com.android.support:appcompat-v7:26.0.0'
compile 'com.android.support:design:26.0.0'
 

2、activity_main.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scrollbars="none"></android.support.v4.view.ViewPager>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_marginBottom="5dp"
        android:background="@android:color/darker_gray" />
    <android.support.design.widget.TabLayout
        android:id="@+id/bottom_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginBottom="2dp"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="#03A9F4"
        app:tabTextColor="@android:color/darker_gray">
    </android.support.design.widget.TabLayout>
</LinearLayout>
 

主介面有一個viewpage和一個tablayout構成，分別表示主顯示介面和底部導航欄，其中涉及的樣式、顏色、圖片都自己新增，後面的一樣。

其中viewpage盛放的四個fragment都是類似的，只是顯示的文字不一樣，這裡只貼一個如下：fragment_attention.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="愛好" />
</LinearLayout>
 

新建好四個fragment後，分別為四個fragment寫一個對應的類，這裡只貼一個：AttentionFragment.java

其他地方一個，只是return inflater.inflate(R.layout.fragment_attention,container,false);填充對應的fragment佈局檔案

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

import com.zhengyuan.bottomnaviagtionbar.R;

/**
 * Created by 林亮 on 2018/11/29
 */

public class AttentionFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_attention,container,false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
}

接下來為主介面的viewpage寫一個對應的介面卡：MyFragmentPagerAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.zhengyuan.bottomnaviagtionbar.fragment.AttentionFragment;
import com.zhengyuan.bottomnaviagtionbar.fragment.DiscoveryFragment;
import com.zhengyuan.bottomnaviagtionbar.fragment.HomeFragment;
import com.zhengyuan.bottomnaviagtionbar.fragment.ProfileFragment;

/**
 * Created by 林亮 on 2018/11/29
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private String[] mTitles = new String[]{"愛好", "發現", "主頁", "我的"};

    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        if (position == 0) {
            return new AttentionFragment();
        } else if (position == 1) {
            return new DiscoveryFragment();
        } else if (position == 2) {
            return new HomeFragment();
        }
        return new ProfileFragment();
    }

    @Override
    public int getCount() {
        return mTitles.length;
    }

    //ViewPager與TabLayout繫結後，這裡獲取到PageTitle就是Tab的Text
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

最後是主函式mainActivity.class:

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.zhengyuan.bottomnaviagtionbar.adapter.MyFragmentPagerAdapter;

public class MainActivity extends AppCompatActivity {

    public static final int[] mTabRes = new int[]{R.drawable.tab_home_selector, R.drawable.tab_discovery_selector, R.drawable.tab_attention_selector, R.drawable.tab_profile_selector};
    public static final int[] mTabResPressed = new int[]{R.drawable.ic_tab_strip_icon_feed_selected, R.drawable.ic_tab_strip_icon_category_selected, R.drawable.ic_tab_strip_icon_pgc_selected, R.drawable.ic_tab_strip_icon_profile_selected};


    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private MyFragmentPagerAdapter myFragmentPagerAdapter;

    private TabLayout.Tab one;
    private TabLayout.Tab two;
    private TabLayout.Tab three;
    private TabLayout.Tab four;

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

        //初始化檢視
        initViews();
    }

    private void initViews() {

        //使用介面卡將ViewPager與Fragment繫結在一起
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(myFragmentPagerAdapter);

        //將TabLayout與ViewPager繫結在一起
        mTabLayout = (TabLayout) findViewById(R.id.bottom_tab_layout);
        mTabLayout.setupWithViewPager(mViewPager);

        //指定Tab的位置
        one = mTabLayout.getTabAt(0);
        two = mTabLayout.getTabAt(1);
        three = mTabLayout.getTabAt(2);
        four = mTabLayout.getTabAt(3);

        //設定Tab的圖示，假如不需要則把下面的程式碼刪去
        one.setIcon(mTabResPressed[0]);
        two.setIcon(mTabRes[1]);
        three.setIcon(mTabRes[2]);
        four.setIcon(mTabRes[3]);

        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //改變Tab 狀態
                for (int i = 0; i < mTabLayout.getTabCount(); i++) {
                    if (i == tab.getPosition()) {
                        mTabLayout.getTabAt(i).setIcon(getResources().getDrawable(mTabResPressed[i]));
                    } else {
                        mTabLayout.getTabAt(i).setIcon(getResources().getDrawable(mTabRes[i]));
                    }
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }
}

其中涉及的圖片需要自己匯入。