TShopping

 找回密碼
 註冊
搜索
查看: 241|回復: 0

[教學] Android的TabLayout簡單使用

  [複製鏈接]
發表於 2016-9-23 08:19:02 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
1.PNG
Android的TabLayout
最近在項目中需要實現選項卡標籤切換的效果,選擇使用的機器人中材質設計控件TabLayout。
在應用程序中選項卡也是很常見的,它的實現方式也有很多:TabHost,自定義控件(第三方庫)ViewPager與ViewPagerIndicator,RadioGroup中等等。在2015年年的谷歌大會上,谷歌發布了基於材質設計的Android版 ​​支持設計庫,裡面包含了許多新的控件,其中有一個TabLayout,它就可以完成TabPageIndicator的效果,使用起來也比較方便。

先上效果圖: 1.gif

2016年8月11日,Android的TabLayout.gif
官方文檔:
TabLayout provides a horizontal layout to display tabs.
Population of the tabs to display is done through TabLayout.Tab instances.
You create tabs via newTab(). From there you can change the tab's label or icon via setText(int) and setIcon(int) respectively. To display the tab, you need to add it to the layout via one of the addTab(Tab) methods.
You should set a listener via setOnTabSelectedListener(OnTabSelectedListener) to be notified when any tab's selection state has been changed.
If you're using a ViewPager together with this layout, you can use setTabsFromPagerAdapter(PagerAdapter) which will populate the tabs using the given PagerAdapter's page titles. You should also use a TabLayout.TabLayoutOnPageChangeListener to forward the scroll and selection changes to this layout .

TbaLayout提供了展示標籤的水平佈局(TabLayout繼承自HorizontalScrollView)選項卡的顯示是通過TabLayout.Tab實例來完成。通過創建newTab()創建實例,利用的setText(INT)的setIcon和(INT)分別更改選項卡的標籤或圖標。要顯示選項卡需要通過的addTab(TAB)的方法,將其添加到佈局。


你應該通過setOnTabSelectedListener(OnTabSelectedListener)設置一個監聽器,當任何標籤的選擇狀態更改時可以被通知。如果你在一起使用ViewPager用此佈局,您可以使用setTabsFromPagerAdapter(PagerAdapter),使用給定的PagerAdapter的將頁面標題填入的選項卡。你也應該使用TabLayout.TabLayoutOnPageChangeListener到滾動和選擇更改轉發到這個佈局。

簡單使用:
首先,在的build.gradle中加入依賴
  1. compile 'com.android.support:design:24.4.1'
複製代碼

創建佈局文件,添加TabLayout和Viewpager作為上下的佈局
CompartmentActivity.xml

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     xmlns:app="http://schemas.android.com/apk/res-auto"
  6.     android:orientation="vertical"
  7.     tools:context="com.thunder.myapplication.Fragment.CompartmentFragment">

  8.     <android.support.design.widget.TabLayout
  9.         android:id="@+id/tl_title"
  10.         android:background="#1A1C28"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="180dp"
  13.         app:tabPaddingTop="50dp"
  14.         app:tabSelectedTextColor="@color/colorAccent"
  15.         app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
  16.         app:tabIndicatorColor="#1A1C28"/>

  17.     <android.support.v4.view.ViewPager
  18.         android:id="@+id/vp_pager"
  19.         android:layout_width="match_parent"
  20.         android:layout_height="0dp"
  21.         android:layout_weight="1"/>

  22. </LinearLayout>
複製代碼

創建每個尋呼機頁面佈局文件,這裡採用一個SwipeRefreshLayout和RecyclerView,方便RecyclerView進行刷新
BoxBaseFragment.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.v4.widget.SwipeRefreshLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:layout_width="match_parent"
  5.         android:layout_height="match_parent"
  6.         android:orientation="vertical"
  7.         android:id="@+id/swipeLayout" >
  8.     <android.support.v7.widget.RecyclerView
  9.         android:id="@+id/rv_box"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="match_parent"
  12.         android:paddingLeft="10dp"
  13.         android:paddingRight="10dp"
  14.         android:paddingTop="30dp"
  15.         android:paddingBottom="30dp"/>
  16. </android.support.v4.widget.SwipeRefreshLayout>
複製代碼

