久久精品视频91,精品97国产免费人成视频,国产精品186在线观看在线播放

TabLayout 全面總結

2018-10-16 seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、簡介

TabLayout提供了一個水平布局用于展示tabs，繼承自HorizontalScrollView。一般與Viewpager結合使用實現頁面和標簽聯動的效果，是時下APP中非常常用的一個控件

二、基本用法

添加design依賴

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

1
xml引用
xml中添加tab

<android.support.design.widget.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<android.support.design.widget.TabItem

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tab1"/>

<android.support.design.widget.TabItem

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tab2"/>

<android.support.design.widget.TabItem

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tab3"/>

<android.support.design.widget.TabItem

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tab4"/>

</android.support.design.widget.TabLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21
代碼中添加tab

<android.support.design.widget.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content">

</android.support.design.widget.TabLayout>

1

2

3

4

5

// tablayout，Tab是TabLayout的內部類，且Tab的構造方法是包訪問權限

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);

tabLayout.addTab(tabLayout.newTab().setText("Tab1"));

tabLayout.addTab(tabLayout.newTab().setText("Tab2"));

tabLayout.addTab(tabLayout.newTab().setText("Tab3"));

tabLayout.addTab(tabLayout.newTab().setText("Tab4"));

1

2

3

4

5

6

三、屬性詳解

<declare-styleable name="TabLayout">



<attr name="tabIndicatorColor" format="color"/>



<attr name="tabIndicatorHeight" format="dimension"/>



<attr name="tabContentStart" format="dimension"/>



<attr name="tabBackground" format="reference"/>



<attr name="tabMode">

<enum name="scrollable" value="0"/>

<enum name="fixed" value="1"/>

</attr>



<attr name="tabGravity">

<enum name="fill" value="0"/>

<enum name="center" value="1"/>

</attr>



<attr name="tabMinWidth" format="dimension"/>



<attr name="tabMaxWidth" format="dimension"/>



<attr name="tabTextAppearance" format="reference"/>



<attr name="tabTextColor" format="color"/>



<attr name="tabSelectedTextColor" format="color"/>



<attr name="tabPaddingStart" format="dimension"/>

<attr name="tabPaddingTop" format="dimension"/>

<attr name="tabPaddingEnd" format="dimension"/>

<attr name="tabPaddingBottom" format="dimension"/>

<attr name="tabPadding" format="dimension"/>

</declare-styleable>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

使用示例

<android.support.design.widget.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabIndicatorColor="@color/colorPrimaryDark"

app:tabIndicatorHeight="2dp"

app:tabContentStart="50dp"

app:tabBackground="@color/colorAccent"

app:tabMode="scrollable"

app:tabGravity="fill"

app:tabTextAppearance="@style/MyTabTextAppearance"

app:tabTextColor="@android:color/black"

app:tabSelectedTextColor="@android:color/white"/>

1

2

3

4

5

6

7

8

9

10

11

12

13

<style name="MyTabTextAppearance" parent="TextAppearance.Design.Tab">

<item name="textAllCaps">false</item>

<item name="android:textSize">18sp</item>

</style>

1

2

3

4

四、圖文混排，Tab中添加圖片
通過SpannableString設置圖片

@NonNull

private SpannableString setImageSpan(String string,int drawableId) {

SpannableString ss = new SpannableString(" "+string);

Drawable drawable = ContextCompat.getDrawable(this, drawableId);

drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());

ImageSpan imageSpan = new ImageSpan(drawable);

ss.setSpan(imageSpan,0,1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

return ss;

}

1

2

3

4

5

6

7

8

9

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);

tabLayout.addTab(tabLayout.newTab().setText(setImageSpan("Tab1",R.drawable.ic_home)));

tabLayout.addTab(tabLayout.newTab().setText(setImageSpan("Tab2",R.drawable.ic_info)));

……

1

2

3

4

