안드로이드 디자인 TabLayout 탭의 텍스트 크기


97

디자인 라이브러리 tablayout (android.support.design.widget.TabLayout) 탭의 텍스트 크기를 변경하는 데 어려움이 있습니다.

TabLayout에서 tabTextAppearance를 할당하여 변경했습니다.

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

다음 스타일

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

하지만 두 가지 부작용이 있습니다.

1) 선택한 탭의 강조 색상이 손실되었습니다.

2) 탭 텍스트는 더 이상 대문자로 표시되지 않습니다.

답변:


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

사용은 TabLayout이렇게

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

잘 작동합니다. 지원 lib 25.1.0을 사용하고 있습니다.
Sufian

지원 라이브러리 25.3.1에서 작동
Luis

뛰어난 thax 형제는 ,,, LIB 25.1.0에서의 작업 내 시간을 절약
쿠날 Dharaiya

@Sufian, 그것은 나를 위해 작동하지 않으며 나는 당신과 동일한 지원 버전을 사용하고 있습니다 (25.1.0). 왜 그런지 아세요?

2
탭 텍스트가 여러 줄인 경우. 그런 다음 tabLayout은 다른 필드를 사용하여 텍스트 크기를 설정합니다. 솔루션 여기 내 대답을 체크 아웃하십시오 : stackoverflow.com/a/48797329/700693
EVREN Ozturk

46

했던 것처럼 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 2 개의 textview가있는 linearlayout 탭에서 사용자 정의 레이아웃을 사용했지만 탭 선택시 하나의 textview 색상 만 변경하고 싶습니까?
Erum

1
<item name = "android : textAllCaps"> false </ item>를 설정하려면 여기에 두 문자열 외에 하나 이상의 문자열이 있어야합니다. <item name = "textAllCaps"> false </ item>
CodeToLife

24

API 22 및 23에서 작업하기이 스타일 만들기 :

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

그리고 그것을 tablayout에 적용하십시오.

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

21

다음과 같이하십시오.

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"에 false를 입력하십시오.

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);

            }
        }
    }
}

이 코드는 tablayout을 사용하여 작동합니다. 글꼴 크기를 변경하고 글꼴 스타일도 변경합니다.

이것은 또한 여러분이이 링크를 확인하는 데 도움이 될 것입니다

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

이 코드는 Tablayout 변경 텍스트 색상, 유형 얼굴 (글꼴 스타일) 및 텍스트 크기에 대해 작동합니다.


0

나는 Android Pie를 사용하고 있었고 아무것도 작동하지 않는 것처럼 보였으므로 app : 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.