前言
Android開發中使用頂部 & 底部Tab導航欄的頻次非常高，主要的實現手段有以下：
- TabWidget
- 隱藏TabWidget，使用RadioGroup和RadioButton
- FragmentTabHost
- 5.0以后的TabLayout
- 最近推出的 Bottom navigation
在上一篇我介紹了如何使用(Fragment+FragmentTabHost++ViewPager)
實現底部菜單欄，詳情請看
今天我手把手教大家如何使用TabLayout+ViewPager+Fragment的組合來實現頂部和底部Tab導航欄,
目錄
頂部&底部菜單欄.jpg
1. 概念介紹
1.1 TabLayout
- 定義：實現Material Design效果的控件庫（Android Design Support Library）；
- 作用：用于實現點擊選項進行切換選項卡的自定義效果（5.0可用）
1.2 ViewPager
- 定義：ViewPager是android擴展包v4包中的類
- 作用：左右切換當前的view，實現滑動切換的效果。
注：
1.ViewPager類直接繼承了ViewGroup類，和LinearLayout等布局一樣，都是一個容器，需要在里面添加我們想要顯示的內容。
2.ViewPager類需要PagerAdapter適配器類提供數據，與ListView類似 3.Google官方建議ViewPager配合Fragment使用
具體使用請參考我寫的另外一篇文章：Android開發：ViewPage的介紹
1.3 Fragment
- 定義：Fragment是activity的界面中的一部分或一種行為
1.把Fragment認為模塊化的一段activity
2.它具有自己的生命周期，接收它自己的事件，并可以在activity運行時被添加或刪除
3.Fragment不能獨立存在，它必須嵌入到activity中，而且Fragment的生命周期直接受所在的activity的影響。例如：當activity暫停時，它擁有的所有的Fragment們都暫停了，當activity銷毀時，它擁有的所有Fragment們都被銷毀。
- 作用：支持更動態、更靈活的界面設計（從3.0開始引入）
具體使用請參考我寫的另外一篇文章Android開發：Fragment介紹&使用方法解析
2. 總體設計思路
- TabLayout：點擊切換選項卡
- Fragment：存放不同選項的頁面內容
- ViewPager：實現頁面的左右滑動效果
3. 實現步驟
利用（TabLayout+ViewPager+Fragment）實現頂部&底部Tab導航欄的步驟一共有6個：
- 步驟1：添加依賴
- 步驟2：創建需要的Fragment布局文件（需要多少個Tab選項，就建多少個Fragment）
- 步驟3：創建Fragment對應的Activity類
- 步驟4：定義適配器Adapter
- 步驟5：定義主布局activity_main.xml文件
- 步驟6：定義MainActivity類
4. Demo實戰
4.1 效果圖（丑是為了讓大家更好地理解各個屬性設置~~）
效果圖1
效果圖2
4.2 工程目錄
工程目錄
4.3 具體實現
接下來大家和我一步步去實現吧！！
強烈建議大家先去Carson_Ho的Github：Top&Bottom_tabbar去下載完整Demo，這樣看效果會更好哦！
步驟1：在Gradle中添加依賴
//TabLayout
compile 'com.android.support:support-v4:23.4.0'
compile 'com.android.support:design:23.4.0'
//ViewPage
android.support.v4.view.ViewPager
步驟2：創建需要的Fragment布局文件（需要多少個Tab選項，就建多少個Fragment，這里以4個舉例）
fragment1.xml（一共4個，這里只寫出一個）
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Fragment1"/>
</RelativeLayout>
步驟3：創建Fragment對應的Activity類
Fragment1（一共4個，這里只寫出一個）
package com.example.carson_ho.toptabbar;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Carson_Ho on 16/7/22.
*/
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：定義適配器Adapter類
這里的適配的作用是將Fragment與ViewPager進行適配
MyFragmentPagerAdapter.java
package com.example.carson_ho.toptabbar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
/**
* Created by Carson_Ho on 16/7/22.
*/
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private String[] mTitles = new String[]{"首頁", "發現", "進貨單","我的"};
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();
}else if (position==3){
return new Fragment4();
}
return new Fragment1();
}
@Override
public int getCount() {
return mTitles.length;
}
//ViewPager與TabLayout綁定后，這里獲取到PageTitle就是Tab的Text
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
步驟5：定義主布局activity_main.xml
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="100p"
//導航欄背景顏色
android:background="#ffff00"
//指示器顏色
app:tabIndicatorColor="#66ff33"
//指示器高度
app:tabIndicatorHeight="20p"
//普通狀態下文字的顏色
app:tabTextColor="@color/colorPrimary"
//選中時文字的顏色
app:tabSelectedTextColor="#CC33FF"
//是否可滑動：fixed：固定；scrollable：可滑動
app:tabMode="fixed"
//設置選項卡的背景：此處要寫一個selector）
app:tabBackground="@drawable/selected"
//設置字體大小：此處要寫一個style） app:tabTextAppearance="@style/MyTabLayoutTextAppearance"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
selected.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@color/colorPrimary"/> <item android:drawable="@color/c1olorAccent"/></selector>
style.xml
<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textSize">5sp</item> <item name="android:textColor">@color/c1olorAAA</item></style>
步驟6：定義MainActivity
MainActivity.Java
package com.example.carson_ho.toptabbar;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
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;
private TabLayout.Tab four;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().hide();//隱藏掉整個ActionBar
setContentView(R.layout.activity_main);
//初始化視圖
initViews();
}
private void initViews() {
//使用適配器將ViewPager與Fragment綁定在一起
mViewPager= (ViewPager) findViewById(R.id.viewPager);
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(myFragmentPagerAdapter);
//將TabLayout與ViewPager綁定在一起
mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.setupWithViewPager(mViewPager);
//指定Tab的位置
one = mTabLayout.getTabAt(0);
two = mTabLayout.getTabAt(1);
three = mTabLayout.getTabAt(2);
four = mTabLayout.getTabAt(3);
//設置Tab的圖標，假如不需要則把下面的代碼刪去
one.setIcon(R.mipmap.ic_launcher);
two.setIcon(R.mipmap.ic_launcher);
three.setIcon(R.mipmap.ic_launcher);
four.setIcon(R.mipmap.ic_launcher);
}
}
4.4 效果圖（丑是為了讓大家更好地理解各個屬性設置~~）
效果圖1
效果圖2
4.5 底部Tab導航欄實現
實現了頂部Tab導航欄，該如何實現底部Tab導航欄實現呢？很簡單！只需要在上面步驟5：定義主布局activity_main.xml中將TabLayout和ViewPager的位置交換就可以了！如下圖：
步驟5：定義主布局activity_main.xml
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="100p"
//導航欄背景顏色
android:background="#ffff00"
//指示器顏色
app:tabIndicatorColor="#66ff33"
//指示器高度
app:tabIndicatorHeight="20p"
//普通狀態下文字的顏色
app:tabTextColor="@color/colorPrimary"
//選中時文字的顏色
app:tabSelectedTextColor="#CC33FF"
//是否可滑動：fixed：固定；scrollable：可滑動
app:tabMode="fixed"
//設置選項卡的背景：此處要寫一個selector）
app:tabBackground="@drawable/selected"/>
</LinearLayout>
效果圖
底部菜單欄效果圖
5. 完整Demo下載地址
Carson_Ho的Github：Top&Bottom_tabbar
6. 總結
- 本文對利用Google最新的控件庫TabLayout實現頂部&底部Tab導航欄進行了全面的講解
- 接下來我會繼續介紹Android開發中的相關知識，感興趣的同學可以繼續關注Carson_Ho的簡書
相關系列文章閱讀
Carson帶你學Android：學習方法
Carson帶你學Android：四大組件
Carson帶你學Android：自定義View
Carson帶你學Android：異步-多線程
Carson帶你學Android：性能優化
Carson帶你學Android：動畫
歡迎關注Carson_Ho的簡書
不定期分享關于安卓開發的干貨，追求短、平、快，但卻不缺深度。
