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

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

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



思路： 在这里我们使用自定义组合控件的方式来设计这个标题栏，首先可以看到这个标题栏中间都有些什么内容，左右两端有两个控件，用来显示我的和消息的两张图片，所以就可以想到这是两个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，所以两个控件默认就是为显示。