自定义组合控件——简单实现自定义toolbar

自定义组合控件——简单实现自定义toolbar

首先，要写一个toolbar，十分简单，在xml文件定义几个控件组合在一起，用include就能简单复用，但是今天这里来讲下自定义组合控件，目的很明显，就是降低布局文件和activity的耦合。

话不多说，直接帖代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyToolBar">
        <attr name="titlename"  format="string"/>
        <attr name="titlesize" format="dimension"/>
        <attr name="titlecolor" format="color"/>
        <attr name="leftbg" format="reference"/>
        <attr name="righttext" format="string"/>
        <attr name="rightsize" format="dimension"/>
        <attr name="rightcolor" format="color"/>

    </declare-styleable>

</resources>

这里我在values文件夹下新建一个叫做attrs的xml文件 <declare-styleable\>标签告诉系统这是我们自己定义的属性， <attr\> 标签是我们定义属性的名字，format属性 定义值的类型

package com.customtoolbar;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * Created by z on 2017/6/20.
 */

public class Toolbar extends RelativeLayout{

    //标题栏所包含的三个控件
  private   Button leftbutton ;
   private TextView title,righttext;

    //标题中心文字的属性
    private String titlename;
    private float titlesize;
    private int titlecolor;

    //左边按钮的属性
    private Drawable leftbg;

    //右边文字的属性
    private String rightname;
    private float rightsize;
    private int rightcolor;


   private LayoutParams leftParams;
    private LayoutParams titleParams;
    private LayoutParams rightParams;



    public Toolbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.MyToolBar);
        //获取xml文件中的属性值
        titlename=typedArray.getString(R.styleable.MyToolBar_titlename);
        titlesize=typedArray.getDimension(R.styleable.MyToolBar_titlesize,0);
        titlecolor=typedArray.getColor(R.styleable.MyToolBar_titlecolor,0);

        leftbg=typedArray.getDrawable(R.styleable.MyToolBar_leftbg);

        rightname=typedArray.getString(R.styleable.MyToolBar_righttext);
        rightsize=typedArray.getDimension(R.styleable.MyToolBar_rightsize,0);
        rightcolor=typedArray.getInt(R.styleable.MyToolBar_rightcolor,0);
        //回收，避免浪费资源以及未知的缓存错误
        typedArray.recycle();

        //实例化控件
        leftbutton=new Button(context);
        title=new TextView(context);
        righttext=new TextView(context);

        //属性赋给定义的控件
        title.setText(titlename);
        title.setTextSize(titlesize);
        title.setTextColor(titlecolor);
        title.setGravity(Gravity.CENTER);

        leftbutton.setBackground(leftbg);

        righttext.setText(rightname);
        righttext.setTextSize(rightsize);
        righttext.setTextColor(rightcolor);

        setBackgroundColor(Color.parseColor("#63B8FF"));

        //定义子控件在父容器中的位置
        leftParams=new LayoutParams(100, 100);
        leftParams.setMarginStart(20);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);
        leftParams.addRule(RelativeLayout.CENTER_VERTICAL);

        addView(leftbutton,leftParams);


        titleParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        addView(title,titleParams);

        rightParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        rightParams.setMarginEnd(20);
        rightParams.addRule(RelativeLayout.CENTER_VERTICAL);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);
        addView(righttext,rightParams);

//给左边的按钮设置点击事件
        leftbutton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //执行回调方法
                leftButtonListener.LeftBtnOnclick();
            }
        });


    }

    private LeftButtonListener leftButtonListener;

    public void setOnToolbarclickListener (LeftButtonListener listener) {
        leftButtonListener=listener;
    }

    public interface LeftButtonListener
    {
        void LeftBtnOnclick();
    }
}

这里是自定义的核心代码，用typedarray类存储我们xml文件中定义的属性，然后通过各种get方法，取出你xml文件中定义的值，再将这些属性值附给我们自定义控件的各个子控件。
那么点击事件该怎么处理呢？我们不能在自定义控件中写死他的执行方法，这样十分不合理，这时候我们就想到了接口回调。
定义一个LeftButtonListener，里面有待实现方法LeftBtnOnclick() 在activity中实现这个方法。
当我们点击这个按钮的时候，执行LeftBtnOnclick() ，具体执行代码，自己在activity中定义。

package com.customtoolbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {


    Toolbar myToolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myToolbar= (Toolbar) findViewById(R.id.mytoolbar);
        myToolbar.setOnToolbarclickListener(new Toolbar.LeftButtonListener() {
            @Override
            public void LeftBtnOnclick() {
                Toast.makeText(MainActivity.this,"你点击了左边按钮",Toast.LENGTH_SHORT).show();
            }
        });

    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.customtoolbar.MainActivity">

    <com.customtoolbar.Toolbar
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/mytoolbar"
        custom:titlename="标题"
        custom:titlesize="10sp"
        custom:titlecolor="#ffffff"
        custom:leftbg="@mipmap/ic_launcher"
        custom:righttext="右键"
        custom:rightsize="6sp"
        custom:rightcolor="#000"



        >


    </com.customtoolbar.Toolbar>
</RelativeLayout>

布局文件中给我们之前自定义属性赋值，这里有一点很重要，就是命名空间，例如要使用android：要用到

xmlns:android="http://schemas.android.com/apk/res/android"

同理

xmlns:custom="http://schemas.android.com/apk/res-auto"

我们讲前面的名字改成自定义名字，到时候就用这个名字来调用，后面改成res-auto让他自动搜寻

最后我们来看下演示效果：

总结：
这种方法看似会复杂不少，但是其实条理很清晰，并且能有效的降低布局和activity间的耦合，让代码更易维护，谢谢。