Tablayout實現導航欄

TTMMJJ99發表於2017-11-24
TabLayout

1.什麼是TabLayout
在原始碼中給出了TabLayout的定義：
TabLayout provides a horizontal layout to display tabs.
意思很明顯：TabLayout提供了一個水平的佈局用來展示Tabs。
Design庫：AS有直接的引用，如果是Eclipse這裡提供一個通道-Design庫
特別說明：
Caused by: java.lang.IllegalArgumentException: You need to use a Theme.AppCompat theme (or descendant) with the design library.
在清單檔案中設定如下程式碼即可：
android:theme="@style/Theme.AppCompat"
2.TabLayout的基本使用方式
方式一：
1.在佈局中加入該控制元件：


<android.support.design.widget.TabLayout


           android:id="@+id/tabLayout"


           android:layout_width="wrap_content"


           android:layout_height="wrap_content"/>


2.在程式碼中


tabLayout= (TabLayout) findViewById(R.id.tabLayout);


tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));


tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));


tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));


3.顯示效果




感覺還不錯吧，挺簡單就實現了這個UI效果。
方式二：


<android.support.design.widget.TabLayout


android:layout_width="wrap_content"


android:layout_height="wrap_content">


<android.support.design.widget.TabItem


android:layout_width="wrap_content"


android:layout_height="wrap_content"


android:text="Tab1"/>


...


</android.support.design.widget.TabLayout>
方式三：
使用Tablayout,首先需要在專案中加入Design包
dependencies {
    compile 'com.android.support:design:24.1.1' 
}
在activity_main.xml佈局檔案中
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="zhengliang.com.tablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        >

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>
裡面一個Tablayout和一個ViewPager就行了
實現上面的效果需要建立幾個Fragment,這裡為了方便就直接建立了一個基本的Fragment需要的時候直接new就行了,實現程式碼如下:
public class BlankFragment extends Fragment {


    public BlankFragment() {
    }

    public static BlankFragment newInstance(String text){
        Bundle bundle = new Bundle();
        bundle.putString("text",text);
        BlankFragment blankFragment = new BlankFragment();
        blankFragment.setArguments(bundle);
        return  blankFragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_blank, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        TextView textView = (TextView) view.findViewById(R.id.pager_text);
        textView.setText(getArguments().getString("text"));
    }
}


有了Fragment還需要一個實現一個ViewPagerAdapter
public class MyAdapter extends FragmentPagerAdapter {

    private List<String> list;

    public MyAdapter(FragmentManager fm, List<String> list) {
        super(fm);
        this.list = list;
    }

    @Override
    public Fragment getItem(int position) {
        return BlankFragment.newInstance(list.get(position));
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return list.get(position);
    }
}
Adapter的寫法非常簡單,在自定義Adapter的時候需要重寫裡面的getPagerTitle()方法,實現這個方法是為了當Tablayout與ViewPager繫結的時候能夠繫結Tab標籤的標題
一切準備就緒,直接看MainActivity.java中的程式碼
public class MainActivity extends AppCompatActivity {

    private TabLayout tab;
    private ViewPager pager;
    private List<String> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /*初始化介面*/
        initViews();
        /*初始化資料*/
        initData();
        /*設定Adapter*/
        pager.setAdapter(new MyAdapter(getSupportFragmentManager(),list));
        /*Tab與ViewPager繫結*/
        tab.setupWithViewPager(pager);

    }

    /*初始化資料*/
    private void initData() {
        list = new ArrayList<>();
        for (int i = 0; i < 5 ; i++) {
            list.add(String.format(Locale.CHINA,"第%02d頁",i));

        }
    }

    /*初始化介面*/
    private void initViews() {
        this.pager = (ViewPager) findViewById(R.id.pager);
        this.tab = (TabLayout) findViewById(R.id.tab);
    }
}
到這裡基本就實現了上面圖的效果,裡面一句很關鍵的程式碼:tab.setupWithViewPager(pager);只有加了這句程式碼才能實現Tab和ViewPager的繫結


這樣同樣也可以實現方式一的效果，可是單單這樣並不能滿足我們。於是接下來看看有什麼屬性可以使用。
3.改變下TabLayout的顏色
上面的Tab顏色感覺不好看，打算換換：
1.改變選中字型的顏色
app:tabSelectedTextColor="@android:color/holo_orange_light"
2.改變未選中字型的顏色
app:tabTextColor="@color/colorPrimary"
3.改變指示器下標的顏色
app:tabIndicatorColor="@android:color/holo_orange_light"
4.改變整個TabLayout的顏色
app:tabBackground="color"
於是現在我的Tab變成了這個樣子：
4.改變TabLayout內部字型大小
總覺得這個字型有點小了，於是想找方法把這個字變得大一點，
好像沒有直接變大的方法，可是找到了這個：
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//設定文字的外貌
效果：
5.改變指示器下標的高度
既然字型變大了，指示器太小就顯得不太好看了，
設定指示器下標的高度：
app:tabIndicatorHeight="4dp"
效果：
6.新增圖示
有時候Tab只有文字感覺有點單調了：
tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
7.Tab的模式
資料很多的時候我們應該怎麼辦呢，簡書中的第二個Tab就是可以滑動的：
我們先多加幾個tab：
tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 5"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 6"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 7"));
然後設定屬性為：
app:tabMode="scrollable"
預設是fixed：固定的，標籤很多時候會被擠壓，不能滑動。
效果如下：
8.加入Padding
設定Tab內部的子控制元件的Padding：
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"
設定整個TabLayout的Padding：
app:paddingEnd="xxdp"
app:paddingStart="xxdp"
9.內容的顯示模式
app:tabGravity="center"//居中，如果是fill，則是充滿
10.Tab的寬度限制
設定最大的tab寬度：
app:tabMaxWidth="xxdp"
設定最小的tab寬度：
app:tabMinWidth="xxdp"
11.Tab的“Margin”
TabLayout開始位置的偏移量：
app:tabContentStart="100dp"
12.TabLayout的監聽事件
選中了某個tab的監聽事件OnTabSelectedListener()：
tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {
@Override
public voidonTabSelected(TabLayout.Tab tab) {
//選中了tab的邏輯
}
@Override
public voidonTabUnselected(TabLayout.Tab tab) {
//未選中tab的邏輯
}
@Override
public voidonTabReselected(TabLayout.Tab tab) {
//再次選中tab的邏輯
}
});
13.和ViewPager的聯動
最後也是最重要的：
tabLayout.setupWithViewPager(Viewpager);
一行程式碼和ViewPager聯動起來，簡單粗暴。
14.簡單模仿簡書Android端的Tab
主要就是設定下標的高度為0，相當於沒有下標。
app:tabIndicatorHeight="0dp"
然後設定背景顏色以及選中文字顏色
app:tabSelectedTextColor="#ff7a61"
app:tabBackground="#f6f4f2"//這裡不能直接寫RGB，需要@color/xx
最後設定Tab的模式：
app:tabMode="scrollable"
當然Tablayout還可以做很多的樣式，如果有關於Tablayout的注意事項或者相關知識的文章，希望大家可以分享給我，多謝！
15.仿京東商品詳情Android端的Tab
主要原理是setCustomView()載入自定義檢視，來實現字型大小的改變，預設的TabLayout不能改變。
Design庫-TabLayout仿京東商品詳情Tab
補充：預設選中某項
tablayout.getTabAt(position).select();
作者：自導自演的機器人連結：http://www.jianshu.com/p/2b2bb6be83a8來源：簡書著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。



好了,上面這些就是TabLayout最基本的用法…

            




相關文章