巧解HorizontalListView需求，支持多选。

来源：互联网发布：区域设置软件中文版编辑：程序博客网时间：2024/06/11 06:58

起因：最近开发中遇到了一个需求要求做水平滑动的listview，有多选。参考了网上的HorizontalListView，感觉太费劲，无效代码太多，而且不知道还有什么bug，所以自己尝试用LinearLayout写了一个，感觉还可以，遂记录一下。

需求图：

就是中间哪一部分的选择分类。

不同的选中状态，并支持左右滑动。

思路：怎么省事怎么来~哈哈。所以没做那些优化。大概实现了一下，内容如下：

1、在xml中写一下布局

<HorizontalScrollView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:scrollbars="none">            <LinearLayout                android:id="@+id/con"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:background="@color/white"                android:orientation="horizontal" />        </HorizontalScrollView>

2、在Fragment中拿到id

LinearLayout flowLayout;

public List<Integer> mSelectedKeyWordsTagList = new ArrayList<>();

flowLayout = (LinearLayout) view.findViewById(R.id.con);

3、下边的就是动态添加的逻辑了。

flowLayout.removeAllViews();                ViewGroup.MarginLayoutParams p = new ViewGroup.MarginLayoutParams(ViewGroup.MarginLayoutParams.WRAP_CONTENT, ViewGroup.MarginLayoutParams.WRAP_CONTENT);                for (int i = 0; i < mKeyWordsList.size(); i++) {                    LiveTagListBean tag = mKeyWordsList.get(i);                    LiveKeyWordsItemTextView tagTv = new LiveKeyWordsItemTextView(mContext);                    if (i==0){                        p.setMargins(12, 20, 8, 5);                    }else{                        p.setMargins(0, 20, 8, 5);                    }                    tagTv.setLayoutParams(p);                    tagTv.setData(tag);                    tagTv.setAdapter(false);                    tagTv.setOnClickListener(new View.OnClickListener() {                        @Override                        public void onClick(View v) {                            Integer tagTvData = tagTv.getDataTag();                            if (mSelectedKeyWordsTagList.contains(tagTvData)) {                                mSelectedKeyWordsTagList.remove(tagTvData);                            } else {                                mSelectedKeyWordsTagList.add(tagTvData);                            }                            notifyFlowLayoutData();                        }                    });                    flowLayout.addView(tagTv);
                }
notifyFlowLayoutData();
下边是刷新的方法
private void notifyFlowLayoutData() {        for (int j = 0; j < flowLayout.getChildCount(); j++) {            LiveKeyWordsItemTextView x = (LiveKeyWordsItemTextView) flowLayout.getChildAt(j);            if (mSelectedKeyWordsTagList.contains(x.getDataTag())) {                x.setAdapter(true);            } else {                x.setAdapter(false);            }        }        refresh(false);//这个里边是根据字段id集合mSelectedKeyWordsTagList去服务器取新的数据的接口调用逻辑    }
主要就是做了一个for循环，不断的往里边添加一个自己写的控件（那个button）。
下边是控件的代码。
public class LiveKeyWordsItemTextView extends RelativeLayout {    @Bind(R.id.tv)    TextView tv;    @Bind(R.id.ll)    View ll;    Context mContext;    boolean adapter = false;// 当为true的时候为选中的蓝色状态，false的时候是未选中的白色外边框状态。    public LiveKeyWordsItemTextView(Context context) {        super(context);        initialize(context);    }    public LiveKeyWordsItemTextView(Context context, AttributeSet attrs) {        super(context, attrs);        initialize(context);    }    public void initialize(Context context) {        mContext = context;        LayoutInflater mInflater = LayoutInflater.from(context);        mInflater.inflate(R.layout.wg_live_key_words_tag_main, this, true);        ButterKnife.bind(this, this);        tv.setTextColor(context.getResources().getColor(R.color.text6));        tv.setTextSize(12);        ll.setBackgroundResource(R.drawable.btn_rectangle_round_whitein_colorcc_out_r2dp);    }    public void setAdapter(boolean adapter) {        if (adapter) {            tv.setTextColor(mContext.getResources().getColor(R.color.white));            tv.setTextSize(12);            ll.setBackgroundResource(R.drawable.btn_rectangle_round_2d91ff_strock_r2dp);        } else {            tv.setTextColor(mContext.getResources().getColor(R.color.text6));            tv.setTextSize(12);            ll.setBackgroundResource(R.drawable.btn_rectangle_round_whitein_colorcc_out_r2dp);        }    }    public void setData(LiveTagListBean chatter) {        tv.setText(chatter.getName());        tag = chatter.getTag();    }    int tag;    public String getData() {        return tv.getText().toString();    }    public int getDataTag() {        return tag;    }}
控件的布局文件：
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_marginLeft="6dp"    android:layout_marginRight="6dp"    android:layout_marginBottom="12dp">    <LinearLayout        android:id="@+id/ll"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/btn_rectangle_round_whitein_colorcc_out_r2dp"        android:orientation="vertical">        <TextView            android:id="@+id/tv"            android:layout_width="wrap_content"            android:layout_height="26dp"            android:enabled="false"            android:gravity="center"            android:paddingLeft="10dp"            android:paddingRight="10dp"            android:text="全部"            android:textColor="@color/text6"            android:textSize="12sp"  />    </LinearLayout></FrameLayout>
还有两个圆角的shape： 
btn_rectangle_round_whitein_colorcc_out_r2dp
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <!-- 填充的颜色 -->    <!-- 填充的颜色 -->    <solid android:color="@color/white" />    <!-- 设置按钮的四个角为弧形 -->    <!-- android:radius 弧形的半径 -->    <corners android:radius="2dp" />    <!-- padding：Button里面的文字与Button边界的间隔 -->    <stroke        android:width="1px"        android:color="@color/color_cc"/></shape> 
btn_rectangle_round_2d91ff_strock_r2dp
<shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <!-- 填充的颜色 -->    <!-- 填充的颜色 -->    <solid android:color="@color/color_2d91ff" />    <!-- 设置按钮的四个角为弧形 -->    <!-- android:radius 弧形的半径 -->    <corners android:radius="2dp" /></shape> 
还有用到的一个实体类 TagListBean
public class LiveTagListBean {    /**     * tag : 1 // 标签的id（用于与服务器的通信）     * name : 历史// 标签的名称（用于显示）     */    private int id;    private String tag_name;    public LiveTagListBean() {    }    public LiveTagListBean(int id, String tag_name) {        this.id = id;        this.tag_name = tag_name;    }    public int getTag() {        return id;    }    public void setTag(int id) {        this.id = id;    }    public String getName() {        return tag_name;    }    public void setName(String tag_name) {        this.tag_name = tag_name;    }}
到此结束！
下边是效果图：


此致
敬礼
感谢我的产品团队，再一次让我提高！

阅读全文

0 0