web-dev-qa-db-ja.com

ナビゲーションビューのアイテムのテキストサイズを変更するにはどうすればよいですか?

Google 最近リリースされたAndroid.support.design.widget.NavigationViewライブラリの一部としてのcom.Android.support:design:22.2.0ウィジェット。NavigationDrawerの作成プロセスを大幅に簡素化(および標準化)します。

ただし、 設計仕様 によると、リスト項目は Roboto Medium、14sp、87%#000000 である必要があります。 NavigationViewは、これをカスタマイズするためのtextSizeまたはtextStyleを公開しません。

Material design specsFont style info

Googleが提供するNavigationViewを使用して(または他の方法でカスタマイズする)正しい設計仕様を維持することに専心している場合、私のオプションは何ですか?

56
jay

Android Support Library 22.2.1以降、GoogleはNavigationViewのアイテムのデフォルトのtextSizeを16spから14spに変更しました。これはMaterial Designのガイドラインに適しています。ただし、場合によっては(たとえば、中国語をサポートしたい場合)、textSizeが大きい方が良いようです。解決策は簡単です。

  1. app:theme="@style/yourStyle.Drawer"をlayout.xmlのNavigationViewに追加します
  2. styles.xmlで、Android:textSize="16sp"をスタイルyourStyle.Drawerに追加します
52
ywwynm

ファイルに新しいスタイルを作成しますapp/src/main/res/values/styles.xml

<style name="NavigationDrawerStyle">

        <item name="Android:textSize">20sp</item><!-- text size in menu-->

        <!-- item size in menu-->
        <item name="Android:listPreferredItemHeightSmall">40dp</item>
        <item name="listPreferredItemHeightSmall">40dp</item>

        <!-- item padding left in menu-->
        <item name="Android:listPreferredItemPaddingLeft">8dp</item>
        <item name="listPreferredItemPaddingLeft">8dp</item>

        <!-- item padding right in menu-->
        <item name="Android:listPreferredItemPaddingRight">8dp</item>
        <item name="listPreferredItemPaddingRight">8dp</item>
    </style>

main_layout.xmlに追加します

  <Android.support.design.widget.NavigationView
       ...
        app:theme="@style/NavigationDrawerStyle"
       ....>


    </Android.support.design.widget.NavigationView>

ナビゲーション項目のすべてのパラメーター(変更可能)はここにあります(ファイル...\sdk\extras\Android\support\design\res\layout\design_navigation_item.xmlへのパス)

design_navigation_item.xml

<Android.support.design.internal.NavigationMenuItemView
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/listPreferredItemHeightSmall"
    Android:paddingLeft="?attr/listPreferredItemPaddingLeft"
    Android:paddingRight="?attr/listPreferredItemPaddingRight"
    Android:drawablePadding="@dimen/navigation_icon_padding"
    Android:gravity="center_vertical|start"
    Android:maxLines="1"
    Android:fontFamily="sans-serif-thin"
    Android:textSize="22sp"
    Android:textAppearance="?attr/textAppearanceListItem" />

また、*.xmlファイル(...\sdk\extras\Android\support\design\res\layout\design_navigation_item.xmlからファイルをコピー)をオーバーライドして、app/src/main/res/layoutフォルダーで同じdesign_navigation_item.xmlという名前のレイアウトを作成することもできます。

オーバーライドできるすべてのレイアウトはここにあります...\sdk\extras\Android\support\design\res\layout\

design_layout_snackbar.xml
design_layout_snackbar_include.xml
design_layout_tab_icon.xml
design_layout_tab_text.xml
design_navigation_item.xml
design_navigation_item_header.xml
design_navigation_item_separator.xml
design_navigation_item_subheader.xml
design_navigation_menu.xml

[UPDATE]com.Android.support:design-{version} libの各バージョンには、オーバーライドするさまざまな項目があります。必要なものをすべてチェック

enter image description here

101
NickUnuchek

Style.xmlで、テキストの色からサイズ、フォントまで、すべてをカスタマイズできます。

<style name="NavDrawerTextStyle" parent="Base.TextAppearance.AppCompat">
    <item name="Android:textColor">@color/colorPrimaryDark</item>
    <item name="Android:textSize">16sp</item>
    <item name="Android:textStyle">bold</item>
</style>

そして、NavigationViewで:

<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true"
tools:openDrawer="start">

<Android.support.design.widget.NavigationView
    ...
    Android:itemTextAppearance="@style/NavDrawerTextStyle"
     />
53

xmlファイル内でこの属性を使用できます

app:itemTextAppearance="?android:attr/textAppearanceMedium"

または小さなテキストの場合

app:itemTextAppearance="?android:attr/textAppearance"

または大きなテキストの場合

app:itemTextAppearance="?android:attr/textAppearanceLarge"
14
Mostafa Anter

これは私のために働いた:

activity_main.xml

<Android.support.design.widget.NavigationView
    Android:id="@+id/navigation_view"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:theme="@style/NavigationDrawerStyle"
    app:headerLayout="@layout/navdrawer_header"
    app:menu="@menu/navdrawer_menu" />

