FlexboxLayout实现流式布局

前言

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

效果图

其实讲述前先来波效果图才是正确的打开方式。

2.gif

第一步，准备几个点击textView时背景切换的xml

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 = 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实现流式布局的内容就讲到这里，谢谢诶。