Android Kotlin技术咨询:移除TabLayout边框线与设置ActionBar图标内边距
针对你的两个Android UI问题的解决方案
先看一下你提供的界面截图:
问题1:移除TabLayout的边框线
从你给出的布局代码来看,已经通过app:tabIndicatorColor="@android:color/transparent"和app:tabIndicatorHeight="0dp"去掉了Tab的指示器线条,但如果是TabLayout本身自带的边框(比如底部的默认分割线),可以试试这两个方法:
直接设置背景透明
给TabLayout加上android:background="@android:color/transparent"和app:tabBackground="@android:color/transparent",确保没有额外的背景元素产生边框:<android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/transparent" app:tabBackground="@android:color/transparent" app:tabIndicatorColor="@android:color/transparent" app:tabIndicatorHeight="0dp" app:tabPaddingStart="0dp" app:tabPaddingEnd="0dp" app:tabGravity="fill" app:tabMode="fixed" />通过自定义Style彻底去除
如果上面的方法没效果,可以给TabLayout指定一个自定义样式,覆盖默认的边框相关属性:
在res/values/styles.xml中添加:<style name="NoBorderTabLayout" parent="Widget.Design.TabLayout"> <item name="android:background">@android:color/transparent</item> <item name="tabIndicator">@null</item> <item name="tabIndicatorHeight">0dp</item> <item name="tabBackground">@android:color/transparent</item> </style>然后在布局里引用这个样式:
style="@style/NoBorderTabLayout"
另外你的AppBarLayout背景已经设为透明,所以不会是它带来的边框问题。
问题2:给ActionBar图标设置内边距
直接用actionBar.setIcon()的话,系统默认的内边距很难调整,推荐两种更灵活的实现方式:
方法1:给图标Drawable添加内边距
用InsetDrawable给你的原始图标包裹一层内边距,这样就能精准控制边距大小:
// 先定义内边距大小,这里用20dp为例,你可以根据需求修改 val iconPadding = resources.getDimensionPixelSize(R.dimen.toolbar_icon_padding) // 获取原始图标Drawable val originalIcon = ContextCompat.getDrawable(this, R.drawable.title) // 创建带内边距的InsetDrawable,参数依次是左、上、右、下的内边距 val paddedIcon = InsetDrawable(originalIcon, iconPadding, 0, iconPadding, 0) val actionBar = supportActionBar actionBar!!.setDisplayShowHomeEnabled(true) actionBar.setBackgroundDrawable(ColorDrawable(Color.parseColor("#00FFFFFF"))) actionBar.setIcon(paddedIcon) // 使用带内边距的图标 actionBar.setDisplayShowTitleEnabled(false)
记得在res/values/dimens.xml里添加内边距的定义:
<dimen name="toolbar_icon_padding">20dp</dimen>
方法2:改用自定义Toolbar(更推荐)
自定义Toolbar能完全掌控图标的位置和样式,步骤很简单:
- 在
activity_main.xml中替换原有的ActionBar为自定义Toolbar:<android.support.design.widget.CoordinatorLayout ...> <android.support.design.widget.AppBarLayout ...> <!-- 新增自定义Toolbar --> <android.support.v7.widget.Toolbar android:id="@+id/custom_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/transparent" app:contentInsetStart="0dp"> <!-- 去掉Toolbar默认的左边距 --> <ImageView android:id="@+id/toolbar_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/title" android:paddingLeft="20dp" android:paddingRight="20dp" /> <!-- 直接设置图标内边距 --> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout .../> </android.support.design.widget.AppBarLayout> ... </android.support.design.widget.CoordinatorLayout> - 在
Main_Activity.kt中设置这个Toolbar为ActionBar:val toolbar = findViewById<android.support.v7.widget.Toolbar>(R.id.custom_toolbar) setSupportActionBar(toolbar) supportActionBar?.setDisplayShowTitleEnabled(false)
这种方式不仅能调整图标内边距,后续还能方便添加其他自定义元素,扩展性更强。
内容的提问来源于stack exchange,提问作者GPH




