紙墨設計文檔: Toolbar

jopen 10年前發布 | 24K 次閱讀安卓開發 Android開發移動開發

Toolbar 是位于內容上方的包含功能按鈕菜單的區域。當下面的內容滾動的時候，Toobar 會遮擋下面的內容并且內容不能穿過 Toolbar。

如何使用

在項目的 build.gradle 文件中添加 appcompat 和 design 庫：

Java

dependencies {  
  compile 'com.android.support:cardview-v7:X.X.X' // where X.X.X version
    compile 'com.android.support:design:X.X.X' // where X.X.X version
}

dependencies {  
  compile 'com.android.support:cardview-v7:X.X.X' // where X.X.X version
    compile 'com.android.support:design:X.X.X' // where X.X.X version
}

你的 Activity 繼承至 android.support.v7.app.AppCompatActivity ：

Java

public class MainActivity extends AppCompatActivity {  
    ...
}

public class MainActivity extends AppCompatActivity {  
    ...
}

在布局文件中使用 Toolbar

XHTML

<android.support.v7.widget.Toolbar  
    android:layout_width="fill_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    />

<android.support.v7.widget.Toolbar  
    android:layout_width="fill_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    />

如何修改樣式？

在你的 styles.xml 中定義自定義樣式：

XHTML

<style name="ToolbarTextAppearance">  
    <item name="android:fontFamily">sans-serif-condensed</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">2</item>
    <item name="android:shadowColor">?colorAccent</item>
</style>

<style name="ToolbarTextAppearance.Title">  
    <item name="android:textSize">20sp</item>
</style>

<style name="ToolbarTextAppearance.Subtitle">  
    <item name="android:textSize">14sp</item>
</style>

<style name="MyToolbar">  
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark</item>
    <item name="android:background">?colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>

<stylename="ToolbarTextAppearance">  
    <itemname="android:fontFamily">sans-serif-condensed</item>
    <itemname="android:textColor">@android:color/white</item>
    <itemname="android:shadowDx">1</item>
    <itemname="android:shadowDy">1</item>
    <itemname="android:shadowRadius">2</item>
    <itemname="android:shadowColor">?colorAccent</item>
</style>
 
<stylename="ToolbarTextAppearance.Title">  
    <itemname="android:textSize">20sp</item>
</style>
 
<stylename="ToolbarTextAppearance.Subtitle">  
    <itemname="android:textSize">14sp</item>
</style>
 
<stylename="MyToolbar">  
    <itemname="theme">@style/ThemeOverlay.AppCompat.Dark</item>
    <itemname="android:background">?colorPrimary</item>
    <itemname="android:elevation">4dp</item>
</style>

通過 style 屬性來使用該theme，還可以通過 titleTextAppearance 和 subtitleTextAppearance 屬性來修改標題和子標題的文字樣式。

XHTML

<android.support.v7.widget.Toolbar  
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    app:title="Toolbar"
    app:subtitle="Toolbars are amazing"
    app:titleTextAppearance="@style/ToolbarTextAppearance.Title"
    app:subtitleTextAppearance="@style/ToolbarTextAppearance.Subtitle"
    style="@style/MyToolbar"
    />

<android.support.v7.widget.Toolbar  
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    app:title="Toolbar"
    app:subtitle="Toolbars are amazing"
    app:titleTextAppearance="@style/ToolbarTextAppearance.Title"
    app:subtitleTextAppearance="@style/ToolbarTextAppearance.Subtitle"
    style="@style/MyToolbar"
    />

帶有圖標菜單的 Toolbar

通過 menu.xml 來創建圖標菜單：

XHTML

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

    <item
        android:id="@+id/action_favorite"
        android:icon="@drawable/ic_favorite"
        app:showAsAction="always"/>

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        app:showAsAction="always"/>

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never"/>
</menu>

<menuxmlns:android="http://schemas.android.com/apk/res/android"  
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools">
 
    <item
        android:id="@+id/action_favorite"
        android:icon="@drawable/ic_favorite"
        app:showAsAction="always"/>
 
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        app:showAsAction="always"/>
 
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never"/>
</menu>

