自定义View(五)通用标题栏

96
请你吃鱼
2017.02.20 16:08* 字数 219

标题栏

我们在app中经常会见到如图的标题栏,这个标题栏的写起来十分简单,只需要一个相对布局,然后左边一个ImageView,中间一个TextView,然后设置一些文字和图片的属性以及点击事件,但我们开发一款app有几十上百个页面,试想如果每一个页面都需要写这么段代码,既要设置图片,又要设置文字以及大小和颜色,想想都麻烦,其实这几个控件完全可以通过自定义组合View来合成一个控件。在自定义View(一)组合View中,我已经简单介绍了自定义组合View的基本方法,这次我们将需要的属性都以自定义属性的形式添加上,以后使用时就可以直接在xml布局文件中设置属性了。
我们首先看一下这个组合View的布局:

<?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="45dp">

    <ImageView
        android:id="@+id/left"
        android:layout_width="45dp"
        android:layout_height="match_parent"
        android:scaleType="center"/>

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#333333"
        android:textSize="18sp"/>
</RelativeLayout>

可以看到非常简单,然后我们创建一个类继承根布局,重写构造方法并把需要的控件找到:

public class CommonActionBar extends RelativeLayout {

private ImageView leftIv;
private TextView titleTv;
private OnLeftClickListener onLeftClickListener;

public CommonActionBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    LayoutInflater.from(context).inflate(R.layout.layout_actionbar, this, true);
    leftIv = (ImageView) findViewById(R.id.left);
    titleTv = (TextView) findViewById(R.id.title);
}

既然要用到自定义属性,那就需要在values文件夹中新建attrs文件:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CommonActionBar">
        <attr name="titleColor" format="color"/>
        <attr name="titleSize" format="dimension"/>
        <attr name="leftDrawable" format="reference"/>
        <attr name="title" format="string"/>
    </declare-styleable>
</resources>

这里有我们需要的图片、字体颜色、字体大小和文字,需要注意的是declare-styleable的名字最好和自定义View的类名一样,否则在Android Studio中这些自定义的属性是提示不出来的。创建这些属性之后我们就需要在View中找到:

TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.CommonActionBar);
String title = typedArray.getString(R.styleable.CommonActionBar_title);
int titleSize = typedArray.getDimensionPixelOffset(R.styleable.CommonActionBar_titleSize, 54);
int titleColoe = typedArray.getColor(R.styleable.CommonActionBar_titleColor, getResources().getColor(android.R.color.black));
titleTv.setTextSize(TypedValue.COMPLEX_UNIT_PX, titleSize);
titleTv.setTextColor(titleColoe);
titleTv.setText(title);
int leftDrawable = typedArray.getResourceId(R.styleable.CommonActionBar_leftDrawable, 0);
leftIv.setImageResource(leftDrawable);

接下来我们将自定义的控件放到xml布局文件中:

<com.example.widget.CommonActionBar
        android:id="@+id/actionbar"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/colorPrimary"
        app:leftDrawable="@mipmap/back"
        app:title="首页"
        app:titleColor="@android:color/white"
        app:titleSize="18sp"/>

控件已经显示出来了,至于左边控件的点击事件可以参照自定义View(一)组合View的方法。

随笔
Web note ad 1