简单自定义View之TitleBar

在我们目前市场上所见到的APP中大部分的Android应用都有一个类似于IOS设计风格的返回头（因为这个我们往往需要对返回头和物理返回都做处理，哎没办法Android想保留自己的特色的路还很长）

牢骚发到这先上一张效果图：

整个title分为三个部分组成部分，分别是左边、中间和右边。

整理下我们的需求：

左边和右边应该包含 图片或者文字 或者图片文字结合 中间大部分都是文字 还有就是对左边右边添加点击事件

自定义View第一步书写我们需要的自定义属性：

命名规则正常是自定义View的缩写_XX

我们根据需求制定了如下属性：

左边文字的内容、字体、颜色、左边的图片、图片和文字的距离 右边文字的内容、字体、颜色、右边的图片、图片和文字的距离 中间文字的内容、字体、颜色 <declare-styleable name="SuperTitleBar"> <attr name="stb_left_text" format="string"/> <attr name="stb_left_drawable" format="reference|color"/> <attr name="stb_left_textSize" format="dimension"/> <attr name="stb_left_spacing" format="dimension" /> <attr name="stb_left_textColor" format="color"/> <attr name="stb_right_text" format="string"/> <attr name="stb_right_drawable" format="reference|color"/> <attr name="stb_right_textSize" format="dimension"/> <attr name="stb_right_spacing" format="dimension" /> <attr name="stb_right_textColor" format="color"/> <attr name="stb_mid_text" format="string"/> <attr name="stb_mid_drawable" format="reference|color"/> <attr name="stb_mid_textSize" format="dimension"/> <attr name="stb_mid_textColor" format="color"/> </declare-styleable>

注：自定义属性styleable 的name 最好是和自定义View的名字保持一致这样便于在使用自定义控件时能够有代码提示和便于区分属性

自定义View 第二步添加所有的属性进TypedArray

midtext = typedArray.getString(R.styleable.SuperTitleBar_stb_mid_text); DEFAULT_MID_TEXT_SIZE = typedArray.getDimension(R.styleable.SuperTitleBar_stb_mid_textSize,10); DEFAULT_MID_TEXT_COLOR = typedArray.getColor(R.styleable.SuperTitleBar_stb_mid_textColor, 0); DEFAULT_LEFT_SPACING = typedArray.getDimension(R.styleable.SuperTitleBar_stb_left_spacing,0); middrawable = typedArray.getDrawable(R.styleable.SuperTitleBar_stb_mid_drawable); lefttext = typedArray.getString(R.styleable.SuperTitleBar_stb_left_text); DEFAULT_LEFT_TEXT_SIZE = typedArray.getDimension(R.styleable.SuperTitleBar_stb_left_textSize,10); DEFAULT_LEFT_TEXT_COLOR = typedArray.getColor(R.styleable.SuperTitleBar_stb_left_textColor,0); leftdrawable = typedArray.getDrawable(R.styleable.SuperTitleBar_stb_left_drawable); righttext = typedArray.getString(R.styleable.SuperTitleBar_stb_right_text); DEFAULT_RIGHT_TEXT_SIZE = typedArray.getDimension(R.styleable.SuperTitleBar_stb_right_textSize,10); DEFAULT_RIGHT_TEXT_COLOR = typedArray.getColor(R.styleable.SuperTitleBar_stb_right_textColor,0); DEFAULT_RIGHT_SPACING = typedArray.getDimension(R.styleable.SuperTitleBar_stb_right_spacing,0); rightdrawable = typedArray.getDrawable(R.styleable.SuperTitleBar_stb_right_drawable);

第三步就是构建我需要的布局以左边为例：

应该右一个ImageView 和一个TextView 组成 便于我们写点击事件和控制控件间的间距 我们在他们的最外层加了一层横向的LinearLayout 实例化下我们需要用到的控件：

lefttextview = new TextView(context); leftLinear = new LinearLayout(context); leftImageView = new ImageView(context);

给TextView、ImageView添加自定义属性

