如何使选项卡项正确填充?
How to make tabs items padding correctly?
我想在图像中制作像这个设计这样的自定义标签,我在这个问题上找到了那个案例的答案 但是在应用它的解决方案之后我在图像中得到了我想要的结果要做的是为我使用的 tablayout 中的项目设置填充 app:tabPadding 但它没有任何区别。
这是我的实现
1-activity布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:background="@drawable/tab_layout_bg"
android:clipToPadding="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabBackground="@drawable/selector_tab"
app:tabGravity="fill"
app:tabIndicatorColor="@android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabPadding="8dp"
app:tabRippleColor="@null"
app:tabSelectedTextColor="@color/black"
app:tabTextColor="@color/black">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Order Tracking" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Order details" />
</com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
2 - selector_tab
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- drawable for selected tab -->
<item
android:drawable="@drawable/shape_tab_selected"
android:state_selected="true"/>
<!-- drawable for unselected tab -->
<item
android:drawable="@drawable/shape_tab_un_selected"
android:state_selected="false"/>
</selector>
3 - shape_tab_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- radius should be half of the desired TabLayout height -->
<corners android:radius="10dp" />
<solid android:color="@color/white"/>
</shape>
4 - shape_tab_un_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- color of the selected tab -->
<solid android:color="@android:color/transparent" />
</shape>
5 - tab_layout_bg
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- radius should be half of the desired TabLayout height -->
<corners android:radius="10dp" />
<solid android:color="@color/colorGray"/>
</shape>
6 - 颜色
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="colorBlack">#F2F4F7</color>
<color name="colorGray">#F2F4F7</color>
我找到了解决方案,这里是
1 - 创建一个可绘制的选择器 (selector_tabs.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_tab_selected" android:state_selected="true"/>
<item android:drawable="@color/transparent" android:state_selected="false"/>
</selector>
2 - 对于处于选定状态的可绘制对象 ic_tab_selected 创建矢量可绘制对象并使用比例和枢轴值来控制要应用的填充方式
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="174dp"
android:height="42dp"
android:viewportWidth="174"
android:viewportHeight="42">
<group
android:scaleX="0.92"
android:scaleY="0.90"
android:pivotX="87"
android:pivotY="21">
<path
android:pathData="M12,4L162,4A8,8 0,0 1,170 12L170,30A8,8 0,0 1,162 38L12,38A8,8 0,0 1,4 30L4,12A8,8 0,0 1,12 4z"
android:fillColor="#ffffff"/>
</group>
</vector>
3 - 在选项卡布局上使用
app:tabBackground="@drawable/selector_tabs"
如果您只是向选定的可绘制对象添加描边,也可以。
3 - shape_tab_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="@color/colorGray"
android:width="2dp"/>
<!-- radius should be half of the desired TabLayout height -->
<corners android:radius="10dp" />
<solid android:color="@color/white"/>
</shape>
我想在图像中制作像这个设计这样的自定义标签,我在这个问题上找到了那个案例的答案
这是我的实现
1-activity布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:background="@drawable/tab_layout_bg"
android:clipToPadding="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabBackground="@drawable/selector_tab"
app:tabGravity="fill"
app:tabIndicatorColor="@android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabPadding="8dp"
app:tabRippleColor="@null"
app:tabSelectedTextColor="@color/black"
app:tabTextColor="@color/black">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Order Tracking" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Order details" />
</com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
2 - selector_tab
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- drawable for selected tab -->
<item
android:drawable="@drawable/shape_tab_selected"
android:state_selected="true"/>
<!-- drawable for unselected tab -->
<item
android:drawable="@drawable/shape_tab_un_selected"
android:state_selected="false"/>
</selector>
3 - shape_tab_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- radius should be half of the desired TabLayout height -->
<corners android:radius="10dp" />
<solid android:color="@color/white"/>
</shape>
4 - shape_tab_un_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- color of the selected tab -->
<solid android:color="@android:color/transparent" />
</shape>
5 - tab_layout_bg
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- radius should be half of the desired TabLayout height -->
<corners android:radius="10dp" />
<solid android:color="@color/colorGray"/>
</shape>
6 - 颜色
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="colorBlack">#F2F4F7</color>
<color name="colorGray">#F2F4F7</color>
我找到了解决方案,这里是
1 - 创建一个可绘制的选择器 (selector_tabs.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_tab_selected" android:state_selected="true"/>
<item android:drawable="@color/transparent" android:state_selected="false"/>
</selector>
2 - 对于处于选定状态的可绘制对象 ic_tab_selected 创建矢量可绘制对象并使用比例和枢轴值来控制要应用的填充方式
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="174dp"
android:height="42dp"
android:viewportWidth="174"
android:viewportHeight="42">
<group
android:scaleX="0.92"
android:scaleY="0.90"
android:pivotX="87"
android:pivotY="21">
<path
android:pathData="M12,4L162,4A8,8 0,0 1,170 12L170,30A8,8 0,0 1,162 38L12,38A8,8 0,0 1,4 30L4,12A8,8 0,0 1,12 4z"
android:fillColor="#ffffff"/>
</group>
</vector>
3 - 在选项卡布局上使用
app:tabBackground="@drawable/selector_tabs"
如果您只是向选定的可绘制对象添加描边,也可以。
3 - shape_tab_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="@color/colorGray"
android:width="2dp"/>
<!-- radius should be half of the desired TabLayout height -->
<corners android:radius="10dp" />
<solid android:color="@color/white"/>
</shape>