Android 利用 HorizontalScrollView + TagsLayout 實現水平方向滑動的標籤雲效果

安卓開發 · 發表 2018-10-31 23:58:55

摘要：最近在實現一個標籤雲效果，參考的是這個兄弟的博文 Android自定義控制元件之自定義ViewGroup實現標籤雲在上面的博文中博主已經寫的很詳細了來不急作圖，先用上面兄弟博文圖片我這邊實現的效果是能實現左右水...

最近在實現一個標籤雲效果，參考的是這個兄弟的博文

ofollow,noindex">Android自定義控制元件之自定義ViewGroup實現標籤雲

在上面的博文中博主已經寫的很詳細了

來不急作圖，先用上面兄弟博文圖片

我這邊實現的效果是能實現左右水平滑動的標籤雲效果。在剛開始想著用 HorizontalScrollView 做父佈局，然後子佈局就用上文博主的自定義的標籤雲控制元件

<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
<com.xxxx.xxx.TagsLayout
android:id="@+id/tagsLayout"
style="@style/AppWrapContent"
android:layout_gravity="center_vertical"
android:layout_marginStart="18dp"
android:layout_marginEnd="10dp"
app:tagHorizontalSpace="12dp"
app:tagVerticalSpace="12dp" />
</HorizontalScrollView>

但是這樣做的效果是標籤雲控制元件的寬度只顯示子佈局中最大的寬度。後來想著是不是在外頭加上 LinearLayout 來實現父佈局填滿，最後是這樣：

<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
<LinearLayout
android:id="@+id/layout_tag"
style="@style/AppWrapContent"
android:orientation="horizontal">
<com.XXX.XXX.TagsLayout
android:id="@+id/tagsLayout"
style="@style/AppWrapContent"
android:layout_gravity="center_vertical"
android:layout_marginStart="18dp"
android:layout_marginEnd="10dp"
app:tagHorizontalSpace="12dp"
app:tagVerticalSpace="12dp" />
</LinearLayout>
</HorizontalScrollView>

但是這樣還是不能實現水平滑動，因為 TagsLayout 的寬度還是和父佈局一樣，所以在 TagsLayout 中再需要改改，需要改動的地方是

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 獲得它的父容器為它設定的測量模式和大小
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

// 需要修改的地方
sizeWidth = 螢幕寬度+螢幕寬度的一半

}

最後附上上文兄弟的原始碼: 我的改動還未新增到原始碼中，明天補上。

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();
}
}

/**
* 負責設定子控制元件的測量模式和大小 根據所有子控制元件設定自己的寬和高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 獲得它的父容器為它設定的測量模式和大小
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();
// 遍歷每個子元素
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
if (child.getVisibility() == GONE)
continue;
// 測量每一個child的寬和高
measureChild(child, widthMeasureSpec, heightMeasureSpec);
// 得到child的lp
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
// 當前子空間實際佔據的寬度
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin + childHorizontalSpace;
// 當前子空間實際佔據的高度
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin + childVerticalSpace;
/**
* 如果加入當前child，則超出最大寬度，則的到目前最大寬度給width，類加height 然後開啟新行
*/
if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
width = Math.max(lineWidth, childWidth);// 取最大的
lineWidth = childWidth; // 重新開啟新行，開始記錄
// 疊加當前高度，
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);
}
}

/**
* 記錄子控制元件的座標
*/
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;

}
}

文末~

Android 利用 HorizontalScrollView + TagsLayout 實現水平方向滑動的標籤雲效果

您可能也會喜歡…