lefttextview.setText(lefttext); lefttextview.setTextSize(TypedValue.COMPLEX_UNIT_PX, DEFAULT_LEFT_TEXT_SIZE); lefttextview.setTextColor(DEFAULT_LEFT_TEXT_COLOR); leftImageView.setImageDrawable(leftdrawable);

把ImageView 和TextView添加到LinearLayout中设置LinearLayout的对齐方式

leftLinear.addView(leftImageView); leftLinear.addView(lefttextview); leftLinear.setVerticalGravity(Gravity.CENTER_VERTICAL);

最后在把LinearLayout放进我们的自定义View中 注意下我们这里继承的是RelativeLayout

leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); leftParams.addRule(ALIGN_PARENT_LEFT); leftParams.addRule(CENTER_VERTICAL); addView(leftLinear, leftParams);

自定义点击事件的回调接口

leftLinear.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (listener != null) { listener.OnleftClick(); } } }); rightLinear.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (listener != null) { listener.OnRightClick(); } } }); public interface OnTitleBarClickListener { void OnleftClick(); void OnRightClick(); }

到这里我们自定义的代码就写完了 赶紧到布局中实验下吧 使用自定义属性的布局中需要添加下面的命名空间才使用自定义属性 supertitlebar这个字段可以随意命名 不过前面就提过了想要有代码提示最好和自定义View 的命名保持一致哦！

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

下面我完整的Java代码和测试布局仅供参考：

