VLayout使用-手写淘宝主界面

VLayout描述

VirtualLayout是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题。
vlayout全称VirtualLayout,它是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题。
它通过定制化的LayoutManager,接管整个RecyclerView的布局逻辑;LayoutManager管理了一系列LayoutHelper,
LayoutHelper负责具体布局逻辑实现的地方;每一个LayoutHelper负责页面某一个范围内的组件布局;不同的LayoutHelper可以做不同的布局逻辑,
因此可以在一个RecyclerView页面里提供异构的布局结构,这就能比系统自带的LinearLayoutManager、GridLayoutManager等提供更加丰富的能力。同时支持扩展LayoutHelper来提供更多的布局能力。

场景使用模式(电商项目用的最多)

原生开发 短处就是复杂界面的开发非常麻烦 要解决事件分发以及滚动控件的嵌套问题
默认通用布局实现,解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等
1:LinearLayoutHelper: 线性布局
2:GridLayoutHelper: Grid布局, 支持横向的colspan
3:FixLayoutHelper: 固定布局,始终在屏幕固定位置显示
4:ScrollFixLayoutHelper: 固定布局,但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等
5:FloatLayoutHelper: 浮动布局,可以固定显示在屏幕上,但用户可以拖拽其位置
6:ColumnLayoutHelper: 栏格布局,都布局在一排,可以配置不同列之间的宽度比值
7:SingleLayoutHelper: 通栏布局,只会显示一个组件View
8:OnePlusNLayoutHelper: 一拖N布局,可以配置1-5个子元素
9:StickyLayoutHelper: stikcy布局, 可以配置吸顶或者吸底
10:StaggeredGridLayoutHelper: 瀑布流布局,可配置间隔高度/宽度

上述默认实现里可以大致分为两类:一是非fix类型布局,像线性、Grid、栏格等,它们的特点是布局在整个页面流里,随页面滚动而滚动;另一类就是fix类型的布局,它们的子节点往往不随页面滚动而滚动。
所有除布局外的组件复用,VirtualLayout将用来管理大的模块布局组合,扩展了RecyclerView,使得同一RecyclerView内的组件可以复用,减少View的创建和销毁过程。

使用VLayout

1.添加依赖包
implementation 'com.alibaba.android:vlayout:1.0.3@aar'
implementation 'com.android.support:recyclerview-v7:28.0.0-beta01'

排版并不是把所有元素随意丢到界面显示,它需要符合人类的审美观,这个无论是Android还是Web等都是通用的
排版是一种界面的整齐划分,符合用户的审美需求,常用排版有以下几种:
有时候我们判断某个APP到底是用H5做的还是用原生做的,只需要打开开发者模式里面的显示布局边界,就能看到里面的嵌套从而判断是不是原生。


image.png
image.png
常用的排版

LinearLayoutHelper——线性布局
GridLayoutHelper Grid布局
ScrollFixLayoutHelper——固定布局
ColumnLayoutHelper——栏格布局
FloatLayoutHelper——浮动布局
SingleLayoutHelper—— 一个元素布局
OnePlusNLayoutHelper——一拖N布局
StickyLayoutHelper——stikcy布局
StaggeredGridLayoutHelper——瀑布流布局

