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

i7292ywp 8年前發布 | 25K 次閱讀 Android開發移動開發

來自： http://blog.csdn.net//chenguang79/article/details/49306339

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

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

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

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

activity_main.xml文件

<LinearLayout xmlns:android="

<!--
    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></pre> 

 

        在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></pre> 

 
   顯示的樣子是這樣的：
 
 
         在編寫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;

}
}</pre> 


fragment_news.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="
<TextView

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


</LinearLayout></pre> 

 
非常簡單的一段代碼，就是為了顯示一段文件。
 另外兩個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;
}




}</pre> 

 
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());


}
}</pre> 

 
下面我們來看一下，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);
}



}</pre> 

 
這里我們看一下效果圖：
 viewChanage()的顯示
 

 

 
 

 
 fragmentChange()的顯示

本文由用戶 i7292ywp 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1455271327792.html

Android開發移動開發

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

相關經驗

相關資訊

相關文檔

目錄