TabLayout的使用和自定义viewicon的位置在左边的源码
![preview](https://csdnimg.cn/release/downloadcmsfe/public/img/white-bg.ca8570fa.png)
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
![star](https://csdnimg.cn/release/downloadcmsfe/public/img/star.98a08eaa.png)
在Android开发中,`TabLayout`是Google提供的一个用于创建底部导航栏或者滑动标签页的组件,它属于`Design Support Library`的一部分。本篇文章将深入探讨如何使用`TabLayout`以及如何自定义其图标视图,特别是将其图标放置在左侧。 `TabLayout`的基本使用方法如下: 1. 添加依赖:在`build.gradle`文件中添加`design`库的依赖。 ```gradle dependencies { implementation 'com.google.android.material:material:1.4.0' } ``` 2. 在布局XML文件中添加`TabLayout`: ```xml <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" /> ``` 3. 初始化`TabLayout`并与`ViewPager`关联: ```java TabLayout tabLayout = findViewById(R.id.tab_layout); ViewPager viewPager = findViewById(R.id.view_pager); TabLayout.TabLayoutOnPageChangeListener pageChangeListener = new TabLayout.TabLayoutOnPageChangeListener(tabLayout); viewPager.addOnPageChangeListener(pageChangeListener); tabLayout.setupWithViewPager(viewPager); ``` 4. 设置`TabLayout`的标签: ```java for (int i = 0; i < tabsCount; i++) { TabLayout.Tab tab = tabLayout.newTab(); tab.setText(tabsTitles[i]); tabLayout.addTab(tab); } ``` 接下来,我们讨论如何自定义`TabLayout`的图标视图。默认情况下,`TabLayout`的图标位于标签的前面,但如果我们希望将图标放在左侧,可以实现以下步骤: 1. 创建一个自定义的`TabView`布局,其中包含图标和文本视图,如: ```xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/tab_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@string/tab_icon_description" /> <TextView android:id="@+id/tab_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?attr/textAppearanceTab" /> </LinearLayout> ``` 2. 创建一个自定义的`TabLayout`扩展类,并重写`newTab()`方法来使用我们的自定义`TabView`: ```java public class CustomTabLayout extends TabLayout { public CustomTabLayout(Context context) { super(context); } public CustomTabLayout(Context context, AttributeSet attrs) { super(context, attrs); } public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override public Tab newTab() { return new CustomTab(this); } private class CustomTab extends Tab { private View view; public CustomTab(TabLayout parent) { super(parent); } @Override public void setCustomView(View view) { this.view = view; if (view != null) { ((LinearLayout) view).setOrientation(LinearLayout.HORIZONTAL); updateTabView(); } } private void updateTabView() { if (view != null) { ImageView iconView = view.findViewById(R.id.tab_icon); TextView titleView = view.findViewById(R.id.tab_title); iconView.setImageDrawable(getIcon()); titleView.setText(getText()); } } } } ``` 3. 在XML布局中使用自定义的`CustomTabLayout`,并设置图标和文本: ```java CustomTabLayout tabLayout = findViewById(R.id.custom_tab_layout); for (int i = 0; i < tabsCount; i++) { TabLayout.Tab tab = tabLayout.newTab(); tab.setIcon(tabIcons[i]); tab.setText(tabsTitles[i]); tabLayout.addTab(tab); } ``` 通过这种方式,我们可以自定义`TabLayout`的布局,使得图标位于左侧。如果需要进一步定制,例如更改图标和文本的间距、颜色等,可以在自定义`TabView`中添加相应的属性并进行调整。 总结起来,`TabLayout`是Android开发中的一个重要组件,提供了灵活的标签页展示方式。通过自定义`TabView`,我们可以根据项目需求调整标签的样式,比如将图标置于左侧,从而提供更个性化的用户界面。这不仅可以提高应用的用户体验,也是Android开发中的一项基本技能。
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![package](https://csdnimg.cn/release/downloadcmsfe/public/img/package.f3fc750b.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
- 1
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
- simom_fu2017-11-22谢谢楼主,帮助很大,很有用
- 88769778615413D5970A2017-05-03demo好用,对我很大的帮助!
- maolaodashiwo2017-09-16谢谢楼主,帮助很大,很有用
- 迷你火龙果2018-10-09谢谢楼主,帮助很大,有用
![avatar](https://profile-avatar.csdnimg.cn/3e581b8bb3f548ec888a056faa509265_cheng9981.jpg!1)
- 粉丝: 60
- 资源: 7
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)