碼上歡樂
相關內容    簡體    繁體

Androd Toolbar 的簡單使用（轉）

本文轉載自   查看原文   2015-03-03 16:13   3033    Android記錄點滴

14年Android開發者大會提出了Android5.0 系統以及 材料設置 Material Design。在 材料設計中推出了大量的UI效果，其中某些功能 已添加進 兼容包，所以可以在低版本中來實現一些材料設計效果。今天主要介紹的就是 ActionBar的替代品 Toolbar。Toolbar 是在V7包兼容的，所以需要下載最新的V7包。

 

使用ToolBar主要從以下3個步驟開始：

 

  1. 樣式定義顯示效果，屬性
  2. 在布局中使用ToolBar
  3. 在代碼中設置屬性    

 

        1.  首先，來看下如何設置樣式。由於Toolbar是替代ActionBar的，還需要使用 ActionBar兼容的Theme，但是需要做一些簡單修改。

         a. 先把ActionBar隱藏，為了 方便修改可以將原本 AppTheme 的 parent 屬性改為 AppTheme.Base，修改文件 res/values/styles.xml

 

[java]  view plain copy
 
  1. <resources>  
  2.   
  3.     <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">  
  4.         <item name="windowActionBar">false</item>  
  5.         <item name="android:windowNoTitle">true</item>  
  6.     </style>  
  7.   
  8.     <style name="AppTheme" parent="AppTheme.Base"/>  
  9.   
  10. </resources>  

 

        b. 同樣，為統一風格，需要將  /res/values-v21/styles.xml  的樣式 parent 屬性設置為 AppTheme.Base

 

[html]  view plain copy
 
  1. <resources>  
  2.       <style name="AppTheme" parent="AppTheme.Base"></style>  
  3. </resources>  


2. 在 Activity 布局中 加入 Toolbar 組件。注意：為了向下兼容，要使用 V7包下的 Toolbar，並且去掉最外層布局的padding屬性。為了確保Toolbar的高度，需要設置 最小高度為ActionBar高度 android:minHeight="?attr/actionBarSize"。

 

 

[html]  view plain copy
 
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context=".MainActivity">  
  6.   
  7.     <android.support.v7.widget.Toolbar  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="<span style="font-family: Arial, Helvetica, sans-serif;">?attr/actionBarSize</span><span style="font-family: Arial, Helvetica, sans-serif;">"</span>  
  10.         android:id="@+id/toolbar" />  
  11.   
  12. </RelativeLayout>  


3. 在代碼中設置Toolbar。需要Activity 繼承 ActionBarActivity。通過setSupportActionBar（）替代ActionBar，在OnCreate() 方法中加入以下代碼。

 

 

[java]  view plain copy
 
  1. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
  2. setSupportActionBar(toolbar);  


      完成之后，效果如下：

 

      

 

           

 

 

這個 效果不怎么好，需要對其進行簡單的修改，改變一些顏色，修整修整就可以見人了。修改的顏色可以參見下圖。

   

 

通過上圖，不難發現，修改顏色主要從這幾個方面開始：

 

  • 狀態欄背景色  colorPrimaryDark 屬性
  • 如果還是使用ActionBar，colorPrimary 屬性設置背景  如果時Toolbar，布局中background 屬性設置背景
  • 導航欄背景色 navigationBarColor 屬性 ，需要在 5.0 才可以使用，所以屬性只可以在 /res/values-v21/styles.xml  設置
  • 主界面背景色 windowBackground 
 
如果要使用這些屬性，需要從三個地方開始
a.  主樣式中設置基本屬性  res/values/styles.xml
[java]  view plain copy
 
  1. <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">  
  2.        <item name="windowActionBar">false</item>  
  3.        <item name="android:windowNoTitle">true</item>  
  4.        <item name="colorPrimary">#66cc99</item>  
  5.        <item name="colorPrimaryDark">#66cc99</item>  
  6.        <item name="android:windowBackground">@color/back</item>  
  7. </style>  
 
b.   v21中設置導航欄背景
[java]  view plain copy
 
  1. <style name="AppTheme" parent="AppTheme.Base">  
  2.        <item name="android:navigationBarColor">#66cc99</item>  
  3. </style>  
c.   布局中設置 Toolbar背景
[html]  view plain copy
 
  1. <android.support.v7.widget.Toolbar  
  2.         android:layout_width="match_parent"  
  3.         android:layout_height="wrap_content"  
  4.         android:id="@+id/toolbar"  
  5.         android:background="#339999"  
  6.         android:minHeight="?attr/actionBarSize" />  

設置完成后，效果如下：
 

 

 

上一篇簡單的介紹了如何簡單使用Toolbar,這篇主要介紹Toolbar的進一步設置。

既然Toolbar要替代ActionBar，那么Toolbar的功能應該更為強大，在Toolbar上有一些默認的顯示效果，先來看下。

        

通過上圖，不難看出，我們其實是可以為Toolbar設置以下屬性的：

 

  • 上級按鈕 (upbutton)   setNavigationIcon
  • APP 的圖標      setLogo
  • 主標題  setTitle
  • 副標題  setSubtitle
  • 設定菜單各按鈕的動作 setOnMenuItemClickListener