我們會發現個問題，通過ImageSpan設置的圖片和文字沒有對齊，先百度到一個可用方法解決：重寫ImageSpan的draw()方法

package com.strivestay.tablayoutdemo;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.graphics.drawable.Drawable;

import android.support.annotation.NonNull;

import android.text.style.ImageSpan;

public class CenterImageSpan extends ImageSpan {

public CenterImageSpan(Drawable drawable) {

super(drawable);

}

public CenterImageSpan(Bitmap b) {

super(b);

}

@Override

public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,

@NonNull Paint paint) {

Drawable b = getDrawable();

Paint.FontMetricsInt fm = paint.getFontMetricsInt();

int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;//計算y方向的位移

canvas.save();

canvas.translate(x, transY);//繪制圖片位移一段距離

b.draw(canvas);

canvas.restore();

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

將上面的ImageSpan替換為現在的CenterImageSpan，即可實現圖文混排時對齊
通過Tab.setCustomView()設置圖片
自定義view布局

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

android:gravity="center">

<ImageView

android:id="@+id/iv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/ic_home"/>

<TextView

android:id="@+id/tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="2dp"

android:textSize="16sp"

android:text="首頁"/>

</LinearLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20
代碼設置

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);

tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_home,"首頁")));

tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_info,"資訊")));

tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_live,"直播")));

tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_me,"我")));

1

2

3

4

5

private View setCustomView(int drawableId,String tabText) {

View view = View.inflate(this, R.layout.item_tab, null);

ImageView iv = (ImageView) view.findViewById(R.id.iv);

TextView tv = (TextView) view.findViewById(R.id.tv);

iv.setImageResource(drawableId);

tv.setText(tabText);

return view;

}

1

2

3

4

5

6

7

8

五、TabLayout與Viewpager聯動
xml設置TabLayout和Viewpager

第一種：TabLayout放置在Viewpager的上方，放在AppbarLayout中會有陰影效果

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout

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:id="@+id/main_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context="com.strivestay.tablayoutdemo.MainActivity">

<android.support.design.widget.AppBarLayout

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingTop="@dimen/appbar_padding_top"

android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

app:layout_scrollFlags="scroll|enterAlways"

app:popupTheme="@style/AppTheme.PopupOverlay">

</android.support.v7.widget.Toolbar>

<android.support.design.widget.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabIndicatorColor="@color/colorAccent"

app:tabIndicatorHeight="2dp"

app:tabBackground="@android:color/white"

app:tabTextAppearance="@style/MyTabTextAppearance"

app:tabTextColor="@android:color/black"

app:tabSelectedTextColor="@android:color/holo_blue_light">

</android.support.design.widget.TabLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="end|bottom"

android:layout_margin="@dimen/fab_margin"

app:srcCompat="@android:drawable/ic_dialog_email"/>

</android.support.design.widget.CoordinatorLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

第二種：TabLayout直接放在Viewpager，無陰影

<android.support.v4.view.ViewPager

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

<android.support.design.widget.TabLayout

android:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabIndicatorColor="@color/colorAccent"

app:tabIndicatorHeight="2dp"

app:tabBackground="@android:color/white"

app:tabTextAppearance="@style/MyTabTextAppearance"

app:tabTextColor="@android:color/black"

app:tabSelectedTextColor="@android:color/holo_blue_light">

</android.support.design.widget.TabLayout>

</android.support.v4.view.ViewPager>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17
為Viewpager創建適配器

/

fragment

/

public static class PlaceholderFragment extends Fragment {

private static final String ARG_SECTION = "section";

public PlaceholderFragment() {

}

public static PlaceholderFragment newInstance(String section) {

PlaceholderFragment fragment = new PlaceholderFragment();

Bundle args = new Bundle();

args.putString(ARG_SECTION, section);

fragment.setArguments(args);

return fragment;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_main, container, false);

TextView textView = (TextView) rootView.findViewById(R.id.section_label);

textView.setText(getArguments().getString(ARG_SECTION));

return rootView;

}

}

