安卓中使用流式佈局實現標籤

阿新 • • 發佈：2019-01-20

我們在開發的時候通常需要加標籤，對於這個標籤怎麼說呢，反正也挺複雜的，最初開發這個標籤的時候還是沒有思路的，後來在github上面查找了一下資料，瞭解了通過流式佈局來實現這個標籤，我記得開始的時候我寫標籤的時候是三個TextView一個一個新增進去的，後來感覺還是不太好，所以咯就用了流式佈局來實現。看一下我的思路。第一步我在github上面找流式佈局實現標籤功能，找到了一個工具類感覺灰常好用所以就用了，看一下他的工具類

package com.redsun.property.widgets;
import android.content.Context;
import android.content.res.TypedArray;
 
import android.database.DataSetObserver;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import com.redsun.property.R;
/**
 * <Pre>
* 元素自動換行容器
* </Pre>
*
 * @author zhangy
 * @version  
1.0
 *          <p>
*          Create by 14/11/12 下午6:22
 */
public class TagCloudLayout extends ViewGroup {
    private int mLineSpacing;
    private int mTagSpacing;
    private BaseAdapter mAdapter;
    private TagItemClickListener mListener;
    private DataChangeObserver mObserver;
public TagCloudLayout(Context context) {
        super 
(context);
init(context, null, 0);
}
public TagCloudLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
init(context, attrs, 0);
}
public TagCloudLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
init(context, attrs, defStyle);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
        TagCloudConfiguration config = new TagCloudConfiguration(context, attrs);
mLineSpacing = config.getLineSpacing();
mTagSpacing = config.getTagSpacing();
}
private void drawLayout() {
        if (mAdapter == null || mAdapter.getCount() == 0) {
            return;
}

        this.removeAllViews();
        for (int i = 0; i < mAdapter.getCount(); i++) {
            View view = mAdapter.getView(i,null,null);
            final int position = i;
view.setOnClickListener(new OnClickListener() {
                @Override
public void onClick(View v) {
                    if (mListener != null) {
                        mListener.itemClick(position);
}
                }
            });
            this.addView(view);
}
    }

    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int wantHeight = 0;
        int wantWidth = resolveSize(0, widthMeasureSpec);
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int childLeft = paddingLeft;
        int childTop = paddingTop;
        int lineHeight = 0;
//TODO 固定列的數量所需要的程式碼
for (int i = 0; i < getChildCount(); i++) {
            final View childView = getChildAt(i);
LayoutParams params = childView.getLayoutParams();
childView.measure(
                    getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, params.width),
getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom, params.height)
            );
            int childHeight = childView.getMeasuredHeight();
            int childWidth = childView.getMeasuredWidth();
lineHeight = Math.max(childHeight, lineHeight);
            if (childLeft + childWidth + paddingRight > wantWidth) {
                childLeft = paddingLeft;
childTop += mLineSpacing + childHeight;
lineHeight = childHeight;
}

            childLeft += childWidth + mTagSpacing;
}
        wantHeight += childTop + lineHeight + paddingBottom;
setMeasuredDimension(wantWidth, resolveSize(wantHeight, heightMeasureSpec));
}

    @Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //TODO 固定列的數量所需要的程式碼
int width = r - l;
        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        int paddingRight = getPaddingRight();
        int childLeft = paddingLeft;
        int childTop = paddingTop;
        int lineHeight = 0;
        for (int i = 0; i < getChildCount(); i++) {
            final View childView = getChildAt(i);
            if (childView.getVisibility() == View.GONE) {
                continue;
}
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();
lineHeight = Math.max(childHeight, lineHeight);
            if (childLeft + childWidth + paddingRight > width) {
                childLeft = paddingLeft;
childTop += mLineSpacing + lineHeight;
lineHeight = childHeight;
}

            childView.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
childLeft += childWidth + mTagSpacing;
}
    }

    @Override
protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
}

    @Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LayoutParams(this.getContext(), attrs);
}

    public void setAdapter(BaseAdapter adapter){
        if (mAdapter == null){
            mAdapter = adapter;
            if (mObserver == null){
                mObserver = new DataChangeObserver();
mAdapter.registerDataSetObserver(mObserver);
}
            drawLayout();
}
    }

    public void setItemClickListener(TagItemClickListener mListener) {
        this.mListener = mListener;
}

    public interface TagItemClickListener {
        void itemClick(int position);
}

    class DataChangeObserver extends DataSetObserver {
        @Override
public void onChanged() {
            TagCloudLayout.this.drawLayout();
}

        @Override
public void onInvalidated() {
            super.onInvalidated();
}
    }
    public class TagCloudConfiguration {

        private static final int DEFAULT_LINE_SPACING = 5;
        private static final int DEFAULT_TAG_SPACING = 10;
        private static final int DEFAULT_FIXED_COLUMN_SIZE = 3; //預設列數
private int lineSpacing;
        private int tagSpacing;
        private int columnSize;
        private boolean isFixed;
        public TagCloudConfiguration(Context context,AttributeSet attrs){
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TagCloudLayout);
            try {
                lineSpacing = a.getDimensionPixelSize(R.styleable.TagCloudLayout_lineSpacing, DEFAULT_LINE_SPACING);
tagSpacing = a.getDimensionPixelSize(R.styleable.TagCloudLayout_tagSpacing, DEFAULT_TAG_SPACING);
columnSize = a.getInteger(R.styleable.TagCloudLayout_columnSize, DEFAULT_FIXED_COLUMN_SIZE);
isFixed = a.getBoolean(R.styleable.TagCloudLayout_isFixed,false);
} finally {
                a.recycle();
}
        }

        public int getLineSpacing() {
            return lineSpacing;
}

        public void setLineSpacing(int lineSpacing) {
            this.lineSpacing = lineSpacing;
}

        public int getTagSpacing() {
            return tagSpacing;
}

        public void setTagSpacing(int tagSpacing) {
            this.tagSpacing = tagSpacing;
}

        public int getColumnSize() {
            return columnSize;
}

        public void setColumnSize(int columnSize) {
            this.columnSize = columnSize;
}

        public boolean isFixed() {
            return isFixed;
}

        public void setIsFixed(boolean isFixed) {
            this.isFixed = isFixed;
}
    }
}

他的方法已經封裝好了所以我就直接用了，因為有時候開發就是知道怎麼用網上的demo，咱們保證可以run起來就可以了，在微調微調。

<com.redsun.property.widgets.TagCloudLayout
android:id="@+id/area_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="@dimen/spacing_small"
android:layout_marginRight="@dimen/spacing_small"
>
</com.redsun.property.widgets.TagCloudLayout>

這麼用它的這個工具類，

holder.areaLayout.removeAllViews();
if (butlerEntity.getArealist() != null && butlerEntity.getArealist().size() > 0) {
    for (ButlerEntity.Area area : butlerEntity.getArealist()) {
        TextView text = new TextView(mct);
ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
text.setTextColor(mct.getResources().getColor(R.color.butler_area_textcolor));
text.setBackground(mct.getResources().getDrawable(R.drawable.bg_bulter_text));
text.setText(area.getAreaname());
lp.setMargins(140, 20, 140, 20);
holder.areaLayout.addView(text, lp);
}
} else {
    TextView text = new TextView(mct);
ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
text.setText("暫無片區");
holder.areaLayout.addView(text, lp);
}

return convertView;

之後就這樣實現了它的功能這裡需要注意一下

ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

這個方法比不可少，否則就會報型別轉換異常改工嗯呢該就實現了

 TextView text = new TextView(mct);
ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
text.setTextColor(mct.getResources().getColor(R.color.butler_area_textcolor));
text.setBackground(mct.getResources().getDrawable(R.drawable.bg_bulter_text));
text.setText(area.getAreaname());
lp.setMargins(140, 20, 140, 20);
holder.areaLayout.addView(text, lp);

這幾句就是呼叫它的核心程式碼

安卓中使用流式佈局實現標籤

安卓中使用流式佈局實現標籤

安卓流式佈局(可換行的標籤)

【安卓-自定義佈局】安卓App開發思路一步一個腳印（十）實現內嵌在app中的webview 騰訊開源X5 高效安全

安卓沉浸式狀態列開發輸入法彈出遮擋佈局問題解決

FlowLayout流式佈局實現搜尋歷史或熱門標籤

【安卓-自定義佈局】安卓App開發思路一步一個腳印（九）實現自定義滾動的新聞條目上下滾動-仿蘑菇街

the Percentage Layout of Android （安卓的百分比佈局）

安卓觸控手勢事件實現圖片跟著手指移動和圖片縮放

安卓使用sql語句實現SQLite資料庫的增刪改查

流式佈局實現搜尋框

安卓開發---基於SQLite實現增刪查改

自定義流式佈局實現

安卓App登出登陸實現

安卓多級列表簡單實現

安卓基礎--三分鐘實現省市縣三級聯動

java中流式佈局管理器（Flowlayout）的演示

響應式佈局實現方法

安卓Android本地Sqlite實現註冊賬號和登入功能

FlowLayout流式佈局實現搜尋清空歷史記錄

適配安卓沉浸式狀態列的新姿勢

安卓中使用流式佈局實現標籤

相關推薦