ToolBar 使用姿势
2017-08-19 本文已影响80人
d74f37143a31
首发于个人技术博客
简单使用
直接使用ToolBar 布局，在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>
- ToolBar布局直接使用
<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" 设置弹出框的主题为淡色主题
- Java 代码中使用
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();
}
});
- menu 创建和点击
① 在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;
}
- 听说没图都不敢出来发文
image.png
ToolBar的封装
为什么要封装？
产品想要这种效果（等我拿起桌上的大刀，奈何他手里拿着手枪）。
实现的效果是左边一个图标，右边一个图标，中间显示文字或者搜索框。
- 写一个自定义的Toolbar，就叫 CustomToolbar 吧
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>
- 显示左边文字，右边图片，中间居中的文字
image.png
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();
}
});
- 显示搜索框
image.png
直接在布局文件中设置
<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>
