簡介
TabLayout是Design包中新推出的控件。可以配合著ViewPager和Fragment的使用，幫助開發者們分分鐘打造一個滑動標簽頁。
- 頂部標簽頁（如知乎）
- 底部菜單欄（如微信）
效果展示
效果
實現步驟
- 添加依賴
- 創建需要的Fragment布局文件
（需要多少個Tab選項，就建多少個Fragment） - 創建對應的Fragmen類
- 創建Viewpager適配器Adapter
- 在布局中使用TabLayout
- 在MainActivity中使用
步驟1. 添加依賴
build.gradle
compile 'com.android.support:design:24.0.0'
步驟2. 創建Fragment布局文件
創建
fragment1.xml 下文為fragment1.xml
fragment2.xml
fragment3.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="218dp"
android:text="Page:"
android:textSize="20sp"
android:textStyle="bold"/>
<TextView
android:id="@+id/titile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true"
android:textSize="50sp"
android:text="1"/>
</RelativeLayout>
步驟3. 創建Fragment類
創建
Fragment1.java 下文為Fragment1.java
Fragment2.java
Fragment3.java
public class Fragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1, container, false);
}
}
步驟4. 創建Viewpager適配器MyFragmentPagerAdapter
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private String[] mTitles = new String[]{"Tab 1", "Tab 2", "Tab 3"};
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 1) {
return new Fragment2();
} else if (position == 2) {
return new Fragment3();
}
return new Fragment1();
}
@Override
public int getCount() {
return mTitles.length;
}
//用來設置tab的標題
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
步驟5. 在布局中使用TabLayout
<android.support.design.widget.TabLayout
android:id="@+id/tab_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EF8D11"
app:tabIndicatorColor="#f00"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FFFFFF"
app:tabTextColor="#FFFFFF"
>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
屬性說明：
| 屬性 | 含義 |
| -------- | ----- | ---- |
|app:tabIndicatorColor="#EF4A11" | tab文字下方的那條線的顏色 |
|app:tabMode="scrollable" | 如果tab過多超出屏幕寬度可以水平滾動|
| app:tabMode="fixed" | 底部tab布局不可滑動 |
|app:tabSelectedTextColor="#FFFFFF" | tab被選中的時候文字的顏色|
|app:tabTextColor="#FFFFFF" | tab未被選中時文字的顏色|
|app:tabIndicatorHeight="0dp" | 不顯示tab底部的橫線 |
注：
- scrollable可以滑動，向左對齊，如今日頭條，網易新聞就是scrollable，但是在Tab選項卡較少時會無法填滿TabLayout欄。
- fixed則無法滑動，每個選項卡平均分配空間，適合較少Tab選項卡的情況，當選項卡較多時，會出現每個選項卡內容無法顯示完整的情況
步驟6.在MainActivity中使用
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private MyFragmentPagerAdapter myFragmentPagerAdapter;
private TabLayout.Tab one;
private TabLayout.Tab two;
private TabLayout.Tab three;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabLayout = (TabLayout) findViewById(R.id.tab_main);
mViewPager = (ViewPager) findViewById(R.id.vp_main);
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(myFragmentPagerAdapter);
//將TabLayout和ViewPager綁定在一起，使雙方各自的改變都能直接影響另一方，解放了開發人員對雙方變動事件的監聽
mTabLayout.setupWithViewPager(mViewPager);
//指定Tab的位置
one = mTabLayout.getTabAt(0);
two = mTabLayout.getTabAt(1);
three = mTabLayout.getTabAt(2);
//給tab設置圖標
one.setIcon(R.mipmap.ic_launcher);
}
}
這里是項目地址
