Android自定義控件ViewGroup實(shí)現(xiàn)標(biāo)簽云（四）
更新時(shí)間：2021年06月23日 15:28:20 作者：總李寫代碼
這篇文章主要為大家詳細(xì)介紹了Android自定義控件ViewGroup實(shí)現(xiàn)標(biāo)簽云的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前言：
前面幾篇講了自定義控件繪制原理Android自定義控件基本原理詳解（一） ，Android自定義控件之自定義屬性（二） ，Android自定義控件之自定義組合控件（三） ，常言道：“好記性不如爛筆頭，光說不練假把式?。?！”，作為一名學(xué)渣就是因?yàn)闆]有遵循這句名言才淪落于此，所以要謹(jǐn)遵教誨，注重理論與實(shí)踐相結(jié)合，今天通過自定義ViewGroup來實(shí)現(xiàn)一下項(xiàng)目中用到的標(biāo)簽云。
需求背景：
公司需要實(shí)現(xiàn)一個(gè)知識(shí)點(diǎn)的標(biāo)簽顯示，每個(gè)標(biāo)簽的長(zhǎng)度未知，如下圖所示
基本繪制流程：
繪制原理這里不再介紹大致介紹下繪制流程
•構(gòu)造函數(shù)獲取自定義屬性
•onMeasure()方法，測(cè)量子控件的大小
•onLayout()方法，對(duì)子控件進(jìn)行布局
1.）自定義屬性
<declare-styleable name="TagsLayout"> <attr name="tagVerticalSpace" format="dimension" /> <attr name="tagHorizontalSpace" format="dimension" /> </declare-styleable>
2.）構(gòu)造函數(shù)中獲取自定義屬性值
private int childHorizontalSpace;
private int childVerticalSpace;
public TagsLayout(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray attrArray = context.obtainStyledAttributes(attrs, R.styleable.TagsLayout);
if (attrArray != null) {
childHorizontalSpace = attrArray.getDimensionPixelSize(R.styleable.TagsLayout_tagHorizontalSpace, 0);
childVerticalSpace = attrArray.getDimensionPixelSize(R.styleable.TagsLayout_tagVerticalSpace, 0);
attrArray.recycle();
}
}
3.）onMeasure函數(shù)測(cè)量子控件大小，然后設(shè)置當(dāng)前控件大小
/**
* 負(fù)責(zé)設(shè)置子控件的測(cè)量模式和大小 根據(jù)所有子控件設(shè)置自己的寬和高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 獲得它的父容器為它設(shè)置的測(cè)量模式和大小
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
// 如果是warp_content情況下，記錄寬和高
int width = 0;
int height = 0;
/**
* 記錄每一行的寬度，width不斷取最大寬度
*/
int lineWidth = 0;
/**
* 每一行的高度，累加至height
*/
int lineHeight = 0;
int count = getChildCount();
int left = getPaddingLeft();
int top = getPaddingTop();
// 遍歷每個(gè)子元素
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
if (child.getVisibility() == GONE)
continue;
// 測(cè)量每一個(gè)child的寬和高
measureChild(child, widthMeasureSpec, heightMeasureSpec);
// 得到child的lp
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
// 當(dāng)前子空間實(shí)際占據(jù)的寬度
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin + childHorizontalSpace;
// 當(dāng)前子空間實(shí)際占據(jù)的高度
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin + childVerticalSpace;
/**
* 如果加入當(dāng)前child，則超出最大寬度，則的到目前最大寬度給width，類加height 然后開啟新行
*/
if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
width = Math.max(lineWidth, childWidth);// 取最大的
lineWidth = childWidth; // 重新開啟新行，開始記錄
// 疊加當(dāng)前高度，
height += lineHeight;
// 開啟記錄下一行的高度
lineHeight = childHeight;
child.setTag(new Location(left, top + height, childWidth + left - childHorizontalSpace, height + child.getMeasuredHeight() + top));
} else {// 否則累加值lineWidth,lineHeight取最大高度
child.setTag(new Location(lineWidth + left, top + height, lineWidth + childWidth - childHorizontalSpace + left, height + child.getMeasuredHeight() + top));
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}
}
width = Math.max(width, lineWidth) + getPaddingLeft() + getPaddingRight();
height += lineHeight;
sizeHeight += getPaddingTop() + getPaddingBottom();
height += getPaddingTop() + getPaddingBottom();
setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : height);
}
通過遍歷所有子控件調(diào)用measureChild函數(shù)獲取每個(gè)子控件的大小，然后通過寬度疊加判斷是否換行，疊加控件的高度，同時(shí)記錄下當(dāng)前子控件的坐標(biāo)，這里記錄坐標(biāo)引用了自己寫的一個(gè)內(nèi)部類Location.java
/**
* 記錄子控件的坐標(biāo)
*/
public class Location {
public Location(int left, int top, int right, int bottom) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
}
public int left;
public int top;
public int right;
public int bottom;
}
4.)onLayout函數(shù)對(duì)所有子控件重新布局
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
if (child.getVisibility() == GONE)
continue;
Location location = (Location) child.getTag();
child.layout(location.left, location.top, location.right, location.bottom);
}
}
這里直接遍歷所有子控件調(diào)用子控件的layout函數(shù)進(jìn)行布局。
如何使用：
1）.布局問自己中直接引用
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:lee="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.whoislcj.views.TagsLayout android:id="@+id/image_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" lee:tagHorizontalSpace="10dp" lee:tagVerticalSpace="10dp" /> </LinearLayout>
2）.代碼添加標(biāo)簽
TagsLayout imageViewGroup = (TagsLayout) findViewById(R.id.image_layout);
ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
String[] string={"從我寫代碼那天起，我就沒有打算寫代碼","從我寫代碼那天起","我就沒有打算寫代碼","沒打算","寫代碼"};
for (int i = 0; i < 5; i++) {
TextView textView = new TextView(this);
textView.setText(string[i]);
textView.setTextColor(Color.WHITE);
textView.setBackgroundResource(R.drawable.round_square_blue);
imageViewGroup.addView(textView, lp);
}
具體效果
3.）最后附上TagsLayout全部代碼
public class TagsLayout extends ViewGroup {
private int childHorizontalSpace;
private int childVerticalSpace;
public TagsLayout(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray attrArray = context.obtainStyledAttributes(attrs, R.styleable.TagsLayout);
if (attrArray != null) {
childHorizontalSpace = attrArray.getDimensionPixelSize(R.styleable.TagsLayout_tagHorizontalSpace, 0);
childVerticalSpace = attrArray.getDimensionPixelSize(R.styleable.TagsLayout_tagVerticalSpace, 0);
attrArray.recycle();
}
}
/**
* 負(fù)責(zé)設(shè)置子控件的測(cè)量模式和大小 根據(jù)所有子控件設(shè)置自己的寬和高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 獲得它的父容器為它設(shè)置的測(cè)量模式和大小
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
// 如果是warp_content情況下，記錄寬和高
int width = 0;
int height = 0;
/**
* 記錄每一行的寬度，width不斷取最大寬度
*/
int lineWidth = 0;
/**
* 每一行的高度，累加至height
*/
int lineHeight = 0;
int count = getChildCount();
int left = getPaddingLeft();
int top = getPaddingTop();
// 遍歷每個(gè)子元素
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
if (child.getVisibility() == GONE)
continue;
// 測(cè)量每一個(gè)child的寬和高
measureChild(child, widthMeasureSpec, heightMeasureSpec);
// 得到child的lp
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
// 當(dāng)前子空間實(shí)際占據(jù)的寬度
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin + childHorizontalSpace;
// 當(dāng)前子空間實(shí)際占據(jù)的高度
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin + childVerticalSpace;
/**
* 如果加入當(dāng)前child，則超出最大寬度，則的到目前最大寬度給width，類加height 然后開啟新行
*/
if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
width = Math.max(lineWidth, childWidth);// 取最大的
lineWidth = childWidth; // 重新開啟新行，開始記錄
// 疊加當(dāng)前高度，
height += lineHeight;
// 開啟記錄下一行的高度
lineHeight = childHeight;
child.setTag(new Location(left, top + height, childWidth + left - childHorizontalSpace, height + child.getMeasuredHeight() + top));
} else {// 否則累加值lineWidth,lineHeight取最大高度
child.setTag(new Location(lineWidth + left, top + height, lineWidth + childWidth - childHorizontalSpace + left, height + child.getMeasuredHeight() + top));
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}
}
width = Math.max(width, lineWidth) + getPaddingLeft() + getPaddingRight();
height += lineHeight;
sizeHeight += getPaddingTop() + getPaddingBottom();
height += getPaddingTop() + getPaddingBottom();
setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : height);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
if (child.getVisibility() == GONE)
continue;
Location location = (Location) child.getTag();
child.layout(location.left, location.top, location.right, location.bottom);
}
}
/**
* 記錄子控件的坐標(biāo)
*/
public class Location {
public Location(int left, int top, int right, int bottom) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
}
public int left;
public int top;
public int right;
public int bottom;
}
}
總結(jié)：
至此有關(guān)簡(jiǎn)單的自定義控件已經(jīng)介紹的差不多了，項(xiàng)目中很復(fù)雜的控件現(xiàn)在涉及的比較少，以后用到之后再做記錄。
您可能感興趣的文章:
- Android自定義ViewGroup實(shí)現(xiàn)帶箭頭的圓角矩形菜單
- Android App開發(fā)中自定義View和ViewGroup的實(shí)例教程
- Android自定義ViewGroup之實(shí)現(xiàn)FlowLayout流式布局
- Android自定義ViewGroup實(shí)現(xiàn)標(biāo)簽浮動(dòng)效果
- Android應(yīng)用開發(fā)中自定義ViewGroup的究極攻略
- Android動(dòng)畫效果之自定義ViewGroup添加布局動(dòng)畫（五）
- Android自定義ViewGroup的實(shí)現(xiàn)方法
- Android自定義ViewGroup實(shí)現(xiàn)受邊界限制的滾動(dòng)操作（3）
- Android自定義ViewGroup實(shí)現(xiàn)可滾動(dòng)的橫向布局（2）
- 一篇文章弄懂Android自定義viewgroup的相關(guān)難點(diǎn)
相關(guān)文章
Android實(shí)現(xiàn)簡(jiǎn)單點(diǎn)贊動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)單點(diǎn)贊動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了android中hockeyapp捕獲異常的示例,需要的朋友可以參考下2014-02-02
android開發(fā)之橫向滾動(dòng)/豎向滾動(dòng)的ListView(固定列頭)
由于項(xiàng)目需要，我們需要一個(gè)可以橫向滾動(dòng)的，又可以豎向滾動(dòng)的 表格;經(jīng)過幾天的研究終于搞定,感興趣的朋友可以了解下哦2013-01-01
Android開發(fā)教程之初識(shí)Android App
這篇文章主要為大家詳細(xì)介紹了Android開發(fā)教程之初識(shí)Android App的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-06-06
Android apk 項(xiàng)目一鍵打包并上傳到蒲公英的實(shí)現(xiàn)方法
這篇文章主要介紹了Android apk 項(xiàng)目一鍵打包并上傳到蒲公英,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了Android 開源在線音樂播放器的相關(guān)資料,需要的朋友可以參考下2016-09-09
Intent的中文意思是“意圖，意向”， Intent對(duì)Android的核心和靈魂，是各組件之間的橋梁。四大組件分別為Activity 、Service、BroadcastReceiver、ContentProvider。而這四種組件是獨(dú)立的，它們之間可以互相調(diào)用，協(xié)調(diào)工作，最終組成一個(gè)真正的Android應(yīng)用2022-09-09
Android WebView通過動(dòng)態(tài)的修改js去攔截post請(qǐng)求參數(shù)實(shí)例
這篇文章主要介紹了Android WebView通過動(dòng)態(tài)的修改js去攔截post請(qǐng)求參數(shù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03
一文詳解如何在Flutter中使用導(dǎo)航Navigator
一個(gè)APP如果沒有頁面跳轉(zhuǎn)那么是沒有靈魂的，頁面跳轉(zhuǎn)的一個(gè)常用說法就是Navigator。那么在flutter中如何使用Navigator呢？本文就來和大家詳細(xì)聊聊2023-02-02
AndroidHttpClient詳解及調(diào)用示例
本文給大家介紹AndroidHttpClient結(jié)構(gòu)、使用方式及調(diào)用示例詳解，需要的朋友可以參考下2015-10-10