Android开发流式布局FlowLayout

最新推荐文章于 2025-02-12 15:42:42 发布

yanxuxu123

最新推荐文章于 2025-02-12 15:42:42 发布

阅读量3.2k

点赞数 1

分类专栏： android Dome 文章标签： android开发 FlowLayout 使用简单灵活修改

android Dome 专栏收录该内容

3 篇文章

订阅专栏

先说说我的需求吧，我需要做商品规格选择、类似淘宝京东选择产品加入购物车。没办法只有选择流式布局了。最后在改造张鸿洋前辈的Flowlayout实现了该功能。我说说怎么快速使用流式布局吧，自定义控件说明看这张鸿洋的博客：http://blog.youkuaiyun.com/lmj623565791/article/details/38352503。

1、Dome目录结构如下图：

说白了你就按照我这目录结构将标红的文件导入项目对应文件夹，那么你就能看到流失布局效果了；

效果图如下：

现在说说怎么改成大家想要的效果：布局文件引用自定义控件代码如下

<view.FlowTagLayout
                android:id="@+id/color_flow_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

项目需求肯定不一需要修改选中及为选中状态修改：normal_text_color.xml及round_rectangle_bg.xml即可

文字修改的三种状态：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#0185d0"/>//按下
    <item android:state_selected="true" android:color="#0185d0"/>//选中
    <item android:color="#666666"/>//未选中
</selector>

文字背景的三种状态：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">                                     //按下
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:radius="3dp" />
            <stroke android:width="1dp" android:color="#0185d0" />
        </shape>
    </item>
    <item android:state_selected="true">                                      //选中
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:radius="3dp" />
            <stroke android:width="1dp" android:color="#0185d0" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">                                  //未选中
            <solid android:color="#ffffff" />
            <corners android:radius="3dp" />
            <stroke android:width="1dp" android:color="#0185d0" />
        </shape>
    </item>
</selector>

下面说一下单选实现单码段：

       mSizeTagAdapter = new TagAdapter<String>(this);
       mSizeFlowTagLayout.setTagCheckedMode(FlowTagLayout.FLOW_TAG_CHECKED_SINGLE);//单选
       mSizeFlowTagLayout.setAdapter(mSizeTagAdapter);
       mSizeFlowTagLayout.setOnTagSelectListener(new OnTagSelectListener() {
           @Override
           public void onItemSelect(FlowTagLayout parent, List<Integer> selectedList) {
               if (selectedList != null && selectedList.size() > 0) {
                   StringBuilder sb = new StringBuilder();
                   for (int i : selectedList) {
                       ms = i;
                       sb.append(parent.getAdapter().getItem(i));
                       sb.append(":");
                   }
                   Toast.makeText(getApplicationContext(), "移动研发:" + sb.toString(), Toast.LENGTH_SHORT).show();
               } else {
                   mSizeFlowTagLayout.getChildAt(ms).setSelected(true);
               }
           }
       });

ADD数据：    private void initColorData() {
       List<String> dataSource = new ArrayList<String>();
       dataSource.add("红色");
       dataSource.add("黑色");
       dataSource.add("花边色");
       dataSource.add("深蓝色");
       dataSource.add("白色");
       dataSource.add("玫瑰红色");
       dataSource.add("紫黑紫兰色");
       dataSource.add("葡萄红色");
       dataSource.add("屎黄色");
       dataSource.add("绿色");
       dataSource.add("彩虹色");
       dataSource.add("牡丹色");
       mColorTagAdapter.onlyAddAll(dataSource);//加入一个数组即可
   }
数据加载可能不只一个属性，没关系我们可以通过点击事件的位置ms来获取选中的属性。