在 TabLayout 下面添加一行
Adding a line below TabLayout
我在尝试在 TabLayout
下方添加一行时遇到问题,但它必须位于选择器行之后。应该是这样的:
我已经尝试添加自定义视图,但每个选项卡内部都有一些边距,所以没有成功。
有什么想法吗?
这是我现在得到的:
这是我在 XML 上添加它的方式:
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabBackground="@color/white"
app:tabIndicatorColor="@color/colorAccent"
app:tabTextColor="@color/white"/>
这就是我通过代码所做的事情:
private void configureTabLayout() {
TabLayout.Tab tabHome = mTabLayout.newTab().setIcon(R.drawable.ic_home_cinza);
TabLayout.Tab tabEmprestimos = mTabLayout.newTab().setIcon(R.drawable.ic_emprestimos_cinza);
TabLayout.Tab tabPersonal = mTabLayout.newTab().setIcon(R.drawable.ic_usuario_cinza);
View root = mTabLayout.getChildAt(0);
if (root instanceof LinearLayout) {
((LinearLayout) root).setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
GradientDrawable drawable = new GradientDrawable();
drawable.setColor(getResources().getColor(R.color.silver));
drawable.setSize(2, 1);
((LinearLayout) root).setDividerPadding(10);
((LinearLayout) root).setDividerDrawable(drawable);
}
mTabLayout.addTab(tabHome);
mTabLayout.addTab(tabEmprestimos);
mTabLayout.addTab(tabPersonal);
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
}
在您的 Drawable 文件夹中创建一个 xml
background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-10dp" android:right="-10dp" android:left="-10dp">
<shape
android:shape="rectangle">
<solid android:color="#1bd4f6" />
<stroke
android:width="2dp"
android:color="#0288D1" />
</shape>
</item>
</layer-list>
将此设置为您的 TabLayout
<android.support.design.widget.TabLayout
android:background="@drawable/background"
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabIndicatorColor="@color/colorAccent"
app:tabTextColor="@color/white"/>
根据需要更改值和颜色!
输出:
你可以试试这个。解决方案
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabBackground="@color/white"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="2.5dp"
app:tabTextColor="@color/white"/>
<View
android:layout_width="match_parent"
android:layout_height="2.5dp"
android:layout_gravity="bottom"
android:background="#c6c6c6" />
</FrameLayout>
在您的 Drawable 文件夹中创建一个 xml
background_line.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-6dp"
android:right="-2dp"
android:left="-2dp"
>
<shape
android:shape="rectangle">
<solid android:color="#fff" />
<stroke
android:width="1dp"
android:color="#fff" />
<corners android:radius="@dimen/_15sdp"/>
</shape>
</item>
</layer-list>
将此设置为您的 TabLayout
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="@dimen/_40ssp"
app:tabTextColor="@color/gray"
app:tabIndicator="@drawable/background_line"
app:tabIndicatorColor="@color/white"
app:tabIndicatorGravity="bottom"
app:tabSelectedTextColor="@color/white"
app:tabBackground="@color/bg_app"
app:tabGravity="fill"
/>
输出>>>
我在尝试在 TabLayout
下方添加一行时遇到问题,但它必须位于选择器行之后。应该是这样的:
我已经尝试添加自定义视图,但每个选项卡内部都有一些边距,所以没有成功。
有什么想法吗?
这是我现在得到的:
这是我在 XML 上添加它的方式:
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabBackground="@color/white"
app:tabIndicatorColor="@color/colorAccent"
app:tabTextColor="@color/white"/>
这就是我通过代码所做的事情:
private void configureTabLayout() {
TabLayout.Tab tabHome = mTabLayout.newTab().setIcon(R.drawable.ic_home_cinza);
TabLayout.Tab tabEmprestimos = mTabLayout.newTab().setIcon(R.drawable.ic_emprestimos_cinza);
TabLayout.Tab tabPersonal = mTabLayout.newTab().setIcon(R.drawable.ic_usuario_cinza);
View root = mTabLayout.getChildAt(0);
if (root instanceof LinearLayout) {
((LinearLayout) root).setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
GradientDrawable drawable = new GradientDrawable();
drawable.setColor(getResources().getColor(R.color.silver));
drawable.setSize(2, 1);
((LinearLayout) root).setDividerPadding(10);
((LinearLayout) root).setDividerDrawable(drawable);
}
mTabLayout.addTab(tabHome);
mTabLayout.addTab(tabEmprestimos);
mTabLayout.addTab(tabPersonal);
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
}
在您的 Drawable 文件夹中创建一个 xml
background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-10dp" android:right="-10dp" android:left="-10dp">
<shape
android:shape="rectangle">
<solid android:color="#1bd4f6" />
<stroke
android:width="2dp"
android:color="#0288D1" />
</shape>
</item>
</layer-list>
将此设置为您的 TabLayout
<android.support.design.widget.TabLayout
android:background="@drawable/background"
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabIndicatorColor="@color/colorAccent"
app:tabTextColor="@color/white"/>
根据需要更改值和颜色!
输出:
你可以试试这个。解决方案
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabBackground="@color/white"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="2.5dp"
app:tabTextColor="@color/white"/>
<View
android:layout_width="match_parent"
android:layout_height="2.5dp"
android:layout_gravity="bottom"
android:background="#c6c6c6" />
</FrameLayout>
在您的 Drawable 文件夹中创建一个 xml
background_line.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-6dp"
android:right="-2dp"
android:left="-2dp"
>
<shape
android:shape="rectangle">
<solid android:color="#fff" />
<stroke
android:width="1dp"
android:color="#fff" />
<corners android:radius="@dimen/_15sdp"/>
</shape>
</item>
</layer-list>
将此设置为您的 TabLayout
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="@dimen/_40ssp"
app:tabTextColor="@color/gray"
app:tabIndicator="@drawable/background_line"
app:tabIndicatorColor="@color/white"
app:tabIndicatorGravity="bottom"
app:tabSelectedTextColor="@color/white"
app:tabBackground="@color/bg_app"
app:tabGravity="fill"
/>
输出>>>