Android5.0之Toolbar详解

搜索Toolbar相关文章满天飞,但是大都不是很全面,每次要用到的时候又要重头过滤一遍。而且随着版本升级很多较早的文章的方法已经失效,最近刚好好用到Toolbar,就将相关配置整理下,方便以后使用。

环境说明:

  • Android Studio 2.0
  • V7包版本:com.android.support:appcompat-v7:23.4.0
  • compileSdkVersion 23
  • buildToolsVersion "24.0.0"

Toolbar 引入使用

XML布局中加入:


主题改为隐藏ActionBar:

Theme.AppCompat.Light.NoActionBar

Activity代码中加入:

    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

此时运行效果:



添加背景色

android:background="@color/colorPrimary"

此时运行效果:


基本属性设置

 //子标题颜色

运行效果:



添加选项菜单
第一步创建菜单文件

 
    
    
    
    

第二部在代码中重写onCreateOptionsMenu方法加载菜单文件

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

此时效果:


个性设置

左侧返回箭头

想要显示自带的返回箭头,需要去掉之前设定的属性:

app:navigationIcon="@mipmap/title_bar_back"

然后在代码中添加:

getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

此时效果:


溢出图标颜色

在style文件中添加:

 
@android:color/white

此时效果:


自定义右侧溢出图标

在Style文件中添加:



    

此时运行效果:


更改弹出菜单背景

在Style文件中添加样式:


    

在布局文件中添加使用主题:

app:popupTheme="@style/ToolbarPopupTheme"

此时运行效果:


更改弹出菜单文字颜色

添加样式文件:


    
    

此时运行效果:


修改标题文字大小

添加配置:

app:titleTextAppearance="@style/ToolbarTitleSize"

添加style:

 
    

此时运行效果:



子标题文字大小类似,添加配置然后定义style文件(此处省略):

app:subtitleTextAppearance="@style/ToolbarTitleSize"

修改弹出菜单位置

修改配置使弹出菜单显示在Toolbar下方:
首先重新设置属性:(在界面布局文件Toolbar中)

app:popupTheme="@style/OverflowMenuStyle"

在Style文件中添加:


此时运行效果:


事件处理

返回按钮事件

添加监听

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "点击了返回箭头", Toast.LENGTH_LONG).show();
            }
        });

菜单项点击事件

重写方法

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_settings:
                break;
            case R.id.action_search:
                break;
            case R.id.action_share:
                break;
        }
        return true;
    }

自定义Toolbar

Toolbar下面可以嵌套布局,直接将自己定义好的布局放到Toolbar下面即可



        
            ......
            
    

Toolbar 和 DrawerLayout 左滑菜单

 
    
    
    

        

        
    

添加左滑布局文件:

在主布局文件中引入:(在Toolbar下方)



在代码中添加关联:

DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_left);
    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close);
    mDrawerToggle.syncState();
    mDrawerLayout.setDrawerListener(mDrawerToggle);

此时运行效果:



新版本studio,在新建Activity的时候可以选择对应的模板,会自动创建好DrawerLayout并关联Toolbar.

更多文章欢迎访问我的博客:https://leonhua.github.io/

你可能感兴趣的:(Android5.0之Toolbar详解)