TabLayout+ViewPager實現切頁的示例代碼

2019-10-21 21:31:12

字體：大中小

來源：轉載

供稿：網友

安卓使用TabLayout+ViewPager+Fragment 實現頁面切換，可實現左右滑動切換視圖界面和點擊切換

可自定義菜單欄是在頂部還是在底部

一、實現效果：

TabLayout,ViewPager,切頁,代碼

二、實現過程：

2.1 一些重要的設置

添加必須依賴：

因為需要使用：import android.support.design.widget.TabLayout;，所以必須添加下列依賴

compile 'com.android.support:design:23.3.0'

主布局文件編寫：

頂部或者底部顯示，只要更改ViewPager和TabLayout排列順序即可

<?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:paddingBottom="0dp"  android:paddingLeft="0dp"  android:paddingRight="0dp"  android:orientation="vertical"  android:paddingTop="0dp"  tools:context="com.example.fafa.MainActivity">  <android.support.v4.view.ViewPager    android:id="@+id/viewpager"    android:layout_width="match_parent"    android:layout_height="0dp"    android:layout_weight="1"    /><!--app:tabIndicatorColor=""  指示器顏色app:tabIndicatorHeight="" 指示器高度，設置為0就是沒有指示器app:tabTextColor=""  Tab文本默認顏色app:tabSelectedTextColor=""   Tab文本被選中后的顏色app:tabTextAppearance=""   為Tab文本設置樣式，一般是需要為Tab加圖標時使用app:tabMode="" 只有兩個值：fixed、scrollable其中 fixed用于標題欄少的情況，每個Tab可以平分屏幕寬度其中 scrollable用于標題欄多出屏幕的情況，如果標題欄少的時候用很難看，占不滿屏幕app:tabGravity="center" 整體居中，不可與上共用app:tabBackground=""  TabLayout背景，和android:background=""效果一樣app:tabGravity=""  對齊方式: 居中顯示center、fill填滿-->  <android.support.design.widget.TabLayout    android:id="@+id/tabs2"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_gravity="center"    app:tabMode="fixed"    app:tabIndicatorColor="@color/colorLv"    app:tabTextColor="@android:color/black"    app:tabSelectedTextColor="@color/colorred"    /></LinearLayout>

2.2 僅字符菜單欄顯示實現：

未加入圖片顯示，實現較為簡單

TabLayout,ViewPager,切頁,代碼

基本邏輯代碼：

每個界面使用不同的fragment，進行一一對應

