Android ViewPager和TabLayout:如何在边距之间使用线性(矩形)指示器

问题描述 投票:0回答:1

正如我在标题中提到的,如何在线性(矩形)指示器之间添加空格?我想使标签指示符在中心全宽,我想为每个标签提供marginEnd和marginStart。我尝试过,但仍然做不到。请给我建议/线索!我会很高兴!谢谢!

我的代码如下:

FragmentTest.xml

    <?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">

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_topEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_top_edge" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_bottomEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_bottom_edge" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_horizontal_middleEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_horizontal_middle_edge" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_vertical_middleEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_vertical_middle_edge" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_startEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_start_edge" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/fragment_test_gdl_endEdge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="@integer/constraint_layout_guideline_end_edge" />

            <androidx.viewpager.widget.ViewPager
                android:id="@+id/fragment_test_vp_"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:orientation="horizontal"
                app:layout_constraintStart_toEndOf="@id/fragment_test_gdl_startEdge"
                app:layout_constraintEnd_toStartOf="@id/fragment_test_gdl_endEdge"
                app:layout_constraintTop_toBottomOf="@id/fragment_test_gdl_topEdge"
                app:layout_constraintBottom_toTopOf="@id/fragment_test_tl_tab"/>

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/fragment_test_tl_tab"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:tabIndicatorHeight="0dp"
                app:tabGravity="center"
                app:tabBackground="@drawable/viewpager_tab_line_selector"
                app:layout_constraintStart_toEndOf="@id/fragment_test_gdl_startEdge"
                app:layout_constraintEnd_toStartOf="@id/fragment_test_gdl_endEdge"
                app:layout_constraintTop_toBottomOf="@id/fragment_test_vp_"
                app:layout_constraintBottom_toTopOf="@id/fragment_test_gdl_bottomEdge"/>


        </androidx.constraintlayout.widget.ConstraintLayout>

viewpager_unselected_line.xml


    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@android:id/background"
            android:gravity="center_vertical|fill_horizontal">
            <shape android:shape="rectangle">
                <corners android:radius="8dp"/>
                <size android:height="3dp" />
                <solid android:color="@color/tab_default" />
            </shape>
        </item>
    </layer-list>

viewpager_selected_line.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@android:id/background"
            android:gravity="center_vertical|fill_horizontal">
            <shape android:shape="rectangle">
                <corners android:radius="8dp"/>
                <size android:height="5dp" />
                <solid android:color="@color/tab_selected" />
            </shape>
        </item>
    </layer-list>

viewpager_tab_line_selector.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector
        xmlns:android="http://schemas.android.com/apk/res/android">

        <item
            android:drawable="@drawable/viewpager_selected_line"
            android:state_selected="true"/>

        <item
            android:drawable="@drawable/viewpager_unselected_line"
            android:state_selected="false"
            android:state_focused="false"
            android:state_pressed="false"/>

    </selector>

enter image description here

Above Code Shown as like this. Image is here

android android-viewpager android-tablayout viewpagerindicator
1个回答
0
投票

尝试在下面的layerlistitem中为viewpager_selected_line.xml提供填充

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle">
            <corners android:radius="8dp"/>
            <size android:height="5dp" />
            <solid android:color="@color/tab_selected" />
            <padding android:left="3dp" android:right="3dp"/>
        </shape>
    </item>
</layer-list>
© www.soinside.com 2019 - 2024. All rights reserved.