Toolbar是Actionbar的升级版,更加自由。效果图:
一、使用步骤
首先引入:
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:palette-v7:28.0.0'
1、在styles.xml的主题中设置不使用Actionbar:
<!-- 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、写一个mytoolbar.xml,引入Toolbar控件。(单独写是为了多次调用,include即可)
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="标题"
app:subtitle="子标题"
app:logo="@mipmap/ic_launcher"
app:navigationIcon="@mipmap/icon_item_detail_back"
android:background="?attr/colorAccent"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
3、在布局中引入mytoolbar.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<!--引入Toolbar-->
<include layout="@layout/mytoolbar" />
<!--侧滑效果-->
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="内容界面"/>
<android.support.design.widget.TabLayout
android:id="@+id/tl_home_page"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorAccent"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@android:color/black" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_home_page"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<!--layout_gravity="start" ,这个必须要有,作为侧滑界面 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="start"
android:background="@color/colorPrimary">
<TextView
android:id="@+id/tv_close"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="侧滑界面, 点击收回"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
4、代码中进行Toolbar的自定义设置—menu、监听、实现侧滑、取色后设置背景
private void initToolbar() {
//设置Toolbar:意思是把Toolbar当做ActionBar来用。实际上可以不用这句。
// setSupportActionBar(mToolbar);
//设置menu(直接用mToolbar设置menu。因为上面没有设置setSupportActionBar(mToolbar),即不用重写onCreateOptionsMenu(Menu menu))
mToolbar.inflateMenu(R.menu.main);
//设置左侧箭头 监听
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
}
});
//设置menu item 点击监听
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem menuItem) {
int itemId = menuItem.getItemId();
switch (itemId) {
case R.id.item_share:
Toast.makeText(MainActivity.this, "分享", Toast.LENGTH_SHORT).show();
break;
case R.id.item_settings:
Toast.makeText(MainActivity.this, "设置", Toast.LENGTH_SHORT).show();
break;
default:
break;
}
return false;
}
});
//用DrawerLayout实现侧滑
mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.close);
mActionBarDrawerToggle.syncState();
mDrawerLayout.addDrawerListener(mActionBarDrawerToggle);
View close = findViewById(R.id.tv_close);
close.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mDrawerLayout.closeDrawer(Gravity.LEFT);
}
});
//Toolbar的背景设置为 palette从图片提取到的活力色 (目的是动态 适应当前界面的色调)
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.dog);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(@Nullable Palette palette) {
Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();
mToolbar.setBackgroundDrawable(new ColorDrawable(vibrantSwatch.getRgb()));
}
});
// @Override
// public boolean onCreateOptionsMenu(Menu menu) {
// //加载menu;如果actionbar存在就把items添加到actionbar
// //注意,因为上面没有调用setSupportActionBar(mToolbar),且主题中NoActionbar,即没有Actionbar。所以本方法也不用重写。
// getMenuInflater().inflate(R.menu.main, menu);
// return true;
// }
}
R.menu.main如下:
<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="搜索"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom" />
<item
android:id="@+id/item_share"
android:title="分享"
android:icon="@mipmap/dog"
app:showAsAction="ifRoom" />
<item
android:id="@+id/item_settings"
android:orderInCategory="100"
android:title="设置"
app:showAsAction="never" />
</menu>
侧滑效果如下: