自定义组合控件--自定义标题栏模板

前言： 在实际开发的时候，标题栏往往有很多共通性。在编写布局代码的时候可能会遇到每个页面都有一个标题栏，但是标题栏之间的差别又不是很大，而在每一个页面都去写一个标题栏那就是严重影响开发进度了，而且让一个脑力活变成了一个体力活。而且在开发其他项目的时候恰好也有一个类似的标题栏，在之前的项目中的代码的复用性就变差了。这篇博客将我实现自定义标题的方法分享一下。

一、先看一下标题栏效果，标题栏比较简单。重在演示如何自定义标题栏。

思路： 在这里我们使用自定义组合控件的方式来设计这个标题栏，首先可以看到这个标题栏中间都有些什么内容，左右两端有两个控件，用来显示我的和消息的两张图片，所以就可以想到这是两个ImageView。然后中间有一个标题，显然这是一个TextView。有了思路之后，我们来看看代码如何编写。

二、代码
1、首先我们在layout布局中新建一个布局，来搭建我们的布局。PS:这里布局有两种方式，代码和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="40dp"
    android:background="#6699cc"
    >
    <ImageView
        android:id="@+id/iv_topbar_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/main_title_me"
        android:layout_marginLeft="10dp"
        android:layout_centerVertical="true"
        />
    <TextView
        android:id="@+id/tv_topbar_titletext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="首页"
        android:textColor="#000000"
        android:textSize="20dp"
        android:layout_centerInParent="true"
        />
    <ImageView
        android:id="@+id/iv_topbar_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/main_title_message"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        />
</RelativeLayout>

2、这里我们需要定义一些自定义属性，让我们能够在控件属性中就能控制我们标题栏的一些属性。比如标题字体的大小颜色等等，我们在res/values下创建一个资源文件attrs。在attrs中name为自定义属名，format为自定义属性类型。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomXmlTopBar">
        <!--topbar中间文字属性-->
        <attr name="titleText" format="string"/>
        <attr name="titleTextColor" format="color"/>
        <attr name="titleTextSize" format="dimension"/>

        <!--topbar左边控件属性-->
        <attr name="leftSrc" format="reference"/>

        <!--topbar左边控件属性-->
        <attr name="rightSrc" format="reference"/>
    </declare-styleable>
</resources>

可以从自定义属性中看到，我给标题控件定义了text、color、size三个属性，给两边的两个图片控件添加了一个src属性。

3、自定义标题栏Java代码

package vunke.com.android.shipper.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import org.w3c.dom.Text;

import vunke.com.android.shipper.R;

/**
 * Created by 大家都说名字长不会被发现 on 2017/8/24.
 */

public class CustomXmlTopBar extends FrameLayout {

    //定义控件变量
    private ImageView iv_topbar_left,iv_topbar_right;
    private TextView tv_topbar_titletext;

    //属性变量
    private String titleText;
    private int titleTextColor;
    private float titleTextSize;

    private Drawable leftSrc;
    private Drawable rightSrc;

    public CustomXmlTopBar(Context context) {
        super(context);
    }

    public CustomXmlTopBar(Context context, AttributeSet attrs) {
        super(context, attrs);

        //填充布局
        LayoutInflater.from(context).inflate(R.layout.customtopbar_item,this);
        iv_topbar_left = (ImageView) findViewById(R.id.iv_topbar_left);
        iv_topbar_right = (ImageView) findViewById(R.id.iv_topbar_right);
        tv_topbar_titletext = (TextView) findViewById(R.id.tv_topbar_titletext);

        //获取自定义属性数组
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomXmlTopBar);

        //获取属性
        titleText = typedArray.getString(R.styleable.CustomXmlTopBar_titleText);
        titleTextColor = typedArray.getColor(R.styleable.CustomXmlTopBar_titleTextColor,000000);
        titleTextSize = typedArray.getDimension(R.styleable.CustomXmlTopBar_titleTextSize,20);

        leftSrc = typedArray.getDrawable(R.styleable.CustomXmlTopBar_leftSrc);

        rightSrc = typedArray.getDrawable(R.styleable.CustomXmlTopBar_rightSrc);

        typedArray.recycle();

        //设置属性
        iv_topbar_left.setImageDrawable(leftSrc);
        iv_topbar_right.setImageDrawable(rightSrc);
        tv_topbar_titletext.setText(titleText);
        tv_topbar_titletext.setTextColor(titleTextColor);
        tv_topbar_titletext.setTextSize(titleTextSize);
    }

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

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public CustomXmlTopBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
    //设置左控件是否显示,默认为显示
    public void setLeftIsvisable(boolean isvisableFlag){

        if (isvisableFlag){
            iv_topbar_left.setVisibility(View.VISIBLE);
        }else {
            iv_topbar_left.setVisibility(View.GONE);
        }
    }
    //设置右控件是否显示,默认为显示
    public void setRightIsvisable(boolean isvisableFlag){
        if (isvisableFlag){
            iv_topbar_right.setVisibility(View.VISIBLE);
        }else {
            iv_topbar_right.setVisibility(View.GONE);
        }
    }
}

可以中代码中看到，定义了一个类继承至FrameLayout。重写构造方法，在构造方法中首先是填充布局。然后获取自定义属性数组，然后获取自定义的属性，在获取完属性一定要typedArray.recycle();做回收操作，最后设置属性。最后定义两个设置左右两个控件是否显示的方法，因为View的显示默认就是为true，所以两个控件默认就是为显示。