Android UI 阿里VLayout使用

Android UI 阿里VLayout使用

开源地址(2017.03开源)：https://github.com/alibaba/vlayout/

VirtualLayout是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用

可以很方便的利用VLayout来实现 淘宝首页 类似的复杂布局

首先我们先学会使用VLayout

1. 首先导入

 // 阿里vLayout
    implementation 'com.alibaba.android:vlayout:1.0.3'

2. 先贴全部代码，大家有个直观了解

public class VLayoutAct extends Activity {

    private RecyclerView mRecyclerView;
	// 大量展示在RecycleView中的图片列表(假设RecycleView顶部展示广告Banner，这里只列举了几个Item对应加载的图片)
    int[] ITEM_URL = {R.mipmap.item1, R.mipmap.item2, R.mipmap.item3, R.mipmap.item4, R.mipmap.item5};
    
    @Override
    protected void onCreate( Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.v_layout_act);
        initView();
    }
    
    private void initView() {
        mRecyclerView = findViewById(R.id.recycler);

        VirtualLayoutManager virtualLayoutManager = new VirtualLayoutManager(this);
        mRecyclerView.setLayoutManager(virtualLayoutManager);

        RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
        mRecyclerView.setRecycledViewPool(viewPool);
        viewPool.setMaxRecycledViews(0, 10);

        DelegateAdapter delegateAdapter = new DelegateAdapter(virtualLayoutManager, true);
        // -------------------------------------------------------------------------
		// 
        BaseDelegateAdapter bannerAdapter = new BaseDelegateAdapter(this
                , new LinearLayoutHelper(), R.layout.vlayout_banner, 1){
            @Override
            public void onBindViewHolder(BaseViewHolder holder, int i) {
                ArrayList<String> arrayList = new ArrayList<>();
                arrayList.add("http://dn.dengpaoedu.com/examples/glide/1.jpg");
                arrayList.add("http://dn.dengpaoedu.com/examples/glide/2.jpg");
                arrayList.add("http://dn.dengpaoedu.com/examples/glide/3.jpg");
                arrayList.add("http://dn.dengpaoedu.com/examples/glide/4.jpg");
                arrayList.add("http://dn.dengpaoedu.com/examples/glide/5.jpg");
                arrayList.add("http://dn.dengpaoedu.com/examples/glide/6.jpg");
                // 绑定数据
                Banner mBanner = holder.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(3000);
                //设置指示器位置（当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();
                    }
                });
                super.onBindViewHolder(holder, i);
            }
        };
        delegateAdapter.addAdapter(bannerAdapter);

        // -------------------------------------------------------------------------
		// 实际项目中，应该是大量请求返回图片列表
        for (int i = 0; i < ITEM_URL.length; i++) {
            final int finalI = i;
            BaseDelegateAdapter titleAdapter = new BaseDelegateAdapter(this,
                    new LinearLayoutHelper(), R.layout.vlayout_title, 1) {
                @Override
                public void onBindViewHolder(BaseViewHolder holder, int position) {
                    super.onBindViewHolder(holder, position);
                    holder.setImageResource(R.id.iv, ITEM_URL[finalI]);
                }
            };
            delegateAdapter.addAdapter(titleAdapter);
        }
        mRecyclerView.setAdapter(delegateAdapter);
    }
}

3. RecycleView 设置LayoutManager

import com.alibaba.android.vlayout.VirtualLayoutManager;
......

mRecyclerView = findViewById(R.id.recycler);
// 主要是通过VirtualLayoutManager来接管RecycleView的Manager，实现多样式布局
VirtualLayoutManager virtualLayoutManager = new VirtualLayoutManager(this);
mRecyclerView.setLayoutManager(virtualLayoutManager);
// 这个是设置RecycleView最多支持几种类型View复用(10种)
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
mRecyclerView.setRecycledViewPool(viewPool);
viewPool.setMaxRecycledViews(0, 10);

4. 单图片item适配器 和 对应单个图片Item布局xml

BaseDelegateAdapter titleAdapter = new BaseDelegateAdapter(this,
	 new LinearLayoutHelper(), R.layout.vlayout_title, 1) {
	 	@Override
		public void onBindViewHolder(BaseViewHolder holder, int position) {
			super.onBindViewHolder(holder, position);
			holder.setImageResource(R.id.iv, ITEM_URL[finalI]);
		}
};

// 对应单个图片Item布局xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:scaleType="centerCrop" />

</LinearLayout>

5. 最终将不同布局的xml封装成子BaseDelegateAdapter，然后逐次添加到DelegateAdapter

DelegateAdapter delegateAdapter = new DelegateAdapter(virtualLayoutManager, true);
......
delegateAdapter.addAdapter(bannerAdapter);
delegateAdapter.addAdapter(titleAdapter);

6. RecycleView顶部Banner用的是第三方库

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="120dp" />
</LinearLayout>

// build.gradle中引入
// banner 轮播图
implementation 'com.youth.banner:banner:1.4.9'

7. 其实Activity对应根布局，就是一个原生的RecycleView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

仔细阅读完以上7步，基本VLayout使用算是清楚了