tabLayout
上圖是一個(gè)關(guān)于TabLayout的Demo梦碗，TabLayout提供了一個(gè)水平的布局用來展示Tabs就缆。與viewpager涎永、fragment（或者view）搭配使用涯保，實(shí)現(xiàn)點(diǎn)擊屏幕標(biāo)簽或左右滑動(dòng)可以切換頁面的效果晒来。
viewpager
viewpager是谷歌官方提供的控件钞诡，它相當(dāng)于一個(gè)容器，儲(chǔ)存fragment或者view湃崩，通過左右滑動(dòng)的方式將容器中的頁面進(jìn)行切換荧降，常用于app首頁的歡迎頁與滾動(dòng)欄。
1.tabLayout的基本使用方法
在布局中加入該控件：
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tab_layout">
</android.support.design.widget.TabLayout>
在代碼中動(dòng)態(tài)添加Item：
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"));
方式二靜態(tài)添加Item：
<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的其他常用屬性
1.改變選中字體的顏色
app:tabSelectedTextColor="@android:color/holo_orange_light"
2.改變未選中字體的顏色
app:tabTextColor="@color/colorPrimary"
3.改變指示器下標(biāo)的顏色
app:tabIndicatorColor="@android:color/holo_orange_light"
4.改變整個(gè)TabLayout的顏色
app:tabBackground="color"
5.改變TabLayout內(nèi)部字體大小
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"http://使文字的外貌變大
6.改變指示器下標(biāo)的高度
app:tabIndicatorHeight="4dp"
7.添加圖標(biāo)
android:icon="@drawable/icon"
//tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));動(dòng)態(tài)
8.設(shè)置tabMode
app:tabMode="scrollable"
//默認(rèn)是fixed：固定的攒读，標(biāo)簽很多時(shí)候會(huì)被擠壓朵诫，不能滑動(dòng)。
9.內(nèi)容的顯示模式
app:tabGravity="center"http://居中整陌，如果是fill拗窃，則是充滿
10.Tab的寬度限制
設(shè)置最大的tab寬度：
app:tabMaxWidth="xxdp"
設(shè)置最小的tab寬度：
app:tabMinWidth="xxdp"
11.Tab的“Margin”
TabLayout開始位置的偏移量：
app:tabContentStart="100dp"
12.加入Padding
設(shè)置Tab內(nèi)部的子控件的Padding：
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"
設(shè)置整個(gè)TabLayout的Padding：
app:paddingEnd="xxdp"
app:paddingStart="xxdp"
2.viewPager的使用方法
布局：
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/pager"
/>
新建ViewPagerAdapter
viewpager的使用方法中比較關(guān)鍵的就是adapter，因?yàn)関iewpager是一個(gè)容器泌辫，我們把view看作數(shù)據(jù)的話随夸，我們則必須有一個(gè)adapter將數(shù)據(jù)有順序有調(diào)理地放入我們的容器中，這時(shí)我們需要新建一個(gè)類繼承自pagerAdapter震放，代碼如下：
package com.example.peek_mapdemotest.materialdesign;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
/**
* Created by Administrator on 2017/8/5.
*/
public class ViewPagerAdapter extends PagerAdapter {
private List<View> viewList;
private List<String> titleList;
public ViewPagerAdapter(List<View> viewList,List<String> titleList) {
this.viewList=viewList;
this.titleList=titleList;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
@Override
public int getCount() {
return titleList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
}
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
List<View> viewList = new ArrayList<>();
List<String> titleList = new ArrayList<>();
titleList.add("頁面1");
titleList.add("頁面2");
titleList.add("頁面3");
LayoutInflater inflater = LayoutInflater.from(this);
View tab01 = inflater.inflate(R.layout.fragment_fragment1, null);
View tab02 = inflater.inflate(R.layout.fragment_fragment2, null);
View tab03 = inflater.inflate(R.layout.fragment_fragment3, null);
viewList.add(tab01);
viewList.add(tab02);
viewList.add(tab03);
mViewPager = (ViewPager)findViewById(R.id.pager);
ViewPagerAdapter mViewPagerAdapter=new ViewPagerAdapter(viewList,titleList);
tabLayout.setupWithViewPager(mViewPager);
mViewPager.setAdapter(mViewPagerAdapter);
最后直接用一句代碼 tabLayout.setupWithViewPager(viewPager);即可很方便的將tabLayout與viewpager搭配起來宾毒。
