Android 5.x ToolBar 实战：一

最新推荐文章于 2024-05-04 12:42:32 发布

hejia729371286

最新推荐文章于 2024-05-04 12:42:32 发布

阅读量500

点赞数

分类专栏： Android 文章标签： android studio Toolbar Theme

本文链接：https://blog.youkuaiyun.com/hejia729371286/article/details/72782129

版权

Android 专栏收录该内容

7 篇文章

订阅专栏

`1、概述`

Android 5.0的时候就用Toolbar替代了ActionBar,而ActionBarActivity又被AppCompatActivity替代，那么使用方法就是引入Toolbar设置到Activity中，

Toolbar之所以灵活，是因为它其实就是一个ViewGroup，我们在使用的时候和普通的组件一样，在布局文件中声明，因此可以很灵活的自定义。

`2、Toolbar使用`

（1）ToolBar的引入

compile 'com.android.support:appcompat-v7:23.4.0'             引入V7包，本例子用23.4

（2）Activity继承AppCompatActivity，替代以前的ActionBarActivity

    
    
     
     
     
     public class MyActivity extends AppCompatActivity {
  // ...
}

     
     
（3）配置style的Theme，主要是Vuale 和Vuale-21（主要针对5.0以上的设备）

     
     
      
      Vuale.xml:
     
     

     
     
      
          <style name="AppTheme" parent="AppBaseTheme"></style>

    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- toolbar（actionbar）颜色 -->
        <item name="colorPrimary">@color/material_green_A200</item>
        <!-- 状态栏颜色 -->
        <item name="colorPrimaryDark">@color/material_blue_700</item>
        <!-- 选择时的颜色，如EditText -->
        <item name="colorAccent">@color/material_blue_700</item>

    </style>
      
      


      
      Vuale-21.xml:
      
      


     
     

     
     
      
      
      
          <style name="AppTheme" parent="AppBaseTheme">
        <!--5.0以上手机直接设置使用，如果不设置的话，状态栏将跟标题栏的颜色一致-->
        <item name="android:statusBarColor">@color/material_blue_700</item>
    </style>

      
      
       
       Ps;(来自鸿大神的图)
      
      

      
      
       
       
       
       


      
      
说明几点，很重要：
     
     

     
     

      
      

colorPrimaryDark

        
          状态栏背景色。
 
  在 style 的属性中设置。
 


textColorPrimary

        
          App bar 上的标题与更多菜单中的文字颜色。
 
  在 style 的属性中设置。
 


App bar 的背景色

        
          Actionbar 的背景色设定在 style 中的 colorPrimary。
 
  Toolbar 的背景色在layout文件中设置background属性。
 


colorAccent

        
          各控制元件(如：check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色。
 
  在 style 的属性中设置。
 


colorControlNormal

        
          各控制元件的预设颜色。
 
  在 style 的属性中设置
 


windowBackground

        
          App 的背景色。
 
  在 style 的属性中设置
 


navigationBarColor

        
          导航栏的背景色，但只能用在 API Level 21 (Android 5) 以上的版本
 
  在 style 的属性中设置
 


      
      
（3）在在AndroidManifest.xml文件中应用

      
      
       
       <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:theme="@style/AppTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

       
       
（4）在activity.xml文件中应用

       
       <android.support.v7.widget.Toolbar
    android:id="@+id/id_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"     
    android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>

说明下：

       
         android:background="?attr/colorPrimary"            toolbar的标题栏跟theme主题定义的是一样的
       
       



       
       
（5）在activity的onCreate()方法中，调用setSupportActionBar()方法，并传入toolbar，这样就会将toolbar设置为activity的操作栏了。

       
       
        
        @Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_my);
  Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
  setSupportActionBar(toolbar);
}
        
        



        
        
3定制ToolBar

        
        

         
          （1）设置toolbar标题、副标题、

        
        

        
        
         
         
         
         @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        // App Logo
        toolbar.setLogo(R.mipmap.ic_launcher);
        // Title
        toolbar.setTitle("App Title");
        // Sub Title
        toolbar.setSubtitle("Sub title");
        setSupportActionBar(toolbar);
        //Navigation Icon
        toolbar.setNavigationIcon(R.drawable.return);
    }
         
         

也可以在直接在
         
         Toolbar设置，记得用“app”
        
        

        
        
         
         
         
          <android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        app:title="App Title"
        app:subtitle="Sub Title"
        app:navigationIcon="@drawable/return"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary"/>
         
         
 
         
         

         
          （2）设置

        
        

        
        
         
         
         
             @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.base_toolbar_menu, menu);
        return  true;
    }建立menu：
        
        

        
        
         
         
         
             <item
        android:id="@+id/action_search"
        android:icon="@mipmap/ic_search"
        android:title="menu_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_notification"
        android:icon="@mipmap/ic_notifications"
        android:title="menu_notifications"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_item1"
        android:title="item_01"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_item2"
        android:title="item_02"
        app:showAsAction="never" />
         
         

说明：
        
        

        
        
         
         
 

         
          app:showAsAction有三个值：

         
          always：总是显示在界面上
 never：不显示在界面上，只让出现在右边的三个点中
 ifRoom：如果有位置才显示，不然就出现在右边的三个点中

         
         


        
        

        
        
         
         

         
         

         
          （2）toolbar菜单样式：系统默认的一般如下，但我们一般看到的app都是浮动都是在标题栏下面的

         
         
 
        
        

        
        
         
         
         
             <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- toolbar（actionbar）颜色 -->
        <item name="colorPrimary">@color/material_green_A200</item>
        <!-- 状态栏颜色 -->
        <item name="colorPrimaryDark">@color/material_blue_700</item>
        <!-- 选择时的颜色，如EditText -->
        <item name="colorAccent">@color/material_blue_700</item>
        <item name="actionOverflowMenuStyle" >@style/LYJMenuStyle</item>

    </style>

    <style name="LYJMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
    
        <item name="overlapAnchor">false</item>
    </style>
         
         


         
          还有其他属性这里简要说明一下：

         
          
 

         
          ①<item name="android:popupBackground">?attr/colorPrimary</item>：弹出菜单背景色为标题栏的背景色

         
          
 

         
          ②<item name="android:dropDownVerticalOffset">0dip</item>：弹出菜单与标题栏的垂直间距

         
          
 

         
         
         
         


        
        

        
        
         
         代码下载：
        
        

        
        
         
         http://download.youkuaiyun.com/detail/hejia729371286/9854422