vlayout--让你的多布局不再头疼

vlayout阿里巴巴开源淘宝多布局LayoutManager库, a powerfull LayoutManager extension for RecyclerView

vlayout github

68747471.gif

可以实现上面的效果，多布局，recyclerview实现。

下面是简单的使用。

    compile ('com.alibaba.android:vlayout:1.2.6@aar') {
        transitive = true
    }

在gradle 里面配置就可以了

使用：

     //开始
     DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, false);
     mRecyclerView.setAdapter(delegateAdapter);
     
     //这里先不管，后面再添加
    //        GridLayoutHelper gridHelper = new GridLayoutHelper(5);
    //        gridHelper.setMarginTop(30);
    ////        gridHelper.setWeights(new float[]{20.0f,20.0f,20.0f,20.0f,20.0f});
    //        //设置垂直方向条目的间隔
    //        gridHelper.setVGap(5);
    //        //设置水平方向条目的间隔
    //        gridHelper.setHGap(5);
    //        gridHelper.setMarginLeft(30);
    //        gridHelper.setMarginBottom(30);
    //        //自动填充满布局，在设置完权重，若没有占满，自动填充满布局
    //        gridHelper.setAutoExpand(true);
    //        delegateAdapter.addAdapter(new GridHelperAdapter(imgSrc, gridHelper));
    //
    //        //Linear 布局
    //        LinearLayoutHelper linearHelper1 = new LinearLayoutHelper(5);
    //        delegateAdapter.addAdapter(new LinearAdapter(this, linearHelper1));
     
     
     LinearLayoutHelper linearHelper = new LinearLayoutHelper(5);
     delegateAdapter.addAdapter(new RVAdapter(this, linearHelper));

上面四行是必备的，RVAdapter是我们自己的adapter,实现如下：

public class RVAdapter extends DelegateAdapter.Adapter{
  Context mContext;

private LayoutHelper mHelper;
private VirtualLayoutManager.LayoutParams mLayoutParams;

public RVAdapter(Context context, LayoutHelper mHelper) {
    this(context, mHelper,new VirtualLayoutManager.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300));
}

public RVAdapter(Context context, LayoutHelper layoutHelper, @NonNull VirtualLayoutManager.LayoutParams layoutParams) {
    this.mContext = context;
    this.mHelper = layoutHelper;
    this.mLayoutParams = layoutParams;
}


@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View inflate = LayoutInflater.from(mContext).inflate(R.layout.item_1, null);
    return new MyHolder(inflate);
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    // only vertical
    holder.itemView.setLayoutParams(
            new VirtualLayoutManager.LayoutParams(mLayoutParams));

}

@Override
public int getItemCount() {
    return 1;
}


@Override
public LayoutHelper onCreateLayoutHelper() {
    return mHelper;
}

class MyHolder extends RecyclerView.ViewHolder {
    public MyHolder(View itemView) {
        super(itemView);
    }
}

}

这里其实啥也没有

    holder.itemView.setLayoutParams(
                    new VirtualLayoutManager.LayoutParams(mLayoutParams));

上面这句，添加布局，其实就是之后我们的每一个item，每一个item都不一样。

在mainactivity里

    //item_1
    GridLayoutHelper gridHelper = new GridLayoutHelper(5);
    gridHelper.setMarginTop(30);
    // gridHelper.setWeights(new float[]{20.0f,20.0f,20.0f,20.0f,20.0f});
    //设置垂直方向条目的间隔
    gridHelper.setVGap(5);
    //设置水平方向条目的间隔
    gridHelper.setHGap(5);
    gridHelper.setMarginLeft(30);
    gridHelper.setMarginBottom(30);
    //自动填充满布局，在设置完权重，若没有占满，自动填充满布局
    gridHelper.setAutoExpand(true);
    delegateAdapter.addAdapter(new GridHelperAdapter(imgSrc, gridHelper));
    //item_1
    //Linear 布局
    LinearLayoutHelper linearHelper1 = new LinearLayoutHelper(5);
    delegateAdapter.addAdapter(new LinearAdapter(this, linearHelper1));

