自定义标题栏

先看需求：

已知如下设计的标题栏等，请封装一个简易并通用的标题栏控件。

---

---

需求分析

根据上图可以看到标题栏包含了 返回按钮 和 标题 两个子控件，并且他们都会随特定的场景从而改变内容。

开发设计

首先设计xml

新建view_titlebar.xml文件，按照设计用ImageView（Button也可，这里用ImageView示例简单点）和TextView写出相应的布局，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="46dp"
    android:background="@color/white">

    <ImageView
        android:id="@+id/image_back"
        android:layout_width="46dp"
        android:layout_height="46dp"
        android:layout_marginStart="16dp"
        android:padding="10dp"
        android:src="@mipmap/ic_back"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/text_333"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="标题栏" />

</android.support.constraint.ConstraintLayout>

显示效果如下，是不是一样的呢：

封装xml为通用控件

上面一步写好了通用的布局，这一次我们需要把布局封装为一个控件，其实就是用一个类来展示这个控件了。新建TitleBar类，继承自FrameLayout。然后重写有1、2、3参的构造方法。结合代码讲解如下：

package com.xxx.xxx.view;

import android.content.Context;
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 com.xxx.xxx.R;

/**
 * Created by CooLoongWu on 2018-7-30 15:16.
 */
public class TitleBar extends FrameLayout {

    private View titleView; //需要把刚刚写的xml视图加载到这个view中
    private ImageView backImage;
    private TextView textTitle;

    public IBackClickListener backClickListener;//返回按钮的监听

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

    public TitleBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

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

    private void init(Context context) {
        initView(context);
    }

    private void initView(Context context) {
        titleView = LayoutInflater.from(context).inflate(
                R.layout.view_titlebar, null);
        backImage= titleView.findViewById(R.id.image_back);
        textTitle = titleView.findViewById(R.id.text_title);

        backImage.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if (backClickListener != null) {
                    backClickListener.onClick(view);
                }
            }
        });
        this.addView(titleView);
    }

    //在java代码中去动态设置标题
    public void setTitle(String title) {
        textTitle.setText(title);
    }

    //在java代码中去动态设置返回按钮资源
    public void setBackImage(int resId) {
        backImage.setImageResource(resId);
    }

    public void setOnBackClickListener(IBackClickListener backClickListener) {
        this.backClickListener = backClickListener;
    }

    public interface IBackClickListener {
        void onClick(View view);
    }
}

使用自定义的TitleBar控件

新建XML文件在布局中直接使用方式如下：

        <!-- 注意自定义控件的写法，要写清楚你的控件路径名 -->
        <com.xxx.xxx.view.TitleBar
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

扩展一下

通过上面三部已经打造了一个最基本的标题栏控件了，简单，但是算不上能用，每次还需要动态的去设置标题，如果我们想像toolbar那样的可以直接在控件中设置标题或者改变返回按钮资源的话就要进一步修改了。还记得构造参数里面的AttributeSet吗？马上就要用到了。

在values文件夹下新建attrs.xml资源文件

建立好attrs.xml文件后在里面声明我们控件所需的属性，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TitleBar">
<attr name="title" format="string" />
<attr name="back_src" format="reference" />
</declare-styleable>
</resources>


该资源声明了 TItleBar控件拥有title和back_src两个属性，title属性需要一个string类型，back_src需要一个资源引用类型。

在TItleBar.java中将属性找到并赋值给相应子控件

我们在TitleBar.java中新增一个方法，该方法主要作用 1、获取到xml中填写的属性的值；2、将值赋值给相应控件。如下：

private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TitleBar);
        String title = typedArray.getString(R.styleable.TitleBar_title);
        int resId = typedArray.getResourceId(R.styleable.TitleBar_back_src, R.mipmap.ic_back);

        setTitle(title);
        setBackImage(resId);
        typedArray.recycle();
    }

然后在init()方法中添加该方法。

在使用TitleBar控件的布局中使用属性

这就很简单了，跟其他控件方法属性使用一样，直接上代码：

 <com.xxx.xxx.view.TitleBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="这就是标题啊"
        app:back_src="@mipmap/ic_back" />

结束

到这里一个最简单通用的TItleBar就已经实现了，后面可以根据需求再次开发，添加更多功能。