ToolBar
- ToolBar 的强大之处在于，它不仅继承了ActionBar的所有功能，而且灵活性很高，可以配合其他控件来完成一些Material Design的效果。
-
当我们新建一个项目的时候，默认都是会显示ActionBar的，而这个ActionBar到底是从哪里来的？其实是根据我们项目中设置的主题来显示的。
application
点开AppTheme,我们看到：
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
现在我们准备ToolBar来代替ActionBar，因此我们需要制定一个不带ActionBar的主题，通常有两种:
- Theme.AppCompat.Light.NoActionBar
- 表示淡色主题，它会将界面的主题颜色设置为淡色，陪衬色设置为深色。
- Theme.AppCompat.NoActionBar
- 表示深色主题，它会将界面的主题颜色设置为深色，陪衬色设置为淡色。
现在我们用Theme.AppCompat.Light.NoActionBar来开发
- 表示深色主题，它会将界面的主题颜色设置为深色，陪衬色设置为淡色。
<resources>
<!-- 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>
</resources>
颜色.jpg
其中：colorAccent这个属性，它不仅用来指定一个按钮的颜色，而是更多的表达了一个强调的意思，比如一个空间的选中状态也会使用colorAccent的颜色。
接下来我们看看代码中ToolBar的开发
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" //命名空间
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" //将toobal设置为深色主题，单独设置主题是因为Toobal上各种元素会自动使用深色主题
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" //弹窗的背景
></android.support.v7.widget.Toolbar>
</RelativeLayout>
注意点：
1:xmlns:app="http://schemas.android.com/apk/res-auto"命名空间，为了兼容5.0以前的版本，我们不能使用android:attribute的属性，而是应该使用app:attribute
2: 由于styles.xml中将各种元素指定为淡色主题，因此Toolbar现在也是淡色主题，而Toolbar上面的各种元素会自动使用深色系，现在变成黑色很难看。为了让ToolBar单独使用深色主题，这里我们是用android:theme属性ThemeOverlay.AppCompat.Dark.ActionBar。但是这样会出现新的问题，如果ToolBar中有菜单按钮，那么弹出来的菜单也会变成深色主题，于是我们使用app:poptheme单独将弹出的菜单指定成淡色主题
没有设置深色主题.png
设置了深色主题.png
一个Toolbar 从左到右包括了 一个navigation button、一个logo、一个title和subtitle、一个或多个自定义的View和一个 action menu 这5部分。也就是这个ViewGroup 容器里面包含了这五部分内容
Toolbar内容.jpg
动态代码如下：
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_menu);
toolbar.setLogo(R.mipmap.ic_launcher);
toolbar.setTitle("Toolbal学习");
toolbar.setSubtitle("副标题");
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "NavigationIcon is Click", Toast.LENGTH_SHORT).show();
}
});
}
/**
* 加载菜单布局
* @param menu
* @return
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar, menu);
return true;
}
/**
* 处理菜单中各个按钮的点击事假
* @param item
* @return
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.backup:
Toast.makeText(this, "You clicked backup", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "You clicked delete", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "You clicked Settings", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
}
注意：
- Toolbar中的action 按钮只会显示图片，菜单中的按钮只会显示文字！
- 怎样设置弹出菜单的文字的颜色？
默认情况下是黑色的，因此我们需要重新设置style
<!--设置parent 为深色主题 是因为Toobal上各种元素会自动使用深色主题-->
<style name="ToobalTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColor">@color/colorAccent</item>
<item name="android:textSize">14sp</item>
</style>
image.png
运行结果：
设置弹出菜单的文字的颜色.png
-
怎么设置Toolbar 上的菜单的文字颜色？
设置 <item name="actionMenuTextColor">@color/colorAccent</item>属性
image.png
image.png
- 怎么加自定义布局？
因为Toolbal本身继承于ViewGroup，所以直接包裹布局即可
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ToobalTheme"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:text="文字居中"
android:textColor="@android:color/white"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
</RelativeLayout>
代码中使用：
TextView tv_title= (TextView) findViewById(R.id.tv_title);
tv_title.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "标题点击了", Toast.LENGTH_SHORT).show();
}
});
参考：
