Android 自定義標籤選擇按鈕組（一）

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

效果圖：

一、原理：

1.其實這裡我們用到的是一個ViewGroup控制元件組，把這些按鈕加進去就有這種效果了！不過這裡要繼承ViewGroup（命名為：GoodsViewGroup）重寫裡面的一些方法。

2.主要的方法有：

GoodsViewGroup按鈕組的控制元件大小

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

裡面的按鈕每個的位置座標

protected void onLayout(boolean changed, int l, int t, int r, int b)

這兩個方法的具體使用大家可以網上查閱資料，這裡就不多說了！

二、程式碼：

/**
 * Created by ShaoLin on 2016/8/22.
 * 這裡是類似淘寶中商品尺寸按鈕組（這裡做了支援button,textview）
 */
public class GoodsViewGroup<X extends TextView> extends ViewGroup {

    public static final String BTN_MODE = "BTNMODE"; //按鈕模式
    public static final String TEV_MODE = "TEVMODE"; //文字模式

    private static final String TAG = "IViewGroup";
    private final int HorInterval = 50;    //水平間隔
    private final int VerInterval = 20;    //垂直間隔

    private int viewWidth;   //控制元件的寬度
    private int viewHeight;  //控制元件的高度

    private ArrayList<String> mTexts = new ArrayList<>();
    private Context mContext;
    private int textModePadding = 30;

    private int textModePaddingLeft = 50;
    private int textModePaddingTop = 25;
    private int textModePaddingRight = 50;
    private int textModePaddingBottom = 25;

    //正常樣式
    private float itemTextSize = 12;
    private int itemBGResNor = R.drawable.goods_item_btn_normal;
    private int itemTextColorNor = Color.parseColor("#000000");

    //選中的樣式
    private int itemBGResPre = R.drawable.goods_item_btn_selected;
    private int itemTextColorPre = Color.parseColor("#ffffff");

    public GoodsViewGroup(Context context) {
        this(context, null);
    }

