android技术博客Android开发经验谈Android开发

一个非常好用的Android流式布局

2017-12-14  本文已影响229人  五万年前走丢了

效果图镇楼


这里写图片描述

首先我们先添加依赖

compile 'com.zhy:flowlayout-lib:1.0.3'

然后将以下标签和布局添加到项目中。
主布局layouy->activity_flow_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:zhy="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_flow_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="wswy.mymob.FlowLayout">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="完善属性信息,获取更高贷款额度"
    />

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

填充标签的布局layout->tv.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@drawable/tag_bg"
    android:text="Helloworld"
    android:textColor="@drawable/text_color">

</TextView>

我们可以在这里来设置文字的大小,text_color设置文字的颜色、tag_bg设置标签的背景。
在drawable->text_color中

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="#ff0000" android:state_checked="true"/>
    <item android:color="#f692ff"/>

</selector>

下方代表默认文字颜色,上方代表点击后的颜色.
在drawable->tag_bg中

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/checked_bg"
        android:state_checked="true"
        >

    </item>
    <item
        android:drawable="@drawable/normal_bg"></item>
</selector>

存在着两组标签drawable->normal_bg.xml代表的是默认时标签的背景,drawable->checked_bg.xml代表的是点击时的背景.
在drawable->normal_bg.xml中

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffff00"/>
    <corners android:radius="30dp"/>
    <stroke android:color="#00ffff"  android:width="2dp"/>
    <padding
        android:bottom="2dp"
        android:left="10dp"
        android:right="10dp"
        android:top="2dp"/>

</shape>

上面的color 代表背景颜色,下面的color代表边框颜色.
在drawable->checked_bg.xml中

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff"/>
    <corners android:radius="30dp"/>
    <stroke android:color="#c416ff"  android:width="2dp"/>
    <padding
        android:bottom="2dp"
        android:left="10dp"
        android:right="10dp"
        android:top="2dp"/>

</shape>

也是一样的.
然后我们进入到.Java文件,怕亲们乱掉我将会把整个文件内容都给大家,然后以注释的方式为大家讲解.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import com.zhy.view.flowlayout.TagAdapter;
import com.zhy.view.flowlayout.TagFlowLayout;

import java.util.Set;

public class FlowLayout extends AppCompatActivity {
    //放入流式布局标签中的内容
    private String[] mVals = new String[]
            {"有信用卡", "有微粒贷", "我有房", "我有车", "有社保", "有公积金",
                    "有人寿保险", "工资银行卡转账", "啥都没有"};
    private TagFlowLayout mFlowLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //获取布局填充器,一会将tv.xml文件填充到标签内.
        final LayoutInflater mInflater = LayoutInflater.from(this);
        setContentView(R.layout.activity_flow_layout);
        //初始化布局和适配器,直接粘就行.
        mFlowLayout = (TagFlowLayout) findViewById(R.id.id_flowlayout);
        mFlowLayout.setAdapter(new TagAdapter<String>(mVals)
        {

            @Override
            public View getView(com.zhy.view.flowlayout.FlowLayout parent, int position, String s)
            {
//                将tv.xml文件填充到标签内.
                TextView tv = (TextView) mInflater.inflate(R.layout.tv,
                        mFlowLayout, false);
//               为标签设置对应的内容
                tv.setText(s);
                return tv;
            }
//             为标签设置预点击内容(就是一开始就处于点击状态的标签)
            @Override
            public boolean setSelected(int position, String s)
            {
                return s.equals("Android");
            }
        });
//          为点击标签设置点击事件.
        mFlowLayout.setOnTagClickListener(new TagFlowLayout.OnTagClickListener()
        {
            @Override
            public boolean onTagClick(View view, int position, com.zhy.view.flowlayout.FlowLayout parent)
            {
                Toast.makeText(FlowLayout.this, mVals[position], Toast.LENGTH_SHORT).show();
                //view.setVisibility(View.GONE);
                return true;
            }
        });

//          展示哪些标签处于选中状态,这个很重要我们设置标签可点击就是为了把用户选中状态的标签中的数据上传.
        mFlowLayout.setOnSelectListener(new TagFlowLayout.OnSelectListener()
        {
            @Override
            public void onSelected(Set<Integer> selectPosSet)
            {
               setTitle("choose:" + selectPosSet.toString());
            }
        });
    }
}

亲们,如果还有什么疑问可以,在博客下留言,我看到会回复,如果特别急的话可以加我qq:2018866256,回复博客.如果对你有用的话请将这篇博客顶起来.非常感谢.

上一篇下一篇

猜你喜欢

热点阅读