Android-自定義View
分享是最好的記憶--
如需轉(zhuǎn)發(fā)請(qǐng)注明出處
[強(qiáng)調(diào)]:共同學(xué)習(xí) 共同進(jìn)步 不喜勿噴
內(nèi)容簡(jiǎn)介
- 前言
- 實(shí)現(xiàn)
- 總結(jié)
1. 前言
這次更新有2個(gè)目的
1. 復(fù)用控件,而不是每次都寫(xiě)冗余代碼
2. 好久沒(méi)有更新了(?? . ??)
在Android開(kāi)發(fā)當(dāng)中自定義View是一項(xiàng)不可或缺的技能碍遍，也是我們大部分小白以及小小白的軟肋轩勘。
??自定義View其實(shí)也不是很難斩箫，因?yàn)槲覀儾恍枰タ耸裁醇夹g(shù)難關(guān)，只需要坐在巨人的肩膀上和簸，抱緊巨人的腦袋就行(?>ω<*?)
??自定義View分兩大類:
一 : 組合 : 也就是在現(xiàn)有的控件基礎(chǔ)上通過(guò)組合各種不同功能的控件來(lái)組合出功能更強(qiáng)大全民的新控件。
二 : 完全自定義:通過(guò)繼承View或者ViewGroup來(lái)自定義全新的View。??今天討論的自定義View是第一種方式届巩，即組合方式。如果想了解完全自定義或者更多自定義方面的知識(shí)份乒，推薦看扔物線大神以及張鴻翔大神的文章恕汇。
2. 實(shí)現(xiàn)
??功能列表中的Item是我們經(jīng)常用到的控件之一腕唧。它也許是這樣的：1. 確定需求
item1.png
或者是這樣的：
item2.png
再或者是這樣的：
item3.png
??為了滿足這些情況，我們抽象出功能最豐富的Item瘾英；確定了需求之后開(kāi)始編碼枣接。
2. 編碼
1. 自定義屬性
??首先確定我們需要?jiǎng)討B(tài)設(shè)置的屬性；包括 ：1-左邊圖片缺谴，2-3-左邊圖片的寬高但惶，4-大標(biāo)題，5-大標(biāo)題文字大小湿蛔，6-大標(biāo)題文字顏色榆骚，7-副標(biāo)題，8-副標(biāo)題文字大小煌集，9-副標(biāo)題文字顏色妓肢，10-右邊圖片，11-12-右邊圖片寬高等12個(gè)屬性苫纤，當(dāng)然不止這些碉钠，這個(gè)可以根據(jù)自己的需求豐富，比如 Item 下面是否顯示陰影線條卷拘，右邊圖片是否顯示等喊废；
??那么在../res/attrs.xml中定義自定義屬性；
<declare-styleable name="UILibraryListItem">
<attr name="leftImg" format="reference"/>
<attr name="leftImg_width" format="dimension"/>
<attr name="leftImg_height" format="dimension"/>
<attr name="rightImg" format="reference"/>
<attr name="rightImg_width" format="dimension"/>
<attr name="rightImg_height" format="dimension"/>
<attr name="title" format="string"/>
<attr name="title_color" format="color"/>
<attr name="title_size" format="dimension"/>
<attr name="subTitle" format="string"/>
<attr name="subTitle_color" format="color"/>
<attr name="subTitle_size" format="dimension"/>
</declare-styleable>
這里有必要解釋一下屬性定義中的format
| name | format | 描述 |
|---|---|---|
| 資源 | reference | 通過(guò)id來(lái)指定資源 |
| 顏色 | color | 設(shè)置顏色 |
| 尺寸 | dimension | 長(zhǎng)寬栗弟，字體大小等尺寸 |
| 字符串 | String | 設(shè)置文本 |
| 布爾值 | boolean | 通過(guò)布爾值設(shè)置 |
| 浮點(diǎn)值 | float | 設(shè)置浮點(diǎn)值 |
| 百分?jǐn)?shù) | fraction | 設(shè)置百分?jǐn)?shù)值 |
| 枚舉值 | enum | 設(shè)置枚舉值 |
| 位或運(yùn)算 | flag | 位或運(yùn)算 |
| 整型值 | integer | 設(shè)置整型 |
屬性定義時(shí)可以指定多種類型值
2.抽象組建
??這里說(shuō)的抽象組建是把該Item可能有的所有功能都寫(xiě)出來(lái)污筷；
在../res/layout/item.xml中寫(xiě)出包含組建所有功能的樣式；
<?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="wrap_content">
<ImageView
style="@style/UILibraryListItemBase"
android:id="@+id/leftImg"
android:layout_alignParentLeft="true"
android:padding="8dp"
/>
<TextView
style="@style/UILibraryListItemBase"
android:id="@+id/title"
android:layout_toRightOf="@+id/leftImg"
/>
<TextView
style="@style/UILibraryListItemBase"
android:id="@+id/subTitle"
android:layout_toLeftOf="@+id/rightImg"
android:layout_toRightOf="@+id/title"
android:gravity="right"
/>
<ImageView
style="@style/UILibraryListItemBase"
android:id="@+id/rightImg"
android:layout_alignParentRight="true"
android:padding="8dp"
/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_alignBottom="@+id/leftImg"
/>
</RelativeLayout>
3.實(shí)現(xiàn)功能
選擇一個(gè)適當(dāng)?shù)腣iewGroup來(lái)繼承乍赫，實(shí)現(xiàn)Item;
我的樣式中rootView是個(gè)RelativeLayout瓣蛀，因此我繼承了RelativeLayout。具體實(shí)現(xiàn)如下：
package com.uilib.ui.listitem;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.example.uilibrary.R;
import com.uilib.ui.util.FindView;
/**
* Created by Elyar.Anwar on 2017/8/10.
*/
public class UILibraryListItem extends RelativeLayout {
/**
* 選項(xiàng)控件的左邊圖片
*/
private ImageView leftImageView;
/**
* 選項(xiàng)控件的右邊圖片
*/
private ImageView rightImageView;
/**
* 選項(xiàng)控件的標(biāo)題
*/
private TextView titleView;
/**
* 選項(xiàng)控件的副標(biāo)題
*/
private TextView subTitleView;
/**
* 左邊圖片資源
*/
private Drawable leftImage;
/**
* 左邊圖片資源寬度
*/
private int leftImageWidth;
/**
* 左邊圖片資源高度
*/
private int leftImageHeight;
/**
* 右邊圖片資源
*/
private Drawable rightImage;
/**
* 右邊圖片資源寬度
*/
private int rightImageWidth;
/**
* 右邊圖片資源高度
*/
private int rightImageHeight;
/**
* 標(biāo)題文本
*/
private String title;
/**
* 標(biāo)題文本顏色
*/
private int titleTextColor;
/**
*標(biāo)題文本字體大小
*/
private float titleTextSize;
/**
*副標(biāo)題文本
*/
private String subTitle;
/**
*副標(biāo)題文本顏色
*/
private int subTitleTextColor;
/**
*副標(biāo)題文本字體大小
*/
private float subTitleTextSize;
/**
*上下文
*/
private Context mContext;
/**
* 屬性結(jié)合
*/
private AttributeSet attrs;
public UILibraryListItem(Context context) {
this(context,null);
}
public UILibraryListItem(Context context, AttributeSet attrs) {
this(context, attrs,0);
this.mContext = context;
this.attrs = attrs;
init();
}
public UILibraryListItem(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
this.attrs = attrs;
init();
}
/**
* 初始化視圖
*/
private void init() {
View.inflate(mContext, R.layout.listitem, this);
findView();//綁定視圖
loadParams();//加載屬性值
initView();//為視圖賦值
}
/**
* 為控件賦值
*/
private void initView() {
if(leftImage!=null){
leftImageView.setImageDrawable(leftImage);
}
leftImageView.getLayoutParams().width = leftImageWidth;
leftImageView.getLayoutParams().height = leftImageHeight;
if(rightImage!=null){
rightImageView.setImageDrawable(rightImage);
}
rightImageView.getLayoutParams().width = rightImageWidth;
rightImageView.getLayoutParams().height = rightImageHeight;
if (!TextUtils.isEmpty(title)){
titleView.setText(title);
titleView.setTextColor(titleTextColor);
titleView.setTextSize(titleTextSize);
}
if (!TextUtils.isEmpty(subTitle)){
subTitleView.setText(subTitle);
subTitleView.setTextColor(subTitleTextColor);
subTitleView.setTextSize(subTitleTextSize);
}
}
/**
* 初始化控件的屬性
*/
private void loadParams() {
TypedArray typedArray = mContext.obtainStyledAttributes(attrs,R.styleable.UILibraryListItem);
leftImage = typedArray.getDrawable(R.styleable.UILibraryListItem_leftImg);
leftImageHeight = typedArray.getDimensionPixelSize(R.styleable.UILibraryListItem_leftImg_height,128);
leftImageWidth = typedArray.getDimensionPixelSize(R.styleable.UILibraryListItem_leftImg_width,128);
rightImage = typedArray.getDrawable(R.styleable.UILibraryListItem_rightImg);
rightImageHeight = typedArray.getDimensionPixelSize(R.styleable.UILibraryListItem_rightImg_height,128);
rightImageWidth = typedArray.getDimensionPixelSize(R.styleable.UILibraryListItem_rightImg_width,128);
title = typedArray.getString(R.styleable.UILibraryListItem_title);
titleTextColor = typedArray.getColor(R.styleable.UILibraryListItem_title_color,Color.BLACK);
titleTextSize = typedArray.getDimensionPixelSize(R.styleable.UILibraryListItem_title_size,20);
subTitle = typedArray.getString(R.styleable.UILibraryListItem_subTitle);
subTitleTextColor = typedArray.getColor(R.styleable.UILibraryListItem_subTitle_color,Color.GRAY);
subTitleTextSize = typedArray.getDimensionPixelSize(R.styleable.UILibraryListItem_subTitle_size,14);
typedArray.recycle();
}
/**
* 關(guān)聯(lián)控件
*/
private void findView() {
leftImageView = FindView.findView(this,R.id.leftImg);
rightImageView = FindView.findView(this,R.id.rightImg);
titleView = FindView.findView(this,R.id.title);
subTitleView = FindView.findView(this,R.id.subTitle);
}
}
4.引用并預(yù)覽
??引用時(shí)為了看出明顯效果我定義了2個(gè)Item雷厂；
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:uilib="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.uilib.ui.listitem.UILibraryListItem
android:id="@+id/it"
android:layout_width="match_parent"
android:layout_height="wrap_content"
uilib:leftImg="@drawable/icon_a"
uilib:rightImg="@drawable/icon_b"
uilib:subTitle="SubTitle"
uilib:title="Title" />
<com.uilib.ui.listitem.UILibraryListItem
android:id="@+id/it2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
uilib:leftImg="@drawable/test_icon_allow"
uilib:subTitle="SubTitle"
uilib:subTitle_color="@color/red"
uilib:title="Title" />
</LinearLayout>
2017-08-11_004205.png
可以根據(jù)自己的實(shí)際情況靈活改變樣式惋增，且僅僅在第四步引用處做出更改即可；
總結(jié)
自定義View之組合改鲫；
通過(guò)組合來(lái)自定義View能滿足我們大部分的需求诈皿，且相對(duì)容易。
總結(jié)其過(guò)程：
1.自定義屬性
2.抽象出樣式
3.編碼實(shí)現(xiàn)類
4.引用和預(yù)覽
我是ElyarAnwar像棘，在技術(shù)的道路上摸爬滾打稽亏；
熱愛(ài)生活，熱愛(ài)技術(shù)缕题；如果喜歡記得點(diǎn)贊截歉；