    public GoodsViewGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
    }

    /**
     * 計算控制元件的大小
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        viewWidth = measureWidth(widthMeasureSpec);
        viewHeight = measureHeight(heightMeasureSpec);
        Log.e(TAG, "onMeasure:" + viewWidth + ":" + viewHeight);
        // 計算自定義的ViewGroup中所有子控制元件的大小
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        // 設定自定義的控制元件MyViewGroup的大小
        setMeasuredDimension(viewWidth, getViewHeight());
    }

    private int measureWidth(int pWidthMeasureSpec) {
        int result = 0;
        int widthMode = MeasureSpec.getMode(pWidthMeasureSpec);
        int widthSize = MeasureSpec.getSize(pWidthMeasureSpec);
        switch (widthMode) {
            /**
             * mode共有三種情況，取值分別為MeasureSpec.UNSPECIFIED, MeasureSpec.EXACTLY,
             * MeasureSpec.AT_MOST。
             *
             *
             * MeasureSpec.EXACTLY是精確尺寸，
             * 當我們將控制元件的layout_width或layout_height指定為具體數值時如andorid
             * :layout_width="50dip"，或者為FILL_PARENT是，都是控制元件大小已經確定的情況，都是精確尺寸。
             *
             *
             * MeasureSpec.AT_MOST是最大尺寸，
             * 當控制元件的layout_width或layout_height指定為WRAP_CONTENT時
             * ，控制元件大小一般隨著控制元件的子空間或內容進行變化，此時控制元件尺寸只要不超過父控制元件允許的最大尺寸即可
             * 。因此，此時的mode是AT_MOST，size給出了父控制元件允許的最大尺寸。
             *
             *
             * MeasureSpec.UNSPECIFIED是未指定尺寸，這種情況不多，一般都是父控制元件是AdapterView，
             * 通過measure方法傳入的模式。
             */
            case MeasureSpec.AT_MOST:
            case MeasureSpec.EXACTLY:
                result = widthSize;
                break;
        }
        return result;
    }

    private int measureHeight(int pHeightMeasureSpec) {
        int result = 0;
        int heightMode = MeasureSpec.getMode(pHeightMeasureSpec);
        int heightSize = MeasureSpec.getSize(pHeightMeasureSpec);
        switch (heightMode) {
            case MeasureSpec.UNSPECIFIED:
                result = getSuggestedMinimumHeight();
                break;
            case MeasureSpec.AT_MOST:
            case MeasureSpec.EXACTLY:
                result = heightSize;
                break;
        }
        return result;
    }

    /**
     * 覆寫onLayout，其目的是為了指定檢視的顯示位置，方法執行的前後順序是在onMeasure之後，因為檢視肯定是隻有知道大小的情況下，
     * 才能確定怎麼擺放
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // 遍歷所有子檢視
        int posLeft = HorInterval;
        int posTop = VerInterval;
        int posRight;
        int posBottom;
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);
            // 獲取在onMeasure中計算的檢視尺寸
            int measureHeight = childView.getMeasuredHeight();
            int measuredWidth = childView.getMeasuredWidth();
            if (posLeft + getNextHorLastPos(i) > viewWidth) {
                posLeft = HorInterval;
                posTop += (measureHeight + VerInterval);
            }
            posRight = posLeft + measuredWidth;
            posBottom = posTop + measureHeight;
            childView.layout(posLeft, posTop, posRight, posBottom);
            posLeft += (measuredWidth + HorInterval);
        }
    }

    /**
     * 獲取控制元件的自適應高度
     *
     * @return
     */
    private int getViewHeight() {
        int viewwidth = HorInterval;
        int viewheight = VerInterval;
        if (getChildCount() > 0) {
            viewheight = getChildAt(0).getMeasuredHeight() + VerInterval;
        }
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);
            // 獲取在onMeasure中計算的檢視尺寸
            int measureHeight = childView.getMeasuredHeight();
            int measuredWidth = childView.getMeasuredWidth();
            //------------當前按鈕按鈕是否在水平上夠位置(2017/7/10)------------
            if (viewwidth + getNextHorLastPos(i) > viewWidth) {
                //------------修正沒有計算所在行第一個所需寬度(2017/7/10)------------
                viewwidth = (measuredWidth + HorInterval * 2);
                viewheight += (measureHeight + VerInterval);
            } else {
                viewwidth += (measuredWidth + HorInterval);
            }
        }
        return viewheight;
    }
    /**
     * 當前按鈕所需的寬度
     * @param i
     * @return
     */
    private int getNextHorLastPos(int i) {
        return getChildAt(i).getMeasuredWidth() + HorInterval;
    }

    private OnGroupItemClickListener onGroupItemClickListener;

    public void setGroupClickListener(OnGroupItemClickListener listener) {
        onGroupItemClickListener = listener;
        for (int i = 0; i < getChildCount(); i++) {
            final X childView = (X) getChildAt(i);
            final int itemPos = i;
            childView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    onGroupItemClickListener.onGroupItemClick(itemPos);
                    chooseItemStyle(itemPos);
                }
            });
        }
    }

    //選中那個的樣式
    public void chooseItemStyle(int pos) {
        clearItemsStyle();
        if (pos < getChildCount()) {
            X childView = (X) getChildAt(pos);
            childView.setBackgroundResource(itemBGResPre);
            childView.setTextColor(itemTextColorPre);
            setItemPadding(childView);
        }
    }

    private void setItemPadding(X view) {
        if (view instanceof Button) {
            view.setPadding(textModePadding, 0, textModePadding, 0);
        } else {
            view.setPadding(textModePaddingLeft, textModePaddingTop, textModePaddingRight, textModePaddingBottom);
        }
    }

    //清除Group所有的樣式
    private void clearItemsStyle() {
        for (int i = 0; i < getChildCount(); i++) {
            X childView = (X) getChildAt(i);
            childView.setBackgroundResource(itemBGResNor);
            childView.setTextColor(itemTextColorNor);
            setItemPadding(childView);
        }
    }

    public void addItemViews(ArrayList<String> texts, String mode) {
        mTexts = texts;
        removeAllViews();
        for (String text : texts) {
            addItemView(text, mode);
        }
    }

    private void addItemView(String text, String mode) {
        X childView = null;
        switch (mode) {
            case BTN_MODE:
                childView = (X) new Button(mContext);
                break;
            case TEV_MODE:
                childView = (X) new TextView(mContext);
                break;
        }
        childView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.WRAP_CONTENT));
        childView.setTextSize(itemTextSize);
        childView.setBackgroundResource(itemBGResNor);
        setItemPadding(childView);
        childView.setTextColor(itemTextColorNor);
        childView.setText(text);
        this.addView(childView);
    }

    public String getChooseText(int itemID) {
        if (itemID >= 0) {
            return mTexts.get(itemID);
        }
        return null;
    }

    public void setItemTextSize(float itemTextSize) {
        this.itemTextSize = itemTextSize;
    }

    public void setItemBGResNor(int itemBGResNor) {
        this.itemBGResNor = itemBGResNor;
    }

    public void setItemTextColorNor(int itemTextColorNor) {
        this.itemTextColorNor = itemTextColorNor;
    }

    public void setItemBGResPre(int itemBGResPre) {
        this.itemBGResPre = itemBGResPre;
    }

    public void setItemTextColorPre(int itemTextColorPre) {
        this.itemTextColorPre = itemTextColorPre;
    }

    public interface OnGroupItemClickListener {
        void onGroupItemClick(int item);
    }
}