styles.xml

<style name="NavigationDrawerStyle">
    <item name="Android:textSize">16sp</item>
</style>
7
Philip Herbert

ソースコード を精査して、このレイアウトファイルを見つけました

/platform/frameworks/support/.../design/res/layout/design_drawer_item.xml

次の属性を持つ

<Android.support.design.internal.NavigationMenuItemView
    ...
    Android:textAppearance="?attr/textAppearanceListItem"

つまり、プロジェクトのtextAppearanceListItemスタイルをオーバーライドするだけでした。


res/values/styles.xml

<style name="AppTheme" ... >
    ...
    <item name="textAppearanceListItem">@style/list_item_appearance</item>
</style>

<style name="list_item_appearance">
    <item name="Android:textSize">14sp</item>
    <item name="Android:fontFamily">sans-serif-medium</item>
</style>

これが他にどのような影響を与えるかは完全にはわかりませんが、誰かがより良い答えを持っているなら、代わりにそれを受け入れたいです!

6
jay

たぶんそれが役立つかもしれません。最近、プログラムでこれを行う必要がありました。私はこのクラスを使用しました:

public class CustomTypefaceSpan extends TypefaceSpan {

private final Typeface newType;
private final float newSp;

public CustomTypefaceSpan(String family, Typeface type, float sp) {
    super(family);
    newType = type;
    newSp = sp;
}

@Override
public void updateDrawState(TextPaint ds) {
    applyCustomTypeFace(ds, newType, newSp);
}

@Override
public void updateMeasureState(TextPaint Paint) {
    applyCustomTypeFace(Paint, newType, newSp);
}

private static void applyCustomTypeFace(Paint paint, Typeface tf, float sp) {
    int oldStyle;
    Typeface old = Paint.getTypeface();
    if (old == null) {
        oldStyle = 0;
    } else {
        oldStyle = old.getStyle();
    }

    int fake = oldStyle & ~tf.getStyle();
    if ((fake & Typeface.BOLD) != 0) {
        Paint.setFakeBoldText(true);
    }

    if ((fake & Typeface.ITALIC) != 0) {
        Paint.setTextSkewX(-0.25f);
    }

    Paint.setTextSize(sp);
    Paint.setTypeface(tf);
}

@SuppressWarnings("unused")
public static final Parcelable.Creator<CustomTypefaceSpan> CREATOR = new Parcelable.Creator<CustomTypefaceSpan>() {
    @Override
    public CustomTypefaceSpan createFromParcel(Parcel in) {
        return null;
    }

    @Override
    public CustomTypefaceSpan[] newArray(int size) {
        return new CustomTypefaceSpan[size];
    }
};
}

次に、私はこのように使用しました:

// This is for color
SpannableString s = new SpannableString(item.getTitle().toString());
                    s.setSpan(new ForegroundColorSpan(Color.RED), 0, s.length(), 0);

// This is for typeface and size
Typeface typeFace = Functions.getTypeface(this, "Avenir");

if (typeFace != null) {
    int size = 19;
    float scaledSizeInPixels = size * getResources().getDisplayMetrics().scaledDensity;
    CustomTypefaceSpan spanTypeFace = new CustomTypefaceSpan(item.getTitle().toString(), typeFace, scaledSizeInPixels);
    s.setSpan(spanTypeFace, 0, s.length(), 0);
}
item.setTitle(s);

お役に立てれば。

3

ナビゲーションバーのアダプターレイアウトのリスト:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical">

<RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content" 
    Android:padding="10dp"
    Android:orientation="horizontal"
    Android:background="@drawable/pressed_state">

    <TextView
        Android:id="@+id/textView_list_item"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerVertical="true"
        Android:layout_toRightOf="@+id/imageView_icons"
        Android:textStyle="bold"
        Android:layout_marginLeft="10dp"
        Android:textColor="@color/white"
        Android:textSize="17sp" />


    <ImageView 
        Android:id="@+id/list_adapter_image"
        Android:layout_width="10dp"
        Android:layout_height="10dp"
        Android:layout_centerVertical="true"
        Android:layout_alignParentRight="true"
        Android:visibility="visible"
        Android:layout_marginRight="50dp"
        Android:background="@drawable/circle_orange"/>

</RelativeLayout>

<LinearLayout 
    Android:layout_height="1dp"
    Android:layout_width="match_parent"
    Android:background="#EC1294"></LinearLayout>

</LinearLayout>

RelativeLayoutのこのパラメーターは、背景色を設定します-> Android:background = "@ drawable/pressed_state"

この「pressed_state.xml」をドローアブルフォルダーに作成します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android" >

 <item Android:drawable="@color/light_blue" Android:state_pressed="true"/>

英語を失礼します。

0
Chaudhary Amar
  1. Values\dimens.xmlを開くか作成します
  2. このコードを追加してください:
<dimen name="design_bottom_navigation_text_size" tools:override="true">11sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>

うまくいくはず

0

Activity_main.xmlに移動し、デザインでnav_viewを選択すると、itemTextAppearanceおよびitemTextColor次のように navigation_view_item_style

0
poornima