Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android進階——Material Design新控件之初識TabLayout(一)

Android進階——Material Design新控件之初識TabLayout(一)

編輯:關於Android編程

引言

Google I/O 2015 推出的 Android Design Support Library令人非常激動。Material Design的推出確實振奮了不少 Android開發者以及用戶的心。以前Google給我的感覺就像是他並沒太在乎他們的UI(或者審美不同,Gmail不忍吐槽),但是當Material Design伴隨Android5.0發布之後,一切好像就都變了個樣,Google好像意識到了設計的重要性以及自己以往的種種不足,決定也要迎頭趕上,不僅僅只是推出一套Material Design的語言同時也推出了很多新的控件,接下來我們就來學習下 AndroidDesign Support Library庫下的所有新的控件,首先從android.support.design.widget.TabLayout開始。

一、TabLayout概述

TabLayout,滑動指示選項卡,繼承自HorizontalScrollView(注:與TableLayout毫無關系),提供了一個水平的可滾動布局來展示Tabs。所以有了它我們就不必在去自己定義實現類似ActionBar的Tab欄了(TabLayout provides a horizontal layout to display tabs)與以前早期TabHost不同TabLayout兼容性更強、使用更簡單並且效果更好,還自帶小滑塊的動畫效果。如果熟悉Github裡的TabPageIndicator,他們的原理大同小異。在開發中結合ViewPager和Fragment使用,我們就可以快速搭建一個Tabs切換的主界面,類似微信、知乎、網易新聞、新浪等等。

二、TabLayout的常用屬性和方法

TabLayout除了Android控件常有的屬性(以android:為命名空間)之外,還定義了些獨有的屬性(是以”app:”的命名空間的,形如app:tabMode),這裡只列出部分屬性和部分方法(getter、setter和屬性是一一對應的)。

屬性 說明 app:tabMode tab布局模式,取值常量,fixed,scrollable,默認fixed:標簽很多時候會被擠壓,不能滑動。 app:tabSelectedTextColor 選中時字體的顏色 app:tabTextColor 未選中時字體的顏色 app:tabIndicatorColor sliding的顏色 app:tabBackground 整個Tab布局的背景 app:tabTextAppearance Tab上的標題文字大小 app:tabIndicatorHeight Sliding的高度 app:tabPadding Tab裡內容的內邊距 app:paddingEnd 整個TabLayout的內邊距 app:tabGravity Tab裡內容的布局,center,fill app:tabMaxWidth Tab的最大寬度 app:tabContentStart TabLayout的外邊距     方法 說明 TabLayout(Context context) 構造方法,我們可以通過構造方法來獲取TabLayout對象 TabLayout(Context context, AttributeSet attrs)   TabLayout(Context context, AttributeSet attrs,int defStyleAttr)   Tab newTab() 構造一個Tab對象即TabLayout裡盛放的二級容器 int getTabCount() 獲取Tab的數量 Tab getTabAt(int index) 根據Tab的索引值獲取對應的Tab,當我們初始化時系統會自動為我們的Tab添加index值,從0開始依次增加1 int getSelectedTabPosition() 獲取當前選中的Tab的index,為空則返回-1 void addTab(@NonNull Tab tab) 添加Tab至TabLayout(也可以添加至指定index處,, addTab(@NonNull Tab tab,int position) void removeTab(Tab tab) 移除指定Tab(也可通過removeTabAt(int position)) void removeAllTabs() 移除所有Tabs void setupWithViewPager(@NonNull ViewPager viewPager) 設置與ViewPager關聯起來,注:不允許傳遞空的ViewPager,否則會異常 void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter) 設置TabLayout的適配器,注:不允許傳遞空的PagerAdapter,否則會異常 OnTabSelectedListener Tab事件回調接口,包含onTabSelected,onTabUnselected,onTabReselected回調方法 void setOnTabSelectedListener(OnTabSelectedListener onTabSelectedListener) 設置Tab選中時的監聽、未由選中變成未選中到釋放的監聽

三、TabLayout的使用步驟

1、構造TabLayout對象

構造TabLayout對象和其他控件一樣,欲使用先得到對象,也是有兩種方式:代碼和xml布局

xml方式靜態構造



    
Java代碼動態構造
首先是通過其構造函數得到TabLayout對象
TabLayout tabLayout=new TabLayout(MainActivity.this);

然後設置其一系列屬性

 tabLayout.setTabMode(TabLayout.MODE_FIXED);
 tabLayout.setBackgroundColor(Color.parseColor("#2b2b2b"));
 tabLayout.setSelectedTabIndicatorHeight(4);
 tabLayout.setTabTextColors(Color.parseColor("#236f28"), Color.parseColor("#bc6e1c"));

記住,TabLayout其本質上一個ViewGroup,只是一個容器用於存放其他View的,這裡我們存放的View是Tab,所以我們得把Tab添加到TabLayout裡

tabLayout.addTab(tabLayout.newTab().setText("Tab1").setIcon(android.R.drawable.ic_menu_search));
        tabLayout.addTab(tabLayout.newTab().setText("Tab2").setIcon(android.R.drawable.ic_menu_agenda));
        tabLayout.addTab(tabLayout.newTab().setText("Tab3").setIcon(android.R.drawable.ic_menu_camera));

最後,雖然我們已經把Tab添加到TabLayout了,但是歸根結底TabLayout也是一個ViewGroup,所以還需要設置到當前的布局裡才能顯示。

 mFrameLayout.addView(tabLayout);

這裡寫圖片描述

至此,相信大家應該學會使用這個全新的空間裡了吧,下一篇再結合ViewPager+Fragment的主流架構講解下應用的注意事項和常見錯誤的解決。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved