ขนาดข้อความของแท็บ TabLayout การออกแบบ Android


100

ฉันมีปัญหาในการเปลี่ยนขนาดข้อความของแท็บของแท็บเค้าโครงไลบรารีการออกแบบ (android.support.design.widget.TabLayout)

ฉันจัดการเพื่อเปลี่ยนแปลงโดยกำหนด tabTextAppearance ใน TabLayout

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

รูปแบบต่อไปนี้

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
    <item name="android:textSize">14sp</item>
</style>

แต่ฉันมีผลข้างเคียง 2 อย่าง:

1) ฉันทำสีเน้นเสียงของแท็บที่เลือกหายไป

2) ข้อความแท็บจะไม่เป็นตัวพิมพ์ใหญ่อีกต่อไป

คำตอบ:


195
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">16sp</item>
</style>

การใช้งานอยู่ในTabLayoutลักษณะนี้

<android.support.design.widget.TabLayout
            app:tabTextAppearance="@style/MineCustomTabText"
            ...
            />

ทำงานได้ดี ฉันใช้ support lib 25.1.0
Sufian

ทำงานบนไลบรารีสนับสนุน 25.3.1
Luis

thax ที่ยอดเยี่ยมคุณประหยัดเวลาของฉัน, มันทำงานบน lib 25.1.0
Kunal Dharaiya

@ ซูเฟียนมันใช้งานไม่ได้สำหรับฉันและฉันใช้เวอร์ชันรองรับเดียวกับคุณ (25.1.0) คิดว่าทำไม?
แซม

3
หากข้อความในแท็บของคุณเป็นแบบหลายบรรทัด จากนั้นแท็บจัดเค้าโครงโดยใช้ฟิลด์อื่นเพื่อกำหนดขนาดข้อความ โปรดตรวจสอบคำตอบของฉันที่นี่สำหรับวิธีแก้ไข: stackoverflow.com/a/48797329/700693
Evren Ozturk

47

ใช้ tabTextAppearance เหมือนที่เคยทำ

1) เพื่อแก้ไขผลข้างเคียงของอักษรตัวใหญ่ให้เพิ่ม textAllCap ในสไตล์ของคุณ:

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
    <item name="android:textSize">14sp</item>
    <item name="android:textAllCaps">true</item>
</style>

2) เพื่อแก้ไขผลข้างเคียงสีของแท็บที่เลือกเพิ่มใน TabLayout xml แอตทริบิวต์ไลบรารีต่อไปนี้:

app:tabSelectedTextColor="@color/color1"
app:tabTextColor="@color/color2" 

หวังว่านี่จะช่วยได้


ตอนนี้ใช้งานได้เหมือนมีเสน่ห์ ขอบคุณ u2gilles สำหรับคำตอบของคุณ
Malko

@ u2gilles ฉันใช้รูปแบบที่กำหนดเองในแท็บที่ linearlayout มี 2 textviews แต่ฉันต้องการเปลี่ยนสี textview เพียงสีเดียวในการเลือกแท็บ?
Erum

1
หากคุณต้องการตั้งค่า <item name = "android: textAllCaps"> false </item> ที่นี่ควรเป็นอีกหนึ่งสตริงนอกเหนือจาก twos: <item name = "textAllCaps"> false </item>
CodeToLife

25

ทำงานกับ api 22 & 23 สร้างสไตล์นี้:

<style name="TabLayoutStyle" parent="Base.Widget.Design.TabLayout">
    <item name="android:textSize">12sp</item>
    <item name="android:textAllCaps">true</item>
</style>

และนำไปใช้กับแท็บเลย์เอาต์ของคุณ:

<android.support.design.widget.TabLayout
            android:id="@+id/contentTabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@drawable/list_gray_border"
            app:tabTextAppearance="@style/TabLayoutStyle"
            app:tabSelectedTextColor="@color/colorPrimaryDark"
            app:tabTextColor="@color/colorGrey"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

22

ทำดังต่อไปนี้

1. เพิ่มสไตล์ให้กับ XML

    <style name="MyTabLayoutTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">14sp</item>
    </style>

2. ใช้สไตล์

ค้นหาเค้าโครงที่มี TabLayout และเพิ่มสไตล์ บรรทัดที่เพิ่มเป็นตัวหนา

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabTextAppearance="@style/MyTabLayoutTextAppearance" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

18

ลองสนิปที่ระบุไว้ด้านล่างมันใช้ได้กับฉันด้วย

ในเลย์เอาต์ของฉันxmlที่ฉันมีของฉันTabLayoutได้เพิ่มสไตล์ที่TabLayoutคล้ายกันด้านล่าง:

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    style="@style/MyCustomTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="fill"
    app:tabMode="fixed" />

และในของstyle.xmlฉันฉันได้กำหนดสไตล์ที่ใช้ใน xml เลย์เอาต์ของฉันตรวจสอบรหัสสำหรับสไตล์ที่เพิ่มด้านล่าง:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="android:background">YOUR BACKGROUND COLOR</item>
    <item name="tabTextAppearance">@style/MyCustomTabText</item>
    <item name="tabSelectedTextColor">SELECTED TAB TEXT COLOR</item>
    <item name="tabIndicatorColor">SELECTED TAB INDICATOR COLOR</item>
</style>

<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
    <item name="android:textSize">YOUR TEXT SIZE</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@android:color/white</item>
</style>

ฉันหวังว่ามันจะได้ผลสำหรับคุณ .....


15

ฉันมีปัญหาที่คล้ายกันและวิธีแก้ปัญหาที่คล้ายกัน:

1) ขนาด

ใน xml คุณมี TabLayout

        <android.support.design.widget.TabLayout
            ...
            app:tabTextAppearance="@style/CustomTextStyle"
            ...
        />

แล้วอย่างมีสไตล์

        <style name="CustomTextStyle" parent="@android:style/TextAppearance.Widget.TabWidget">
           <item name="android:textSize">16sp</item>
           <item name="android:textAllCaps">true</item>
        </style>

หากคุณไม่ต้องการให้อักขระที่เป็นตัวพิมพ์ใหญ่ใส่เท็จใน "android: textAllCaps"

2) สีข้อความของแท็บที่เลือกหรือไม่ได้เลือก

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector,null));
    } else {
        tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector));
    }

จากนั้นใน res / color / tab_selector.xml

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


8
TabLayout  tab_layout = (TabLayout)findViewById(R.id.tab_Layout_);

private void changeTabsFont() {
    Typeface font = Typeface.createFromAsset(getActivity().getAssets(), "fonts/"+ Constants.FontStyle);
    ViewGroup vg = (ViewGroup) tab_layout.getChildAt(0);
    int tabsCount = vg.getChildCount();
    for (int j = 0; j < tabsCount; j++) {
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTypeface(font);
                ((TextView) tabViewChild).setTextSize(15);

            }
        }
    }
}

รหัสนี้ใช้ได้สำหรับฉันโดยใช้แท็บเลย์เอาต์ มันจะเปลี่ยนขนาดของแบบอักษรและเปลี่ยนรูปแบบตัวอักษร

สิ่งนี้จะช่วยพวกคุณได้เช่นกันโปรดตรวจสอบลิงค์นี้

https://stackoverflow.com/a/43156384/5973946

รหัสนี้ใช้ได้กับ Tablayout เปลี่ยนสีข้อความพิมพ์ใบหน้า (แบบอักษร) และขนาดตัวอักษร


0

ฉันใช้ Android Pie และดูเหมือนจะไม่มีอะไรได้ผลดังนั้นฉันจึงเล่นกับแอพ: คุณลักษณะ tabTextAppearance ฉันรู้ว่ามันไม่ใช่คำตอบที่สมบูรณ์แบบ แต่อาจช่วยใครบางคนได้

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabTextAppearance="@style/TextAppearance.AppCompat.Caption" />
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.