ToolBar 使用姿势

简单使用

1. 添加依赖
compile 'com.android.support:appcompat-v7:25.3.1'

2. 隐藏原有的ActionBar，两步，有可能会出现 Theme.AppCompat 北京找不到，说明你的support库版本太低了，需要去SDK manager 去升级那个库。

① 在 res/values/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>
</style>

② 在 /res/values-v21/styles.xml中
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:navigationBarColor">@android:color/white</item>
</style>
</resources>

<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"
/>

android:layout_height="?attr/actionBarSize" 设置高度
android:background="@color/colorPrimary" 设置背景色
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 设置顶部的淡色主题
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 设置弹出框的主题为淡色主题

mToolbar = (Toolbar) findViewById(R.id.toolbar);

mToolbar.setTitle("DemoToolbar");
setSupportActionBar(mToolbar);
//设置字的颜色
mToolbar.setTitleTextColor(Color.WHITE);
//显示NavigationIcon

mToolbar.setOnMenuItemClickListener(this);

//设置返回的图标
mToolbar.setNavigationIcon(getResources().getDrawable(R.mipmap.slide));
//设置监听
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});

① 在activity下重写 onCreateOptionsMenu 方法，获取到 menu 布局
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//写一个menu的资源文件.然后创建就行了.
getMenuInflater().inflate(R.menu.menu,menu);
return super.onCreateOptionsMenu(menu);
}

在res目录先新建一个menu目录，创建一个menu文件

<?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/action_edit"
android:title="@string/action_edit"
android:orderInCategory="80"
android:icon="@mipmap/message"
app:showAsAction="ifRoom" />

<item android:id="@+id/action_share"
android:title="@string/action_share"
android:orderInCategory="90"
android:icon="@mipmap/add"
app:showAsAction="ifRoom" />

<item android:id="@+id/action_settings"
android:title="@string/action_settings"
android:orderInCategory="10"
app:showAsAction="never"/>
</menu>

//1、always：使菜单项一直显示在ToolBar上。
//2、ifRoom：如果有足够的空间，这个值会使菜单项显示在ToolBar上。
//3、never：使菜单项永远都不出现在ToolBar上,在…的子项中显示。
//4、 xmlns:app="http://schemas.android.com/apk/res-auto" 记得导入

② menu 点击事件
1、implement Toolbar.OnMenuItemClickListener
2、设置监听  mToolbar.setOnMenuItemClickListener(this);
3、实现接口 onMenuItemClick

@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu1:
Toast.makeText(this, "menu1", Toast.LENGTH_SHORT).show();
break;
case R.id.menu2:
Toast.makeText(this, "menu2", Toast.LENGTH_SHORT).show();
break;
case R.id.menu3:
Toast.makeText(this, "menu3", Toast.LENGTH_SHORT).show();
break;
default:
break;
}
return false;
}

ToolBar的封装

public class CustomToolbar extends Toolbar {

private LayoutInflater mInflater;
private View mView;

private TextView mLeftButtonText;
private TextView mTitleText;
private TextView mRightButtonText;
private EditText mSearchView;

public CustomToolbar(Context context) {
this(context,null) ;
}

public CustomToolbar(Context context, @Nullable AttributeSet attrs) {
this(context,attrs,0) ;
}

public CustomToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView() ;

if (attrs != null){
final TintTypedArray tintTypedArray = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.CustomToolbar, defStyleAttr, 0);

CharSequence leftText = tintTypedArray.getText(R.styleable.CustomToolbar_leftButtonText);
if (leftText != null){
setLeftButtonText(leftText) ;
}

final Drawable leftIcon = tintTypedArray.getDrawable(R.styleable.CustomToolbar_leftIcon);
if (leftIcon != null) {
//setNavigationIcon(navIcon);
setLeftIcon(leftIcon);
}

final Drawable rightIcon = tintTypedArray.getDrawable(R.styleable.CustomToolbar_rightButtonIcon);
if (rightIcon != null) {
//setNavigationIcon(navIcon);
setRightButtonIcon(rightIcon);
}

boolean isShowSearchView = tintTypedArray.getBoolean(R.styleable.CustomToolbar_isShowSearchView,false);

if(isShowSearchView){

showSearchView();
hideTitleView();

}

CharSequence rightButtonText = tintTypedArray.getText(R.styleable.CustomToolbar_rightButtonText);
if(rightButtonText !=null){
setRightButtonText(rightButtonText);
}

tintTypedArray.recycle();
}

}