通過 inflateMenu 函數來使用上面定義的圖標菜單：

Java

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
toolbar.inflateMenu(R.menu.main);

Toolbartoolbar = (Toolbar) findViewById(R.id.toolbar);  
toolbar.inflateMenu(R.menu.main);

通過實現并設置 Toolbar.OnMenuItemClickListener 來處理點擊事件：

Java

public class MyActivity extends AppCompatActivity  
    implements Toolbar.OnMenuItemClickListener {
        ...
toolbar.setOnMenuItemClickListener(this);       
   ...

     @Override
public boolean onMenuItemClick(MenuItem item) {  
    switch (item.getItemId()) {
        case R.id.action_favorite:
            Toast.makeText(this, "Favorite", Toast.LENGTH_SHORT).show();
            return true;

        case R.id.action_search:
            Toast.makeText(this, "Search", Toast.LENGTH_SHORT).show();
            return true;
    }

    return true;
}

public class MyActivityextends AppCompatActivity  
    implements Toolbar.OnMenuItemClickListener {
        ...
toolbar.setOnMenuItemClickListener(this);      
  ...
    
    @Override
public boolean onMenuItemClick(MenuItemitem) {  
    switch (item.getItemId()) {
        case R.id.action_favorite:
            Toast.makeText(this, "Favorite", Toast.LENGTH_SHORT).show();
            return true;
 
        case R.id.action_search:
            Toast.makeText(this, "Search", Toast.LENGTH_SHORT).show();
            return true;
    }
 
    return true;
}

帶有返回按鈕的 Toolbar

在你的 styles.xml 中定義自定義樣式：

XHTML

<style name="MyToolbar">  
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark</item>
    <item name="navigationIcon">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
    <item name="android:background">?colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>

<stylename="MyToolbar">  
    <itemname="theme">@style/ThemeOverlay.AppCompat.Dark</item>
    <itemname="navigationIcon">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
    <itemname="android:background">?colorPrimary</item>
    <itemname="android:elevation">4dp</item>
</style>

通過 style 屬性來使用該theme。

XHTML

<android.support.v7.widget.Toolbar  
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    app:title="Toolbar"
    app:subtitle="Toolbars are amazing"
    style="@style/MyToolbar"
    />

<android.support.v7.widget.Toolbar  
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    app:title="Toolbar"
    app:subtitle="Toolbars are amazing"
    style="@style/MyToolbar"
    />

處理返回按鈕點擊事件。

Java

toolbar.setNavigationOnClickListener(new View.OnClickListener() {  
    @Override
    public void onClick(View v) {
        onBackPressed();
    }
});

toolbar.setNavigationOnClickListener(new View.OnClickListener() {  
    @Override
    public void onClick(View v) {
        onBackPressed();
    }
});

高度更大的 Toolbar

在你的 styles.xml 中定義自定義樣式：

XHTML

<style name="MyToolbar">  
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark</item>
    <item name="navigationIcon">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
    <item name="titleMarginTop">?actionBarSize</item>
    <item name="android:background">?colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>

<stylename="MyToolbar">  
    <itemname="theme">@style/ThemeOverlay.AppCompat.Dark</item>
    <itemname="navigationIcon">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
    <itemname="titleMarginTop">?actionBarSize</item>
    <itemname="android:background">?colorPrimary</item>
    <itemname="android:elevation">4dp</item>
</style>

通過 style 屬性來使用該theme。

XHTML

<android.support.v7.widget.Toolbar  
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="112dp"
    app:title="Toolbar"
    app:subtitle="Toolbars are really cool"
    style="@style/MyToolbar"
    />

<android.support.v7.widget.Toolbar  
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="112dp"
    app:title="Toolbar"
    app:subtitle="Toolbars are really cool"
    style="@style/MyToolbar"
    />

來自： http://blog.chengyunfeng.com/?p=848

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1452652075355.html

安卓開發 Android開發移動開發

紙墨設計文檔: Toolbar

如何使用

如何修改樣式？

帶有圖標菜單的 Toolbar

帶有返回按鈕的 Toolbar

高度更大的 Toolbar

相關經驗

相關資訊

相關文檔

目錄