Google官方推荐使用它来代替ActionBar,ToolBar应该都是很熟悉了,随便一搜都能找到一大堆资料,现在之所以还写算是记录一下成长的足迹吧,也希望能够帮助到需要的人,在这里有两种使用方式,但从某一点上看算是一种,话不多说了

maui ToolbarItem 自定义样式 toolbar自定义布局_android

使用方式一:

1、从上图可以看出ToolBar继承自ViewGroup,所以可以直接把它当做一个ViewGroup来使用,
       一定要使用V7包中的ToolBar才可以,而不是V7包中的ToolBar只有 API Level 21 也就是 Android 5.0 以上的版本才能使用。

        layout 布局文件:

?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.support.v7.widget.Toolbar
        android:id="@+id/toolbar_Main"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary">

        <TextView
            android:text="石头"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            />

        <ImageView
            android:src="@drawable/img_q"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="right" />
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

        效果图:

               

maui ToolbarItem 自定义样式 toolbar自定义布局_xml_02


       一开始也看到很多人写的使用这种方式,但是当自己用的时候才发现title不能居中,icon也不能显示在bar的左(右)侧,后来尝试使用gravity来控制子view的位置,但是在使用studio的时候,输入gravity并没有给出有关设置这个属性的提示,一开始还以为没有这个属性,后来从别的地方拷了一个这个属性发现这个属性可以使用,而且并没有报错,如果有碰到这个问题的赶紧试试吧。

(温馨提示:使用的时候不要忘了把manifest中application的theme设置为或继承Theme.AppCompat.Light.NoActionBar)

使用方式二:

自定义view继承ToolBar(这种方式忘了是从哪个视频上看到的了,就仿里面的就造了一个)

       先看一下效果:

          

maui ToolbarItem 自定义样式 toolbar自定义布局_ico_03

       使用:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

    <com.example.l.toolbardemo.CustomToolBar
        android:id="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:minHeight="@dimen/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:rightButtonText="更多"
        app:isShowButton="true"
        app:tvToolBarTitle="标题"
        android:layout_alignParentTop="true"

        app:imgBackWidth="@dimen/dimen_25dp"
        app:imgBackHight="@dimen/dimen_25dp"
        />

</RelativeLayout>

       自定义ToolBar:

  • 在构造器中填充 layout:
/**
 * 填充 layout
 */
private void initView() {
    if (mView == null) {
        mInflater = LayoutInflater.from(getContext());
        mView = mInflater.inflate(R.layout.layout_custom_toolbar, null);

        imgToolBarBack = ((ImageView) mView.findViewById(R.id.img_custom_toolbar_back));
        tvToolBarTitle = ((TextView) mView.findViewById(R.id.tv_custom_toolbar_title));
        btnToolBarRight = ((Button) mView.findViewById(R.id.btn_custom_toolbar_right));
        //设置 params
        LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
        addView(mView, lp);
    }
}
  • layout_custom_toolbar 布局:
<?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="@dimen/actionBarSize">

    <ImageView
        android:id="@+id/img_custom_toolbar_back"
        android:layout_width="@dimen/dimen_25dp"
        android:layout_height="@dimen/dimen_25dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/dimen_10dp"
        android:padding="@dimen/dimen_3dp"
        android:src="@mipmap/ic_action_back" />

    <TextView
        android:id="@+id/tv_custom_toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@color/color_white"
        android:textSize="@dimen/dimen_16sp" />

    <Button
        android:id="@+id/btn_custom_toolbar_right"
        style="@android:style/Widget.Material.Toolbar.Button.Navigation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:textColor="@color/color_white"
        android:visibility="gone" />
</RelativeLayout>
  • 获取自定义属性,并给layout的子view 设置属性
private void initAttrs(AttributeSet attrs, int defStyleAttr) {
    if (attrs != null) {
        final TintTypedArray typedArray = TintTypedArray.obtainStyledAttributes(getContext(), attrs, R.styleable.CustomToolBar, defStyleAttr, 0);

        //# 设置返回图片 img 宽高属性
        int imgBackWidth = (int) typedArray.getDimension(R.styleable.CustomToolBar_imgBackWidth, imgBackWidthDefault);
        int imgBackHight = (int) typedArray.getDimension(R.styleable.CustomToolBar_imgBackHight, imgBackHightDefault);
        if (imgToolBarBack != null) {
            ViewGroup.LayoutParams layoutParams = imgToolBarBack.getLayoutParams();
            layoutParams.width = imgBackWidth;
            layoutParams.height = imgBackHight;
            imgToolBarBack.setLayoutParams(layoutParams);
        }

        //# 设置标题 tv 属性
        String strTitle = typedArray.getString(R.styleable.CustomToolBar_tvToolBarTitle);
        float strTitleSize = typedArray.getDimension(R.styleable.CustomToolBar_tvToolBarTitleSize, strTitleSizeDefault);
        if (tvToolBarTitle != null) {
            tvToolBarTitle.setText("".equals(strTitle) ? strTitleDefault : strTitle);
            tvToolBarTitle.setTextSize(strTitleSize);
        }

        //# 设置右侧 btn 属性
        final Drawable rightIcon = typedArray.getDrawable(R.styleable.CustomToolBar_rightButtonIcon);
        if (rightIcon != null) {
            setRightButtonIcon(rightIcon);
        }

        boolean isShowButton = typedArray.getBoolean(R.styleable.CustomToolBar_isShowButton, false);
        if (isShowButton) {
            showBhtton();
        }

        CharSequence rightButtonText = typedArray.getText(R.styleable.CustomToolBar_rightButtonText);
        if (rightButtonText != null)
            setRightButtonText(rightButtonText);

        typedArray.recycle();
    }
}
  • 方法的定义:
private void setRightButtonText(CharSequence text) {
    btnToolBarRight.setText(text);
    btnToolBarRight.setVisibility(View.VISIBLE);
}

/**
 * 是否显示右侧 btn
 */
private void showBhtton() {
    if (btnToolBarRight != null)
        btnToolBarRight.setVisibility(VISIBLE);
}

@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
private void setRightButtonIcon(Drawable icon) {
    if (btnToolBarRight != null) {
        btnToolBarRight.setBackground(icon);
        btnToolBarRight.setVisibility(VISIBLE);
    }
}

public void setRightButtonIcon(int icon) {
    setRightButtonIcon(getResources().getDrawable(icon));
}
  • 自定义属性:
<declare-styleable name="CustomToolBar">

    <attr name="imgBack" format="reference" />
    <attr name="imgBackWidth" format="dimension|reference"/>
    <attr name="imgBackHight" format="dimension|reference"/>

    <attr name="tvToolBarTitle" format="dimension|string" />
    <attr name="tvToolBarTitleSize" format="dimension|reference" />

    <attr name="rightButtonIcon" format="reference" />
    <attr name="isShowButton" format="boolean" />
    <attr name="rightButtonText" format="dimension|string" />

</declare-styleable>

       写到这感觉和第一种方法差不多,就是看起来比前一种高大上一些,但是要复杂不少,具体使用哪一个,还要看自己了。写第二种就是因为可以熟悉一下自定义View,如果能帮助到你~