VLayout使用及原理

VLayout使用及原理

VLayout（VirtualLayout）是阿里巴巴开源的一个基于RecyclerView的布局框架，主要用于解决复杂页面布局和组件复用的问题。其核心原理主要包括以下几个方面：

1 核心原理

VLayout的核心原理可以简单概括为三个部分：VirtualLayoutManager、LayoutHelper和DelegateAdapter。

1.1 VirtualLayoutManager

VirtualLayoutManager是VLayout的大管家，它继承自RecyclerView.LayoutManager，负责管理整个RecyclerView的布局逻辑。它的主要工作是：

• 管理多个LayoutHelper，告诉它们各自负责哪些布局任务。

• 在合适的时候调用LayoutHelper，让它们去完成具体的布局工作。

• 确保布局过程高效，比如通过复用View来减少内存消耗。

1.2 LayoutHelper

LayoutHelper是具体的布局实现者，它告诉VirtualLayoutManager怎么把RecyclerView里的子项（比如列表项）排列好。比如：

• 如果是线性布局，LinearLayoutHelper会把子项排成一列。

• 如果是网格布局，GridLayoutHelper会把子项排成网格。

• 如果是瀑布流布局，StaggeredGridLayoutHelper会把子项错开排列。

每个LayoutHelper都有自己的“地盘”，也就是它负责的子项范围。VirtualLayoutManager会根据这些范围，把任务分配给对应的LayoutHelper。

1.3 DelegateAdapter

DelegateAdapter是数据的管理者，它负责把数据分发给不同的子适配器（DelegateAdapter）。每个子适配器对应一个LayoutHelper，负责处理一部分数据。比如：

• 一个适配器可能负责线性布局的数据。

• 另一个适配器可能负责网格布局的数据。

DelegateAdapter把多个这样的适配器组合起来，统一管理，让RecyclerView看起来像是一个整体。

2 如何使用

2.1 设置VirtualLayoutManager

首先，需要在项目中引入VLayout的依赖：

implementation ('com.alibaba.android:vlayout:1.0.4@aar')

然后，在Activity中初始化RecyclerView和VirtualLayoutManager：

final RecyclerView recyclerView = findViewById(R.id.recycler_view);
final VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);

2.2 创建子适配器

VLayout提供了两种方式来实现布局：DelegateAdapter和VirtualLayoutAdapter。以下是使用DelegateAdapter的示例。

继承DelegateAdapter.Adapter，并重写onCreateLayoutHelper()方法来指定布局类型：

public class LinearAdapter extends DelegateAdapter.Adapter<LinearAdapter.ViewHolder> {
    private List<String> data;

    public LinearAdapter(List<String> data) {
        this.data = data;
    }

    @Override
    public LayoutHelper onCreateLayoutHelper() {
        // 使用线性布局
        return new LinearLayoutHelper();
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.textView.setText(data.get(position));
    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView;

        public ViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.text);
        }
    }
}

2.3 设置Adapter

将子Adapter添加到DelegateAdapter中，并设置到RecyclerView：

DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager, true);
List<DelegateAdapter.Adapter> adapters = new ArrayList<>();

// 添加线性布局Adapter
adapters.add(new LinearAdapter(Arrays.asList("Item 1", "Item 2", "Item 3")));

// 添加网格布局Adapter
adapters.add(new GridAdapter(Arrays.asList("Grid Item 1", "Grid Item 2", "Grid Item 3")));

delegateAdapter.setAdapters(adapters);
recyclerView.setAdapter(delegateAdapter);

3 自定义LayoutHelper

public class SimpleLayoutHelper extends BaseLayoutHelper {

    @Override
    public void layoutViews(RecyclerView.Recycler recycler, RecyclerView.State state,
                            VirtualLayoutManager.LayoutStateWrapper layoutState,
                            LayoutChunkResult result, LayoutManagerHelper helper) {
    // 检查是否还有更多子项需要布局
    while (layoutState.hasMore()) {
        // 尝试获取下一个子项
        View view = nextView(recycler, layoutState, helper, result);
        if (view == null) {
            break; // 如果没有子项，退出循环
        }

        // 测量子项并计算布局位置
        measureAndLayoutChild(view, helper, layoutState);

        // 更新布局状态（例如消耗的空间）
        result.mConsumed += calculateConsumedSpace(view, helper);

        // 检查是否超出可用空间
        if (result.mConsumed >= layoutState.getAvailableSpace()) {
            break; // 如果超出可用空间，退出循环
        }
    }

    @Override
    public int getItemCount() {
        // 获取适配器的子项总数
        return getAdapter().getItemCount();
    }

    @Override
    public boolean isAutoLayout() {
        // 返回 false，表示需要手动布局
        return false;
    }
}