TabLayout實現頂部導航欄（1）

TabLayout是android.support.design裏的一個控件，使用它能夠很方便的作出頂部導航和底部導航。相似於這樣的，能設置選中時字體的顏色和選中時的圖片。

 

 

首先咱們在 build.gradle中引入 

compile 'com.android.support:design:23.2.1'

佈局文件以下：

<?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.design.widget.TabLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#32CD32" app:tabIndicatorColor="#f00" app:tabMode="fixed" app:tabSelectedTextColor="#444" app:tabTextColor="#fff"></android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"></android.support.v4.view.ViewPager>

</LinearLayout>

 

 頂部是一個TabLayout，能夠設置background。app:tabIndicatorColor是設置指示器的背景顏色，
app:tabIndicatorHeight設置指示器的高度，
app:tabSelectedTextColor是選中時文本的顏色，app:tabTextColor是普通狀態的文本顏色，
app:tabMode是是否可滑動，有兩個fixed和scrollable,fixed是固定的，scrollable是相似於今日頭條那種能夠滑動的。

 

activity代碼以下：

import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.design.widget.TabLayout; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private TabLayout tabLayout; private ViewPager vp; private String[] titles = new String[]{"關注", "推薦", "視頻", "新時代", "圖片", "熱點"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabLayout = (TabLayout) findViewById(R.id.tab); vp = (ViewPager) findViewById(R.id.vp); // tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//設置文本在選中和爲選中時候的顏色 // tabLayout.setSelectedTabIndicatorColor(Color.WHITE);//設置選中時的指示器的顏色 // tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//可滑動，默認是FIXED
        List<Fragment> fragments = new ArrayList<>(); fragments.add(new BlankFragment()); fragments.add(new BlankFragment()); fragments.add(new BlankFragment()); fragments.add(new BlankFragment()); fragments.add(new BlankFragment()); fragments.add(new BlankFragment()); TitleFragmentPagerAdapter adapter = new TitleFragmentPagerAdapter(getSupportFragmentManager(), fragments, titles); vp.setAdapter(adapter); tabLayout.setupWithViewPager(vp); } }

 

TitleFragmentPagerAdapter 適配器代碼：

mport android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /** * Created by yiqiang on 2018/4/18. */

public class TitleFragmentPagerAdapter extends FragmentPagerAdapter { private List<Fragment> mFragmentList; private String [] titles; public TitleFragmentPagerAdapter(FragmentManager fm, List<Fragment> mFragmentList) { super(fm); this.mFragmentList = mFragmentList; } /** * titles是給TabLayout設置title用的 * @param fm * @param mFragmentList * @param titles */
    public TitleFragmentPagerAdapter(FragmentManager fm, List<Fragment> mFragmentList, String[] titles) { super(fm); this.mFragmentList = mFragmentList; this.titles = titles; } /** * 描述：獲取索引位置的Fragment. * @param position * @return
     */ @Override public Fragment getItem(int position) { Fragment fragment = null; if (position < mFragmentList.size()){ fragment = mFragmentList.get(position); }else{ fragment = mFragmentList.get(0); } return fragment; } /** * 返回viewpager對應的title。 * @param position * @return
     */ @Override public CharSequence getPageTitle(int position) { if (titles != null && titles.length>0){ return titles[position]; } return null; } /** * 描述：獲取數量. * @return
     */ @Override public int getCount() { return mFragmentList.size(); } }