/

pagerAdapter

/

public class SectionsPagerAdapter extends FragmentPagerAdapter {

String[] tabs = {"首頁","資訊","直播","我"};

public SectionsPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

return PlaceholderFragment.newInstance(tabs[position]);

}

@Override

public int getCount() {

return tabs.length;

}

@Override

public CharSequence getPageTitle(int position) {

return tabs[position];

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

主要是重寫getPageTitle()方法
代碼設置 TabLayout和Viewpager綁定

// tablayout

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);

// vp

mViewPager = (ViewPager) findViewById(R.id.container);

mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

mViewPager.setAdapter(mSectionsPagerAdapter);

// 綁定，要在viewpager設置完數據后，調用此方法，否則不顯示 tabs文本

tabLayout.setupWithViewPager(mViewPager);

1

2

3

4

5

6

7

8

9

10

調用setupWithViewPager()方法，則使用TabLayout.addtab()方法無效，TabLayout會清除之前添加的所有tabs，并將根據Viewpager的頁數添加Tab，Tab標題為對應頁通過getPageTitle()返回的文本
圖文混排
同上，使用SpannableString

修改Adapter如下：

/*

pagerAdapter

*/

public class SectionsPagerAdapter extends FragmentPagerAdapter {

String[] tabs = {"首頁","資訊","直播","我"};

int[] imgs = {R.drawable.ic_home,R.drawable.ic_info,R.drawable.ic_live,R.drawable.ic_me};

public SectionsPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

return PlaceholderFragment.newInstance(tabs[position]);

}

@Override

public int getCount() {

return tabs.length;

}

@Override

public CharSequence getPageTitle(int position) {

// return tabs[position];

return setImageSpan(tabs[position],imgs[position]);

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

setImageSpan()方法同上
同上，使用Tab.setCustomView()

修改pagerAdapter如下：

/

pagerAdapter

/

public class SectionsPagerAdapter extends FragmentPagerAdapter {

String[] tabs = {"首頁","資訊","直播","我"};

int[] imgs = {R.drawable.ic_home,R.drawable.ic_info,R.drawable.ic_live,R.drawable.ic_me};

public SectionsPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

return PlaceholderFragment.newInstance(tabs[position]);

}

@Override

public int getCount() {

return tabs.length;

}

@Override

public CharSequence getPageTitle(int position) {

// return tabs[position];

// return setImageSpan(tabs[position],imgs[position]);

return null;

}

/

設置自定義view

@param position

@return

/

public View setCustomView(int position) {

View view = View.inflate(getApplicationContext(), R.layout.item_tab, null);

ImageView iv = (ImageView) view.findViewById(R.id.iv);

TextView tv = (TextView) view.findViewById(R.id.tv);

iv.setImageResource(imgs[position]);

tv.setText(tabs[position]);

return view;

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

代碼修改如下：

…………

// 綁定，要在viewpager設置完數據后，調用此方法，否則不顯示 tabs文本

tabLayout.setupWithViewPager(mViewPager);

// 為綁定viewpager后的TabLayout的tabs設置自定義view

for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {

tabLayout.getTabAt(i).setCustomView(mSectionsPagerAdapter.setCustomView(i));

}

1

2

3

4

5

6

7

8

發現問題：我使用的仍然是上面的item_tab,但是只顯示圖片，不顯示文字如下

翻了翻源碼，也沒發現有對Tab的標題有特別的設置；后來，就感覺是不是顏色問題，給item_tab中的textview加上屬性android:textColor="@android:color/black",就顯示出來了

六、FlycoTabLayout

這是一個不錯的TabLayout開源項目，效果挺好，可以了解一下。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

« Android5.0以后，materialDesign風格的加陰影和裁剪效果產品設計中“+”功能的相關思考 »

TabLayout 全面總結

分類

日歷

鏈接

個人資料

存檔