android material tab,Android Material Design：TabLayout的简单使用

什么是TabLayout

TabLayout是Support Design Library库中的一个控件，它是用来进行分组的，同时也可以作为ViewPager的指示器

TabLayout的简单使用

●tab创建

◇xml布局创建1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

android:layout_width="match_parent"

android:id="@+id/tablayout"

android:layout_height="wrap_content">

android:layout_width="wrap_content"

android:text="tab1" //设置tab显示的文字

android:icon="@mipmap/ic_launcher" //设置tab的图片

android:layout_height="wrap_content" />

android:layout_width="wrap_content"

android:text="tab2"

android:icon="@mipmap/ic_launcher"

android:layout_height="wrap_content" />

android:layout_width="wrap_content"

android:text="tab3"

android:icon="@mipmap/ic_launcher"

android:layout_height="wrap_content" />

◇Java代码动态创建1

2

3

4tabLayout=findViewById(R.id.tablayout);

tabLayout.addTab(tabLayout.newTab().setText("标签1").setIcon(R.mipmap.ic_launcher));

tabLayout.addTab(tabLayout.newTab().setText("标签2").setIcon(R.mipmap.ic_launcher));

tabLayout.addTab(tabLayout.newTab().setText("标签3").setIcon(R.mipmap.ic_launcher));

●tab的布局排版

tab的布局排版受两个属性限制app:tabMode【fixed(固定)、scrollable(滚动))】和app:tabGravity(fill(填充)、center(居中))

◇设置app:tabMode=“fixed”然后设置app:tabGravity分别为fill和center时的效果

1)app:tabGravity=”fill”1

2

3

4

5

6

7

android:layout_width="match_parent"

android:id="@+id/tablayout"

app:tabMode="fixed"

app:tabGravity="fill"

android:layout_height="wrap_content">

2)app:tabGravity=”center”1

2

3

4

5

6

7

android:layout_width="match_parent"

android:id="@+id/tablayout"

app:tabMode="fixed"

app:tabGravity="center"

android:layout_height="wrap_content">

◇设置app:tabMode=“scrollable”然后设置app:tabGravity分别为fill和center时的效果

1)app:tabGravity=”fill”1

2

3

4

5

6

7

android:layout_width="match_parent"

android:id="@+id/tablayout"

app:tabMode="scrollable"

app:tabGravity="fill"

android:layout_height="wrap_content">

2)app:tabGravity=”center”1

2

3

4

5

6

7

android:layout_width="match_parent"

android:id="@+id/tablayout"

app:tabMode="scrollable"

app:tabGravity="center"

android:layout_height="wrap_content">

●其他设置1

2

3

4

5

6

7

8

9

10

11

12

android:layout_width="match_parent"

android:id="@+id/tablayout"

app:tabMode="scrollable"

app:tabGravity="center"

app:tabIndicatorHeight="5dp" //设置指示线高度，如果想要隐藏指示线可以通过将该属性设置为0dp实现

app:tabIndicatorColor="@color/colorPrimary" //设置指示线颜色

app:tabTextColor="@color/colorPrimary" //设置未选中文字颜色

app:tabSelectedTextColor="@color/colorRed" //设置选中文字颜色

android:layout_height="wrap_content">

●绑定ViewPager

这里tab的Text是通过PagerAdapter的getPageTitle方法获取的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

44public class TabLayoutSimpleActivity2 extends AppCompatActivity{

ViewPager viewPager;

TabLayout tabLayout;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.tablayout_activitysimple);

viewPager=findViewById(R.id.vp);

tabLayout=findViewById(R.id.tablayout);

viewPager.setAdapter(new PagerAdapter() {

@Override

public int getCount(){

return 5;

}

@Override

public boolean isViewFromObject(@NonNull View view, @NonNull Object object){

return view==object;

}

@NonNull

@Override

public Object instantiateItem(@NonNull ViewGroup container, int position){

TextView textView=new TextView(TabLayoutSimpleActivity2.this);

textView.setTextSize(50);

textView.setText(position+"");

container.addView(textView);

return textView;

}

@Override

public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object){

container.removeView((View) object);

}

@Nullable

@Override

public CharSequence getPageTitle(int position){

return "标签"+position;

}

});

tabLayout.setupWithViewPager(viewPager);

}

}