Android控件-TabLayout使用介绍

public void onStart() {

super.onStart();

String label = getArguments().getString(“label”);

TextView text = getView().findViewById(R.id.tv_bg);

text.setText(label);

text.setBackgroundColor(Color.rgb((int)(Math.random() * 255), (int)(Math.random() * 255), (int)(Math.random() * 255)));

}

}

TabFragment中就一个TextView,通过给每一个Fragment中的TextView设置不同的text和背景颜色来区分当前是哪一个Fragment。Fragment的布局文件如下:

fragment_tab.xml

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

<TextView xmlns:android=“http://schemas.android.com/apk/res/android”

android:id=“@+id/tv_bg”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:gravity=“center_horizontal”

android:paddingTop=“100dp”

/>

TabActivity.java

public class TabActivity extends AppCompatActivity {

private String[] tabs = {“tab1”, “tab2”, “tab3”};

private List tabFragmentList = new ArrayList<>();

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_tab);

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

ViewPager viewPager = findViewById(R.id.view_pager);

//添加tab

for (int i = 0; i < tabs.length; i++) {

tabLayout.addTab(tabLayout.newTab().setText(tabs[i]));

tabFragmentList.add(TabFragment.newInstance(tabs[i]));

}

viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager(), FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {

@NonNull

@Override

public Fragment getItem(int position) {

return tabFragmentList.get(position);

}

@Override

public int getCount() {

return tabFragmentList.size();

}

@Nullable

@Override

public CharSequence getPageTitle(int position) {

return tabs[position];

}

});

//设置TabLayout和ViewPager联动

tabLayout.setupWithViewPager(viewPager,false);

}

}

简单的3步:

  1. 为TabLayout添加tab

  2. 给ViewPager设置adapter

  3. 设置TabLayout和ViewPager联动

看看运行结果:

在这里插入图片描述

好了,基本的功能已经实现了。这里有个需要注意的点:

就是在给ViewPager设置Adapter的时候,一定要重写getPageTitle(int position)方法,不然TabLayout中的标签是看不到的,即使在addTab时newTab().setText(tabs[i])也没用。原因很简单,是在tabLayout.setupWithViewPager的时候,TabLayout中先将所有tabs remove了,然后取的PagerAdapter中的getPageTitle返回值添加的tab。看下源码

@ViewPager.DecorView

public class TabLayout extends HorizontalScrollView {

private void setupWithViewPager(

@Nullable final ViewPager viewPager, boolean autoRefresh, boolean implicitSetup) {

if (viewPager != null) {

this.viewPager = viewPager;

final PagerAdapter adapter = viewPager.getAdapter();

if (adapter != null) {

// Now we’ll populate ourselves from the pager adapter, adding an observer if

// autoRefresh is enabled

setPagerAdapter(adapter, autoRefresh);

}

} else {

// We’ve been given a null ViewPager so we need to clear out the internal state,

// listeners and observers

this.viewPager = null;

setPagerAdapter(null, false);

}

}

void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {

// Finally make sure we reflect the new adapter

populateFromPagerAdapter();

}

void populateFromPagerAdapter() {

removeAllTabs();

if (pagerAdapter != null) {

final int adapterCount = pagerAdapter.getCount();

for (int i = 0; i < adapterCount; i++) {

addTab(newTab().setText(pagerAdapter.getPageTitle(i)), false);

}

}

}

}

可以看到populateFromPagerAdapter方法中执行了removeAllTabs()方法,然后取pagerAdapter.getPageTitle(i)方法返回值重新添加tab,所以记得重写getPageTitle方法。

除了在代码里面动态的添加tab,还可以直接在xml中进行添加TabItem。

<com.google.android.material.tabs.TabLayout

android:id=“@+id/tab_layout”

android:layout_width=“match_parent”

android:layout_height=“40dp”

app:layout_constraintTop_toTopOf=“parent”

app:layout_constraintStart_toStartOf=“parent”

app:tabTextColor=“@color/grey”

app:tabSelectedTextColor=“@color/colorAccent”

<com.google.android.material.tabs.TabItem

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:text=“tab1”/>

<com.google.android.material.tabs.TabItem

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:text=“tab2”/>

</com.google.android.material.tabs.TabLayout>