import android.support.design.widget.TabLayout;public class MainActivity extends AppCompatActivity {  private ViewPager viewPager;  private TabLayout tabLayout;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    tabLayout = (TabLayout) findViewById(R.id.tabs2);    viewPager = (ViewPager) findViewById(R.id.viewpager);    //設置界面文件和文字一一對應    final Fragment[] fragments = {new Fragment0(), new Fragment1(), new Fragment2()};    final String[] titles = {"界面1", "界面2", "界面3"}; //添加tablayout中的豎線,每一項的中間分隔線 //LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);// linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);// linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.mipmap.fg)); //每項只進入一次 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {   @Override   public Fragment getItem(int position) {     return fragments[position];   }   @Override   public int getCount() {     return fragments.length;   }   @Override   public CharSequence getPageTitle(int position) {     return titles[position];   } }); tabLayout.setupWithViewPager(viewPager); tabLayout.getTabAt(1).select();//設置第一個為選中  }}

2.3 字符和圖片菜單欄實現

圖片加漢字菜單欄，菜單欄每項都是一個視圖可以自定義設計

TabLayout,ViewPager,切頁,代碼

菜單欄每項的布局文件設計：

一個圖片顯示和一個文字顯示，定義為垂直布局，其中android:layout_gravity="center"是把控件居中，這里不寫，在菜單欄顯示時可能會出現錯位

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:orientation="vertical"  android:id="@+id/item_view"  android:layout_height="match_parent">  <ImageView    android:layout_width="wrap_content"    android:src="@mipmap/ic_launcher"    android:id="@+id/item_img"    android:layout_gravity="center"    android:layout_height="wrap_content" />  <TextView    android:layout_width="wrap_content"    android:text="xxxx"    android:layout_gravity="center"    android:id="@+id/item_text"    android:layout_height="wrap_content" /></LinearLayout>

主布局文件更改：

在主布局文件的<android.support.design.widget.TabLayout>更改android:layout_height="70dp"，表示其菜單欄的高度改變。

定義必要的類變量：

private ViewPager viewPager; private TabLayout tabLayout; //設置界面文件和文字一一對應 private Fragment[] Lfragments = {new Fragment0(), new Fragment1(), new Fragment2(),new Fragment3()}; private String[] Ltitles = {"界面1", "界面2", "界面3","界面4"}; //未選中圖片 private int[] Limg = {R.mipmap.an1,R.mipmap.an2,R.mipmap.an3,R.mipmap.an4}; //選中圖片 private int[] Limgn = {R.mipmap.ann1,R.mipmap.ann2,R.mipmap.ann3,R.mipmap.ann4};//配置默認選中第幾項 private int ItemWhat=1;

數據初始化及基本界面加載：

//只進入一次，初始化viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {  @Override  public Fragment getItem(int position) {    return Lfragments[position];  }  @Override  public int getCount() {    return Lfragments.length;  }  @Override  public CharSequence getPageTitle(int position) {    return Ltitles[position];  }});//綁定tabLayout.setupWithViewPager(viewPager);//設置默認選中頁，宏定義tabLayout.getTabAt(ItemWhat).select();viewPager.setOffscreenPageLimit(3); //設置向左和向右都緩存的頁面個數//初始化菜單欄顯示for (int i = 0; i < tabLayout.getTabCount(); i++) {  //尋找到控件  View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.items, null);   LinearLayout mTabView = (LinearLayout) view.findViewById(R.id.item_view);  TextView mTabText = (TextView) view.findViewById(R.id.item_text);  ImageView mTabIcon = (ImageView) view.findViewById(R.id.item_img);  mTabText.setText(Ltitles[i]);  mTabIcon.setImageResource(Limg[i]);  //設置不可點擊  // mTabView.setClickable(true);  //更改選中項樣式  if(i==ItemWhat){    mTabIcon.setImageResource(Limgn[i]);    mTabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed));  }  //設置樣式  tabLayout.getTabAt(i).setCustomView(view);}

監聽選擇事件：

//是否選中監聽tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {  @Override  public void onTabSelected(TabLayout.Tab tab) {   //選中時進入，改變樣式    ItemSelect(tab);    //onTabselected方法里面調用了viewPager的setCurrentItem 所以要想自定義OnTabSelectedListener，也加上mViewPager.setCurrentItem(tab.getPosition())就可以了    viewPager.setCurrentItem(tab.getPosition());  }  @Override  public void onTabUnselected(TabLayout.Tab tab) {   //未選中進入，改變樣式    ItemNoSelect(tab);  }  @Override  public void onTabReselected(TabLayout.Tab tab) {   //重新選中  }});

選中和非選中，更改其中顯示樣式：

//某個項選中，改變其樣式 private void ItemSelect(TabLayout.Tab tab) {   View customView = tab.getCustomView();   TextView tabText = (TextView) customView.findViewById(R.id.item_text);   ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);   tabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed));   String stitle = tabText.getText().toString();   for(int i=0;i<Ltitles.length;i++){     if(Ltitles[i].equals(stitle)){       //Toast.makeText(MainActivity.this,"xxx+"+i,Toast.LENGTH_SHORT).show();       tabIcon.setImageResource(Limgn[i]);     }   } }//某個項非選中，改變其樣式 private void ItemNoSelect(TabLayout.Tab tab) {   View customView = tab.getCustomView();   TextView tabText = (TextView) customView.findViewById(R.id.item_text);   ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);   tabText.setTextColor(ContextCompat.getColor(this, R.color.colorBlack));   String stitle = tabText.getText().toString();   for(int i=0;i<Ltitles.length;i++){     if(Ltitles[i].equals(stitle)){       tabIcon.setImageResource(Limg[i]);     }   } }

整體代碼：

import android.support.design.widget.TabLayout;public class MainActivity extends AppCompatActivity {  private ViewPager viewPager;  private TabLayout tabLayout;  //設置界面文件和文字一一對應  private Fragment[] Lfragments = {new Fragment0(), new Fragment1(), new Fragment2(),new Fragment3()};  private String[] Ltitles = {"界面1", "界面2", "界面3","界面4"};  //未選中圖片  private int[] Limg = {R.mipmap.an1,R.mipmap.an2,R.mipmap.an3,R.mipmap.an4};  //選中圖片  private int[] Limgn = {R.mipmap.ann1,R.mipmap.ann2,R.mipmap.ann3,R.mipmap.ann4};  //配置默認選中第幾項  private int ItemWhat=1;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    //找控件    tabLayout = (TabLayout) findViewById(R.id.tabs2);    viewPager = (ViewPager) findViewById(R.id.viewpager);    //添加tablayout中的豎線,每一項的中間分隔線    //LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0);    // linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);    // linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.mipmap.fg));    //只進入一次，初始化    viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {      @Override      public Fragment getItem(int position) {        return Lfragments[position];      }      @Override      public int getCount() {        return Lfragments.length;      }      @Override      public CharSequence getPageTitle(int position) {        return Ltitles[position];      }    });    //綁定    tabLayout.setupWithViewPager(viewPager);    //設置默認選中頁，宏定義    tabLayout.getTabAt(ItemWhat).select();    viewPager.setOffscreenPageLimit(3); //設置向左和向右都緩存的頁面個數    //初始化菜單欄顯示    for (int i = 0; i < tabLayout.getTabCount(); i++) {      //尋找到控件      View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.items, null);       LinearLayout mTabView = (LinearLayout) view.findViewById(R.id.item_view);      TextView mTabText = (TextView) view.findViewById(R.id.item_text);      ImageView mTabIcon = (ImageView) view.findViewById(R.id.item_img);      mTabText.setText(Ltitles[i]);      mTabIcon.setImageResource(Limg[i]);      //設置不可點擊      // mTabView.setClickable(true);      //更改選中項樣式      if(i==ItemWhat){        mTabIcon.setImageResource(Limgn[i]);        mTabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed));      }      //設置樣式      tabLayout.getTabAt(i).setCustomView(view);    }    //是否選中監聽    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {      @Override      public void onTabSelected(TabLayout.Tab tab) {       //選中時進入，改變樣式        ItemSelect(tab);        //onTabselected方法里面調用了viewPager的setCurrentItem 所以要想自定義OnTabSelectedListener，也加上mViewPager.setCurrentItem(tab.getPosition())就可以了        viewPager.setCurrentItem(tab.getPosition());      }      @Override      public void onTabUnselected(TabLayout.Tab tab) {       //未選中進入，改變樣式        ItemNoSelect(tab);      }      @Override      public void onTabReselected(TabLayout.Tab tab) {       //重新選中      }    });}  //某個項選中，改變其樣式  private void ItemSelect(TabLayout.Tab tab) {    View customView = tab.getCustomView();    TextView tabText = (TextView) customView.findViewById(R.id.item_text);    ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);    tabText.setTextColor(ContextCompat.getColor(this, R.color.colorRed));    String stitle = tabText.getText().toString();    for(int i=0;i<Ltitles.length;i++){      if(Ltitles[i].equals(stitle)){        //Toast.makeText(MainActivity.this,"xxx+"+i,Toast.LENGTH_SHORT).show();        tabIcon.setImageResource(Limgn[i]);      }    }  }  //某個項非選中，改變其樣式  private void ItemNoSelect(TabLayout.Tab tab) {    View customView = tab.getCustomView();    TextView tabText = (TextView) customView.findViewById(R.id.item_text);    ImageView tabIcon = (ImageView) customView.findViewById(R.id.item_img);    tabText.setTextColor(ContextCompat.getColor(this, R.color.colorBlack));    String stitle = tabText.getText().toString();    for(int i=0;i<Ltitles.length;i++){      if(Ltitles[i].equals(stitle)){        tabIcon.setImageResource(Limg[i]);      }    }  }}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。

注：相關教程知識閱讀請移步到Android開發頻道。

上一篇：Android源碼導入Eclipse步驟詳解

下一篇：Android自定義帶拼音音調Textview