ฉันจะเปลี่ยนสีพื้นหลังของแท็บเมื่อใช้ TabLayout ได้อย่างไร

นี่คือรหัสของฉันในกิจกรรมหลัก

public class FilterActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_filter);

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    PageAdapter pageAdapter = new PageAdapter(getSupportFragmentManager(), FilterActivity.this);
    viewPager.setAdapter(pageAdapter);

    // Give the TabLayout the ViewPager
    final TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);



  }
}

และนี่คือรหัสของฉันใน XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar">
    </include>

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="fill_parent"
        style="@style/MyCustomTabLayout"
        android:layout_height="48dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

ฉันต้องการเปลี่ยนสีพื้นหลังของแท็บหนึ่งเมื่อถูกเลือก

สิ่งที่ได้ผลสำหรับฉันในที่สุดก็คล้ายกับสิ่งที่ @ 如果我是 DJ แนะนำ แต่tabBackgroundควรอยู่ในlayoutไฟล์ไม่ใช่อยู่ในstyleดังนั้นจึงดูเหมือนว่า:

res/layout/somefile.xml:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

และตัวเลือก res/drawable/tab_color_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

คุณสามารถลองสิ่งนี้:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabBackground">@drawable/background</item>
</style>

ในไฟล์ xml พื้นหลังของคุณ:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@color/white" />
    <item android:drawable="@color/black" />
</selector>

เพิ่ม atribute ใน xml:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

และสร้างในโฟลเดอร์ที่วาดได้ tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

คุณลองตรวจสอบAPI แล้วหรือยัง?

คุณจะต้องสร้าง Listener สำหรับOnTabSelectedListenerเหตุการณ์จากนั้นเมื่อผู้ใช้เลือกแท็บใด ๆ คุณควรตรวจสอบว่าเป็นแท็บที่ถูกต้องหรือไม่จากนั้นเปลี่ยนสีพื้นหลังโดยใช้tabLayout.setBackgroundColor(int color)หรือหากไม่ใช่แท็บที่ถูกต้องให้แน่ใจว่าคุณได้เปลี่ยนกลับไปที่แท็บ สีปกติอีกครั้งด้วยวิธีการเดียวกัน

คุณสามารถมีได้ใน xml

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabTextColor="@color/colorGray"
        app:tabSelectedTextColor="@color/colorWhite"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

เมื่อฉันพบตัวเลือกที่ดีที่สุดและเหมาะสมสำหรับฉันและมันจะทำงานร่วมกับแอนิเมชั่นด้วย

คุณสามารถใช้indicatorตัวเองเป็นพื้นหลังได้

คุณสามารถตั้งค่าapp:tabIndicatorGravity="stretch"แอตทริบิวต์เพื่อใช้เป็นพื้นหลังได้

ตัวอย่าง:

   <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorGravity="stretch"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/colorAccent">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chef" />


        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="User" />

    </android.support.design.widget.TabLayout>

หวังว่ามันจะช่วยคุณได้

คุณสามารถเปลี่ยนพื้นหลังหรือสีระลอกของแต่ละแท็บได้ดังนี้:

    //set ripple color for each tab
    for(int n = 0; n < mTabLayout.getTabCount(); n++){

        View tab = ((ViewGroup)mTabLayout.getChildAt(0)).getChildAt(n);

        if(tab != null && tab.getBackground() instanceof RippleDrawable){
            RippleDrawable rippleDrawable = (RippleDrawable)tab.getBackground();
            if (rippleDrawable != null) {
                rippleDrawable.setColor(ColorStateList.valueOf(rippleColor));
            }
        }
    }

หลังจากยุ่งเกี่ยวกับเรื่องนี้ฉันได้รูปลักษณ์ที่ต้องการ (อย่างน้อยก็ในโปรแกรมจำลอง) และมันยังคงเอฟเฟกต์ระลอก

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_selector"
    app:tabIconTint="@drawable/tab_selector"
    app:tabIconTintMode="src_atop"
    app:tabTextColor="@drawable/tab_selector" />

และ@drawable/tab_selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:drawable="@color/colorPrimaryDark" android:state_selected="true" />
    <item android:color="@color/colorPrimaryDark" android:drawable="@color/colorPrimary" />
</selector>

FYI: นี่คือสิ่งที่อีมูเลเตอร์แสดงให้เห็นก่อนที่ฉันจะเพิ่มcolorอาร์กิวเมนต์ให้@drawable/tab_selector:

คุณสามารถเปลี่ยนสีพื้นหลังของแท็บโดยใช้แอตทริบิวต์นี้

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
'android:background="@color/primary_color"/>'

วิธีหนึ่งที่ฉันสามารถหาได้คือการใช้ตัวบ่งชี้แท็บดังนี้:

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@color/normal_unselected_color"
    app:tabIndicatorColor="@color/selected_color"
    app:tabIndicatorGravity="center"
    app:tabIndicatorHeight="150dp"
    app:tabSelectedTextColor="@color/selected_text_color"
    app:tabTextColor="@color/unselected_text_color">

    ..... tab items here .....

</com.google.android.material.tabs.TabLayout>

เคล็ดลับคือการ:

• ทำให้ตัวบ่งชี้แท็บจัดตำแหน่งตรงกลาง
• ทำให้ความสูงของตัวบ่งชี้มีขนาดใหญ่เพียงพอเพื่อให้ครอบคลุมทั้งแถบ

นอกจากนี้ยังดูแลภาพเคลื่อนไหวที่ราบรื่นขณะสลับแท็บ

วิธีแก้ไขที่ง่ายที่สุดวิธีหนึ่งคือการเปลี่ยน colorPrimary จากไฟล์ colors.xml