web-dev-qa-db-ja.com

Androidツールバーのスタイル

LollipopプロジェクトにToolbarを追加しました。ただし、Toolbarのスタイリングに問題があります。 Toolbarのタイトルは太字になっているようですが、斜体にしてください。これを達成する方法はありますか？ actionbar-styleで遊んでみましたが、うまくいきませんでした。

私はToolbarにapp:theme="@style/toolbar"を使用してスタイルを設定しました。私の@style/toolbar（親ThemeOverlay.AppCompat.ActionBar）は、良い結果が得られない場所で遊んでいます。

androidstylesandroid-5.0-lollipopandroid-toolbar
14
Kenneth

たとえば、ツールバー内にTextViewを追加できます。

<Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/re/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/toolbar"
    Android:layout_height="wrap_content"
    Android:layout_width="match_parent"
    Android:minHeight="?attr/actionBarSize"
    Android:background="?attr/colorPrimary" >

    <TextView
        Android:id="@+id/title"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:textStyle="italic" />

</Android.support.v7.widget.Toolbar>
6
Dark Leonhart

これは本当に簡単です。ツールバーにはsetTitleTextAppearance（）というメソッドがあり、誰もが見落としているようです。次のように、styles.xmlでカスタムtextAppearanceを定義するだけです。

    <style name="MyTitleTextApperance" parent="@Android:style/TextAppearance.Medium">
    <item name="Android:textColor">@Android:color/white</item>
    <item name="Android:textSize">20sp</item>
</style>

そして、あなたのコードでは、あなたはただ呼び出すだけです：

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitleTextAppearance(this, R.style.MyTitleTextApperance);

そして出来上がり！

10
jasonhudgins

ToolBarのタイトルはスタイル設定可能です。カスタマイズはテーマで行う必要があります。例を挙げましょう。

ツールバーのレイアウト：

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.Toolbar
    style="@style/ToolBarStyle.Event"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="?attr/colorPrimary"
    Android:minHeight="@dimen/abc_action_bar_default_height_material" />

スタイル：

<style name="ToolBarStyle" parent="ToolBarStyle.Base"/>

<style name="ToolBarStyle.Base" parent="">
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

<style name="ToolBarStyle.Event" parent="ToolBarStyle">
    <item name="titleTextAppearance">@style/TextAppearance.Widget.Event.Toolbar.Title</item>
</style>

<style name="TextAppearance.Widget.Event.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <!--Any text styling can be done here-->
    <item name="Android:textStyle">normal</item>
    <item name="Android:textSize">@dimen/event_title_text_size</item>
</style>
6
Binoy Babu

上記の問題は、Lollipopバージョンでのみ発生し、KitKat以前のバージョンでは発生しません。 Lollipopはテキストスタイルに従わず、独自のTitleTextAppearanceを使用します。したがって、自分のTextViewに自分のToolbar子を追加する場合でも（以下を参照）、Android.support.v7.widget.Toolbarは引き続きスタイルをオーバーライドします。

<Android.support.v7.widget.Toolbar
    Android:id="@+id/toolbar"
    Android:theme="@style/someToolbarStyle"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <TextView
        Android:id="@+id/title"
        Android:textAppearance="@style/TextAppearance.AppCompat.Title"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

</Android.support.v7.widget.Toolbar>

最後にこれを解決するには、タイトルに独自のTextViewを入れ、setTitleのToolbarメソッドをオーバーライドして、Lollipopの事前定義済みTitleTextAppearanceをスキップします。

public class YourCustomToolbar extends Toolbar {

    public YourCustomToolbar (Context context) {
        super(context);
    }

    public YourCustomToolbar (Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public YourCustomToolbar (Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
     }

    @Override
    public void setTitle(CharSequence title) {
        ((TextView) findViewById(R.id.title)).setText(title);
    }

    @Override
    public void setTitle(int title) {
        ((TextView) findViewById(R.id.title)).setText(title);
    }
}
2
Dynameyes