又是很久沒寫部落格了，當然之前只寫過一篇。本來想著堅持寫呢，可是發現這裡的部落格稽核需要挺長時間，於是乎又不怎麼想寫了。

今天帶來的是一種導航欄的簡單優雅的一種實現方式。就導航欄的實現方式的發展來看，先後主要經歷了：

1--tabhost;

2--radiogroup--viewpager

3--自定義horiozationScrollview

4--tablayout+viewpager

當然recyclerview的橫向佈局也是可以的。

上述的幾種方式難免要對這些view進行監聽，然後在監聽裡相互關聯。

當然tablayout+viewpager通過setUpWithViewPager()，避免了監聽設定。這也是目前部落格中常見的設定方式，

但是對於底部導航欄以及帶圖示的且能根據選中狀態改變顏色的情況，目前卻難以見到比較優雅的方式。

這裡提供了一個簡單的方式實現帶圖示，且能根據選中狀態改變背景的導航欄效果。先上效果圖：

剛開始的實現過程與網上多數的實現方式一樣，只是有幾個關鍵點要說明：

public class MainActivity extends AppCompatActivity {

    private TabLayout mTablayout;
    private ViewPager mViewPager;
    private List<Fragment> mFragments;
    private List<String> mTitles;
    private HomePagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initview();
        loadData();
        setViewEvent();
    }
    private void initview() {
        mTablayout = (TabLayout) findViewById(R.id.tab_layout_main);
        mViewPager = (ViewPager) findViewById(R.id.viewpager_main);
    }

    private void loadData() {
        mFragments = new ArrayList<>();
        mTitles = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            mTitles.add("tab" + i);
            HoneFragment tabfrag = new HoneFragment();
            Bundle bud = new Bundle();
            bud.putString("title", "fragment" + i);
            tabfrag.setArguments(bud);
            mFragments.add(tabfrag);
        }
    }

    private void setViewEvent() {
        mAdapter = new HomePagerAdapter(getSupportFragmentManager(), mFragments, mTitles);
        mViewPager.setAdapter(mAdapter);
        mTablayout.setupWithViewPager(mViewPager);//------1
        int tabCount = mTablayout.getTabCount();
        for (int i = 0; i < tabCount; i++) {
            mTablayout.getTabAt(i).setIcon(R.drawable.tab_item_selector);//------2
            mTablayout.getTabAt(i).setCustomView(R.layout.tab_item);//------3
        }
        mViewPager.setCurrentItem(1);
        mViewPager.setCurrentItem(0);//------4
    }
}
 

主佈局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="61dp"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_main"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_gravity="bottom"
        android:background="#08000000"
        app:tabMode="fixed"
                ></android.support.design.widget.TabLayout>
</FrameLayout>

2----給tablayout的每個tab設定icon;

3----給tab設定自定義的view，這是關鍵點，這裡需要說明的是在原始碼註釋中提到

若是自定義view中有TextView的id為@android:id/text1，那麼這個textview的值將會

替代tab的文字（setText），相應的，若是自定義view中有ImageView的id為@android:id/icon

那麼這個imageview的值將會替代tab的icon（setIcon）.所以，可以按照下面程式碼為位置3處的view進行佈局：

4--設定選中的頁面，

mViewPager.setCurrentItem(1);還必須設定，原因未明；

<?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"
              android:paddingTop="6dp"
              android:orientation="vertical">
    <TextView
        android:id="@android:id/text1"
        android:textColor="@drawable/tab_text_back"//---------根據狀態改變字型顏色,selector檔案
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ImageView
        android:id="@android:id/icon"
        android:src="@drawable/tab_item_selector"//---------根據狀態改變圖示背景，selector檔案<pre name="code" class="html" style="font-size: 17.6px;">

原始碼：https://github.com/Cysion1989/BottomNavigationBar

轉載請標明出處。。