FlexboxLayout实现流式布局 FlexboxLayout实现流式布局

前言 FlexboxLayout是google推出的一个实现流式布局的比较好的控件。
本篇文章参考：
Android可伸缩布局－FlexboxLayout(支持RecyclerView集成)
Android轻松搞定流动布局（FlexboxLayout）
google/flexbox-layout(项目地址)
在此表示感谢。对于FlexboxLayout的一些基本特性和使用参考文献已经写的很清楚了，本篇主要讲 FlexboxLayout+RecyclerView 如何实现流式布局。
效果图其实讲述前先来波效果图才是正确的打开方式。

文章图片
2.gif 第一步，准备几个点击textView时背景切换的xml 【FlexboxLayout实现流式布局】flex_tv_normal.xml 代码

flex_tv_pressed.xml 代码

flex_tv_bg.xml 代码

第二步，在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:流式布局对应的适配器 * * Author:pei * Date: 2017/6/30 * Description: */ public class FlexboxAdapterextends RecyclerView.Adapter {protected Context mContext; protected View mLayoutView; protected List 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 data) { this.mContext = context; this.mData = https://www.it610.com/article/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应该怎么写，卡了好久)，这个确实卡了我一会啊，总算是出来了，哭一会~

第四步，先上activity_mian.xml文件吧，为了展示流式布局的滑动效果，我将RecyclerView的高度设置了一个固定的值，大家开发时，可以根据实际情况修改

最后一步，上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 ListmDatas; @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(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实现流式布局的内容就讲到这里，谢谢诶。