在MainActivity的OnCreate() 方法中加入以下代碼：

 

 

[java]  view plain copy
 
  1. toolbar.setLogo(R.drawable.ic_launcher);  
  2. toolbar.setNavigationIcon(R.drawable.ic_launcher);  
  3. toolbar.setTitle(getResources().getString(R.string.app_name));  
  4. toolbar.setSubtitle("ToolBar");  
  5. toolbar.setOnMenuItemClickListener(this);  
  6. toolbar.setTitleTextColor(0xffffffff);  
  7. toolbar.setSubtitleTextColor(0xffffffff);  


 

注意：setNavigationIcon(),setOnMenuItemClickListener() 需要放在 setSupportActionBar之后才會生效

Toolbar菜單效果與ActionBar的實現一樣，都是OptionsMenu。需要在Menu中添加 item ，然后通過Toolbar顯示出來。

res/menu/menu_main.xml

 

[java]  view plain copy
 
  1. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     tools:context=".MainActivity">  
  5.     <item  
  6.         android:id="@+id/action_settings"  
  7.         android:title="@string/action_settings"  
  8.         android:orderInCategory="100"  
  9.         android:icon="@drawable/ic_launcher"  
  10.         app:showAsAction="always" />  
  11.     <item  
  12.         android:id="@+id/action_test"  
  13.         android:title="@string/action_settings"  
  14.         android:orderInCategory="10"  
  15.         android:icon="@drawable/ic_launcher"  
  16.         app:showAsAction="ifRoom" />  
  17.   
  18. </menu>  

 

然后在MainActivity中添加以下代碼

 

[java]  view plain copy
 
  1. @Override  
  2. public boolean onCreateOptionsMenu(Menu menu) {  
  3.     getMenuInflater().inflate(R.menu.menu_main, menu);  
  4.     return true;  
  5. }  
  6.   
  7. @Override  
  8. public boolean onMenuItemClick(MenuItem menuItem) {  
  9.     Toast.makeText(this, menuItem.getTitle(), Toast.LENGTH_SHORT).show();  
  10.     return false;  
  11. }  

 

運行效果如下：

 

 

通過點擊 菜單，可以發現能夠觸發 onMenuItemClick() 方法，但是，點擊上級按鈕 (upbutton)並沒有觸發該事件，因為它有自己獨立的點擊事件。

 

[java]  view plain copy
 
  1. toolbar.setNavigationOnClickListener(new View.OnClickListener() {  
  2.    @Override  
  3.    public void onClick(View v) {  
  4.        Toast.makeText(MainActivity.this, "HOME", Toast.LENGTH_SHORT).show();  
  5.    }  
  6. });  

 

在Android 原生樣式應用中，有一個特別漂亮的效果，在使用抽屜布局的時候，展開或關閉抽屜時，Toolbar的 navigation drawer（upButton） 有一個動畫，由三個橫線旋轉成箭頭，大概如下：


靜態圖片展示不出來動畫效果，請自行補腦！

 

這個效果其實是由 Toolbar+DrawerLayout 實現的。 

可以通過以下幾步實現：

 

  1. 在布局中加入DrawerLayout
  2. 在代碼中找到DrawerLayout，將DrawerLayout 與 Toolbar關聯
  3. 通過樣式修改 navigation drawer 的顏色
1. 在布局中加入DrawerLayout   res/layout/activity_main.xml
[java]  view plain copy
 
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context=".MainActivity">  
  6.   
  7.     <android.support.v7.widget.Toolbar  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="?attr/actionBarSize"  
  10.         android:id="@+id/toolbar"  
  11.         android:background="#339999" />  
  12.   
  13.     <android.support.v4.widget.DrawerLayout  
  14.         android:layout_below="@+id/toolbar"  
  15.         android:id="@+id/drawerlayou"  
  16.         android:layout_width="match_parent"  
  17.         android:layout_height="match_parent">  
  18.   
  19.         <!--Main Content-->  
  20.   
  21.         <LinearLayout  
  22.             android:layout_width="match_parent"  
  23.             android:layout_height="match_parent"  
  24.             android:background="#123456">  
  25.   
  26.         </LinearLayout>  
  27.   
  28.         <!--DrawerLayout Content-->  
  29.         <LinearLayout  
  30.             android:layout_width="300dp"  
  31.             android:layout_height="match_parent"  
  32.             android:background="#345678"  
  33.             android:layout_gravity="start" />  
  34.   
  35.     </android.support.v4.widget.DrawerLayout>  
  36.   
  37. </RelativeLayout>  
 