上面的代码其实就是在两个item,GridLayoutHelper,LinearLayoutHelper,一个表格，一个列表。

有两个adapter这个其实就是每一个item的列表数据，两个adapter没啥特别的，这里贴出来

-GridHelperAdapter

    public class GridHelperAdapter extends DelegateAdapter.Adapter {
    
        private LayoutHelper mHelper;
        private List mData;
    
        public GridHelperAdapter(List mData, LayoutHelper helper) {
            this.mData = mData;
            this.mHelper=helper;
        }
    
        @Override
        public LayoutHelper onCreateLayoutHelper() {
            return mHelper;
        }
    
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.item_grid_layout, parent, false);
            return new RecyclerViewItemHolder(view);
        }
    
        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            ((RecyclerViewItemHolder) holder).iv_icon.setBackgroundResource(mData.get(position));
        }
    
        @Override
        public int getItemCount() {
            return 5;
        }
    
        /**
         * 正常条目的item的ViewHolder
         */
        private class RecyclerViewItemHolder extends RecyclerView.ViewHolder {
    
            public ImageView iv_icon;
    
            public RecyclerViewItemHolder(View itemView) {
                super(itemView);
                iv_icon = (ImageView) itemView.findViewById(R.id.iv);
            }
        }

-LinearAdapter

    public class LinearAdapter extends DelegateAdapter.Adapter {
    
        private Context mContext;
        private LayoutHelper mHelper;
    
        public LinearAdapter(Context context, LayoutHelper helper) {
            this.mContext=context;
            this.mHelper=helper;
        }
    
        @Override
        public LayoutHelper onCreateLayoutHelper() {
            return mHelper;
        }
    
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.item_linear_layout, parent, false);
            return new RecyclerViewItemHolder(view);
        }
    
        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
            RecyclerViewItemHolder recyclerViewHolder = (RecyclerViewItemHolder) holder;
            recyclerViewHolder.tv_name.setText((position+"") );
            recyclerViewHolder.tv_name.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(mContext, "position:" +position, Toast.LENGTH_SHORT).show();
                }
            });
        }
    
        @Override
        public int getItemCount() {
            return 10;
        }
    
        /**
         * 正常条目的item的ViewHolder
         */
        private class RecyclerViewItemHolder extends RecyclerView.ViewHolder {
    
            public TextView tv_name;
    
            public RecyclerViewItemHolder(View itemView) {
                super(itemView);
                tv_name = (TextView) itemView.findViewById(R.id.tv_name);
            }
        }
    }

如上，我们的代码就完了，可以做一个简单的测试

S80110-10511659.jpg

在上图中可以看到，两个item,每一个item又是一个adapter所添加出来的数据，这样就可以实现多种布局

官方提供了几种实用的类

    默认通用布局实现，解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等。
    LinearLayoutHelper: 线性布局
    GridLayoutHelper: Grid布局， 支持横向的colspan
    FixLayoutHelper: 固定布局，始终在屏幕固定位置显示
    ScrollFixLayoutHelper: 固定布局，但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等
    FloatLayoutHelper: 浮动布局，可以固定显示在屏幕上，但用户可以拖拽其位置
    ColumnLayoutHelper: 栏格布局，都布局在一排，可以配置不同列之间的宽度比值
    SingleLayoutHelper: 通栏布局，只会显示一个组件View
    OnePlusNLayoutHelper: 一拖N布局，可以配置1-5个子元素
    StickyLayoutHelper: stikcy布局， 可以配置吸顶或者吸底
    StaggeredGridLayoutHelper: 瀑布流布局，可配置间隔高度/宽度

有兴趣可以尝试。

推荐一个demo,对这几种布局都有实现

vlayoutdemo

可以作为实现的参考