流式布局 FlowLayout
Android流式布局,支持单选、多选等,适合用于产品标签等。
支持数组,集合,集合对象数据(Demo 中以集合对象示例)。
GitHub 地址:https://github.com/lyyRunning/MyFlowLayout
特色:
- 以setAdapter形式注入数据
- 直接设置selector为background即可完成标签选则的切换,类似CheckBox
- 支持控制选择的Tag数量,比如:单选、多选
- 支持setOnTagClickListener,当点击某个Tag回调
- 支持setOnSelectListener,当选择某个Tag后回调
- 支持adapter.notifyDataChanged
- Activity重建(或者旋转)后,选择的状态自动保存
效果图:
简单用法:
dependencies {
//FlowLayouty依赖
compile 'com.hyman:flowlayout-lib:1.1.2'
compile 'com.zhy:base-adapter:2.0.1'
}
布局声明:
<com.zhy.view.flowlayout.TagFlowLayout
android:id="@+id/id_flowlayout"
zhy:max_select="-1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="20dp">
</com.zhy.view.flowlayout.TagFlowLayout>
支持属性:
max_select:-1为不限制选择数量,>=1的数字为控制选择tag的数量
支持通过state=checked来控制选中和取消,也可以自己在Adapter 的onSelected和unSelected中分别处理显示。
设置数据
idFlowlayout.setAdapter(new TagAdapter<String>(mVals) {
@Override
public View getView(FlowLayout parent, int position, String s)
{
TextView tv = (TextView) mInflater.inflate(R.layout.tv,
mFlowLayout, false);
tv.setText(s);
return tv;
}
});
getView中回调,类似ListView等用法。
点击某个标签回调
/**
* 点击某个 Tag 返回
*/
idFlowlayout.setOnTagClickListener(new TagFlowLayout.OnTagClickListener() {
@Override
public boolean onTagClick(View view, int position, FlowLayout parent) {
String tag = mVals[position];
tvText1.setText(tag);
Toast.makeText(SingleActivity.this, "Clicked====" + tag, Toast.LENGTH_SHORT).show();
return true;
}
});
选择多个标签回调
idFlowlayout.setOnSelectListener(new TagFlowLayout.OnSelectListener() {
@Override
public void onSelected(Set<Integer> selectPosSet) {
tvText1.setText(String.valueOf(selectPosSet));
Toast.makeText(MultipleSelectionActivity.this, "selectPosSet" + selectPosSet, Toast.LENGTH_SHORT).show();
}
});
预先设置Item选中
//预先设置选中
mAdapter.setSelectedList(1,3,5,7,8,9);
//获得所有选中的pos集合
idFlowlayout.getSelectedList();
贴一个单选完整例子;
SingleActivity的活动
public class SingleActivity extends Activity {
@BindView(R.id.id_flowlayout)
TagFlowLayout idFlowlayout;
@BindView(R.id.tv_text1)
TextView tvText1;
List<User> list;
TagAdapter mAdapter;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_single_choose);
ButterKnife.bind(this);
init();
}
private void init() {
final LayoutInflater mInflater = LayoutInflater.from(this);
list = new ArrayList<>();
list.add(new User("Hello"));
list.add(new User("Android"));
list.add(new User("Weclome Hi "));
list.add(new User("Button"));
list.add(new User("TextView"));
list.add(new User("Weclome Hello"));
list.add(new User("Button Text"));
list.add(new User("TextView"));
list.add(new User("utton ImageView"));
list.add(new User("Weclome"));
list.add(new User("Hello"));
list.add(new User("Weclome Hi "));
list.add(new User("Button"));
list.add(new User("TextView"));
list.add(new User("Weclome Hello"));
list.add(new User("Button Text"));
list.add(new User("TextView"));
list.add(new User("utton ImageView"));
list.add(new User("Weclome"));
list.add(new User("Hello"));
list.add(new User("Weclome Hello"));
/**
* 点击某个 Tag 返回
*/
idFlowlayout.setOnTagClickListener(new TagFlowLayout.OnTagClickListener() {
@Override
public boolean onTagClick(View view, int position, FlowLayout parent) {
String tag = list.get(position).getName();
tvText1.setText(tag);
Toast.makeText(SingleActivity.this, "Clicked====" + tag, Toast.LENGTH_SHORT).show();
return true;
}
});
idFlowlayout.setAdapter(mAdapter = new TagAdapter<User>(list) {
@Override
public View getView(FlowLayout parent, int position, User user) {
TextView tv = (TextView) mInflater.inflate(R.layout.tv,
idFlowlayout, false);
tv.setText(user.getName());
return tv;
}
});
//设置选中的按钮
mAdapter.setSelectedList(5);
}
public static void launch(Context context) {
Intent intent = new Intent(context, SingleActivity.class);
context.startActivity(intent);
}
}
布局:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:zhy="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:layout_marginTop="10dp"
android:id="@+id/tv_text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
/>
<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"
android:layout_marginTop="10dp"
>
</com.zhy.view.flowlayout.TagFlowLayout>
</LinearLayout>
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>
User 对象:
public class User {
public String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public User(String name) {
this.name = name;
}
}
tag_bg的drawable:
<?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>
checked_bg的drawable:
<?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>
normal_bg的drawable:
<?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" />
<padding
android:bottom="2dp"
android:left="10dp"
android:right="10dp"
android:top="2dp" />
</shape>
text_color的 drawable:
<?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>