tab item

TabLayout属性介绍


TabLayout有很多属性可以供我们使用,下面简单介绍几个。

tabIndicatorFullWidth

上面的运行结果可以看到指示器的整个宽度是充满屏幕的,有时项目需要指示器线条的宽度和文字得宽度一致,那么就可以设置tabIndicatorFullWidth属性为false,默认为true

在这里插入图片描述

tabRippleColor

默认点击每一个tab的时候,会出现渐变的背景色

在这里插入图片描述

如果想要去掉这个点击时的背景,可以通过设置tabRippleColor属性值为一个透明的背景色就可以了

<com.google.android.material.tabs.TabLayout

app:tabRippleColor=“@android:color/transparent”/>

tabTextAppearance

有时候如果设计师需要我们实现,选中的tab文字字体加粗并放大字号,但是TabLayout并没有直接设置字体大小样式的属性,这时候就可以通过设置自定义属性tabTextAppearance来实现,其值是一个自定义style。

<com.google.android.material.tabs.TabLayout

app:tabTextAppearance=“@style/TabLayoutTheme”

appearance

可以看到所有的tab字体都变了,不是我们想要的效果。TabLayout可以设置OnTabSelectedListener监听事件,可以通过选中状态的改变来动态的设置tab样式。下面看看具体的实现逻辑

创建一个tab_text_layout.xml

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

<TextView xmlns:android=“http://schemas.android.com/apk/res/android”

android:id=“@android:id/text1”

android:layout_width=“wrap_content”

android:layout_height=“match_parent”

android:gravity=“center”

/>

然后在styles.xml中新建选中和未选中的style

最后给TabLayout添加监听事件

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

@Override

public void onTabSelected(TabLayout.Tab tab) {

View customView = tab.getCustomView();

if (customView == null) {

tab.setCustomView(R.layout.tab_text_layout);

}

TextView textView = tab.getCustomView().findViewById(android.R.id.text1);

textView.setTextAppearance(TabActivity.this, R.style.TabLayoutTextSelected);

}

@Override

public void onTabUnselected(TabLayout.Tab tab) {

View customView = tab.getCustomView();

if (customView == null) {

tab.setCustomView(R.layout.tab_text_layout);

}

TextView textView = tab.getCustomView().findViewById(android.R.id.text1);

textView.setTextAppearance(TabActivity.this, R.style.TabLayoutTextUnSelected);

}

@Override

public void onTabReselected(TabLayout.Tab tab) {

}

});

获取tab中的CustomView,为空则设置成我们自己创建的tab_text_layout,然后找到textView的id,最后给textView设置TextAppearance属性。

这里需要注意的是textView的id必须是android.R.id.text1,因为从源码中可以看到CustomView获取的是android.R.id.text1。

public class TabLayout extends HorizontalScrollView {

public final class TabView extends LinearLayout {

final void update() {

final Tab tab = this.tab;

final View custom = tab != null ? tab.getCustomView() : null;

customTextView = custom.findViewById(android.R.id.text1);

}

}

}

一切修改完毕,重新运行看看效果:

fail

好像有效果了,但是还有点小问题,第一次进去的时候未选中的tab还是使用的默认样式,我们自定义的样式并没有生效,原因是未选中的tab并没有执行到OnTabSelectedListener中的onTabUnselected方法。解决办法是:只需要给TabLayout控件的tabTextAppearance属性设置一个初始的TabLayoutTextUnSelected样式即可。

<com.google.android.material.tabs.TabLayout

app:tabTextAppearance=“@style/TabLayoutTextUnSelected” />

然后再看看效果:

success

tabMode

tabMode属性用于设置tab是否可以横向滚动,可选的值有fixed(默认)、auto、scrollable。

为了看到更加明显的效果对比,这里又新增几个tab,当设置默认的fixed时,所有的tab都会挤到屏幕上显示

fixed

当设置scrollable时

scrollable

一般tab较少时使用fixed,tab较多时使用scrollable,视项目而定。

文末

初级工程师拿到需求会直接开始做,然后做着做着发现有问题了,要么技术实现不了,要么逻辑有问题。

而高级工程师拿到需求会考虑很多,技术的可行性?对现有业务有没有帮助?对现有技术架构的影响?扩展性如何?等等…之后才会再进行设计编码阶段。

