自定义toolbar

来源：互联网发布：淘宝系统电话编辑：程序博客网时间：2024/04/25 23:53

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中使用的属性关联起来的

其实这个就和自定义属性差不多，有兴趣的可以参考这篇文章深入理解android自定义属性

然后androidmanifest中应用了这个主题

    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/AppTheme">

这样我们就让他们关联了起来，大概逻辑差不多就是这样了

1 0