วิธีเปลี่ยนสีและความสูงของตัวบ่งชี้ TabLayout ใหม่

ฉันกำลังเล่นกับสิ่งใหม่android.support.design.widget.TabLayoutและพบปัญหาในการกำหนดคลาสไม่มีวิธีใดในการเปลี่ยนสีตัวบ่งชี้และความสูงเริ่มต้น

จากการวิจัยพบว่าสีตัวบ่งชี้เริ่มต้นถูกนำมาจาก AppTheme โดยเฉพาะจากที่นี่:

<item name="colorAccent">#FF4081</item>

ตอนนี้ในกรณีของฉันถ้าฉันเปลี่ยนcolorAccentมันจะส่งผลต่อมุมมองอื่น ๆ ทั้งหมดที่ใช้ค่านี้เป็นสีพื้นหลังเช่น ProgressBar

ตอนนี้มีวิธีใดในการเปลี่ยน indicatorColor เป็นอย่างอื่นนอกเหนือจาก the colorAccent?

มีปัญหาที่ TabLayout ใหม่ใช้สีตัวบ่งชี้จากค่าcolorAccentฉันตัดสินใจเจาะลึกการandroid.support.design.widget.TabLayoutใช้งานโดยพบว่าไม่มีวิธีสาธารณะในการปรับแต่งสิ่งนี้ อย่างไรก็ตามฉันพบข้อกำหนดลักษณะนี้ของ TabLayout:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

เมื่อมีข้อกำหนดลักษณะนี้ตอนนี้เราสามารถปรับแต่ง TabLayout ได้ดังนี้:

<android.support.design.widget.TabLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@id/pages_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabIndicatorHeight="4dp"/>

และแก้ไขปัญหาได้ทั้งสีและความสูงของตัวบ่งชี้แท็บสามารถเปลี่ยนได้จากค่าเริ่มต้น

ด้วยไลบรารีสนับสนุนการออกแบบคุณสามารถเปลี่ยนได้ใน xml:

ในการเปลี่ยนสีของตัวบ่งชี้ TabLayout:

app:tabIndicatorColor="@color/color"

ในการเปลี่ยนความสูงของตัวบ่งชี้ TabLayout:

app:tabIndicatorHeight="4dp"

เนื่องจากฉันไม่สามารถโพสต์ติดตามความคิดเห็นของนักพัฒนา Android ได้นี่คือคำตอบที่อัปเดตสำหรับคนอื่น ๆ ที่ต้องการตั้งค่าสีตัวบ่งชี้แท็บที่เลือกโดยใช้โปรแกรม:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

ในทำนองเดียวกันสำหรับความสูง:

tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

วิธีการเหล่านี้เพิ่งถูกเพิ่มเข้าไปในการแก้ไข 23.0.0 ของไลบรารี Supportซึ่งเป็นเหตุผลว่าทำไมคำตอบของ Soheil Setayeshi จึงใช้การสะท้อนกลับ

app:tabIndicatorColor="@android:color/white"

ด้วยไลบรารีการสนับสนุน desing v23คุณสามารถตั้งค่าสีและความสูงโดยทางโปรแกรมได้

ใช้สำหรับความสูง:

TabLayout.setSelectedTabIndicatorHeight(int height)

นี่Javadoc อย่างเป็นทางการ

เพียงใช้สำหรับสี:

TabLayout.setSelectedTabIndicatorColor(int color)

นี่Javadoc อย่างเป็นทางการ

คุณจะพบข้อมูลในGoogle Trackerได้ที่นี่

ในการเปลี่ยนสีและความสูงของตัวบ่งชี้โดยใช้โปรแกรมคุณสามารถใช้การสะท้อน ตัวอย่างเช่นรหัสสีตัวบ่งชี้ใช้ด้านล่าง:

        try {
            Field field = TabLayout.class.getDeclaredField("mTabStrip");
            field.setAccessible(true);
            Object ob = field.get(tabLayout);
            Class<?> c = Class.forName("android.support.design.widget.TabLayout$SlidingTabStrip");
            Method method = c.getDeclaredMethod("setSelectedIndicatorColor", int.class);
            method.setAccessible(true);
            method.invoke(ob, Color.RED);//now its ok
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

และหากต้องการเปลี่ยนความสูงของตัวบ่งชี้ให้ใช้ "setSelectedIndicatorHeight" แทน "setSelectedIndicatorColor" จากนั้นเรียกใช้ตามความสูงที่คุณต้องการ

Foto indicator ใช้สิ่งนี้:

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color

จาก xml:

app:tabIndicatorColor="#fff"

จาก java:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

คุณสามารถเปลี่ยนแปลงได้โดยใช้ xml

app:tabIndicatorColor="#fff"

เพียงใส่บรรทัดนี้ในรหัสของคุณ หากคุณเปลี่ยนสีให้เปลี่ยนค่าสีในวงเล็บ

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

Android ทำให้เป็นเรื่องง่าย

public void setTabTextColors(int normalColor, int selectedColor) {
    setTabTextColors(createColorStateList(normalColor, selectedColor));
}

ดังนั้นเราก็พูด

mycooltablayout.setTabTextColors(Color.parseColor("#1464f4"), Color.parseColor("#880088"));

นั่นจะทำให้เรามีสีฟ้าปกติและสีม่วงที่เลือก

ตอนนี้เราตั้งค่าความสูง

public void setSelectedTabIndicatorHeight(int height) {
    mTabStrip.setSelectedIndicatorHeight(height);
}

และสำหรับความสูงเราว่า

mycooltablayout.setSelectedIndicatorHeight(6);