- TabLayout 中的一些方法
先介紹一下 簡(jiǎn)單的使用方法，這個(gè)時(shí)候，我先把ActionBar 隱藏掉，隱藏ActionBar 有兩種方法，一種是直接選用一個(gè)不包含ActionBar 的主題，另一種是在values/styles.xml中聲明
<item name="android:windowNoTitle">true</item>
<item name="windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:tabTextColor="#000000"
app:tabSelectedTextColor="#beb9b9"
app:tabIndicatorColor="@color/colorAccent">
</android.support.design.widget.TabLayout>
</LinearLayout>
只在xml中 添加了一個(gè) TabLayout控件，這個(gè)時(shí)候還看不到任何效果，因?yàn)檫€沒有給這個(gè)控件添加 Tab，接下來到主函數(shù)中去獲取這個(gè)控件，并進(jìn)行操作。
public class TestActivity extends AppCompatActivity{
private TabLayout mTabLayout;
private List<String> mTitles;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
mTabLayout = (TabLayout) findViewById(R.id.tabs);
mTitles = new ArrayList<>();
for (int i = 0; i < 3; i++){
mTitles.add("Tab " + (i+1));
mTabLayout.addTab(mTabLayout.newTab().setText(mTitles.get(i)));
}
}
}
可見，我們給 TabLayout設(shè)置了三個(gè)Tab，并分別命名為 Tab1，Tab2，Tab3，這個(gè)時(shí)候運(yùn)行一下程序，看到的結(jié)果如下
可見這個(gè)時(shí)候已經(jīng)能夠正常使用了，但是如果當(dāng)我們點(diǎn)擊一個(gè)選項(xiàng)卡的時(shí)候，能顯示出不同的界面，也就是能響應(yīng)我們的點(diǎn)擊就好了。這個(gè)效果一般要配合 ViewPager 來使用。
- ViewPager 簡(jiǎn)介
ViewPager 在一定程度上有點(diǎn)類似AdapterView。AdapterView 需要借助 Adapter 才能提供視圖，同樣地，ViewPager 也需要 PagerAdapter 的支持。不過相比于 AdapterView 與 Adapter 之間的合作，PagerAdapter 與 ViewPager 之間的合作更加復(fù)雜一些。
存在兩種 PagerAdapter 的子類供我們直接使用，FragmentStatePagerAdapter和 FragmentPagerAdapter，這兩種adapter的使用方法都是類似的，不同的二者在卸載不再需要的Fragment的處理方式不同。
對(duì)于FragmentStatePagerAdapter，在卸載不再需要的Fragment 時(shí)，它會(huì)將Fragment 徹底移除，但是會(huì)使用 onSaveInstanceState()方法中的Bundle 將Fragment 當(dāng)前的 狀態(tài)保存下來，保存下來的狀態(tài)會(huì)用于實(shí)例化新的 Fragment。
對(duì)于FragmentPagerAdapter，在卸載不需要的Fragment時(shí)，它首先會(huì)調(diào)用事務(wù)的 detch(Fragment)方法，而不是徹底刪除Fragment，所以，這種方式只是銷毀了視圖，真正的Fragment仍然保存在FragmentManager 中。
如果應(yīng)用中只包含少量而且固定的Fragment，那么應(yīng)當(dāng)選用FragmenrPagerAdapter，因?yàn)檫@樣是可以提高應(yīng)用的反應(yīng)速度的。但是，如果一個(gè)應(yīng)用需要?jiǎng)?chuàng)建大量的 Fragment，而且這些Fragment當(dāng)中又包含大量的內(nèi)容，那么這個(gè)時(shí)候，再用FragmentPagerAdapter去保存所有信息顯然是不合理的，所以這個(gè)時(shí)候應(yīng)該選用 FragmentStatePagerAdapter。
下面看一下 FragmentStatePagerAdapter的簡(jiǎn)單用法。
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
FragmentManager manager = getSupportFragmentManager();
viewPager.setAdapter(new FragmentStatePagerAdapter(manager) {
@Override
public Fragment getItem(int position) {
return null;
}
@Override
public int getCount() {
return 0;
}
});
只需要在getItem()中返回一個(gè)Fragment ，在getCount ()方法中返回 fragment 的數(shù)目就可以正常使用了。
我們可以使用默認(rèn)的 FragmentStatePagerAdapter ，很自然的，如果默認(rèn)的滿足不了我們的需求，那么我們可以把它當(dāng)作父類，自定義PagerAdapter供我們使用。
- ViewPager + TabLayout
第一步，首先創(chuàng)建一個(gè)通用的Fragment 類，代碼如下：
public class MyFragment extends Fragment {
private String mString;
public static final String KEY = "key";
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Bundle bundle = getArguments();
mString = bundle.getString(KEY);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_layout,container,false);
TextView textView = (TextView) view.findViewById(R.id.text);
textView.setText(mString);
return view;
}
public static Fragment newInstance(String text){
MyFragment fragment = new MyFragment();
Bundle bundle = new Bundle();
bundle.putString(KEY,text);
fragment.setArguments(bundle);
return fragment;
}
}
然后，定義主函數(shù)中的 布局文件
<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"
app:layout_scrollFlags="scroll|enterAlways"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="#ffffff"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
在使用ViewPager 之前，我們首先自定義一個(gè)PagerAdapter 類
public class FragmentAdapter extends FragmentStatePagerAdapter{
private List<Fragment> mList;
public FragmentAdapter(FragmentManager manager,List list){
super(manager);
mList = list;
}
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
@Override
public int getCount() {
return mList.size();
}
}
這樣我們?cè)谥骱瘮?shù)中，只需要調(diào)用 TabLayout.setupWithViewPager(mViewPager)，就可以實(shí)現(xiàn)TabLayut與ViewPager之間的協(xié)調(diào)工作了。允許一下，看看結(jié)果
可見這個(gè)時(shí)候，TabLayout已經(jīng)可以和ViewPager協(xié)調(diào)使用了，但是，這個(gè)時(shí)候界面看上去總覺得少了些什么，對(duì)，這就是我們上面隱藏掉的ActionBar.
4.ActionBar 的使用問題
在TabLayout的定義 中加上一行屬性
android:background="@color/colorPrimary"
設(shè)置這行代碼的原因是，讓TabLayout 的背景色和ActionBar 保持一致，來看一看效果圖
可見，這個(gè)時(shí)候，ActionBar 和 TabLayout之間竟然有一行加了陰影的黑線，非常的難看。當(dāng)然，我們可以讓TabLayout的顏色和ActionBar不同，達(dá)到另一種設(shè)計(jì)效果，自然不用考慮這些問題，但是如果想要ActionBar和TabLayout看上去渾然一體，那么我們就不得不考慮將這條黑線去掉了。
首先，我們還是要將這個(gè)ActionBar去除，因?yàn)槲覀冃枰诓季治募凶远x一個(gè) ToolBar ，并且將 這個(gè)ToolBar 和 TabLayout 放在一個(gè)AppBarLayout中，所以現(xiàn)在的布局文件為
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimaryDark"
app:titleTextColor="#ffffff">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:background="@color/colorPrimaryDark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="#ffffff"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
當(dāng)然，這個(gè)時(shí)候還是沒有ToolBar 的，因?yàn)檫€沒有在主函數(shù)中設(shè)置它，下面，回到主函數(shù)中，添加以下代碼。
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setTitle("MainActivity");
setSupportActionBar(mToolbar);
現(xiàn)在的效果為
可見，這個(gè)時(shí)候ActionBar 已經(jīng)和 TabLayout無縫銜接了，但是意外的是，為什么我們想要顯示的內(nèi)容不見了？ CoordinatorLayout 實(shí)際上是增強(qiáng)版的 FrameLayout，所以理所當(dāng)然的認(rèn)為，我們的內(nèi)容可能是被 ActionBar 和 TabLayout 的視圖擋住了，那么該怎么辦呢？
只需要在ViewPager 的定義中添加以下代碼，就可以解決這個(gè)問題
app:layout_behavior="@string/appbar_scrolling_view_behavior"
再來看看效果圖
好了，這個(gè)時(shí)候問題就已經(jīng)解決了。我們可以在app的頂部添加導(dǎo)航，那么能不能在底部添加呢？
5.底部TabLayout 的實(shí)現(xiàn)
想要將TabLayout視圖 放置到底部，首先需要在布局中將TabLayout放置在底部
<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.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#aba8a8"
app:tabPaddingEnd="12dp"
app:paddingStart="12dp"
app:tabTextColor="#aba8a8"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabIndicatorHeight="0dp">
</android.support.design.widget.TabLayout>
</LinearLayout>
其次，在自定義的PagerAdapter 中，添加一個(gè)方法
public View getTabView(int position){
View view = LayoutInflater.from(mContext).inflate(R.layout.tab_layout,null);
TextView mTextView = (TextView) view.findViewById(R.id.tab_tv);
mTextView.setText(mTitles.get(position));
ImageView mImageView = (ImageView) view.findViewById(R.id.tab_iv);
mImageView.setImageResource(R.mipmap.ic_launcher);
return view;
}
這個(gè)R.layout.tab_layout,是自定義tab布局，可以定制自己想要的結(jié)果，這個(gè)地方我放置了一個(gè)TextView 和一個(gè)ImageView。
然后，到主函數(shù)中添加以下代碼
for (int i = 0; i < mTabLayout.getTabCount(); i++){
TabLayout.Tab tab = mTabLayout.getTabAt(i);
if (tab != null){
tab.setCustomView(adapter.getTabView(i));
}
}
這個(gè)時(shí)候就實(shí)現(xiàn)了底部布局，效果如下