public class SuperTitleBar extends RelativeLayout { private TextView lefttextview; private String lefttext; private float DEFAULT_LEFT_TEXT_SIZE; private int DEFAULT_LEFT_TEXT_COLOR; private float DEFAULT_LEFT_SPACING = 0; private Drawable leftdrawable; private LayoutParams leftParams; private ImageView leftImageView; private LinearLayout leftLinear; private TextView midtextview; private String midtext; private float DEFAULT_MID_TEXT_SIZE; private int DEFAULT_MID_TEXT_COLOR; private Drawable middrawable; private LayoutParams midParams; private TextView righttextview; private String righttext; private float DEFAULT_RIGHT_TEXT_SIZE; private int DEFAULT_RIGHT_TEXT_COLOR; private float DEFAULT_RIGHT_SPACING = 0; private Drawable rightdrawable; private LayoutParams rightParams; private LinearLayout rightLinear; private ImageView rigthImageView; private OnTitleBarClickListener listener; public SuperTitleBar(Context context) { this(context, null); } public SuperTitleBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public SuperTitleBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SuperTitleBar); init(context, typedArray); } private void init(Context context, TypedArray typedArray) { midtext = typedArray.getString(R.styleable.SuperTitleBar_stb_mid_text); DEFAULT_MID_TEXT_SIZE = typedArray.getDimension(R.styleable.SuperTitleBar_stb_mid_textSize, 10); DEFAULT_MID_TEXT_COLOR = typedArray.getColor(R.styleable.SuperTitleBar_stb_mid_textColor, 0); DEFAULT_LEFT_SPACING = typedArray.getDimension(R.styleable.SuperTitleBar_stb_left_spacing, 0); middrawable = typedArray.getDrawable(R.styleable.SuperTitleBar_stb_mid_drawable); lefttext = typedArray.getString(R.styleable.SuperTitleBar_stb_left_text); DEFAULT_LEFT_TEXT_SIZE = typedArray.getDimension(R.styleable.SuperTitleBar_stb_left_textSize, 10); DEFAULT_LEFT_TEXT_COLOR = typedArray.getColor(R.styleable.SuperTitleBar_stb_left_textColor, 0); leftdrawable = typedArray.getDrawable(R.styleable.SuperTitleBar_stb_left_drawable); righttext = typedArray.getString(R.styleable.SuperTitleBar_stb_right_text); DEFAULT_RIGHT_TEXT_SIZE = typedArray.getDimension(R.styleable.SuperTitleBar_stb_right_textSize, 10); DEFAULT_RIGHT_TEXT_COLOR = typedArray.getColor(R.styleable.SuperTitleBar_stb_right_textColor, 0); DEFAULT_RIGHT_SPACING = typedArray.getDimension(R.styleable.SuperTitleBar_stb_right_spacing, 0); rightdrawable = typedArray.getDrawable(R.styleable.SuperTitleBar_stb_right_drawable); typedArray.recycle(); midtextview = new TextView(context); lefttextview = new TextView(context); righttextview = new TextView(context); leftLinear = new LinearLayout(context); leftImageView = new ImageView(context); rightLinear = new LinearLayout(context); rigthImageView = new ImageView(context); lefttextview.setText(lefttext); lefttextview.setTextSize(TypedValue.COMPLEX_UNIT_PX, DEFAULT_LEFT_TEXT_SIZE); lefttextview.setTextColor(DEFAULT_LEFT_TEXT_COLOR); lefttextview.setPadding((int) DEFAULT_LEFT_SPACING, 0, 0, 0); leftLinear.setOrientation(LinearLayout.HORIZONTAL); leftLinear.addView(leftImageView); leftLinear.addView(lefttextview); leftLinear.setVerticalGravity(Gravity.CENTER_VERTICAL); midtextview.setText(midtext); midtextview.setTextSize(TypedValue.COMPLEX_UNIT_PX, DEFAULT_MID_TEXT_SIZE); midtextview.setTextColor(DEFAULT_MID_TEXT_COLOR); righttextview.setText(righttext); righttextview.setTextSize(TypedValue.COMPLEX_UNIT_PX, DEFAULT_RIGHT_TEXT_SIZE); righttextview.setTextColor(DEFAULT_RIGHT_TEXT_COLOR); rigthImageView.setImageDrawable(rightdrawable); rigthImageView.setPadding((int) DEFAULT_RIGHT_SPACING, 0, 0, 0); rightLinear.setOrientation(LinearLayout.HORIZONTAL); rightLinear.addView(righttextview); rightLinear.addView(rigthImageView); rightLinear.setVerticalGravity(Gravity.CENTER_VERTICAL); /** * 设置控件参数 */ leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); leftParams.addRule(ALIGN_PARENT_LEFT); leftParams.addRule(CENTER_VERTICAL); addView(leftLinear, leftParams); midParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); midParams.addRule(CENTER_IN_PARENT); addView(midtextview, midParams); rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); rightParams.addRule(ALIGN_PARENT_RIGHT); rightParams.addRule(CENTER_VERTICAL); addView(rightLinear, rightParams); leftLinear.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (listener != null) { listener.OnleftClick(); } } }); rightLinear.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (listener != null) { listener.OnRightClick(); } } }); } public void setTitleBarClickListener(OnTitleBarClickListener listener) { this.listener = listener; } public interface OnTitleBarClickListener { void OnleftClick(); void OnRightClick(); }

布局：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:supertitlebar="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.example.anro.testdemo.util.SuperTitleBar android:background="@color/colorOrange" android:id="@+id/stb_main_title" android:layout_width="match_parent" android:layout_height="45dp" supertitlebar:stb_left_text="取消" supertitlebar:stb_left_textColor="#ffffff" supertitlebar:stb_left_drawable="@drawable/back" supertitlebar:stb_left_textSize="14sp" supertitlebar:stb_left_spacing="5dp" supertitlebar:stb_mid_text="上传" supertitlebar:stb_mid_textSize="16sp" supertitlebar:stb_mid_textColor="#ffffff" supertitlebar:stb_mid_drawable="@drawable/back" supertitlebar:stb_right_text="确认" supertitlebar:stb_right_textSize="14sp" supertitlebar:stb_right_textColor="#ffffff" supertitlebar:stb_right_drawable="@drawable/btn_add" android:paddingLeft="12dp" android:paddingRight="12dp" > </com.example.anro.testdemo.util.SuperTitleBar> </LinearLayout>