2. 在MainActivity中找到DrawerLayout，將DrawerLayout 與 Toolbar關聯
[java]  view plain copy
 
  1. final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayou);  
  2.   
  3. ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.app_name, R.string.app_name);  
  4. toggle.syncState();  
  5.   
  6. drawerLayout.setDrawerListener(toggle);  
  7.  //通過 NavigationDrawer 打開關閉 抽屜  
  8. toolbar.setNavigationOnClickListener(new View.OnClickListener() {  
  9.      @Override  
  10.      public void onClick(View v) {  
  11.          Toast.makeText(MainActivity.this, "HOME", Toast.LENGTH_SHORT).show();  
  12.   
  13.          if (drawerLayout.isDrawerOpen(Gravity.START))  
  14.               drawerLayout.closeDrawer(Gravity.START);  
  15.           else  
  16.               drawerLayout.openDrawer(Gravity.START);  
  17.       }  
  18. });  
 
3. 修改樣式 為如下：
[java]  view plain copy
 
  1. <resources>  
  2.   
  3.     <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">  
  4.         <item name="windowActionBar">false</item>  
  5.         <item name="android:windowNoTitle">true</item>  
  6.         <item name="colorPrimary">#66cc99</item>  
  7.         <item name="colorPrimaryDark">#66cc99</item>  
  8.         <item name="android:windowBackground">@color/back</item>  
  9.         <!-- 使用自定義樣式-->  
  10.         <item name="drawerArrowStyle">@style/AppTheme.MyDrawerArrowStyle</item>  
  11.     </style>  
  12.   
  13.     <style name="AppTheme" parent="AppTheme.Base" />  
  14.   
  15.     <!--自定義 navigation drarwer 的樣式-->  
  16.     <style name="AppTheme.MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">  
  17.         <item name="spinBars">false</item>  
  18.         <item name="color">#FFFFFF</item>  
  19.     </style>  
  20. </resources>  
 
其中：
spinBars  旋轉效果      默認值為 true，有旋轉效果 ；false則無旋轉效果。
color navigation icon 的顏色

如果想要抽屜遮住 Toolbar，只需要改下布局，將Toolbar放入DrawerLayout的主界面即可：
[java]  view plain copy
 
  1. <android.support.v4.widget.DrawerLayout  
  2.         android:id="@+id/drawerlayou"  
  3.         android:layout_width="match_parent"  
  4.         android:layout_height="match_parent">  
  5.   
  6.         <!--Main Content-->  
  7.   
  8.         <LinearLayout  
  9.             android:layout_width="match_parent"  
  10.             android:layout_height="match_parent"  
  11.             android:background="#123456">  
  12.             <!-- android:elevation="5dp" 加上陰影-->  
  13.             <android.support.v7.widget.Toolbar  
  14.                 android:layout_width="match_parent"  
  15.                 android:layout_height="?attr/actionBarSize"  
  16.                 android:id="@+id/toolbar"  
  17.                 android:elevation="5dp"  
  18.                 android:background="#339999" />  
  19.         </LinearLayout>  
  20.   
  21.         <!--DrawerLayout Content-->  
  22.         <LinearLayout  
  23.             android:layout_width="300dp"  
  24.             android:layout_height="match_parent"  
  25.             android:background="#345678"  
  26.             android:layout_gravity="start" />  
  27.   
  28. </android.support.v4.widget.DrawerLayout> 

    Toolbar 相對於 ActionBar的強大之處在於，ToolBar有更強大的自定義效果。因為ToolBar本身就是一個ViewGroup，可以往Toolbar中放入各種組件。

     

    [java]  view plain copy
     
    1. <android.support.v7.widget.Toolbar  
    2.         android:layout_width="match_parent"  
    3.         android:layout_height="?attr/actionBarSize"  
    4.         android:id="@+id/toolbar"  
    5.         android:elevation="5dp"  
    6.         android:background="#339999">  
    7.   
    8.         <RelativeLayout  
    9.             android:layout_width="match_parent"  
    10.             android:layout_height="match_parent"  
    11.             android:background="#F00">  
    12.   
    13.             <Button  
    14.                 android:id="@+id/toolbar_btn"  
    15.                 android:layout_width="wrap_content"  
    16.                 android:layout_height="match_parent"  
    17.                 android:text="Button"/>  
    18.   
    19.             <ImageView  
    20.                 android:layout_width="20dp"  
    21.                 android:layout_height="20dp"  
    22.                 android:src="@drawable/ic_launcher"  
    23.                 android:layout_centerInParent="true" />  
    24.   
    25.             <TextView  
    26.                 android:layout_alignParentRight="true"  
    27.                 android:layout_centerVertical="true"  
    28.                 android:layout_width="wrap_content"  
    29.                 android:layout_height="wrap_content"  
    30.                 android:text="鄧紫棋" />  
    31.   
    32.         </RelativeLayout>  

     

    可以根據自己的需求，設置各種效果。但是，左邊的邊距一直去不了，如果知道的朋友，請給我留言，謝謝！



免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ToolbarDemo【Toolbar作為頂部導航欄的簡單使用】 Toolbar使用 Android ToolBar 的簡單封裝 【Android學習】ToolBar使用 android中的toolbar使用 Androd學習筆記——[轉]Android Http get post請求 Android Fragment使用(四) Toolbar使用及Fragment中的Toolbar處理 Android——使用Toolbar + DrawerLayout快速實現高大上菜單側滑（轉） 使用easyUI 添加toolbar到datagrid android Fragment中使用Toolbar
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM