web-dev-qa-db-ja.com

TabLayoutテキストを太字にする

Android Design SupportライブラリのTabLayoutを使用しており、そのテキスト（タイトル）のスタイルを設定します。具体的には太字にします。これを実現するには[〜＃〜] xml [〜＃〜]のみ？

<Android.support.design.widget.TabLayout
Android:id="@+id/sliding_tabs"
Android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
Android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp" />
androidandroid-tablayout
12
Vahid Amiri

まず、これをstyles.xmlに追加する必要があります：

<style name="TabLayoutTextStyle">
    <item name="Android:textSize">16sp</item>
    <item name="Android:textStyle">bold</item>
</style>

テキストサイズを変更したくない場合でも、必須をスタイルに含めます。そうしないと、何も表示されません。

次に、TabLayout属性ではなくapp:tabTextAppearanceを使用して、スタイルをstyleに適用する必要があります！

<Android.support.design.widget.TabLayout
Android:id="@+id/sliding_tabs"
Android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
Android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp" 
app:tabTextAppearance="@style/TabLayoutTextStyle" />

Allcapsを有効にするには、TabLayoutTextStyleに以下を追加します。

<item name="Android:textAllCaps">true</item>
26
Vahid Amiri

次のスタイルを宣言する必要があります

<style name="TabLayoutTextStyle">
    <item name="Android:textSize">16sp</item>
    <item name="Android:textStyle">bold</item>
    <item name="Android:textColor">@color/black</item>
</style>

これで、次のように使用できます。

次に、スタイル属性ではなくapp：tabTextAppearanceを使用して、スタイルをTabLayoutに適用する必要があります。

<Android.support.design.widget.TabLayout
     Android:layout_width="match_parent"
     app:tabTextColor="@color/white"
     app:tabSelectedTextColor="@color/white"
     app:tabIndicatorColor="@color/accent"
     Android:layout_height="wrap_content"
     app:tabTextAppearance="@style/TabLayoutTextStyle" />
5
Armin Haghighi

  1. 1つのオプションは、styles.xmlに追加することです

      <item name="Android:textStyle">bold</item>

    親と同じ名前の「TextAppearance.Design.Tab」内

    <style name="TextAppearance.Design.Tab" parent="TextAppearance.Design.Tab">
  <item name="Android:textSize">15sp</item>
  <item name="Android:textStyle">bold</item>
  <item name="Android:textColor">?android:textColorSecondary</item>
  <item name="textAllCaps">true</item>
  <item name="Android:singleLine">true</item>
</style>

  2. その他のオプション：レイアウト内からスタイルに直接-myTabLayoutStyleと呼ぶことができます

     style="@style/myTabLayoutStyle"

そして、そのスタイルの内部では、テキストの外観のためだけに他のスタイルに再びリダイレクトします：

      <item name="tabTextAppearance">@style/myTabTextStyle</item>

そのように：

  <Android.support.design.widget.TabLayout
    Android:id="@+id/tab_layout"
    style="@style/myTabLayoutStyle"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_below="@+id/toolbar"
    Android:background="?attr/colorPrimary"
    Android:elevation="600dp"
    Android:minHeight="?attr/actionBarSize"
    app:tabGravity="fill"
    Android:singleLine="true"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

styles.xml内：

  <style name="myTabLayoutStyle" parent="Widget.Design.TabLayout">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabPaddingStart">3dp</item>
    <item name="tabPaddingEnd">3dp</item>
    <item name="Android:singleLine">true</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
    <item name="tabTextAppearance">@style/myTabTextStyle</item>
  </style>

   <style name="myTabTextStyle">
       <item name="Android:textSize">15sp</item>
       <item name="Android:textStyle">bold</item>
       <item name="Android:textColor">?android:textColorSecondary</item>
       <item name="textAllCaps">true</item>
       <item name="Android:singleLine">true</item>
  </style>
3
Udi Reshef

Styles.xmlにTabLayoutテキストスタイルを追加する

<style name="TabLayoutTextStyle">
    <item name="Android:textStyle">bold</item>
</style>

また、TabLayoutTextStyleをスタイルとしてTabLayoutプロパティに設定します。

<Android.support.design.widget.TabLayout
Android:id="@+id/sliding_tabs"
Android:layout_width="match_parent"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="@color/accent"
Android:layout_height="wrap_content"
app:tabIndicatorHeight="3dp" 
style="@style/TabLayoutTextStyle" />
0
Love Bdsobuj

これはこれを行う正しい方法です。

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:baselineAligned="false">

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tablayout"
        Android:layout_width="match_parent"
        Android:layout_height="50dp"
        app:tabTextAppearance="@style/TextAppearance.Bold"
        app:tabTextColor="@color/grey"
        app:tabSelectedTextColor="@color/black" />

</LinearLayout>
0
JPM