在开发中经常需要使用到标题栏，很多时候我们会自自定义一个标题栏，因为自定义标题栏基本上就只需要使用个RelativeLayout就能实现。但是很多时候我们自己定义的标题栏，总是显得不够规范，或者不够优雅。
下面将介绍使用ToolBar一步步实现上面的效果图：
- 添加一个布局activity_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:id="@+id/toolBar"
/>
</LinearLayout>
- 初始化ToolBar:
toolbar=(Toolbar)findViewById(R.id.toolBar);
toolbar.setTitle("我的行程"); //设置标题
toolbar.setSubtitle("SubTitle");// 设置子标题
toolbar.setLogo(R.mipmap.ic_launcher); //设置Logo
运行下看看效果
为啥我的行程是黑色的颜色呢？如果我想设置成自己的颜色又该怎么办呢？
那就再来一张图：
由此我们可以看到是textColorPrimary这个属性决定我们的Title的颜色，下面在我们的styles.xml中进行修改：
<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>
<item name="android:textColorPrimary">@color/colorWhite</item>
</style>
运行：
- 添加导航按钮：
setSupportActionBar(toolbar); //这里注意为固定写法
toolbar.setNavigationIcon(R.mipmap.ic_arrow_back_white_24dp);//设置导航按钮
- 添加右边的图标：
- 新建一个menu文件， res/menu/menu_tb.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="@+id/item_search"
android:title="搜索"
android:icon="@mipmap/ic_search_white_24dp"
app:showAsAction="ifRoom"/>
<item android:id="@+id/item_delete"
android:title="删除"
android:icon="@mipmap/ic_delete_white_24dp"
app:showAsAction="ifRoom"/>
<item android:id="@+id/item_info"
android:title="信息"
android:icon="@mipmap/ic_info_white_24dp"
app:showAsAction="never"/>
<item android:id="@+id/item_settings"
android:title="设置"
android:icon="@mipmap/ic_build_white_24dp"
app:showAsAction="never"/>
</menu>
其中
android:title表示显示menu的文本
android:icon表示显示menu的图标
app:showAsAction表示显示该item的策略，该属性包含2个值 ifRoom/never
ifRoom表示如果空间足够大就显示，否则就隐藏
never表示不显示，点击3个点后才显示出来
- 在Activity中重写onCreateOptionsMenu方法
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_tb,menu);//将menu_tb加载到menu中去
return true;
}
再来看看效果图:
为毛最右边的3个点是黑色的呢？从上面设置标题字体的颜色，我们是否大概知道需要去哪设置了呢？
没错，还是styles.xml中修改。
- 修改styles.xml中的android:textColorSecondary属性：
<item name="android:textColorSecondary">@color/colorWhite</item>
变白了吧。
当我们点击3个点的时候，效果图如下：
是不是觉得这个位置，以及背景颜色，字体颜色都不是很好看呢？
- 设置弹窗框样式
在styles.xml中添加弹窗框样式:
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
<item name="android:colorBackground">#87CEFA</item>
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一个item，用于控制menu-->
</style>
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item> <!--把该属性改为false即可使menu位置位于toolbar之下-->
</style>
在toolbar的布局文件中添加
app:popupTheme="@style/ToolbarPopupTheme
运行：
- 为菜单item添加点击事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
// do something...
return true;
}
});
- 为导航按钮添加返回父Activity功能
- 在Manifest.xml中指定父Activity
<!-- android:parentActivityName 指定Navigation按钮，返回的父Activity, 该属性是在4.1中添加进来的-->
<activity android:name=".ToolBarActivity"
android:parentActivityName=".MainActivity"
/>
<!-- 指定Navigation按钮，返回的父Activity,为了兼容4.1以下的版本-->
<meta-data android:name="android.support.PARENT_ACTIVITY"
android:value=".MainActivity"
/>
- 在Activity的onCreate中设置ActionBar的导航栏按钮允许返回父Acitivity
//获取ActionBar
ActionBar bar=getSupportActionBar();
//允许返回指定的父Activity
bar.setDisplayHomeAsUpEnabled(true);
以上就是使用ToolBar的步骤
网友评论