自定义toolbar

本文介绍了如何自定义Toolbar,包括创建包含额外视图的布局文件toolbar.xml,编写自定义类MineToolBar,并在test.xml布局中应用自定义Toolbar,详细阐述了自定义过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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">
这样我们就让他们关联了起来,大概逻辑差不多就是这样了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值