案例一(用法)
public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    //数据源
    private ArrayList> listItem;
    //适配器
    private MyAdapter linearLayoutAdapter,stickyLayoutAdapter,gridLayoutAdapter,scrollFixLayoutAdapter,columnLayoutAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        recyclerView = findViewById(R.id.my_recycler_view);
        //以前的做法
        //recyclerView.setLayoutManager(new LinearLayoutManager());
        //VLayout对LayoutManager的封装
        VirtualLayoutManager virtualLayoutManager = new VirtualLayoutManager(this);
        recyclerView.setLayoutManager(virtualLayoutManager);
        //给recyclerView设置回收池
        RecyclerView.RecycledViewPool recycledViewPool = new RecyclerView.RecycledViewPool();
        recyclerView.setRecycledViewPool(recycledViewPool);
        //设置recyclerView的item类型 以及最大item类型数量
        recycledViewPool.setMaxRecycledViews(0,10);


        // 线性布局----------------------------------->
        LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper();
        //设置数据的总行数
        linearLayoutHelper.setItemCount(4);
        //其实这个就是设置itemView的padding值 它不等同于RecyclerView的padding值
        linearLayoutHelper.setPadding(20,20,20,20);
        linearLayoutHelper.setMargin(20,20,20,20);
        //设置宽高比  就是itemView的宽度和高度的比例 比如宽度是6   那么高度就是1
        linearLayoutHelper.setAspectRatio(6);
        //设置分割线高度
        linearLayoutHelper.setDividerHeight(10);
        //设置下边距
        linearLayoutHelper.setMarginBottom(10);
        linearLayoutAdapter = new MyAdapter(this,linearLayoutHelper,20,listItem);


        //组合 --->顺序
        //创建一个适配器的集合
        List adapters = new LinkedList<>();
        adapters.add(linearLayoutAdapter);
        DelegateAdapter delegateAdapter = new DelegateAdapter(virtualLayoutManager);
        delegateAdapter.setAdapters(adapters);


        // 定格布局----------------------------------->
        StickyLayoutHelper stickyLayoutHelper = new StickyLayoutHelper();
        //设置数据的总行数
        stickyLayoutHelper.setItemCount(1);
        //设置宽高比  就是itemView的宽度和高度的比例 比如宽度是6   那么高度就是1
        stickyLayoutHelper.setAspectRatio(3);
        //定格布局的控件是在顶部还是在底部  true为头部  false为底部
        stickyLayoutHelper.setStickyStart(true);
        //设置偏移值
        //stickyLayoutHelper.setOffset(100);
        stickyLayoutAdapter = new MyAdapter(this,stickyLayoutHelper,1,listItem){
            @Override
            public void onBindViewHolder(@NonNull MainViewHolder viewHolder, int position) {
                super.onBindViewHolder(viewHolder, position);
                if(position == 0){
                    viewHolder.Text.setText("Stick");
                }
            }
        };
        delegateAdapter.addAdapter(stickyLayoutAdapter);
        delegateAdapter.addAdapter(linearLayoutAdapter);



        //--------------网格布局-------------------->
        GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(4);
        gridLayoutHelper.setAspectRatio(6);
        //设置权重 就是一行中多个控件的比例  注意 加起来要等于100
        gridLayoutHelper.setWeights(new float[]{30,20,30,20});
        //设置垂直边距
        gridLayoutHelper.setVGap(20);
        //设置水平边距
        gridLayoutHelper.setHGap(20);
        //设置是否自动填充空白区域
        gridLayoutHelper.setAutoExpand(true);
        gridLayoutAdapter = new MyAdapter(this,gridLayoutHelper,20,listItem){
            @Override
            public void onBindViewHolder(@NonNull MainViewHolder holder, int position) {
                super.onBindViewHolder(holder, position);
                //为了展示效果 将布局的不同位置的item进行背景颜色设置
                if(position<2){
                    holder.itemView.setBackgroundColor(0x66cc0000 + (position-6)*128);
                }else if(position%2 == 0){
                    holder.itemView.setBackgroundColor(0xaa22ff22);
                }else{
                    holder.itemView.setBackgroundColor(0xccff22ff);
                }
                if(position == 0){
                    holder.Text.setText("Grid");
                }
            }
        };
        delegateAdapter.addAdapter(gridLayoutAdapter);



        //-----------------固定布局------------------>
        //第一个参数 是固定的位置  后面两个参数是固定之后的偏移量
        ScrollFixLayoutHelper scrollFixLayoutHelper = new ScrollFixLayoutHelper(ScrollFixLayoutHelper.BOTTOM_RIGHT,10,10);
        // 参数说明:
        // 公共属性
        // 设置布局里Item个数
        scrollFixLayoutHelper.setItemCount(1);
        // 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        scrollFixLayoutHelper.setPadding(20, 20, 20, 20);
        // 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
        scrollFixLayoutHelper.setMargin(20, 20, 20, 20);
        scrollFixLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
        scrollFixLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比
        //重要参数  显示类型   一直显示SHOW_ALWAYS  滑动到位置开始位置显示SHOW_ON_ENTER  滑动到结束位置显示SHOW_ON_LEAVE 后面啷个参数一开始是不显示的
        scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ALWAYS);
        scrollFixLayoutAdapter = new MyAdapter(this, scrollFixLayoutHelper,1, listItem) {
            // 设置需要展示的数据总数,此处设置是1
            // 为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为scrollFix
            @Override
            public void onBindViewHolder(MainViewHolder holder, int position) {
                super.onBindViewHolder(holder, position);
                if (position == 0) {
                    holder.Text.setText("scrollFix");
                }
            }
        };
        delegateAdapter.addAdapter(scrollFixLayoutAdapter);


        //栅格栏布局------------------------------->
        ColumnLayoutHelper columnLayoutHelper = new ColumnLayoutHelper();
        // 公共属性
        // 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        columnLayoutHelper.setPadding(20, 20, 20, 20);
        // 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
        columnLayoutHelper.setMargin(20, 20, 20, 20);
        // 设置背景颜色
        columnLayoutHelper.setBgColor(Color.GRAY);
        // 设置设置布局内每行布局的宽与高的比
        columnLayoutHelper.setAspectRatio(6);
        // columnLayoutHelper特有属性  设置该行每个Item占该行总宽度的比例
        columnLayoutHelper.setWeights(new float[]{30, 30,10, 30});
        columnLayoutAdapter = new MyAdapter(this, columnLayoutHelper,4, listItem) {
            // 设置需要展示的数据总数,此处设置是3
            // 为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为Column
            @Override
            public void onBindViewHolder(MainViewHolder holder, int position) {
                super.onBindViewHolder(holder, position);
                if (position == 0) {
                    holder.Text.setText("Column");
                    holder.itemView.setBackgroundColor(Color.RED);
                }else if(position == 1){
                    holder.itemView.setBackgroundColor(Color.YELLOW);
                }else{
                    holder.itemView.setBackgroundColor(Color.BLUE);
                }
            }
        };
        delegateAdapter.addAdapter(columnLayoutAdapter);


        //一盒元素布局 一个元素布局------------------------------>
        SingleLayoutHelper singleLayoutHelper = new SingleLayoutHelper();
        // 公共属性
        // 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        singleLayoutHelper.setPadding(20, 20, 20, 20);
        // 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
        singleLayoutHelper.setMargin(20, 20, 20, 20);
        // 设置背景颜色
        singleLayoutHelper.setBgColor(Color.GRAY);
        // 设置设置布局内每行布局的宽与高的比
        singleLayoutHelper.setAspectRatio(6);
        MyAdapter singleLayoutAdapter = new MyAdapter(this, singleLayoutHelper,1, listItem) {
            // 设置需要展示的数据总数,此处设置是1
            // 为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为Single
            @Override
            public void onBindViewHolder(MainViewHolder holder, int position) {
                super.onBindViewHolder(holder, position);
                if (position == 0) {
                    holder.Text.setText("Single");
                }
            }
        };
        delegateAdapter.addAdapter(singleLayoutAdapter);


        //1拖N布局------------------------------->
        OnePlusNLayoutHelper onePlusNLayoutHelper = new OnePlusNLayoutHelper();
        //设置行比重
        onePlusNLayoutHelper.setColWeights(new float[]{40,60,30,30});
        //设置高比重
        onePlusNLayoutHelper.setRowWeight(60);
        // 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
        onePlusNLayoutHelper.setPadding(20, 20, 20, 20);
        // 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
        onePlusNLayoutHelper.setMargin(20, 20, 20, 20);
        // 设置背景颜色
        onePlusNLayoutHelper.setBgColor(Color.GRAY);
        // 设置设置布局内每行布局的宽与高的比
        onePlusNLayoutHelper.setAspectRatio(3);
        MyAdapter onePlusNLayoutAdapter = new MyAdapter(this, onePlusNLayoutHelper,4, listItem) {
            // 设置需要展示的数据总数,此处设置是5,即1拖4
            // 为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为onePlus
            @Override
            public void onBindViewHolder(MainViewHolder holder, int position) {
                super.onBindViewHolder(holder, position);
                if (position == 0) {
                    holder.Text.setText("onePlus"+position);
                    holder.itemView.setBackgroundColor(Color.RED);
                }else if (position == 1) {
                    holder.Text.setText("onePlus"+position);
                    holder.itemView.setBackgroundColor(Color.BLUE);
                }else if (position == 2) {
                    holder.Text.setText("onePlus"+position);
                    holder.itemView.setBackgroundColor(Color.BLACK);
                }else if (position == 3) {
                    holder.Text.setText("onePlus"+position);
                    holder.itemView.setBackgroundColor(Color.GREEN);
                }
            }
        };

        delegateAdapter.addAdapter(onePlusNLayoutAdapter);



        //瀑布流布局------------------------------------------------------->
        StaggeredGridLayoutHelper staggeredGridLayoutHelper = new StaggeredGridLayoutHelper();
        // 公有属性
        staggeredGridLayoutHelper.setItemCount(20);// 设置布局里Item个数
        staggeredGridLayoutHelper.setPadding(20, 20, 20, 20);
        staggeredGridLayoutHelper.setMargin(20, 20, 20, 20);
        staggeredGridLayoutHelper.setBgColor(Color.GRAY);
        staggeredGridLayoutHelper.setAspectRatio(3);
        // 特有属性
        // 设置控制瀑布流每行的Item数
        staggeredGridLayoutHelper.setLane(3);
        // 设置子元素之间的水平间距
        staggeredGridLayoutHelper.setHGap(20);
        // 设置子元素之间的垂直间距
        staggeredGridLayoutHelper.setVGap(15);
        MyAdapter staggeredGridLayoutAdapter = new MyAdapter(this, staggeredGridLayoutHelper,20, listItem) {
            // 设置需要展示的数据总数,此处设置是20
            // 通过重写onBindViewHolder()设置更加丰富的布局
            @Override
            public void onBindViewHolder(MainViewHolder holder, int position) {
                super.onBindViewHolder(holder, position);
                ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,150 +position % 5 * 20);
                holder.itemView.setLayoutParams(layoutParams);
                // 为了展示效果,设置不同位置的背景色
                if (position > 10) {
                    holder.itemView.setBackgroundColor(0x66cc0000 );
                } else if (position % 2 == 0) {
                    holder.itemView.setBackgroundColor(0xaa22ff22);
                } else {
                    holder.itemView.setBackgroundColor(0xccff22ff);
                }
                // 为了展示效果,通过将布局的第一个数据设置为staggeredGrid
                if (position == 0) {
                    holder.Text.setText("staggeredGrid");
                }
            }
        };

        delegateAdapter.addAdapter(staggeredGridLayoutAdapter);

        recyclerView.setAdapter(delegateAdapter);

    }


    /**
     * 初始化数据
     */
    private void initData() {
        /**
         * 步骤1设置需要存放的数据
         * */
        listItem = new ArrayList>();
        for (int i = 0; i < 100; i++) {
            HashMap map = new HashMap();
            map.put("ItemTitle", "第" + i + "行");
            map.put("ItemImage", R.mipmap.ic_launcher);
            listItem.add(map);

        }
    }
}
public class MyAdapter extends DelegateAdapter.Adapter {
    // 数据源
    private ArrayList> listItem;
    //上下文
    private Context context;
    //数据总数量
    private int count = 0;
    //layoutHelper对象
    LayoutHelper layoutHelper;


