FlexboxLayout实现流式布局

前言

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