public void setLeftIcon(Drawable leftIcon) {
// 默认显示返回箭头，文字先不需要
mLeftButtonText.setVisibility(VISIBLE);
mLeftButtonText.setCompoundDrawablesWithIntrinsicBounds(leftIcon, null, null, null);
}

public void setLeftButtonText(CharSequence leftButtonText) {
mLeftButtonText.setVisibility(VISIBLE);
mLeftButtonText.setText(leftButtonText);
}

public  void setRightTextOnClickListener(OnClickListener li){

mRightButtonText.setOnClickListener(li);
}
public  void setLeftTextOnClickListener(OnClickListener li){

mLeftButtonText.setOnClickListener(li);
}

public void setRightButtonText(CharSequence text){
mRightButtonText.setVisibility(VISIBLE);
mRightButtonText.setText(text);
}

public void setRightButtonText(int id){
setRightButtonText(getResources().getString(id));
}

public TextView getRightButtonText(){

return this.mRightButtonText;
}

public TextView getLeftButton(){

return this.mLeftButtonText;
}

@Override
public void setTitle(int resId) {

setTitle(getContext().getText(resId));
}

@Override
public void setTitle(CharSequence title) {

initView();
if(mTitleText !=null) {
showTitleView();
mTitleText.setText(title);
}

}

public void showTitleView(){
if(mTitleText !=null)
mTitleText.setVisibility(VISIBLE);
}

public void hideTitleView() {
if (mTitleText != null)
mTitleText.setVisibility(GONE);
}

public void showSearchView() {
if(mSearchView !=null)
mSearchView.setVisibility(VISIBLE);
}

public void hideSearchView(){
if(mSearchView !=null)
mSearchView.setVisibility(GONE);
}

public void setRightButtonIcon(Drawable rightIcon) {
if(mRightButtonText !=null){

mRightButtonText.setVisibility(VISIBLE);
mRightButtonText.setCompoundDrawablesWithIntrinsicBounds(null, null, rightIcon, null);
}
}

public void  setRightButtonIcon(int icon){

setRightButtonIcon(getResources().getDrawable(icon));
}

private void initView() {
if(mView == null) {

mInflater = LayoutInflater.from(getContext());

mView = mInflater.inflate(R.layout.custom_toolbar, null);

mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
mLeftButtonText = (TextView) mView.findViewById(R.id.lt_main_title_left);
mTitleText = (TextView) mView.findViewById(R.id.lt_main_title);
mRightButtonText = (TextView) mView.findViewById(R.id.lt_main_title_right);

LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER_HORIZONTAL);

addView(mView, lp);
}
}
}

代码很简单，就是自定义一个继承自 Toolbar 的自定义View
创建一个布局文件，然后读取布局文件中的内容
设置对应的方法，用于在Java代码使用中添加内容和隐藏内容
布局中利用 TextView 去显示图片，利用到了  mRightButtonText.setCompoundDrawablesWithIntrinsicBounds(null, null, rightIcon, null); 这是对应的TextView中设置的drawableRight，如果不想显示图片，则参数全部设置为null即可。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize"
>
<EditText
android:id="@+id/toolbar_searchview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:gravity="center"
android:drawableLeft="@mipmap/icon_search"
style="@style/search_view"
android:hint="请输入搜索内容"
android:visibility="gone"
/>
<TextView
android:id="@+id/lt_main_title_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:layout_centerInParent="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"
android:gravity="center_vertical"
android:textColor="@color/white"
android:textSize="16dp"
/>
<TextView
android:id="@+id/lt_main_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
android:singleLine="true"
android:ellipsize="end"
android:textColor="@android:color/white"
android:textSize="20dp"
/>
<TextView
android:id="@+id/lt_main_title_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:textSize="16dp"
/>
</RelativeLayout>

CustomToolbar customToolbar = (CustomToolbar) findViewById(R.id.custom_toolbar);
customToolbar.setLeftButtonText("返回");
customToolbar.setTitle("我是居中标题");
customToolbar.setRightButtonIcon(R.drawable.add);
customToolbar.setRightTextOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(RxJavaTestActivity.this, MActivity.class));
Toast.makeText(RxJavaTestActivity.this, "hello", Toast.LENGTH_SHORT).show();
}
});
customToolbar.setLeftTextOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});

直接在布局文件中设置
<com.xxxx.demo.CustomToolbar
android:id="@+id/m_custom_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorAccent"
app:isShowSearchView="true"
>
</com.xxxx.demo.CustomToolbar>