核心代碼實現(在活動或者片段中)
  1. private TabLayout mTabLayout;
  2. private ViewPager mViewPager;
  3. private FragmentPagerAdapter fAdapter;
  4. private List<Fragment> list_fragment;
  5. private List<String> list_title;
  6. private List<RoomClass.DataBean.LvBean> mRoomClassList;

  7. mTabLayout = (TabLayout) findViewById(R.id.tl_Compartment_title);
  8. mViewPager = (ViewPager) findViewById(R.id.vp_Compartment_pager);

  9. list_title = new ArrayList<>();
  10. list_fragment = new ArrayList<>();

  11.   //设置TabLayout的模式
  12.      mTabLayout.setTabMode(TabLayout.MODE_FIXED);
  13.      if (mRoomClassList != null) {
  14.          for (int i = 0; i < mRoomClassList.size(); i++) {

  15.              //加载tab名字列表
  16.              list_title.add("Tab_name");
  17.              //初始化各fragment,并加入列表
  18.              BoxBaseFragment boxBaseFragment = new BoxBaseFragment();
  19.              list_fragment.add(boxBaseFragment);
  20.              //为TabLayout添加tab名称
  21.              mTabLayout.addTab(mTabLayout.newTab().setText(list_title.get(0)));
  22.          }
  23.    }
  24.        fAdapter = new CompartFragmentAdapter(getSupportFragmentManager(), list_fragment, list_title);
  25.        //viewpager加载adapter
  26.        mViewPager.setAdapter(fAdapter);
  27.        //TabLayout加载viewpager
  28.        mTabLayout.setupWithViewPager(mViewPager);
複製代碼

最後在每個片段實現自己所需要顯示的內容,方便管理每個頁面
  1. public class BoxBaseFragment extends Fragment {

  2.     public BoxBaseFragment() {

  3.     }

  4.     public void setBoxClass(String boxClass) {
  5.         this.boxClass = boxClass;
  6.     }

  7.     public String getBoxClass() {
  8.         return boxClass;
  9.     }

  10.     @Override
  11.     public void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         mActivity = getActivity();

  14.     }

  15.     @Override
  16.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
  17.         return initView();
  18.     }

  19.     @Override
  20.     public void onActivityCreated(@Nullable Bundle savedInstanceState) {
  21.         super.onActivityCreated(savedInstanceState);
  22.     }

  23.     //初始化控件
  24.     public View initView(){
  25.         View view = View.inflate(mActivity, R.layout.fragment_boxbase, null);
  26.         mRecyclerView = (RecyclerView) view.findViewById(R.id.rv_box);
  27.         mSwipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.swipeLayout);
  28.         return view;
  29.     }

  30.     //初始化数据
  31.     public void initData() {

  32.         }

  33. }
複製代碼

PS:TabLayout也可以根據需要自己樣式

1.改變選中字體的顏色
  1. app:tabSelectedTextColor="@android:color/holo_orange_light"
複製代碼

2.改變未選中字體的顏色
  1. app:tabTextColor="@color/colorPrimary"
複製代碼

3.改變指示器下標的顏色
  1. app:tabIndicatorColor="@android:color/holo_orange_light"
複製代碼

4.改變整個TabLayout的顏色
  1. app:tabBackground="color"
複製代碼

5.改變TabLayout內部字體大小
  1. app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//设置文字样式
複製代碼

6.改變指示器下標的高度
  1. app:tabIndicatorHeight="4dp"
複製代碼

7.添加圖標
  1. tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
複製代碼
  1. tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
複製代碼

8.TabLayout監聽的事件
給選中選項卡設置監聽事件OnTabSelectedListener():
  1. tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {
  2.                  @Override
  3.                  public voidonTabSelected(TabLayout.Tab tab) {
  4.                  //选中了tab的逻辑
  5.                  }
  6.                  @Override
  7.                  public voidonTabUnselected(TabLayout.Tab tab) {
  8.                  //未选中tab的逻辑
  9.                  }
  10.                  @Override
  11.                  public voidonTabReselected(TabLayout.Tab tab) {
  12.                  //再次选中tab的逻辑
  13.                      }
  14.          });
複製代碼

推薦拓展閱讀

文/(簡書作者)
原文鏈接:http://www.jianshu.com/p/b889f0e32618
著作權歸作者所有,轉載請聯繫作者獲得授權,並標註“簡書作者”。

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-12 03:55 , Processed in 0.065577 second(s), 26 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表