You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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能完全掌控图标的位置和样式,步骤很简单:

  1. 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>
    
  2. 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

火山引擎 最新活动