Toobar基本使用

一.Toolbar的基本使用

1. 去掉原生默认的ActionBar，修改默认主题为NoActionBar

2. 修改MainActivity的布局，添加Toolbar

需要注意toolbar的颜色设置为colorPrimary， 则需要为toolbar指定主题为Dark Actionbar，因为之前activity的主题设置的是浅色主题，如果toolbar不指定深色主题，那么显示的文字都会是深色，不太美观。

但是这样设置之后，弹出的菜单颜色又变成了黑色，为了调整美观，需要添加app:popupTheme为浅色菜单。

3. 使用， 调整MainActivity的代码

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }

运行程序：

toolbar

4. 为toolbar添加菜单：

添加menu_toolbar.xml

在Activity中启用菜单

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

添加菜单的点击事件

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.backup:
                Toast.makeText(this, "backup", Toast.LENGTH_SHORT).show();
                break;
            ...
        }
        return true;
    }

运行一下：

image.png

其他：onOptionsMenuClosed
/**
* 每次菜单被关闭时调用.
*菜单被关闭有三种情形:
*1.展开menu的按钮被再次点击
*2.back按钮被点击
*3.用户选择了某一个菜单项
*/
@Override
public void onOptionsMenuClosed(Menu menu) {
super.onOptionsMenuClosed(menu);
}

 /**
     * 在onCreateOptionsMenu执行后，菜单被显示前调用；如果菜单已经被创建，则在菜单显示前被调用。 同样的，
     * 返回true则显示该menu,false 则不显示; （可以通过此方法动态的改变菜单的状态，比如加载不同的菜单等）
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        return super.onPrepareOptionsMenu(menu);
    }

5. NavigationIcon

NavigationIcon是toolbar最左侧的一个小图标，一般主要显示返回或者主页等
如果要启用，方法
void setDisplayHomeAsUpEnabled(boolean showHomeAsUp);

//注意要在setSupportActionBar(Toolbar toolbar)之后调用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

效果如下：

image.png

默认显示的是后退菜单。如果要修改，可以调用以下方法：
//设置NavigationIcon的icon.可以是Drawable ,也可以是ResId
void setNavigationIcon(@Nullable Drawable icon);
void setNavigationIcon(@DrawableRes int resId)
或者app:navigationIcon="@drawable/menu"

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.menu);
        }

运行一下：

image.png

设置点击事件：
//设置NavigationIcon的点击监听.
void setNavigationOnClickListener(OnClickListener listener);
一般可以设置为点击展开侧滑菜单。

6. Title 的使用

//是否显示
getSupportActionBar().setDisplayShowTitleEnabled(boolean showTitle);
//设置title.
getSupportActionBar().setTitle(title);
//设置title.
Toolbar.setTitle(title);
//设置Margin边距.
Toolbar.setTitleMargin();
//设置字体.
Toolbar.setTitleTextAppearance();
//设置字的颜色
Toolbar.setTitleTextColor(int color);

7. style

1.app:theme ------------------toolbar的主题
2.app:popupTheme------------弹出的menu的主题.

style的有些方法必须是Sdk21以上才能用
所以需要

image.png

普通values中的style改成如下:

使用这个style

style="@style/base_toolbar"

1.修改toolbar的字体

2.修改Toolbar的menu折叠图标和NavigationIcon的颜色

image.png

3.修改menu的字体颜色

image.png

4.menu菜单的显示位置.
默认是这样的:

image.png

会遮盖toolbar
可以修改popuptheme的这个属性来设置:

 false

最终效果的style代码:

values-v21的style的代码:

toolbar布局的代码

参考原文：

1. Toolbar设置掉坑总结 @jlanglang
   https://juejin.im/post/5a30de4051882531d828680d
2. 郭霖《第一行代码》
   http://item.jd.com/12012505.html