多行單選組合控件 MultiLineRadioGroup


需求

這裏寫圖片描述

實現方法

如果是單行或者單列直接使用RadioGroup+RadioButton來實現
但是往往就是計劃趕不上變化,ui給出的圖是這種多行單選
想到的方法之一就是gridview
這裏使用RecyclerView進行封裝
把該處理的都處理完,這樣在調用時就會方便很多

step1

創建一個類繼承RecyclerView
實現其構造
在內部進行初始化和設置GridLayoutManager進行適配處理
講數據通過set方法傳遞進來

public class MultiLineRadioGroup extends RecyclerView {
    private int mChosePosition;
    private List<String> mList = new ArrayList<>();
    private MultilLineRadioButtonAdapter mAdapter;

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

    public MultiLineRadioGroup(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MultiLineRadioGroup(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView(context);
    }

    @Override
    public boolean canScrollVertically(int direction) {
        return false;
    }

    /**
 * 外部實現接口 監聽點擊位置
 */
    private OnChoseListener mOnChoseListener;

    public interface OnChoseListener {
        void onChose(int position);

    }

    public void setOnChoseListener(OnChoseListener onChoseListener) {
        mOnChoseListener = onChoseListener;
    }

    private void initView(Context context) {
        Log.d("tag", "initView");
        setLayoutManager(new GridLayoutManager(context, 3));
        setAdapter(mAdapter = new MultilLineRadioButtonAdapter(R.layout.item_radio, mList, 0));
        mAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
                mAdapter.setChosePosition(position);
                mAdapter.notifyDataSetChanged();
                if (mOnChoseListener != null) {
                    mOnChoseListener.onChose(position);
                }
            }
        });
    }

    /**
     * 外部設置數據進來
     */
    public void setData(List<String> list) {
        Log.d("tag", "setData");
        if (mList.size() == 0) {
            mList.addAll(list);
        } else {
            mList.clear();
            mList.addAll(list);
        }
        mAdapter.notifyDataSetChanged();
    }

    class MultilLineRadioButtonAdapter extends BaseQuickAdapter<String, BaseViewHolder> {

        public MultilLineRadioButtonAdapter(@LayoutRes int layoutResId, @Nullable List<String> data, int chosePosition) {
            super(layoutResId, data);
            mChosePosition = chosePosition;
        }

        @Override
        protected void convert(BaseViewHolder helper, String item) {
            helper.setText(R.id.tv, item);
            helper.getView(R.id.tv).setEnabled(helper.getPosition() == mChosePosition ? true : false);
        }

        public int getChosePosition() {
            return mChosePosition;
        }

        public void setChosePosition(int chosePosition) {
            mChosePosition = chosePosition;
        }
    }

}

注意這裏的 BaseQuickAdapter 是第三方開源RecyclerView適配器

step2

將上面的自定義recyclerview設置到xml

  <chonghao.com.ch_kuaichong_driver.ui.widget.MultiLineRadioGroup
        android:id="@+id/radio_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/home_popup_wx_bg_mid"
        android:overScrollMode="never"
        android:paddingBottom="12dp"
        android:paddingTop="12dp"
        android:scrollbars="none"/>

step3

在代碼中 查找控件 和設置 數據  及點擊監聽
   MultiLineRadioGroup radioGroup = view.findViewById(R.id.radio_group);

        final List<String> list = new ArrayList<>();
        list.add("故障A");
        list.add("故障B");
        list.add("故障C");
        list.add("故障D");
        list.add("故障E");
        list.add("故障F");
        radioGroup.setData(list);
           radioGroup.setOnChoseListener(new MultiLineRadioGroup.OnChoseListener() {
            @Override
            public void onChose(int position) {
                mErrorType = list.get(position);
            }
        });

step4

剩餘資源
item_radio.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:gravity="center_horizontal">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:drawableLeft="@drawable/selector_radio"
        android:drawablePadding="15dp"
        android:enabled="false"
        android:gravity="center_horizontal"
        android:paddingBottom="12dp"
        android:paddingTop="12dp"
        android:text="故障A"
        android:textSize="14dp"/>
</LinearLayout>

選擇器 可以自行修改爲需要的樣式

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/chose_pre" android:state_enabled="true"/>
    <item android:drawable="@mipmap/chose_nor" android:state_enabled="false"/>
    <item android:drawable="@mipmap/chose_nor"/>
</selector>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章