android.support.design.widget.TabLayout的使用

現在比較流行viewpager和fragment相結合一起使用，以前我們都是使用viewpager+fragment+第三方開源的PagerSlidingTabStrip來一起使用，來達到如下的效果：

 

         在android 5.0之後，google把一些控件進行了集成，這裏面就有一個新的控件TabLayout，它就可以完成上面的功能了。

         首先sdk的版本必須是22，要想使用這個控件，你必須下載或更新sdk的版本，你要更新的22也就是5.1的版本，纔會有這個控件的出現。

         我們用一個例子來介紹一個這個控件：

         activity_main.xml文件

        

<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 design library提供的TabLayout控件
        tabIndicatorColor：菜單下方移動的橫線的顏色
        tabSelectedTextColor ：菜單被選中之後的顏色
        tabTextColor : 菜單正常的顏色
        app:tabTextAppearance : 添加樣式，這裏加了樣式主要是爲了在文字前面加一個圖所用，就是把textAllCaps設置成false
    -->
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/titleBlue"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/gray"
        app:tabTextColor="@color/white"
        app:tabTextAppearance="@style/tablayoutIcon"
        />


    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>

       在TabLayout中我使用了color.xml和style.xml中的顏色和樣式。下面把代碼給大家

       color.xml

      

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <color name="white">#FFFFFF</color><!--白色 -->
    <color name="titleBlue">#4876FF</color><!--天蘭色 -->
    <color name="gray">#808080</color><!--灰色 -->
    </resources>

style.xml

style.xml
  <resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>
    <style name="tablayoutIcon" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
    </style>
</resources>

   顯示的樣子是這樣的：

        在編寫MainActivity.java之前，我們還要做幾個準備工作，是什麼呢，就是建立幾個fragment用來顯示，然後建立兩個Adatper用來加載，爲什麼要用兩個Adapter呢，這裏說明一下，在使用viewpager的時候，我們可以在其中加載view也可以加載fragment，這裏我們做兩個，就是爲了演示用一下。OK，下面建立三個fragment

       NewsFragment.java

      

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 cg on 2015/10/21.
 */
public class NewsFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_news, container, false);
        return view;
    }
}

fragment_news.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="我是新聞fragment"
        android:textSize="20dp"
        android:gravity="center"/>

</LinearLayout>

非常簡單的一段代碼，就是爲了顯示一段文件。

另外兩個SportsFragment和Funfragment和它一樣，就是名字和裏面的文字變了一下，我就不復制了。

 

現在看兩個Adapter，爲view服務的，我們叫它viewAdapter，代碼如下：

viewAdapter.java 它繼承PagerAdapter

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.ImageSpan;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * 此adpter是在一個fragment中切換不同的view，好處是在一個activity中可以取得所有view中的值
 * Created by cg on 2015/10/21.
 */
public class viewAdapter extends PagerAdapter {
    public List<View> list_view;
    private List<String> list_Title;                              //tab名的列表
    private int[] tabImg;
    private Context context;

    public viewAdapter(Context context,List<View> list_view,List<String> list_Title,int[] tabImg) {
        this.list_view = list_view;
        this.list_Title = list_Title;
        this.tabImg = tabImg;
        this.context = context;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ((ViewPager) container).addView(list_view.get(position), 0);
        return list_view.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager) container).removeView(list_view.get(position));
    }

    /**
     * 此方法是給tablayout中的tab賦值的，就是顯示名稱,並且給其添加icon的圖標
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {

        //這段被注的代碼，是隻顯示文字，不顯示圖標
        //return  list_Title.get(position % list_Title.size());

        Drawable dImage = context.getResources().getDrawable(tabImg[position]);
        dImage.setBounds(0, 0, dImage.getIntrinsicWidth(), dImage.getIntrinsicHeight());
        //這裏前面加的空格就是爲圖片顯示
        SpannableString sp = new SpannableString("  "+ list_Title.get(position));
        ImageSpan imageSpan = new ImageSpan(dImage, ImageSpan.ALIGN_BOTTOM);
        sp.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return  sp;
    }


}

fragmentAdapter.java 它繼承自FragmentPagerAdapter

importandroid.support.v4.app.Fragment;

importandroid.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;



import java.util.List;



/**

 * 這裏使用多個fragment進行切換，好處是每個fragment 都有自己獨立的代碼

 * Created by cg on 2015/10/21.

 */

public class fragmentAdapter extendsFragmentPagerAdapter {



   private List<Fragment> list_fragment;                         //fragment列表

   private List<String> list_Title;                              //tab名的列表



