Android 流式布局FlowLayout

FlowLayout

現(xiàn)在項(xiàng)目中為了美觀,設(shè)計(jì)師們都比較喜歡流式布局(FlowLayout),秉著不重復(fù)造輪子的原則,在網(wǎng)上搜索了一堆,后來還是根據(jù)名氣選擇了鴻陽的??。
廢話不多說,下面是我做的Demo示例圖片:

屏幕快照 2019-08-27 下午4.38.12.png

1、使用鴻陽大神的代碼首先要引入依賴:

 implementation 'com.hyman:flowlayout-lib:1.1.2'

2、剩下就是在代碼中使用啦
1??、布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:zhy="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.activity.FlowLayoutActivity">

<com.zhy.view.flowlayout.TagFlowLayout
    android:id="@+id/tab_flowlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="20dp"
    zhy:max_select="-1"></com.zhy.view.flowlayout.TagFlowLayout>

<Button
    android:id="@+id/btn_count"
    android:layout_width="match_parent"
    android:layout_height="50dp" />
</LinearLayout>

2??、項(xiàng)目中使用,寫了兩個(gè)方法:

  /**
 * 設(shè)置選擇事件
 */
private void setFlowItemListener() {
    //選擇監(jiān)聽
    tabFlowlayout.setOnSelectListener(new TagFlowLayout.OnSelectListener() {
        @Override
        public void onSelected(Set<Integer> selectPosSet) {

            Toast.makeText(FlowLayoutActivity.this, "chose" + selectPosSet.toString(), Toast.LENGTH_SHORT).show();
        }
    });

    //標(biāo)簽點(diǎn)擊監(jiān)聽
    tabFlowlayout.setOnTagClickListener(new TagFlowLayout.OnTagClickListener() {
        @Override
        public boolean onTagClick(View view, int position, FlowLayout parent) {
            Toast.makeText(FlowLayoutActivity.this, "標(biāo)簽" + tags.get(position), Toast.LENGTH_SHORT).show();
            return true;
        }
    });
}

  /**
 * 給流式布局設(shè)置值
 */
private void setFlowData() {

    tabFlowlayout.setAdapter(new TagAdapter<String>(tags) {
        @Override
        public View getView(FlowLayout parent, int position, String o) {

            LayoutInflater inflater = LayoutInflater.from(getApplication());
            TextView textView = (TextView) inflater.inflate(R.layout.tv_layout, tabFlowlayout, false);
            textView.setText(o);
            textView.setBackground(getDrawable(R.drawable.textview_nomal_shape));
            return textView;
        }
        //當(dāng)選中的時(shí)候
        @Override
        public void onSelected(int position, View view) {
            super.onSelected(position, view);
            TextView textView = (TextView) view;
            textView.setBackground(getDrawable(R.drawable.textview_shape));
            textView.setTextColor(Color.parseColor("#FFFFFF"));
        }

        //當(dāng)沒選中的時(shí)候
        @Override
        public void unSelected(int position, View view) {
            super.unSelected(position, view);
            TextView textView = (TextView) view;
            textView.setBackground(getDrawable(R.drawable.textview_nomal_shape));
            textView.setTextColor(Color.parseColor("#000000"));
        }
    });
}

3、使用的時(shí)候我遇到了一個(gè)問題,就是當(dāng)我給TextView設(shè)置選擇器的時(shí)候,發(fā)現(xiàn)只有邊框顏色變化,背景沒有變化。造成這種問題的原因是我Item布局父布局是LinearLayout 里面嵌套一個(gè)TextView,改成Item布局直接是TextView這個(gè)問題就解決啦,(分析的原因是,這樣寫的目的是,我們代碼設(shè)置選中監(jiān)聽的時(shí)候,方法中有一個(gè)view如果這個(gè)view不是TextView我們就不能設(shè)置字體顏色啦,這樣就局限啦,有可能分析的不對(duì),只是給自己找了個(gè)理由而已??)可以在第二個(gè)方法中隨便設(shè)置背景色啦,而且還能給條目字體設(shè)置顏色。

4、有現(xiàn)成的API可以直接獲取我們選中條目的索引值,代碼如下,查看了數(shù)據(jù),數(shù)據(jù)準(zhǔn)確。

List<Integer> list = new ArrayList<>();

@OnClick(R.id.btn_count)
public void onViewClicked() {
    list.clear();

    Set<Integer> selectedList = tabFlowlayout.getSelectedList();
    Iterator<Integer> iterator = selectedList.iterator();
    while (iterator.hasNext()) {
        Integer next = iterator.next();
        list.add(next);
    }
    Toast.makeText(this, "被選中的條目數(shù)量是:" + list.size(), Toast.LENGTH_SHORT).show();

}

5、以上就是使用流程,自學(xué)完畢。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容