而现在随着跨平台开发,混合式开发,前端开发之类的热门,Android开发者需要学习和掌握的技术也在不断的增加。

通过和一些行业里的朋友交流讨论,以及参考现在大厂面试的要求。我们花了差不多一个月时间整理出了这份Android高级工程师需要掌握的所有知识体系。你可以看下掌握了多少。

混合式开发,微信小程序。都是得学会并且熟练的

这些是Android相关技术的内核,还有Java进阶

高级进阶必备的一些技术。像移动开发架构项目实战等

Android前沿技术;包括了组件化,热升级和热修复,以及各种架构跟框架的详细技术体系

以上即是我们整理的Android高级工程师需要掌握的技术体系了。可能很多朋友觉得很多技术自己都会了,只是一些新的技术不清楚而已。应该没什么太大的问题。

而这恰恰是问题所在!为什么别人高级工程师能年限突破30万,而你只有十几万呢?

就因为你只需补充你自己认为需要的,但并不知道企业需要的。这个就特别容易造成差距。因为你的技术体系并不系统,是零碎的,散乱的。那么你凭什么突破30万年薪呢?

我这些话比较直接,可能会戳到一些人的玻璃心,但是我知道肯定会对一些人起到点醒的效果的。而但凡只要有人因为我的这份高级系统大纲以及这些话找到了方向,并且付出行动去提升自我,为了成功变得更加努力。那么我做的这些就都有了意义。

喜欢的话请帮忙转发点赞一下能让更多有需要的人看到吧。谢谢!

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门,即可获取!
img-nW8xOTYG-1714802809684)]

高级进阶必备的一些技术。像移动开发架构项目实战等

[外链图片转存中…(img-qCq3HNOq-1714802809684)]

Android前沿技术;包括了组件化,热升级和热修复,以及各种架构跟框架的详细技术体系

[外链图片转存中…(img-OacthAoe-1714802809685)]

以上即是我们整理的Android高级工程师需要掌握的技术体系了。可能很多朋友觉得很多技术自己都会了,只是一些新的技术不清楚而已。应该没什么太大的问题。

而这恰恰是问题所在!为什么别人高级工程师能年限突破30万,而你只有十几万呢?

就因为你只需补充你自己认为需要的,但并不知道企业需要的。这个就特别容易造成差距。因为你的技术体系并不系统,是零碎的,散乱的。那么你凭什么突破30万年薪呢?

我这些话比较直接,可能会戳到一些人的玻璃心,但是我知道肯定会对一些人起到点醒的效果的。而但凡只要有人因为我的这份高级系统大纲以及这些话找到了方向,并且付出行动去提升自我,为了成功变得更加努力。那么我做的这些就都有了意义。

喜欢的话请帮忙转发点赞一下能让更多有需要的人看到吧。谢谢!

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门,即可获取!

  • 27
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android TabLayout是一个用于显示标签页的控件,可以在布局中使用TabLayout来创建并管理多个标签页。可以使用XML布局文件来定义TabLayout,并设置其属性来自定义样式和行为。 在XML布局中,可以使用TabLayout标签来创建TabLayout控件,并使用TabItem标签来创建每个标签页的布局。可以设置TabItem的属性来定义每个标签页的文本、图标和样式。 如果标签页数量较多且超出屏幕宽度,可以使用属性tabMode="scrollable"来设置TabLayout可滚动,以便所有标签页都可以显示在屏幕上。 以下是一个示例的XML布局代码: ``` <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:tabTextColor="@color/colorPrimary" app:tabSelectedTextColor="@color/colorPrimaryDark" /> <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@id/tab_layout" /> </androidx.constraintlayout.widget.ConstraintLayout> ``` 这段代码定义了一个包含TabLayout和ViewPager的ConstraintLayout布局。TabLayout用于显示标签页,ViewPager用于显示与标签页对应的内容页。你可以根据自己的需要修改这个布局,并在代码中使用TabLayout和ViewPager来实现TabLayout的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Android控件-TabLayout使用介绍](https://blog.csdn.net/csdnxia/article/details/105947804)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Android控件——Tablayout使用浅析(一)](https://blog.csdn.net/weixin_43499030/article/details/90179867)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值