   public fragmentAdapter(FragmentManager fm,List<Fragment>list_fragment,List<String> list_Title) {

        super(fm);

        this.list_fragment = list_fragment;

        this.list_Title = list_Title;

   }



   @Override

   public Fragment getItem(int i) {

        return list_fragment.get(i);

   }



   @Override

   public int getCount() {

        return list_fragment.size();

   }



   /**

    * 此方法是給tablayout中的tab賦值的，就是顯示名稱

    * @param position

    * @return

    */

   @Override

   public CharSequence getPageTitle(int position) {

        return list_Title.get(position % list_Title.size());

   }

}

下面我們來看一下，MainActivity.java這裏面我加了詳細的註解，這裏就不多說了，直接看代碼就OK了

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.View;

import com.example.cg.tablayoutlearn.Adapter.fragmentAdapter;
import com.example.cg.tablayoutlearn.Adapter.viewAdapter;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends ActionBarActivity {


    private TabLayout tab_title;
    private ViewPager vp_pager;

    private List<String> list_title;                                      //tab名稱列表
    private List<View> listViews;
    private List<Fragment> list_fragment;

    private View newsView;                                                //定義新聞頁面
    private View sportView;                                               //定義體育頁面
    private View funView;                                                 //定義娛樂頁面

    private viewAdapter vAdapter;                                         //定義以view爲切換的adapter
    private fragmentAdapter fAdapter;                                     //定義以fragment爲切換的adapter

    private NewsFragment nFragment;
    private SportsFragment sFragment;
    private FunFragment fFragment;


    private int[] tabImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initControls();

        viewChanage();

        //fragmentChange();
    }

    /**
     * 初始化控件
     */
    private void initControls()
    {
        tab_title = (TabLayout)findViewById(R.id.tab_title);
        vp_pager = (ViewPager)findViewById(R.id.vp_pager);

        //爲tabLayout上的圖標賦值
        tabImg = new int[]{R.drawable.ic_collected,R.drawable.ic_commented,R.drawable.ic_drawer_login_normal};
    }

    /**
     * 採用在viewpager中切換 view 的方式,並添加了icon的功能
     */
    private void viewChanage()
    {
        listViews = new ArrayList<>();
        LayoutInflater mInflater = getLayoutInflater();

        newsView = mInflater.inflate(R.layout.fragment_news, null);
        sportView = mInflater.inflate(R.layout.fragment_sport, null);
        funView = mInflater.inflate(R.layout.fragment_fun, null);
        listViews.add(newsView);
        listViews.add(sportView);
        listViews.add(funView);

        list_title = new ArrayList<>();
        list_title.add("新聞");
        list_title.add("體育");
        list_title.add("娛樂");

        //設置TabLayout的模式,這裏主要是用來顯示tab展示的情況的
        //TabLayout.MODE_FIXED          各tab平分整個工具欄,如果不設置，則默認就是這個值
        //TabLayout.MODE_SCROLLABLE     適用於多tab的，也就是有滾動條的，一行顯示不下這些tab可以用這個
        //                              當然了，你要是想做點特別的，像知乎裏就使用的這種效果
        tab_title.setTabMode(TabLayout.MODE_FIXED);

        //設置tablayout距離上下左右的距離
        //tab_title.setPadding(20,20,20,20);

        //爲TabLayout添加tab名稱
        tab_title.addTab(tab_title.newTab().setText(list_title.get(0)));
        tab_title.addTab(tab_title.newTab().setText(list_title.get(1)));
        tab_title.addTab(tab_title.newTab().setText(list_title.get(2)));


        vAdapter = new viewAdapter(this,listViews,list_title,tabImg);
        vp_pager.setAdapter(vAdapter);

        //將tabLayout與viewpager連起來
        tab_title.setupWithViewPager(vp_pager);
    }

    /**
     * 採用viewpager中切換fragment
     */
    private void fragmentChange()
    {
        list_fragment = new ArrayList<>();

        nFragment = new NewsFragment();
        sFragment = new SportsFragment();
        fFragment = new FunFragment();


        list_fragment.add(nFragment);
        list_fragment.add(sFragment);
        list_fragment.add(fFragment);

        list_title = new ArrayList<>();
        list_title.add("新聞");
        list_title.add("體育");
        list_title.add("娛樂");

        fAdapter = new fragmentAdapter(getSupportFragmentManager(),list_fragment,list_title);
        vp_pager.setAdapter(fAdapter);

        //將tabLayout與viewpager連起來
        tab_title.setupWithViewPager(vp_pager);
    }


}

這裏我們看一下效果圖：

viewChanage()的顯示

fragmentChange()的顯示

頂

1

踩