1.toolbar介绍
toolbar是android5.0退出的一个新控件,其实就是用来代替actionbar的,相比之actionbar,toolbar更加灵活,而且可以对其进行自定义,由于是android里的新控件,如果我们要在之前的api中使用它就需要support v7包来兼容,下面是效果图,这里我们队原来toolbar提供的靠左的title进行了覆盖,然后增加了一个edittext和imagebutton
2.toolbar自定义控件步骤
创建一个布局文件:
这个布局里面就是我们需要在原生toolbar中增加的view,直接贴代码,布局文件名为toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="@+id/toolbar_search"
style="@style/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="60dp"
android:drawableLeft="@mipmap/icon_search"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:hint="请输入搜索内容"
android:layout_below="@+id/toolbar_title"
android:visibility="gone" />
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textColor="@color/white"
android:textSize="30sp"
android:visibility="gone" />
<!--style="@android:style/Widget.Material.Toolbar.Button.Navigation"-->
<ImageButton
android:id="@+id/toolbar_right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@id/toolbar_title"
android:background="@color/transparent"
android:visibility="gone"/>
</RelativeLayout>
创建一个MineToolBar类:
这个是自定义控件的常规步骤吧,然后让这个类继承自ToolBar类,重写他的构造函数,对需要修改的view进行覆盖,然后对需要修改的toolbar控件进行覆盖,这里只需要对titile进行覆盖就行了,其他的都是增加的控件,下面是代码:
package widget;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.TintTypedArray;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.TextView;
import com.lc.store.R;
/**
* Created by jiangbo on 2016/4/4.
* Description 自定义toolbar
*/
public class MineToolBar extends Toolbar {
private LayoutInflater mInflater;
private EditText mSearch;
private TextView mTitle;
private ImageButton mButton;
private View mView;
public MineToolBar(Context context) {
this(context, null);
}
public MineToolBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MineToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
setContentInsetsRelative(10,10);
if(attrs!=null) {
//对attrs属性进行读取
final TintTypedArray a = TintTypedArray.obtainStyledAttributes(context, attrs,
R.styleable.MineToolBar, defStyleAttr, 0);
//读取自定义rightbutton图标
final Drawable navIcon = a.getDrawable(R.styleable.MineToolBar_rightButtomIcon);
if (navIcon != null) {
//对button设置图标
setRightButtonIcon(navIcon);
}
//读取isShowSearchView属性
boolean isShowSearchView = a.getBoolean(R.styleable.MineToolBar_isShowSearchView,false);
if(isShowSearchView){
showSearchView();
//hideTitleView();
}
a.recycle();
}
}
private void setRightButtonIcon(Drawable navIcon) {
if(mButton!=null){
mButton.setImageDrawable(navIcon);
mButton.setVisibility(VISIBLE);
}
}
private void initView() {
if (mView == null) {
mView = mInflater.from(getContext()).inflate(R.layout.toolbar, null);
mTitle = (TextView) mView.findViewById(R.id.toolbar_title);
mButton = (ImageButton) mView.findViewById(R.id.toolbar_right_button);
mSearch = (EditText) mView.findViewById(R.id.toolbar_search);
LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
addView(mView, params);
}
}
@Override
public void setTitle(int resId) {
setTitle(getContext().getText(resId));
}
@Override
public void setTitle(CharSequence title) {
initView();
mTitle.setText(title);
showTitleView();
}
public void setRightButtonOnClickListener(OnClickListener listener){
mButton.setOnClickListener(listener);
}
public void showSearchView() {
if (mSearch != null) {
mSearch.setVisibility(VISIBLE);
}
}
public void hideSearchView() {
if (mSearch != null) {
mSearch.setVisibility(GONE);
}
}
public void showTitleView() {
if (mTitle != null) {
mTitle.setVisibility(VISIBLE);
}
}
public void hideTitleView() {
if (mTitle != null) {
mTitle.setVisibility(GONE);
}
}
}
在布局文件test.xml中使用自定义的toolbar
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<widget.MineToolBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:backgroundTint="?attr/colorPrimaryDark"
app:navigationIcon="@mipmap/icon_discover"
app:rightButtomIcon="@mipmap/icon_discover"
app:isShowSearchView="true"
app:title="@string/home">
</widget.MineToolBar>
</LinearLayout>
这里需要说明几点,在backgroud标签中我们使用到了?attr,这个是什么呢?首先我们点进去看一下
这个value可不是我的value文件,这个是android自己的标签库,其实这个是与style中使用的属性关联起来的
然后androidmanifest中应用了这个主题
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
这样我们就让他们关联了起来,大概逻辑差不多就是这样了