前言
FlexboxLayout是google推出的一个实现流式布局的比较好的控件。
本篇文章参考：
Android可伸缩布局－FlexboxLayout(支持RecyclerView集成)
Android轻松搞定流动布局（FlexboxLayout）
google/flexbox-layout(项目地址)
在此表示感谢。对于FlexboxLayout的一些基本特性和使用参考文献已经写的很清楚了，本篇主要讲 FlexboxLayout+RecyclerView 如何实现流式布局。
效果图
其实讲述前先来波效果图才是正确的打开方式。
2.gif
第一步，准备几个点击textView时背景切换的xml
flex_tv_normal.xml 代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="6dp"></corners>
<stroke android:color="#f5cc1d"
android:width="2dp"></stroke>
</shape>
flex_tv_pressed.xml 代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="6dp"></corners>
<stroke android:color="#ff5b0a"
android:width="2dp"></stroke>
</shape>
flex_tv_bg.xml 代码
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/flex_tv_pressed" android:state_selected="true"/>
<item android:drawable="@drawable/flex_tv_normal" android:state_selected="false"/>
</selector>
第二步，在app.gradle中添加 FlexboxLayout 的依赖
//FlexboxLayout
compile 'com.google.android:flexbox:0.3.0'
//RecyclerView
compile 'com.android.support:recyclerview-v7:25.2.0'
//butterKnife
compile 'com.jakewharton:butterknife:8.5.1'
//这条千万不能忘记!!
annotationProcessor 'com.jakewharton:butterknife-compiler:8.5.1'
第三步，用到RecyclerView，肯定得有对应的Adapter了，下面贴出 FlexboxAdapter 代码
/**
* Instruction:流式布局对应的适配器
* <p>
* Author:pei
* Date: 2017/6/30
* Description:
*/
public class FlexboxAdapter<T>extends RecyclerView.Adapter {
protected Context mContext;
protected View mLayoutView;
protected List<T> mData;
private ViewHolder mViewHolder;
protected OnRecyclerItemClickListener mOnRecyclerItemClickListener;
private int mIndex=-1;//为了防止初始化时第一项被选中，所以mIndex设一个负值
public void setOnRecyclerItemClickListener(OnRecyclerItemClickListener onRecyclerItemClickListener) {
this.mOnRecyclerItemClickListener = onRecyclerItemClickListener;
}
public FlexboxAdapter(Context context, List<T> data) {
this.mContext = context;
this.mData = data;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//注：不可使用view=LayoutInflater.from(mContext).inflate(R.layout.item_layout，null);不然会报错
mLayoutView = LayoutInflater.from(mContext).inflate(R.layout.item_fle_layout, parent, false);
return new ViewHolder(mLayoutView);
}
@Override
public int getItemViewType(int position) {
return super.getItemViewType(position);
}
@Override
public int getItemCount() {
return mData == null ? 0 : mData.size();
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
mViewHolder = ((ViewHolder) holder);
initData(position);
setListener(position);
}
private void initData(int position) {
String content =mData.get(position).toString();
mViewHolder.tvContent.setText(content);
if(mIndex==position){
mViewHolder.tvContent.setSelected(true);
}else{
mViewHolder.tvContent.setSelected(false);
}
// //flexGrow子元素的放大比例， 决定如何分配剩余空间（如果存在剩余空间的话），默认值为0,不会分配剩余空间，
// //如果有一个item的 layout_flexGrow 是一个正值，那么会将全部剩余空间分配给这个Item,
// //如果有多个Item这个属性都为正值，那么剩余空间的分配按照layout_flexGrow定义的比例
// //(有点像LinearLayout的layout_weight属性）。
// ViewGroup.LayoutParams lp = mViewHolder.tvContent.getLayoutParams();
// if (lp instanceof FlexboxLayoutManager.LayoutParams) {//设置 flexGrow
// FlexboxLayoutManager.LayoutParams flexboxLp =(FlexboxLayoutManager.LayoutParams) mViewHolder.tvContent.getLayoutParams();
// flexboxLp.setFlexGrow(1.0f);
// }
}
private void setListener(final int position) {
mViewHolder.tvContent.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mOnRecyclerItemClickListener != null) {
mOnRecyclerItemClickListener.onRecyclerClick(position);
}
}
});
}
public void setIndex(int index){
this.mIndex=index;
}
class ViewHolder extends RecyclerView.ViewHolder {
TextView tvContent;
public ViewHolder(View view) {
super(view);
tvContent=(TextView)view.findViewById(R.id.tv_content);
}
}
public interface OnRecyclerItemClickListener {
void onRecyclerClick(int position);
}
}
对应的 item_fle_layout.xml 文件如下(郁闷不知道这个xml应该怎么写，卡了好久)，这个确实卡了我一会啊，总算是出来了，哭一会~
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:background="@drawable/flex_tv_bg"
android:textColor="@color/black"
android:textSize="14sp"
android:gravity="center"/>
第四步，先上activity_mian.xml文件吧，为了展示流式布局的滑
动效果，我将RecyclerView的高度设置了一个固定的值，大家开发时，可以根据实际情况修改
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="@+id/finger"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@drawable/more_react"
android:text="测试"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="120dp"
android:scrollbars="vertical"
android:scrollbarStyle="outsideOverlay"/>
</RelativeLayout>
</LinearLayout>
最后一步，上MainActivity代码
public class MainActivity extends BaseActivity implements View.OnClickListener,FlexboxAdapter.OnRecyclerItemClickListener {
@BindView(R.id.finger)
Button mBtnFinger;
@BindView(R.id.recycler_view)
RecyclerView mRecyclerView;
private FlexboxAdapter mFlexboxAdapter;
private List<String>mDatas;
@Override
protected int getContentViewId() {
return R.layout.activity_main;
}
@Override
protected void initData(){
mDatas=new ArrayList<>();
mDatas.add("程序员");
mDatas.add("影视天堂");
mDatas.add("美食");
mDatas.add("漫画.手绘");
mDatas.add("广告圈");
mDatas.add("旅行。在路上");
mDatas.add("娱乐八卦");
mDatas.add("青春");
mDatas.add("谈写作");
mDatas.add("短篇小说");
mDatas.add("散文");
mDatas.add("污段子");
mDatas.add("小说");
mDatas.add("程序员2");
mDatas.add("影视天堂2");
mDatas.add("美食2");
mDatas.add("漫画.手绘2");
mDatas.add("广告圈2");
mDatas.add("旅行。在路上2");
mDatas.add("娱乐八卦2");
mDatas.add("青春2");
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(mContext);
layoutManager.setFlexDirection(FlexDirection.ROW);//设置主轴排列方式
layoutManager.setFlexWrap(FlexWrap.WRAP);//设置是否换行
layoutManager.setAlignItems(AlignItems.STRETCH);
mRecyclerView.setHasFixedSize(true);
mRecyclerView.setLayoutManager(layoutManager);
mFlexboxAdapter = new FlexboxAdapter<String>(mContext, mDatas);
mRecyclerView.setAdapter(mFlexboxAdapter);
}
@Override
protected void setListener() {
mBtnFinger.setOnClickListener(this);
mFlexboxAdapter.setOnRecyclerItemClickListener(this);
}
@Nullable
@Override
protected BasePresenter getPresenter() {
return null;
}
@Override
protected void onDestroy() {
super.onDestroy();
}
@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.finger:
break;
default:
break;
}
}
@Override
public void onRecyclerClick(int position) {
String s=mDatas.get(position).toString();
LogUtil.e("===s="+s+" position="+position);
ToastUtil.shortShow("===s="+s+" position="+position);
mFlexboxAdapter.setIndex(position);
mFlexboxAdapter.notifyDataSetChanged();
}
}
ok,今天关于FlexboxLayout实现流式布局的内容就讲到这里，谢谢诶。
