自定义的顶部标题栏

标题栏一直是使用次数非常多的一个东西，所以把标题栏模块化，更能加快我们的开发效率

本文将自定义一个标题栏，用于复用，只是一个基本的小架子，不过思路很重要，有了这个思路，相信都能做出一个漂亮的模块化的标题栏

首先

在Valus文件夹下面新建一个atts文件，使用styleable来定义我们的需要实现的一些自定义的属性，name中放置属性的名字，frormat设置属性的类型,比如左边的textview的文字大小我们用dimen类型来定义
   有的人肯定会问为什么不用button，而用textview呢，因为我觉得textview比button更加灵活，我们在xml中可以通过设置drawleft设置图片，也能设置点击事件，功能比较灵活
         定位好我们需要的属性之后，新建一个java文件，去调用我们的属性，并赋值

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CstTopView">
        <attr name="LeftText" format="string" />
        <attr name="LeftTextSize" format="dimension" />
        <attr name="LeftTextColor" format="color|reference" />
        <attr name="RightText" format="string" />
        <attr name="RightTextSize" format="dimension" />
        <attr name="RightTextColor" format="color|reference" />
        <attr name="TitleText" format="string" />
        <attr name="TitleSize" format="dimension" />
        <attr name="TitleColor" format="reference|color" />
        <attr name="leftBG" format="color|reference" />
        <attr name="rightBg" format="reference|color" />
        <attr name="titleBG" format="reference|color" />
    </declare-styleable>

</resources>

*首先定义好我们需要的控件，一般一个ToolBar分为3个部分，左边中间和右边，我们用3个TextView来表示，同时把属性也先初始化好

 //3个对应的控件
    private TextView LeftTv, RightTv, TitleTv;

    //控件相对应的一些属性
    private float LeftSize, RightSize, TltleSize;
    private String LeftText, RightText, TtleText;
    private Drawable TitlebgColor, LeftTextbgColor, RightTexbgtColor;
    private ToolListener listener;
    private Drawable LeftBg, RightBg, TitleBg;

    //控件的位置属性
    private LayoutParams LeftParams, RightParams, TitleParams;

public class CstTopView extends RelativeLayout {

继承RelativeLayout 实现它的构造方法，因为我们是自定义属性，所以我们需要实现带AttributeSet的构造方法

代码如下

  public CstTopView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //使用TypedArray来保存我们在atts中设置的属性，通过context获取我们相对应的xml文件的属性数组
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CstTopView);
        //在TypedArray中，属性是通过键值对的形式存在的，所以我们在取相对应的属性的时候，通过我们在xml中设置的属性类型来获取
        //第一个属性是我们在xml中设置的，第二个是默认属性，就是在第一个属性为空的时候，默认展示出来的，这里我设置为0
        LeftSize = ta.getDimension(R.styleable.CstTopView_LeftTextSize, 0);
        RightSize = ta.getDimension(R.styleable.CstTopView_RightTextSize, 0);
        TltleSize = ta.getDimension(R.styleable.CstTopView_TitleSize, 0);
        LeftText = ta.getString(R.styleable.CstTopView_LeftText);
        RightText = ta.getString(R.styleable.CstTopView_RightText);
        TtleText = ta.getString(R.styleable.CstTopView_TitleText);
        TitlebgColor = ta.getDrawable(R.styleable.CstTopView_TitleColor);
        LeftTextbgColor = ta.getDrawable(R.styleable.CstTopView_RightTextColor);
        RightTexbgtColor = ta.getDrawable(R.styleable.CstTopView_RightTextColor);
        LeftBg = ta.getDrawable(R.styleable.CstTopView_leftBG);
        RightBg = ta.getDrawable(R.styleable.CstTopView_rightBg);
        TitleBg = ta.getDrawable(R.styleable.CstTopView_titleBG);
        //使用完记得回收，放置缓存引起的bug
        ta.recycle();

//获得这些属性之后,把相对应的控件New出来并设置上这些属性;
        LeftTv = new TextView(context);
        RightTv = new TextView(context);
        TitleTv = new TextView(context);

        LeftTv.setText(LeftText);
        LeftTv.setTextSize(LeftSize);
        LeftTv.setBackground(LeftTextbgColor);
        LeftTv.setBackground(LeftBg);

        RightTv.setText(RightText);
        RightTv.setTextSize(RightSize);
        RightTv.setBackground(RightTexbgtColor);
        RightTv.setBackground(RightBg);

        TitleTv.setText(TtleText);
        TitleTv.setTextSize(TltleSize);
        TitleTv.setBackground(TitlebgColor);
        TitleTv.setGravity(Gravity.CENTER);
        TitleTv.setBackground(TitleBg);

        //给我们的topview设置一个背景，用来区分
        setBackgroundResource(R.color.yellow);

 //设置控件的位置信息，并添加到viewgroup中
        LeftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        LeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        LeftParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        RightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        RightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        RightParams.addRule(RelativeLayout.CENTER_VERTICAL);
        TitleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        TitleParams.addRule(RelativeLayout.CENTER_HORIZONTAL, TRUE);

        addView(LeftTv, LeftParams);
        addView(RightTv, RightParams);
        addView(TitleTv, TitleParams);

 //然后我们给这些控件加上监听首先我们定义一个接口,实现俩个方法，左边的监听和右边的监听
    public interface ToolListener {
        void LeftClick();

        void RightClick();
    }

    //然后对外部暴露一个方法，通过接口回调来调用,这样就连接起来了
    public void SetTopListener(ToolListener listener) {
        this.listener = listener;
    }

我们前面已经定义好了这个监听的对象

   private ToolListener listener;

 //通过内部的对象对象，加监听
        LeftTv.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                listener.LeftClick();
            }
        });

        RightTv.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                listener.RightClick();
            }
        });

这样代码的部分就完成了，接下来在xml中使用我们的自定义控件

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.anlaiye.swt.csttopview.MainActivity">

    <com.anlaiye.swt.csttopview.CstTopView
        android:id="@+id/csttopview"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:LeftText="我是左边"
        app:leftBG="@color/colorPrimary"
        app:LeftTextSize="5sp"
        app:RightText="我是右边"
        app:RightTextSize="5sp"
        app:rightBg="@color/colorAccent"
        app:TitleSize="10sp"
        app:TitleText="我是中间">

    </com.anlaiye.swt.csttopview.CstTopView>


</LinearLayout>

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

这句代码是我们在调用自定义的一些属性的时候，需要声明这个工作空间，这样才能调用到我们的自定义属性

比如app:leftBG,通过这个方式，来为我们的自定义属性赋值，也可以取其他的名字，

比如

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

那么我们就应该这样调用

lll:leftBG

效果图如下

效果很简陋，但是这个模型的方式设计师可以继续深入研究优化的，可以在自定义的这个类中定位更多需要用到的属性

比如设置左边加个图片，左边的隐藏，都是可以的

代码地址https://github.com/swtandyz/CstTopView