上面提供了可以設定按鈕組的item的一些樣式，還有這個GoodsViewGroup為什麼要寫成GoodsViewGroup<X extends TextView>這樣呢？其實這裡我是想做一個泛型，可以使用與Button跟TextView，而這裡的Button本生就是繼承TextView所以在程式碼中還要進行一個判斷，可以看上面方法setItemPadding(X view)。那到了這裡，有些好友可能就會問，為什麼要搞兩個呢？

其實這裡因為TextView的不會自動有設定padding的，而button是有自動設定padding。這個時候你就要看看你是先要那種效果！不過通過我的程式碼中如果是選擇TextView的話，這裡也設定了一個padding給他，不然會很難看！

兩種模式的寫法：

1.Button :

GoodsViewGroup<Button> mGroup;
mGroup.addItemViews(viewtexts, GoodsViewGroup.BTN_MODE);

2.TextView

GoodsViewGroup<TextView> mGroup;
mGroup.addItemViews(viewtexts, GoodsViewGroup.TEV_MODE);

三、Drawable檔案：上面涉及到的按鈕選中與正常的兩個Drawable

1.goods_item_btn_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#F5F5F5" />
            <corners android:radius="15dp" />
        </shape>
    </item>
</layer-list>

2.goods_item_btn_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@color/colorAccent" />
            <corners android:radius="15dp" />
        </shape>
    </item>
</layer-list>

四、例子：

final ArrayList<String> viewtexts = new ArrayList<>();
viewtexts.add("基礎資訊");
viewtexts.add("通訊資訊");
viewtexts.add("後備電源");
headViewHolde.viewGroup.addItemViews(viewtexts, GoodsViewGroup.TEV_MODE);
headViewHolde.viewGroup.chooseItemStyle(0);
headViewHolde.viewGroup.setGroupClickListener(new GoodsViewGroup.OnGroupItemClickListener() {
    @Override
    public void onGroupItemClick(int item) {
        Toast.makeText(mContext, viewtexts.get(item), Toast.LENGTH_SHORT).show();
    }
});

xml頁面

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:layout_marginTop="10dp"
    android:orientation="vertical">

    <com.distributionsysten.view.GoodsViewGroup
        android:id="@+id/viewGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="10dp">
    </com.distributionsysten.view.GoodsViewGroup>

</LinearLayout>

Android 自定義標籤選擇按鈕組（一）

Android 自定義標籤選擇按鈕組（一）

Android 自定義標籤選擇按鈕組（二）

Android-自定義影象資源的使用（1）

Android自定義控制元件開發系列（三）——仿支付寶六位支付密碼輸入頁面

html自定義單選按鈕radio（CSS）

android自定義View,實現折線圖（二）

Docker之自定義映象製作與執行（一）

怎樣為std::map的自定義key提供比較操作（一）

Mybatis-generator修改原始碼實現自定義方法,返回List物件（一）

android--------自定義視頻控件（視頻全屏豎屏自動切換）

按鈕配置之自定義按鈕使用（一）——JEPLUS軟件快速開發平臺

CSS自定義select選擇框樣式（右側下拉箭頭）

【舉例】Android自定義Dialog——選擇一個RadioButton

Android自定義標籤列表控制元件LabelsView

Android 自定義數字選擇器，可以根據自己的需求更改

Android 自定義帶刪除按鈕的EditText

Android自定義主題樣式詳解（結合自定義title欄講解）

在Android應用中使用自定義證書的HTTPS連線（下）

自定義時間選擇控制元件（仿ios滾動效果）

Android自定義時間選擇器或者WheelView

Android 自定義標籤選擇按鈕組（一）

相關推薦