    public MyAdapter(Context context, LayoutHelper layoutHelper,int count,
                     ArrayList> listItem){
        this.context = context;
        this.layoutHelper = layoutHelper;
        this.count = count;
        this.listItem = listItem;
    }

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

    @NonNull
    @Override
    public MainViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int position) {
        return new MainViewHolder(LayoutInflater.from(context).inflate(R.layout.item,viewGroup,false));

    }

    @Override
    public void onBindViewHolder(@NonNull MainViewHolder viewHolder, int position) {
        viewHolder.Text.setText((String) listItem.get(position).get("ItemTitle"));
        viewHolder.image.setImageResource((Integer) listItem.get(position).get("ItemImage"));
    }

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


    class MainViewHolder extends RecyclerView.ViewHolder {

        public TextView Text;
        public ImageView image;

        public MainViewHolder(View root) {
            super(root);
            // 绑定视图
            Text = (TextView) root.findViewById(R.id.Item);
            image = (ImageView) root.findViewById(R.id.Image);
        }

        public TextView getText() {
            return Text;
        }

    }
}
案例二(仿淘宝主页面)
public class TaoBaoActivity extends AppCompatActivity {
    //不同item必须不同的viewtype
    int BANNER_VIEW_TYPE = 1;
    int MENU_VIEW_TYPE = 2;
    int NEWS_VIEW_TYPE = 3;
    int TITLE_VIEW_TYPE = 4;
    int GRID_VIEW_TYPE = 5;
    //广告位
    int[] ITEM_URL = {R.mipmap.item1, R.mipmap.item2, R.mipmap.item3, R.mipmap.item4, R.mipmap.item5};
    //应用位
    String[] ITEM_NAMES = {"天猫", "聚划算", "天猫国际", "外卖", "天猫超市", "充值中心", "飞猪旅行", "领金币", "拍卖", "分类"};
    int[] IMG_URLS = {R.mipmap.ic_tian_mao, R.mipmap.ic_ju_hua_suan, R.mipmap.ic_tian_mao_guoji, R.mipmap.ic_waimai,
            R.mipmap.ic_chaoshi, R.mipmap.ic_voucher_center, R.mipmap.ic_travel, R.mipmap.ic_tao_gold, R.mipmap.ic_auction,
            R.mipmap.ic_classify};
    //高颜值商品位
    int[] GRID_URL = {R.mipmap.flashsale1, R.mipmap.flashsale2, R.mipmap.flashsale3, R.mipmap.flashsale4};
    private RecyclerView mRecyclerView;
    //存放各个模块的适配器
    private List mAdapters;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_taobao);
        initView();
    }

    private void initView() {
        //初始化适配器集合
        mAdapters = new LinkedList<>();
        //初始化适配器
        mRecyclerView = findViewById(R.id.recycler);

        //初始化VirtualLayoutManager
        VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
        //设置mRecyclerView的setLayoutManager
        mRecyclerView.setLayoutManager(layoutManager);
        //设置回收复用池大小,(如果一屏内相同类型的 View 个数比较多,需要设置一个合适的大小,防止来回滚动时重新创建 View):
        RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
        mRecyclerView.setRecycledViewPool(viewPool);
        viewPool.setMaxRecycledViews(0, 10);
        //创建一个VLayout中的DelegateAdapter适配器 因为这个适配器可以添加适配器集合
        DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, true);
        mRecyclerView.setAdapter(delegateAdapter);


        //设置banner的适配器
        BaseDelegateAdapter baseDelegateAdapter = new BaseDelegateAdapter(this,new LinearLayoutHelper(),
                R.layout.vlayout_banner,1,BANNER_VIEW_TYPE){
            //重写onBindViewHolder
            @Override
            public void onBindViewHolder(@NonNull BaseViewHolder baseViewHolder, int i) {
                super.onBindViewHolder(baseViewHolder, i);
                ArrayList arrayList = new ArrayList<>();
                arrayList.add("http://gank.io/images/f4f6d68bf30147e1bdd4ddbc6ad7c2a2");
                arrayList.add("http://gank.io/images/dc75cbde1d98448183e2f9514b4d1320");
                // 绑定数据
                Banner mBanner = baseViewHolder.getView(R.id.banner);
                //设置banner样式
                mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
                //设置图片加载器
                mBanner.setImageLoader(new GlideImageLoader());
                //设置图片集合
                mBanner.setImages(arrayList);
                //设置banner动画效果
                mBanner.setBannerAnimation(Transformer.DepthPage);
                //设置标题集合(当banner样式有显示title时)
                //        mBanner.setBannerTitles(titles);
                //设置自动轮播,默认为true
                mBanner.isAutoPlay(true);
                //设置轮播时间
                mBanner.setDelayTime(5000);
                //设置指示器位置(当banner模式中有指示器时)
                mBanner.setIndicatorGravity(BannerConfig.CENTER);
                //banner设置方法全部调用完毕时最后调用
                mBanner.start();

                mBanner.setOnBannerListener(new OnBannerListener() {
                    @Override
                    public void OnBannerClick(int position) {
                        Toast.makeText(getApplicationContext(), "banner点击了" + position, Toast.LENGTH_SHORT).show();
                    }
                });

            }
        };
        mAdapters.add(baseDelegateAdapter);


        //menu
        // 在构造函数设置每行的网格个数
        GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(5);
        gridLayoutHelper.setPadding(0, 16, 0, 16);
        gridLayoutHelper.setVGap(16);// 控制子元素之间的垂直间距
        gridLayoutHelper.setHGap(0);// 控制子元素之间的水平间距
        gridLayoutHelper.setBgColor(Color.WHITE);
        BaseDelegateAdapter menuAdapter = new BaseDelegateAdapter(this, gridLayoutHelper, R.layout.vlayout_menu
                , 10, MENU_VIEW_TYPE) {
            @Override
            public void onBindViewHolder(BaseViewHolder holder, @SuppressLint("RecyclerView") final int position) {
                super.onBindViewHolder(holder, position);
                holder.setText(R.id.tv_menu_title_home, ITEM_NAMES[position] + "");
                holder.setImageResource(R.id.iv_menu_home, IMG_URLS[position]);
                holder.getView(R.id.ll_menu_home).setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(getApplicationContext(), ITEM_NAMES[position], Toast.LENGTH_SHORT).show();
                    }
                });
            }
        };
        mAdapters.add(menuAdapter);

        //news----->
        BaseDelegateAdapter newsAdapter = new BaseDelegateAdapter(this, new LinearLayoutHelper()
                , R.layout.vlayout_news, 1, NEWS_VIEW_TYPE) {
            @Override
            public void onBindViewHolder(BaseViewHolder holder, int position) {
                super.onBindViewHolder(holder, position);
                MarqueeView marqueeView1 = holder.getView(R.id.marqueeView1);
                MarqueeView marqueeView2 = holder.getView(R.id.marqueeView2);

                List info1 = new ArrayList<>();
                info1.add("天猫超市最近发大活动啦,快来抢");
                info1.add("没有最便宜,只有更便宜!");

                List info2 = new ArrayList<>();
                info2.add("这个是用来搞笑的,不要在意这写小细节!");
                info2.add("啦啦啦啦,我就是来搞笑的!");

                marqueeView1.startWithList(info1);
                marqueeView2.startWithList(info2);
                // 在代码里设置自己的动画
                marqueeView1.startWithList(info1, R.anim.anim_bottom_in, R.anim.anim_top_out);
                marqueeView2.startWithList(info2, R.anim.anim_bottom_in, R.anim.anim_top_out);

                marqueeView1.setOnItemClickListener(new MarqueeView.OnItemClickListener() {
                    @Override
                    public void onItemClick(int position, TextView textView) {
                        Toast.makeText(getApplicationContext(), textView.getText().toString(), Toast.LENGTH_SHORT).show();
                    }
                });
                marqueeView2.setOnItemClickListener(new MarqueeView.OnItemClickListener() {
                    @Override
                    public void onItemClick(int position, TextView textView) {
                        Toast.makeText(getApplicationContext(), textView.getText().toString(), Toast.LENGTH_SHORT).show();
                    }
                });
            }
        };
        mAdapters.add(newsAdapter);

        //这里我就循环item 实际项目中不同的ITEM 继续往下走就行
        for (int i = 0; i < ITEM_URL.length; i++) {
            //item1 title
            final int finalI = i;
            BaseDelegateAdapter titleAdapter = new BaseDelegateAdapter(this, new LinearLayoutHelper(), R.layout.vlayout_title, 1, TITLE_VIEW_TYPE) {
                @Override
                public void onBindViewHolder(BaseViewHolder holder, int position) {
                    super.onBindViewHolder(holder, position);
                    holder.setImageResource(R.id.iv, ITEM_URL[finalI]);
                }
            };
            mAdapters.add(titleAdapter);
            //item1 gird
            GridLayoutHelper gridLayoutHelper1 = new GridLayoutHelper(2);
            gridLayoutHelper.setMargin(0, 0, 0, 0);
            gridLayoutHelper.setPadding(0, 0, 0, 0);
            gridLayoutHelper.setVGap(0);// 控制子元素之间的垂直间距
            gridLayoutHelper.setHGap(0);// 控制子元素之间的水平间距
            gridLayoutHelper.setBgColor(Color.WHITE);
            gridLayoutHelper.setAutoExpand(true);//是否自动填充空白区域
            BaseDelegateAdapter girdAdapter = new BaseDelegateAdapter(this, gridLayoutHelper1, R.layout.vlayout_grid
                    , 4, GRID_VIEW_TYPE) {
                @Override
                public void onBindViewHolder(BaseViewHolder holder, @SuppressLint("RecyclerView") final int position) {
                    super.onBindViewHolder(holder, position);
                    int item = GRID_URL[position];
                    ImageView iv = holder.getView(R.id.iv);
                    Glide.with(getApplicationContext()).load(item).into(iv);

                    iv.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Toast.makeText(getApplicationContext(), "item" + position, Toast.LENGTH_SHORT).show();
                        }
                    });
                }
            };
            mAdapters.add(girdAdapter);
        }


        delegateAdapter.addAdapters(mAdapters);
    }
}
public class BaseDelegateAdapter extends DelegateAdapter.Adapter {
    //helper类
    private LayoutHelper mLayoutHelper;
    //总数量
    private int mCount = -1;
    //xmllayout的id
    private int mLayoutId = -1;
    //上下文
    private Context mContext;
    //itemView 类型
    private int mViewTypeItem = -1;

    public BaseDelegateAdapter(Context context, LayoutHelper layoutHelper, int layoutId, int count, int viewTypeItem) {
        this.mContext = context;
        this.mCount = count;
        this.mLayoutHelper = layoutHelper;
        this.mLayoutId = layoutId;
        this.mViewTypeItem = viewTypeItem;
    }
    @Override
    public LayoutHelper onCreateLayoutHelper() {
        return mLayoutHelper;
    }

    @NonNull
    @Override
    public BaseViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
        if (viewType == mViewTypeItem) {
            return new BaseViewHolder(LayoutInflater.from(mContext).inflate(mLayoutId, viewGroup, false));
        }
        return null;
    }

    @Override
    public void onBindViewHolder(@NonNull BaseViewHolder baseViewHolder, int i) {

    }

    @Override
    public int getItemViewType(int position) {
        return  mViewTypeItem;
    }

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


}

demo下载地址https://github.com/283006603/VLayout

你可能感兴趣的:(VLayout使用-手写淘宝主界面)