設計風格的ui效果，為了可以使用這些新穎md元件首先必須要在android studio的sdk的extra支援庫安裝android support library支援庫，如下所示
該元件在design庫中是以還需要在as中添加依賴庫
file——project struct
右鍵app選擇library dependancy
選擇design庫
然後as會自動幫我們在app的build.gradle檔案下添加依賴如下圖，由于
tablayout配合v ierpager，是以還需要導入viewerpager的依賴庫 support-v4包，（就是上圖的正數第二個庫）
到此，準備工作已經搞定！
本例主要通過tablayout實作頁籤切換功能，這裡實作了一個架構，比較簡單，效果圖如下，可以直接拿去加點擴充使用
首先要在布局檔案中引入tablayout和viewpager，然後在activity通過adapter關聯 vierpager，内部每個頁面通常是個fragment
引入倆個元件，
常用屬性如下（需要引入xmlns:app="http://schemas.android.com/apk/res-auto"）
app:tabselectedtextcolor：tab被選中字型的顔色
app:tabtextcolor：tab未被選中字型的顔色
app:tabindicatorcolor：tab訓示器下标的顔色
<span style="font-size:18px;"><linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".mainactivity">
<android.support.design.widget.tablayout
android:id="@+id/id_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffffff"
app:tabgravity="fill"
app:tabindicatorcolor="#ff007aa2"
app:tabmode="fixed"
app:tabtextcolor="#ff000000">
</android.support.design.widget.tablayout>
<android.support.v4.view.viewpager
android:id="@+id/id_viewpager"
android:layout_height="0dp"
android:layout_weight="1"
>
</android.support.v4.view.viewpager>
</linearlayout>
</span>
這裡是倆個頁籤，是以實作倆個fragment，省略下面有整個demo代碼
一般tablayout都是和viewpager共同使用才發揮它的優勢
<span style="font-size:18px;">package com.elvis.tablayout_demo;
import android.os.bundle;
import android.support.design.widget.tablayout;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentpageradapter;
import android.support.v4.view.viewpager;
import android.support.v7.app.appcompatactivity;
import android.view.menu;
import android.view.menuitem;
import com.elvis.tablayout_demo.fragment.fragmenthotrec;
import com.elvis.tablayout_demo.fragment.fragmenthotpot;
import java.util.arraylist;
import java.util.list;
public class mainactivity extends appcompatactivity {
private tablayout mtablayout;
private viewpager mviewpager;
private list<fragment> list_fragment;
private fragmenthotpot mhotpot;
private fragmenthotrec mhotrec;
//tablayout的标題
private string[] mtitles = new string[]{"今日熱點","熱門推薦"};
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
initviews();
}
private void initviews() {
mtablayout = (tablayout) findviewbyid(r.id.id_tablayout);
mviewpager = (viewpager) findviewbyid(r.id.id_viewpager);
mhotpot = new fragmenthotpot();
mhotrec = new fragmenthotrec();
list_fragment = new arraylist<>();
list_fragment.add(mhotpot);
list_fragment.add(mhotrec);
/*viewpager通過擴充卡與fragment關聯*/
mviewpager.setadapter(new fragmentpageradapter(getsupportfragmentmanager()) {
@override
public fragment getitem(int position) {
return list_fragment.get(position);
}
public int getcount() {
return mtitles.length;
public charsequence getpagetitle(int position) {
return mtitles[position];
});
//tablayout和viewpager的關聯
mtablayout.setupwithviewpager(mviewpager);
public boolean oncreateoptionsmenu(menu menu) {
// inflate the menu; this adds items to the action bar if it is present.
getmenuinflater().inflate(r.menu.menu_main, menu);
return true;
public boolean onoptionsitemselected(menuitem item) {
// handle action bar item clicks here. the action bar will
// automatically handle clicks on the home/up button, so long
// as you specify a parent activity in androidmanifest.xml.
int id = item.getitemid();
//noinspection simplifiableifstatement
if (id == r.id.action_settings) {
return true;
}
return super.onoptionsitemselected(item);
}
這裡tablayout很多屬性在xml檔案設定了，在代碼中也可通過其方法自己設定，常用方法如下
- addtab(tablayout.tab tab, int position, boolean setselected) 增加頁籤到 layout 中
- addtab(tablayout.tab tab, boolean setselected) 同上
- addtab(tablayout.tab tab) 同上
- gettabat(int index) 得到頁籤
- gettabcount() 得到頁籤的總個數
- gettabgravity() 得到 tab 的 gravity
- gettabmode() 得到 tab 的模式
- gettabtextcolors() 得到 tab 中文本的顔色
- newtab() 建立個 tab
- removealltabs() 移除所有的 tab
- removetab(tablayout.tab tab) 移除指定的 tab
- removetabat(int position) 移除指定位置的 tab
- setontabselectedlistener(tablayout.ontabselectedlistener ontabselectedlistener) 為每個 tab 增加選擇監聽器
- setscrollposition(int position, float positionoffset, boolean updateselectedtext) 設定滾動位置
- settabgravity(int gravity) 設定 gravity
- settabmode(int mode) 設定 mode,有兩種值：tablayout.mode_scrollable和tablayout.mode_fixed分别表示當tab的内容超過螢幕寬度是否支援橫向水準滑動，第一種支援滑動，第二種不支援，預設不支援水準滑動。
- settabtextcolors(colorstatelist textcolor) 設定 tab 中文本的顔色
- settabtextcolors(int normalcolor, int selectedcolor) 設定 tab 中文本的顔色 預設 選中
- settabsfrompageradapter(pageradapter adapter) 設定 pageradapter
- setupwithviewpager(viewpager viewpager) 和 viewpager 關聯
這裡隻是搭了一個架構，自己去添枝加葉吧~
轉載：http://blog.csdn.net/xsf50717/article/details/49405309