天天看點

Toorbar使用和自定義

本篇文章介紹:

  1. 如何使用Toolbar;
  2. 自定義Toolbar;

先來看一看效果,了解一下toolbar;

Toorbar使用和自定義

布局檔案:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"/>
           

Actvity中設定屬性:

Toolbar toolBar= (Toolbar) findViewById(R.id.toolbar);
toolBar.setLogo(R.mipmap.ic_launcher);//設定圖示
toolBar.setTitle("Title");//設定主标題
toolBar.setSubtitle("smalltitle");//設定子标題
           

這樣就可以實作上面的效果。

接下來是自定義的Toolbar:

Toorbar使用和自定義

布局檔案:

<com.example.cjj.test.bean.MyToolBar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
    >
    </com.example.cjj.test.bean.MyToolBar>
           

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">

    <ImageButton
        android:id="@+id/mLeftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:background="?attr/colorPrimary"
        /> 
    <TextView
        android:id="@+id/toolbar_title"
        android:text="title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="20sp"
        />
    <ImageButton
        android:id="@+id/mRightButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="?attr/colorPrimary"/>
</RelativeLayout>
           

建立一個MyToolbar:

public class MyToolBar extends Toolbar {
    //布局
    private LayoutInflater mInflater;  
    //右邊按鈕
    private ImageButton mRightButton;
    //左邊按鈕
    private ImageButton mLeftButton;
    //标題
    private TextView mTextTitle;

    private View view;

    public MyToolBar(Context context) {
       this(context,null);
    }

    public MyToolBar(Context context, AttributeSet attrs) {
        this(context, attrs, );
    }
    public MyToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //初始化函數
        initView();
        setContentInsetsRelative(, );
        if (attrs != null) {
             setLeftButtonIcon(R.mipmap.back_icon);//設定左圖示
                //設定點選事件
                setLeftButtonOnClickLinster(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(getContext(),"left",Toast.LENGTH_SHORT).show();
                    }
                });
                setRightButtonIcon(R.mipmap.nav_more);//設定右圖示
                 //設定點選事件
                setRightButtonOnClickLinster(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(getContext(), "right", Toast.LENGTH_SHORT).show();
                    }
                });
        }
    }
 private void initView() {
        if(view==null){
            //初始化
            mInflater= LayoutInflater.from(getContext());
            //添加布局檔案
            view=mInflater.inflate(R.layout.toolbar,null);
            //綁定控件
            mEditSearchView= (EditText) view.findViewById(R.id.toolbar_searchview);
            mTextTitle= (TextView) view.findViewById(R.id.toolbar_title);
            mLeftButton= (ImageButton) view.findViewById(R.id.mLeftButton);
            mRightButton= (ImageButton) view.findViewById(R.id.mRightButton);

            LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
            addView(view, layoutParams);
        }
    }
      public void  setRightButtonIcon(int icon){

        if(mRightButton !=null){

            mRightButton.setImageResource(icon);
           // mRightButton.setVisibility(VISIBLE);
        }

    }
    public void  setLeftButtonIcon(int icon){

        if(mLeftButton !=null){

            mLeftButton.setImageResource(icon);
            //mLeftButton.setVisibility(VISIBLE);
        }

    }

    //設定右側按鈕監聽事件
    public void setRightButtonOnClickLinster(OnClickListener linster) {
        mRightButton.setOnClickListener(linster);
    }

    //設定左側按鈕監聽事件
    public void setLeftButtonOnClickLinster(OnClickListener linster) {
        mLeftButton.setOnClickListener(linster);
    }