Toolbar自定义样式配置及用法

Toolbar用法详解:

Toolbar的组成:

Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:

A navigation button. This may be an Up arrow, navigation menu toggle, close, collapse, done or another glyph of the app's choosing. This button should always be used to access other navigational destinations within the container of the Toolbar and its signified content or otherwise leave the current context signified by the Toolbar. The navigation button is vertically aligned within the Toolbar's minimum height, if set.
A branded logo image. This may extend to the height of the bar and can be arbitrarily wide.
A title and subtitle. The title should be a signpost for the Toolbar's current position in the navigation hierarchy and the content contained there. The subtitle, if present should indicate any extended information about the current content. If an app uses a logo image it should strongly consider omitting a title and subtitle.
One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
An action menu. The menu of actions will pin to the end of the Toolbar offering a few frequent, important or typical actions along with an optional overflow menu for additional actions. Action buttons are vertically aligned within the Toolbar's minimum height, if set.

上面是引用了官方文档对Toolbar的介绍,可以知道Toolbar主要包括五部分:

导航按钮
应用Logo
标题与副标题
若干自定义View
ActionMenu

toolbar.png

Toolbar样式

在系统value下style文件中可以看到系统定义的Toolbar的样式如下,如果需要更改toolbar的样式只需要更改对应的样式即可;

系统默认HomeAsUp图标:

系统Toolbar标题Title的默认样式

系统Toolbar副标题SubTitle的默认样式

系统Toolbar溢出菜单的默认样式:

Toolbar常用的方法

设置导航图标及点击事件:

    mToolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
    mToolbar.setNavigationOnClickListener(this);

设置标题和副标题:

    mToolbar.setTitle("Toolbar");
    mToolbar.setSubtitle("demo");

设置应用Logo及溢出菜单图标:

    mToolbar.setLogo(R.drawable.ic_launcher);
    mToolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_launcher));

设置溢出菜单的布局和各个ActionMenu的点击事件,此处注意的是不能和setSupportActionBar同时使用,否则无效

    mToolbar.inflateMenu(R.menu.menu_main);//不能和setSupportActionbar同时使用
    mToolbar.setOnMenuItemClickListener(this);

修改Toolbar样式

修改标题,导航按钮,溢出菜单默认图标的颜色:


    
    @android:color/holo_orange_dark

修改副标题的颜色


    
    @android:color/white

修改显示在Toolbar上的ActionMenu的颜色


    @android:color/holo_red_dark

修改溢出菜单文字及字体大小,同时也会修改自定义View字体大小,及Toolbar上ActionMenu文字的大小



    @android:color/holo_purple
    25dp

修改溢出菜单的背景,摆放位置,从系统Overflow样式知道其实就是修改对应属性的值即可

贴出上图Toolbar的代码:

Toolbar布局:

Toolbar配置样式,及主题:

配置ActionMenu布局:

Activity中调用Toolbar:


    public class ToolbarActivity extends AppCompatActivity implements View.OnClickListener, 
        Toolbar.OnMenuItemClickListener {
    private Toolbar mToolbar;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        //mToolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        mToolbar.setNavigationOnClickListener(this);
        mToolbar.setTitle("Toolbar");
        mToolbar.setSubtitle("demo");
        mToolbar.setLogo(R.drawable.ic_launcher);
        //mToolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_launcher));
        //mToolbar.inflateMenu(R.menu.menu_main);//不能和setSupportActionbar同时使用
        //mToolbar.setOnMenuItemClickListener(this);
        
        setSupportActionBar(mToolbar);
        //给左上角图标的左边加上一个返回的图标 。对应ActionBar.DISPLAY_HOME_AS_UP
        getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
        //使自定义的普通View能在title栏显示，即actionBar.setCustomView能起作用，对应ActionBar.DISPLAY_SHOW_CUSTOM
        getSupportActionBar().setDisplayShowCustomEnabled(true);
        //这个小于4.0版本的默认值为true的。但是在4.0及其以上是false,决定左上角的图标是否可以点击。。
        getSupportActionBar().setHomeButtonEnabled(true);
        //使左上角图标是否显示，如果设成false，则没有程序图标，仅仅就个标题，否则，显示应用程序图标，
        // 对应id为android.R.id.home，对应ActionBar.DISPLAY_SHOW_HOME
        //其中setHomeButtonEnabled和setDisplayShowHomeEnabled共同起作用，
        //如果setHomeButtonEnabled设成false，即使setDisplayShowHomeEnabled设成true，图标也不能点击
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        //对应ActionBar.DISPLAY_SHOW_TITLE。
        getSupportActionBar().setDisplayShowTitleEnabled(true);


    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.menu_main, menu);

        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();

        switch (itemId) {
            case R.id.search_view:
                Snackbar.make(mToolbar, "点击搜索", Snackbar.LENGTH_SHORT).show();
                break;
            case R.id.action_settings:
                Snackbar.make(mToolbar, "点击设置", Snackbar.LENGTH_SHORT).show();
                break;
            case R.id.action_map:
                Snackbar.make(mToolbar, "点击地图", Snackbar.LENGTH_SHORT).show();
                break;
        }

        return true;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case android.R.id.home:
                finish();
        }
    }

    @Override
    public boolean onMenuItemClick(MenuItem item) {
        int itemId = item.getItemId();

        switch (itemId) {
            case R.id.search_view:
                Snackbar.make(mToolbar, "点击搜索", Snackbar.LENGTH_SHORT).show();
                break;
            case R.id.action_settings:
                Snackbar.make(mToolbar, "点击设置", Snackbar.LENGTH_SHORT).show();
                break;
            case R.id.action_map:
                Snackbar.make(mToolbar, "点击地图", Snackbar.LENGTH_SHORT).show();
                break;
        }

        return true;
    }
}