今天初步了解自定义UI的流程,作此纪录。
一.自定义UI好处:
1.节省开发时间
2.避免重复开发布局
二.简单介绍2种方式
第一种
1.动态添加控件(相比另一种方式来说较难)
-流程:
--res/values下新增attr.xml文件,用来存放自定义view的属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="HeaderBar">
<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>
<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