Android自定义UI(HeaderBar)

今天初步了解自定义UI的流程,作此纪录。

一.自定义UI好处:

1.节省开发时间

2.避免重复开发布局

二.简单介绍2种方式

第一种

1.动态添加控件(相比另一种方式来说较难)
    -流程:
     --res/values下新增attr.xml文件,用来存放自定义view的属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- HeaderBar 自定义的属性  -->
    <declare-styleable name="HeaderBar">
     <!-- 返回按钮是否显示 format对应属性的类型-->
        <attr name="titleTextX" format="string"/>
        <attr name="titleSize" format="dimension"/>
        <attr name="titleColor" format="color"/>
        <attr name="isShowBackX" format="boolean"/>
        <attr name="rightTextX" format="string"/>
        <attr name="rightSize" format="dimension"/>
        <attr name="rightColor" format="color"/>
    </declare-styleable>
</resources>

2.新建XX.class继承自RelativeLayout,并且定义相对应的属性以及所需控件
3.在构造方法中通过此方法获取自定义属性

TypedArray typedArray = context
                .obtainStyledAttributes(attrs, R.styleable.HeaderBar);

4.获取相应属性值并赋值

//获取对应的属性值
title = typedArray.getString(R.styleable.HeaderBar_titleTextX);
titleSize = typedArray.getDimension(R.styleable.HeaderBar_titleSize,15f);
titleColor = typedArray.getColor(R.styleable.HeaderBar_titleColor,0);

rightTitle = typedArray.getString(R.styleable.HeaderBar_rightTextX);
rightTitleSize = typedArray.getDimension(R.styleable.HeaderBar_rightSize,12f);
rightColor = typedArray.getColor(R.styleable.HeaderBar_rightColor,0);

isShowBack = typedArray.getBoolean(R.styleable.HeaderBar_isShowBackX,false);
//回收 避免内存泄露
typedArray.recycle();

5.新建控件,设置属性,新建布局params,设置位置并添加进viewGroup

//初始化控件
ivBack = new ImageView(context);
tvTitle = new TextView(context);
tvRight = new TextView(context);

//给控件设置相应的属性
ivBack.setVisibility(isShowBack?VISIBLE:GONE);
ivBack.setImageResource(R.drawable.ic_arrow_back_black_24dp);

tvTitle.setText(title);
tvTitle.setTextSize(titleSize);
tvTitle.setTextColor(titleColor);
tvTitle.setGravity(CENTER_IN_PARENT);

tvRight.setText(rightTitle);
tvRight.setTextSize(rightTitleSize);
tvRight.setTextColor(rightColor);
tvRight.setGravity(CENTER_IN_PARENT);

//设置参数添加进viewGroup
ivParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
ivParams.addRule(ALIGN_PARENT_LEFT|CENTER_VERTICAL,TRUE);

titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
titleParams.addRule(CENTER_IN_PARENT,TRUE);

rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
rightParams.addRule(ALIGN_PARENT_RIGHT,TRUE);

addView(ivBack,ivParams);
addView(tvTitle,titleParams);
addView(tvRight,rightParams);
//设置背景色
setBackgroundColor(getResources().getColor(R.color.colorAccent));

6.xml中添加新的命名空间并使用

<com.wdl.customview.HeaderBar
        app:titleTextX="Toolbar"
        app:titleColor="#fff"
        app:titleSize="10sp"
        app:rightTextX="right"
        app:rightColor="#fff"
        app:rightSize="8sp"
        app:isShowBackX="true"
        android:layout_width="match_parent"
        android:layout_height="40dp"/>

第二种

1.res/values下新增attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- HeaderBar 自定义的属性  -->
    <declare-styleable name="HeaderBarWithLayout">
        <attr name="isShowBack" format="boolean" />
        <attr name="titleText" format="string" />
        <attr name="rightText" format="string" />
    </declare-styleable>
</resources>

2.新增header_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#03a9f4">

    <ImageView
        android:id="@+id/mLeftIv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:src="@drawable/icon_back" />

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

    <TextView
        android:id="@+id/mRightTv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:textColor="#ffffff"
        android:visibility="gone"
        tools:text="@string/app_name" />
</RelativeLayout>

3 4 5 6.同第一种 无需动态添加控件

效果如下:

基本使用如上

[附源码]

Github