搞定 Material Design 相关控件4：Toolbar

作者: louisgeek | 来源:发表于2017-06-15 09:35 被阅读32次

1 开始使用

compile 'com.android.support:appcompat-v7:25.3.1'

去掉默认的Actionbar

 <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

继承AppCompatActivity的可以直接使用

setSupportActionBar(mToolBar);`

基本配置

<android.support.v7.widget.Toolbar      
        xmlns:android="http://schemas.android.com/apk/res/android"      
        xmlns:app="http://schemas.android.com/apk/res-auto"      
        android:id="@+id/toolbar"      
        android:layout_width="match_parent"      
        android:layout_height="?attr/actionBarSize"      
        android:background="?attr/colorPrimary"      
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"      
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">  
</android.support.v7.widget.Toolbar>

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

2 常用属性

 android:elevation="4dp"
app:navigationIcon="@drawable/icon_back"
app:titleTextAppearance="@style/Toolbar.TitleText"
//TextView作为自定义标题 样式统一
android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"

//定义样式 
<style name="ClassicAppBarThemeOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
     <style name="ClassicPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" />
//使用    注意：换样式用android:theme=””  不用style=”“
    android:theme="@style/ClassicAppBarThemeOverlay"
        app:popupTheme="@style/ClassicPopupThemeOverlay"

3 菜单

使用menu定义弹出菜单

//showAsAction
//always：显示在主界面上
//never：不显示在主界面，只出现在更多中
//ifRoom：有位置才显示，否则折叠到更多
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/share"
        android:title="分享"
        android:icon="@drawable/share"
        android:orderInCategory="3"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/cacle"
        android:title="收藏"
        android:orderInCategory="1"
        app:showAsAction="never" />
    <item
        android:id="@+id/setting"
        android:title="设置"
        android:icon="@drawable/setting"
        android:orderInCategory="4"
        app:showAsAction="never" />
</menu>

自定义的ActionView 点击效果与普通的menuItem一致

style="@style/Widget.AppCompat.ActionButton"

自定义菜单：http://blog.csdn.net/richiezhu/article/details/52228251

方法1

设置菜单

@Override
public boolean onCreateOptionsMenu(Menu menu) {      
        // Inflate the menu; this adds items to the action bar if it is present.      
        getMenuInflater().inflate(R.menu.menu_main,menu);      
        return true;  
}

设置监听

@Override
 protected boolean onOptionsItemSelected(MenuItem item) {  
        Intent intent;  
        switch (item.getItemId()) {  
        case R.id.action_favorite:    
            // User chose the "Favorite" action, mark the current item
            // as a favorite...
            return true;   
        case R.id.action_favorite: 
            // User chose the "Favorite" action, mark the current item    
            // as a favorite...            
            return true;        
        default:            
            // If we got here, the user's action was not recognized.   
            // Invoke the superclass to handle it.            
            return super.onOptionsItemSelected(item);
        }  
}

方法2

设置菜单

toolbar.inflateMenu(R.menu.base_toolbar_menu);

设置监听

toolbar.setOnMenuItemClickListener

动态改变menu item显示或隐藏

toolbar.getMenu().findItem(R.id.menu_refresh).setVisible(false);

4 常用方法

setSupportActionBar(toolbar);`
getSupportActionBar().setLogo(R.mipmap.ic_launcher);
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
// 显示标题和子标题, 对应ActionBar.DISPLAY_SHOW_TITLE
getSupportActionBar().setDisplayShowTitleEnabled(true);
// 显示应用的Logo 左上角图标icon
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setDisplayUseLogoEnabled(true);
//使左上角图标是否显示，对应id为android.R.id.home，对应ActionBar.DISPLAY_SHOW_HOME
getSupportActionBar().setDisplayShowHomeEnabled(true);
// 给左上角图标的左边加上一个返回的图标，决定左上角图标的左侧是否有向左的小箭头, true 有小箭头，并且图标可以点击
getSupportActionBar().setDisplayHomeAsUpEnabled(true);



//setNavigationIcon 需要放在 setSupportActionBar 之后才会生效
toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo
toolbar.setTitle("Title");//设置主标题
toolbar.setSubtitle("Subtitle");//设置子标题
toolbar.inflateMenu(R.menu.base_toolbar_menu);//设置右上角的填充菜单
toolbar.setOnMenuItemClickListener
//
toolbar.setTitleTextColor
toolbar.setTitleTextAppearance
//
toolbar.setSubtitleTextColor
toolbar.setSubtitleTextAppearance
//
toolbar.setTitleMargin
toolbar.setPopupTheme
toolbar.setOverflowIcon

5 更改样式

改变弹出菜单文字样式
android:textColorPrimary
android:colorBackground

//写在Toolbar主题下
<item name="android:textColor">@android:color/white</item> 
 <item name="android:textSize">25dp</item>

改变主界面上的菜单文字样式、更多菜单的按钮图标

 <item name="actionMenuTextColor">@android:color/white</item>
 <item name="android:textSize">25dp</item>

 <style name="ToolbarTheme" parent="Theme.AppCompat.Light">
      <item name="actionOverflowButtonStyle">@style/MyActionOverflowButton</item>
    </style>

 <style name="MyActionOverflowButton2" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
        <item name="android:src">@mipmap/ic_menu_more_overflow</item>
    </style>
    <style name="MyActionOverflowButton" parent="Widget.AppCompat.ActionButton.Overflow">
        <item name="android:src">@drawable/abc_ic_menu_moreoverflow_mtrl_alpha</item>
    </style>

6 返回按钮

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

监听返回按钮1

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
}
});

监听返回按钮2

@Override
     public boolean onOptionsItemSelected(MenuItem item) {
         switch (item.getItemId()) {
             case android.R.id.home:
              //
                 return true;
         }
         return false;
     }

7 自定义左侧按钮和中间文字

<?xml version="1.0" encoding="utf-8"?>
<!--

app:title="title"
-->
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:visibility="gone"
    app:popupTheme="@style/ThemeOverlay.AppCompat"
    >
    <LinearLayout
        android:id="@+id/id_ll_toolbar_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        >
        <ImageView
            android:id="@+id/id_toolbar_left_iv"
            android:layout_width="24dp"
            android:layout_height="24dp"
            />

        <TextView
            android:id="@+id/id_toolbar_left_tv"
            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle"
            android:textColor="@color/white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="?attr/selectableItemBackground"
            android:text="地区"
            />
    </LinearLayout>

    <!--toolbar  默认不显示 android:visibility="gone" 定义了app:title="XXX" 就行  无需再配置自身文字-->
    <TextView
        android:id="@+id/id_toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:lines="1"
        android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"
        android:visibility="gone"
        />
</android.support.v7.widget.Toolbar>

7 参考文档

Toolbar的使用 http://www.jianshu.com/p/12c4c8348a1a
Material Design 之 Toolbar 开发实践总结 http://www.jianshu.com/p/e2ae6aaff696

网友评论

本文标题：搞定 Material Design 相关控件4：Toolbar

本文链接：https://www.haomeiwen.com/subject/fzvjqxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

搞定 Material Design 相关控件4：Toolbar

1 开始使用

2 常用属性

3 菜单

方法1

方法2

4 常用方法

5 更改样式

6 返回按钮

7 自定义左侧按钮和中间文字

7 参考文档

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读