Toobar基本使用
2018-11-17 本文已影响6人
Ello_Orld
一.Toolbar的基本使用
1. 去掉原生默认的ActionBar，修改默认主题为NoActionBar
<!-- 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>
2. 修改MainActivity的布局，添加Toolbar
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>
需要注意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
<?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="backup"
app:showAsAction="always"
android:icon="@drawable/backup"
android:title="Backup" />
<item
android:id="delete"
app:showAsAction="ifRoom"
android:icon="@drawable/delete"
android:title="Delete" />
<item
android:id="setting"
app:showAsAction="never"
android:icon="@drawable/settings"
android:title="Setting" />
</menu>
在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 name="toolbar">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:minHeight">?attr/actionBarSize</item>
<item name="android:background">@color/colorPrimary</item>
<item name="android:fitsSystemWindows">true</item>
</style>
<style name="base_toolbar" parent="toolbar"/>
values-v21中的style如下:
<style name="base_toolbar" parent="@style/toolbar">
<item name="android:elevation">3dp</item>
<item name="android:navigationIcon">?attr/homeAsUpIndicator</item>
</style>
使用这个style
style="@style/base_toolbar"
1.修改toolbar的字体
<!-- ToolBar样式 .-->
<style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
<!--修改toolbar的Title颜色.正确-->
<item name="android:textColorPrimary">@android:color/holo_red_dark</item>
<!--修改toolbar的subtitle(小标题)颜色.正确-->
<item name="subtitleTextColor">@android:color/holo_red_dark</item>
</style>
2.修改Toolbar的menu折叠图标和NavigationIcon的颜色
<style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
<!--这个也正确,用这个吧-->
<item name="colorControlNormal">@android:color/holo_red_dark</item>
</style>
image.png
3.修改menu的字体颜色
<!-- ToolBar菜单样式.-->
<style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
<!--设置背景-->
<item name="android:background">@android:color/white</item>
<!--设置字体颜色-->
<item name="android:textColor">@android:color/holo_red_dark</item>
</style>
image.png
4.menu菜单的显示位置.
默认是这样的:
image.png
会遮盖toolbar
可以修改popuptheme的这个属性来设置:
<!--设置不覆盖锚点-->
<item name="overlapAnchor">false</item>
最终效果的style代码:
<style name="toolbar">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:minHeight">?attr/actionBarSize</item>
<item name="android:background">@color/colorPrimary</item>
<item name="android:fitsSystemWindows">true</item>
</style>
<style name="base_toolbar" parent="toolbar"/></style>
<!-- ToolBar样式.-->
<style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
<!--修改toolbar的Title(大标题)颜色-->
<item name="android:textColorPrimary">@android:color/holo_red_dark</item>
<!--修改toolbar的subtitle(小标题)颜色-->
<item name="subtitleTextColor">@android:color/holo_red_dark</item>
<!--修改toolbar的图标颜色.-->
<item name="colorControlNormal">@android:color/holo_red_dark</item>
</style>
<!-- ToolBar菜单样式.-->
<style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
<!--设置背景-->
<item name="android:background">@android:color/white</item>
<!--设置字体颜色-->
<item name="android:textColor">@android:color/holo_red_dark</item>
<!--设置不覆盖锚点-->
<item name="overlapAnchor">false</item>
</style>
values-v21的style的代码:
<style name="base_toolbar" parent="@style/toolbar">
<item name="android:elevation">6px</item>
<item name="android:navigationIcon">?attr/homeAsUpIndicator</item>
</style>
toolbar布局的代码
<android.support.v7.widget.Toolbar
android:id="@+id/tl_costom"
style="@style/base_toolbar"
app:theme="@style/toolbar_theme"
app:popupTheme="@style/popup_theme"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
</android.support.v7.widget.Toolbar>
参考原文：
- Toolbar设置掉坑总结 @jlanglang
https://juejin.im/post/5a30de4051882531d828680d - 郭霖《第一行代码》
http://item.jd.com/12012505.html
