2024年安卓最新_V - Layout:淘宝、天猫都在用的Android UI框架 完全解析(2),2024年最新安卓工程面试问题

总结

Android架构学习进阶是一条漫长而艰苦的道路,不能靠一时激情,更不是熬几天几夜就能学好的,必须养成平时努力学习的习惯。所以:贵在坚持!

上面分享的字节跳动公司2021年的面试真题解析大全,笔者还把一线互联网企业主流面试技术要点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节。

【Android高级架构视频学习资源】

Android部分精讲视频领取学习后更加是如虎添翼!进军BATJ大厂等(备战)!现在都说互联网寒冬,其实无非就是你上错了车,且穿的少(技能),要是你上对车,自身技术能力够强,公司换掉的代价大,怎么可能会被裁掉,都是淘汰末端的业务Curd而已!现如今市场上初级程序员泛滥,这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期,想要年后突破自己涨薪的,进阶Android中高级、架构师对你更是如鱼得水,赶快领取吧!

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

前言

  • V- Layout 是阿里出品的基础 UI 框架,用于快速实现页面的复杂布局,在手机天猫 Android版 内广泛使用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 让人激动的是,在上个月V- Layout终于在Github上开源!

Github - alibaba - vlayout

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 在五一假期我对V- Layout进行了详细分析,我将献上一份 V- Layout的使用攻略 & 源码分析,希望你们会喜欢。

阅读本文前请先看: Android Tangram模型:连淘宝、天猫都在用的UI框架模型你一定要懂


目录

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


1. 为什么要使用 V - Layout

在讲解 V - Layout 前,我们先来搞懂一个问题:为什么要使用 V - Layout

1.1 背景

  • AndroidUI 性能消耗主要来自于两个方面:
  1. 布局层次嵌套导致多重 measure/layout
  2. View控件的创建和销毁
  • 为了解决上述问题,现有的解决方式是:
  1. 少用嵌套布局
  2. 使用 ListView/GirdView/RecyclerView等基础空间来处理View的回收与复用。

但是,很多时候我们需要在一个长列表下做多种类型的布局来分配各种元素,,特别是电商平台首页等页面,布局元素结构更加复杂多样。如下图:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

此时的解决方案有所变化:不采用子View的复用,只采用一个主要的复用容器(如ListViewRecyclerView+LinearLayoutManager),然后在其中使用嵌套方式直接用各个组件进行拼接,减少了复用的能力

1.2 问题

这种做法还是会损失Android应用的性能。

1.3 解决方案

  • 通过自定义 LayoutManager 管理所有的布局类型
  • 即阿里出品的基础 UI 框架项目 VirtualLayout就是采用该方式来解决上述问题

2. 简介

  • 定义:VirtualLayout是阿里出品的基础 UI 框架项目
  • 作用:快速实现复杂的布局格式的混排

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


3. 应用场景

  • 复杂的布局格式混排,如:浮动布局、栏格布局、通栏布局、一拖N布局、瀑布流布局,还可以组合使用这些布局
  • 具体场景是:如电商平台首页、活动页等等

V - Layout 目前已在手机天猫 & 淘宝 Android 版内广泛使用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


4. 原理解析

V - Layout的本质原理是:通过自定义一个VirtualLayoutManager(继承自 LayoutManager),用于管理一系列LayoutHelper,将具体的布局能力交给LayoutHelper来完成,从而 快速实现组合布局 的需求。

  1. 每个 LayoutHelper负责 页面某一个范围内的布局

  2. V - Layout默认实现了10种默认布局:(对应同名的LayoutHelper)

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.1 源码类说明

V - Layout的源码类图如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.RecyclerView
  • 定义:页面布局的主体
  • 特别注意:在V - layout框架里绑定 VirtualLayoutAdapter(继承Adapter) & VirtualLayoutManager(继承LayoutManager
2. VirtualLayoutAdapter
  • 定义:数据适配器。

继承自系统的Adaper

  • 作用:创建组件 & 绑定数据到组件
  • 额外:定义了两个接口:
  1. getLayoutHelper():用于返回某个位置组件对应的一个LayoutHelper
  2. setLayoutHelpers():调用此方法设置整个页面所需要的一系列LayoutHelper

这两方法的具体实现委托给 VirtualLayoutManager完成

3. VirtualLayoutManager
  • 定义:布局管理器

继承自系统的 LinearLayoutManager

  • 作用:
  1. RecyclerView加载组件或者滑动时调用VirtualLayoutManagerlayoutChunk(),返回当前还有哪些空白区域可摆放组件
  2. 管理 LayoutHelper列表
  • 额外:实现了VirtualLayoutAdaptergetLayoutHelper() & setLayoutHelpers()
4. LayoutHelperFinder
  • 定义:LayoutHelper 寻找器
  • 作用:根据页面状态 寻找对应的 LayoutHelper 并返回给 VirtualLayoutManager
  1. VirtualLayoutManager会持有一个LayoutHelperFinder
  2. layoutChunck()被调用时会传入一个位置参数,告诉VirtualLayoutManager当前要布局第几个组件
  3. VirtualLayoutManager通知持有的 LayoutHelperFinder找到传入参数位置对应的 LayoutHelper(每个 LayoutHelper 都会绑定它负责的布局区域的起始位置和结束位置)
5. LayoutHelper
  • 定义:布局协助器
  • 作用:负责具体的布局逻辑
  • 其中定义了一系列接口用于和VirtualLayoutManager通信:
接口作用
isOutOfRange()告诉VirtualLayoutManager它所传递过来位置是否在当前LayoutHelper的布局区域内;
setRange()设置当前LayoutHelper负责的布局区域
doLayout()真正的布局逻辑接口
beforeLayout()在布局前做一些前置工作
afterLayout()在布局完成后做一些后置工作
6. MarginLayoutHelper
  • 定义:继承自 LayoutHelper
  • 作用:扩展LayoutHelper,提供了布局常用的内边距padding、外边距margin的计算功能
7. BaseLayoutHelper
  • 定义:MarginLayoutHelper的第一层具体实现
  • 作用:填充 当前LayoutHelper在屏幕范围内的具体区域 背景色、背景图等逻辑
8. 子LayoutHelper
  • 定义:MarginLayoutHelper的第二层具体实现
  • 作用:负责具体的布局逻辑
  1. 每种子LayoutHelper负责一种布局逻辑
  2. 重点实现了beforeLayout()doLayout()afterLayout()
  3. 特别是doLayout():会获取一组件,并对组件进行尺寸计算、界面布局。
  • V - Layout默认实现了10种默认布局:(对应同名的LayoutHelper)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

下面会进行详细介绍。

  • 特别注意:
  1. 每一种LayoutHelper负责布局一批组件范围内的组件,不同组件范围内的组件之间,如果类型相同,可以在滑动过程中回收复用。因此回收粒度比较细,且可以跨布局类型复用。
  2. 支持扩展外部:即注册新的LayoutHelper,实现特殊的布局方式。下面会详细说明

介绍完类之后,我将详细分析 V - Layout的工作流程。


4.2 工作流程

  • V - Layout的工作流程分为 初始化 & 布局流程。如下图:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 下面我将对初始化 & 布局流程作详细分析。
4.2.1 初始化
  • 在使用 V - layout 快速实现复杂布局前,需要先做一系列的初始化工作。

初始化流程与使用普通的 RecyclerView + LayoutManager 初始化流程基本一致:Vlayout的使用者

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 此处的初始化 实际上 就是 使用者在使用 V - layout 时需要做的初始化工作。
  • 此处主要先讲解下数据列表的获取:本质上,是对页面实体 进行 卡片 & 组件的拆解,形成一个位置列表

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 其他初始化步骤将在下面实例讲解进行详细说明

4.2.2 具体布局流程
  • 当完成初始化工作后,每当用户刚打开页面第一次渲染布局 或 用户滑动页面时,都会进行一次布局流程
  • 布局流程的本质是:自定义 VirtualLayoutManager持续获取页面状态,并通过LayoutHelperFinder找到对应的LayoutHelper从而实现对应的布局逻辑,从而快速实现组合布局 的需求
  • 具体流程如下

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


总结

下面用一张图总结 V - Layout 的原理 & 工作流程

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在讲完原理后,接下来我将如何使用 V - Layout


5. 使用步骤

  • V - Layout的使用其实就是上面说的初始化工作
  • 使用步骤如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

下面我将对每个步骤进行详细说明。

步骤1:创建RecyclerView & VirtualLayoutManager 对象并进行绑定

recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
// 创建RecyclerView对象

VirtualLayoutManager layoutManager = new VirtualLayoutManager(this);
// 创建VirtualLayoutManager对象
// 同时内部会创建一个LayoutHelperFinder对象,用来后续的LayoutHelper查找

recyclerView.setLayoutManager(layoutManager);
// 将VirtualLayoutManager绑定到recyclerView

步骤2:设置回收复用池大小

如果一屏内相同类型的 View 个数比较多,需要设置一个合适的大小,防止来回滚动时重新创建 View)

// 设置组件复用回收池
RecyclerView.RecycledViewPool viewPool = new RecyclerView.RecycledViewPool();
recyclerView.setRecycledViewPool(viewPool);
viewPool.setMaxRecycledViews(0, 10);

步骤3:设置Adapter

设置 V - Layout的Adapter有两种方式:

  • 方式1:继承 自 DelegateAdapter
  • 方式2:继承 自 VirtualLayoutAdapter 下面会进行详细说明:

方式1:继承 自 DelegateAdapter

  • 定义:DelegateAdapter是V - Layout专门为管理 LayoutHelper定制的 Adapter

继承自VirtualLayoutAdapter

  • 作用:通过管理不同布局的Adapter,继而管理不同的 LayoutHelper,从而实现使用不同组合布局
  1. 特别注意:虽不可直接绑定LayoutHelper,但是它内部有一个继承自RecyclerView.Adapter的内部类Adapter可以绑定LayoutHelper;
  2. 即通过一个List把绑定好的Adapter打包起来,再放去DelegateAdapter,这样就可以实现组合使用不同的布局
  • 具体做法:
  1. 写法与复写系统自带的Adapter非常类似:只比系统自带的RecyclerAdapter需要多重载onCreateLayoutHelper方法,其余类似
  2. 关于Android系统自带的RecyclerAdapter的使用具体请看我写的文章Android开发:ListView、AdapterView、RecyclerView全面解析

public class MyAdapter extends DelegateAdapter.Adapter<MyAdapter.MainViewHolder> {

// 比系统自带的RecyclerAdapter需要多重载onCreateLayoutHelper()

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

… // 其余写法与复写系统自带的Adapter相同
}

方式2:继承 自 VirtualLayoutAdapter

  • 定义:当需要实现复杂需求时, 可以通过继承VirtualLayoutAdapter从而实现自定义Adapter

  • 具体使用

public class MyAdapter extends VirtualLayoutAdapter {
…// 自定义Adapter逻辑
}

步骤4:根据数据列表,创建对应的LayoutHelper

  • 系统以封装好以下布局类型(对应同名的LayoutHelper)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用如下:
1. 线性布局(LinearLayoutHelper)
  • 布局说明:布局子元素(Item)以线性排布的布局

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

/**
设置线性布局
*/
LinearLayoutHelper linearLayoutHelper = new LinearLayoutHelper();
// 创建对应的LayoutHelper对象

// 所有布局的公共属性(属性会在下面详细说明)
linearLayoutHelper.setItemCount(4);// 设置布局里Item个数
linearLayoutHelper.setPadding(10,10,10,10);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
linearLayoutHelper.setMargin(10,10,10,10);// 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
linearLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
linearLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比

// linearLayoutHelper特有属性
linearLayoutHelper.setDividerHeight(1); // 设置每行Item的距离

1. 所有布局的共有属性说明:

a. setItemCount属性

  • 作用:设置整个布局里的Item数量

如设置的Item总数如与Adapter的getItemCount()方法返回的数量不同,会取决于后者

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

// 接口示意
public void setItemCount(int Count)

// 具体使用
linearLayoutHelper.setItemCount(4);

b. Adding & Margin属性

  • 定义:都是边距的含义,但二者边距的定义不同:
  1. Padding:是 LayoutHelper 的子元素相对 LayoutHelper 边缘的距离;
  2. Margin:是 LayoutHelper 边缘相对父控件(即RecyclerView)的距离。具体如下图:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

// 接口示意
public void setPadding(int leftPadding, int topPadding, int rightPadding, int bottomPadding)
public void setMargin(int leftMargin, int topMargin, int rightMargin, int bottomMargin)

// 具体使用
linearLayoutHelper.setPadding(10,10,10,10);
// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离

linearLayoutHelper.setMargin(10,10,10,10);
// 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离


c. bgColor属性

  • 作用:设置布局背景颜色
  • 具体使用:

// 接口示意
public void setBgColor(int bgColor)

// 具体使用
linearLayoutHelper.setBgColor(Color.YELLOW);

d. aspectRatio属性

  • 作用:设置布局内每行布局的宽与高的比。如下图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

// 接口示意
public void setAspectRatio(float aspectRatio);
// LayoutHelper定义的aspectRatio

((VirutalLayoutManager.LayoutParams) layoutParams).mAspectRatio
// 视图的LayoutParams定义的aspectRatio
// 在LayoutHelper计算出视图宽度之后,用来确定视图高度时使用的,它会覆盖通过LayoutHelper的aspectRatio计算出来的视图高度,因此具备更高优先级。

// 具体使用
linearLayoutHelper.setAspectRatio(6);

2. LinearLayoutHelper布局的特有属性说明

a. dividerHeight属性

  • 作用:设置每行Item之间的距离

设置的间隔会与RecyclerView的addItemDecoration()添加的间隔叠加

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

// 接口示意
public void setDividerHeight(int dividerHeight)

// 具体使用
linearLayoutHelper.setDividerHeight(1);


2. 网格布局(GridLayout)

  • 布局说明:布局里的Item以网格的形式进行排列

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

/**
设置Grid布局
*/
GridLayoutHelper gridLayoutHelper = new GridLayoutHelper(3);
// 在构造函数设置每行的网格个数

// 公共属性
gridLayoutHelper.setItemCount(6);// 设置布局里Item个数
gridLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
gridLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
gridLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
gridLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比

// gridLayoutHelper特有属性(下面会详细说明)
gridLayoutHelper.setWeights(new float[]{40, 30, 30});//设置每行中 每个网格宽度 占 每行总宽度 的比例
gridLayoutHelper.setVGap(20);// 控制子元素之间的垂直间距
gridLayoutHelper.setHGap(20);// 控制子元素之间的水平间距
gridLayoutHelper.setAutoExpand(false);//是否自动填充空白区域
gridLayoutHelper.setSpanCount(3);// 设置每行多少个网格
// 通过自定义SpanSizeLookup来控制某个Item的占网格个数
gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
if (position > 7 ) {
return 3;
// 第7个位置后,每个Item占3个网格
}else {
return 2;
// 第7个位置前,每个Item占2个网格
}
}
});

GridLayoutHelper布局的特有属性说明

a. weights属性

  • 作用:设置每行中每个网格宽度占每行总宽度的比例
  1. 默认情况下,每行中每个网格中的宽度相等
  2. weights属性是一个float数组,每一项代表当个网格占每行总宽度的百分比;总和是100,否则布局会超出容器宽度;
  3. 如果布局中有4列,那么weights的长度也应该是4;长度大于4,多出的部分不参与宽度计算;如果小于4,不足的部分默认平分剩余的空间。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

// 接口示意
public void setWeights(float[] weights)

// 具体使用
gridLayoutHelper.setWeights(new float[]{40, 30, 30});

b. vGap、hGap属性

  • 作用:分别控制子元素之间的垂直间距 和 水平间距。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

// 接口示意
public void setHGap(int hGap)
public void setVGap(int vGap)

// 具体使用
gridLayoutHelper.setVGap(20);// 控制子元素之间的垂直间距
gridLayoutHelper.setHGap(20);// 控制子元素之间的水平间距

c. spanCount、spanSizeLookup属性

  • 作用:
  1. spanCount:设置每行多少个网格
  2. spanSizeLookup:设置每个 Item占用多少个网格(默认= 1)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

// 接口示意
public void setSpanCount(int spanCount)
public void setSpanSizeLookup(SpanSizeLookup spanSizeLookup)

// 具体使用
gridLayoutHelper.setSpanCount(5);// 设置每行多少个网格

// 通过自定义SpanSizeLookup来控制某个Item的占网格个数
gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
if (position > 7 ) {
return 3;
// 第7个位置后,每个Item占3个网格
}else {
return 2;
// 第7个位置前,每个Item占2个网格
}
}
});

d. autoExpand属性

  • 作用:当一行里item的个数 < (每行网格列数 - spanCount值/ 每个Item占有2个网格-setSpanSizeLookup )时,是否自动填满空白区域
  1. 若autoExpand=true,那么视图的总宽度会填满可用区域;
  2. 否则会在屏幕上留空白区域。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

// 接口示意
public void setAutoExpand(boolean isAutoExpand)

// 具体使用
gridLayoutHelper.setAutoExpand(false);


3. 固定布局(FixLayoutHelper)

  • 布局说明:布局里的Item 固定位置

固定在屏幕某个位置,且不可拖拽 & 不随页面滚动而滚动。如下图:(左上角)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

/**
设置固定布局
*/

FixLayoutHelper fixLayoutHelper = new FixLayoutHelper(FixLayoutHelper.TOP_LEFT,40,100);
// 参数说明:
// 参数1:设置吸边时的基准位置(alignType) - 有四个取值:TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT
// 参数2:基准位置的偏移量x
// 参数3:基准位置的偏移量y

// 公共属性
fixLayoutHelper.setItemCount(1);// 设置布局里Item个数
// 从设置Item数目的源码可以看出,一个FixLayoutHelper只能设置一个
// @Override
// public void setItemCount(int itemCount) {
// if (itemCount > 0) {
// super.setItemCount(1);
// } else {
// super.setItemCount(0);
// }
// }
fixLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
fixLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
fixLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
fixLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比

// fixLayoutHelper特有属性
fixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);// 设置吸边时的基准位置(alignType)
fixLayoutHelper.setX(30);// 设置基准位置的横向偏移量X
fixLayoutHelper.setY(50);// 设置基准位置的纵向偏移量Y

FixLayoutHelper特有属性说明

a. AlignType、x、y属性

  • 作用:
  1. alignType:吸边基准类型

共有4个取值:TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,具体请看下面示意图

  1. x:基准位置的横向偏移量
  2. y:基准位置的纵向偏移量

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 作用对象:FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper的属性

// 接口示意
public void setAlignType(int alignType)
public void setX(int x)
public void setY(int y)

// 具体使用
fixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);
fixLayoutHelper.setX(30);
fixLayoutHelper.setY(50);


4. 可选显示的固定布局(ScrollFixLayoutHelper)

  • 布局说明:布局里的Item 固定位置
  1. 固定在屏幕某个位置,且不可拖拽 & 不随页面滚动而滚动(继承自固定布局(FixLayoutHelper))
  2. 唯一不同的是,可以自由设置该Item什么时候显示(到顶部显示 / 到底部显示),可如下图:(左上角)
  3. 需求场景:到页面底部显示”一键到顶部“的按钮功能

以下示意图为:滑动到底部,布局才在左上角显示

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

/**
设置可选固定布局
*/

ScrollFixLayoutHelper scrollFixLayoutHelper = new ScrollFixLayoutHelper(ScrollFixLayoutHelper.TOP_RIGHT,0,0);
// 参数说明:
// 参数1:设置吸边时的基准位置(alignType) - 有四个取值:TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT
// 参数2:基准位置的偏移量x
// 参数3:基准位置的偏移量y

// 公共属性
scrollFixLayoutHelper.setItemCount(1);// 设置布局里Item个数
// 从设置Item数目的源码可以看出,一个FixLayoutHelper只能设置一个
// @Override
// public void setItemCount(int itemCount) {
// if (itemCount > 0) {
// super.setItemCount(1);
// } else {
// super.setItemCount(0);
// }
// }
scrollFixLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
scrollFixLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
scrollFixLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
scrollFixLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比

// fixLayoutHelper特有属性
scrollFixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);// 设置吸边时的基准位置(alignType)
scrollFixLayoutHelper.setX(30);// 设置基准位置的横向偏移量X
scrollFixLayoutHelper.setY(50);// 设置基准位置的纵向偏移量Y
scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);// 设置Item的显示模式

ScrollFixLayoutHelper特有属性说明

a. AlignType、x、y属性

  • 作用:
  1. alignType:吸边基准类型

共有4个取值:TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,具体请看下面示意图

  1. x:基准位置的横向偏移量
  2. y:基准位置的纵向偏移量

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

// 接口示意
public void setAlignType(int alignType)
public void setX(int x)
public void setY(int y)

// 具体使用
ScrollFixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);
ScrollFixLayoutHelper.setX(30);
ScrollFixLayoutHelper.setY(50);

b. ShowType属性

  • 作用:设置Item的显示模式

共有三种显示模式

  1. SHOW_ALWAYS:永远显示(即效果同固定布局)
  2. SHOW_ON_ENTER:默认不显示视图,当页面滚动到该视图位置时才显示;
  3. SHOW_ON_LEAVE:默认不显示视图,当页面滚出该视图位置时才显示
  • 具体使用

// 接口示意
public void setShowType(int showType)

// 具体使用
scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);


5. 浮动布局(FloatLayoutHelper)

  • 布局说明:布局里的Item只有一个
  1. 可随意拖动,但最终会被吸边到两侧
  2. 不随页面滚动而移动

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

/**
设置浮动布局
*/
FloatLayoutHelper floatLayoutHelper = new FloatLayoutHelper();
// 创建FloatLayoutHelper对象

// 公共属性
floatLayoutHelper.setItemCount(1);// 设置布局里Item个数
// 从设置Item数目的源码可以看出,一个FixLayoutHelper只能设置一个
// @Override
// public void setItemCount(int itemCount) {
// if (itemCount > 0) {
// super.setItemCount(1);
// } else {
// super.setItemCount(0);
// }
// }
floatLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
floatLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
floatLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
floatLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比

// floatLayoutHelper特有属性
floatLayoutHelper.setDefaultLocation(300,300);// 设置布局里Item的初始位置

6. 栏格布局(ColumnLayoutHelper)

  • 布局说明:该布局只设有一栏(该栏设置多个Item)

可理解为只有一行的线性布局

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

/**
设置栏格布局
*/
ColumnLayoutHelper columnLayoutHelper = new ColumnLayoutHelper();
// 创建对象

// 公共属性
columnLayoutHelper.setItemCount(3);// 设置布局里Item个数
columnLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
columnLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
columnLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
columnLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比

// columnLayoutHelper特有属性
columnLayoutHelper.setWeights(new float[]{30, 40, 30});// 设置该行每个Item占该行总宽度的比例
// 同上面Weigths属性讲解


7. 通栏布局(SingleLayoutHelper)

  • 布局说明:布局只有一栏,该栏只有一个Item

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 具体使用

/**
设置通栏布局
*/

SingleLayoutHelper singleLayoutHelper = new SingleLayoutHelper();

// 公共属性
singleLayoutHelper.setItemCount(3);// 设置布局里Item个数
singleLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
singleLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
singleLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
singleLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比


8. 一拖N布局 (OnePlusNLayoutHelper)

最后

如果你看到了这里,觉得文章写得不错就给个赞呗?如果你觉得那里值得改进的,请给我留言。一定会认真查询,修正不足。谢谢。

最后针对Android程序员,我这边给大家整理了一些资料,包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter等全方面的Android进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料的时间来学习,也可以分享动态给身边好友一起学习!

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

布局里Item个数
singleLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离
singleLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件(即RecyclerView)的距离
singleLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色
singleLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比


8. 一拖N布局 (OnePlusNLayoutHelper)

最后

如果你看到了这里,觉得文章写得不错就给个赞呗?如果你觉得那里值得改进的,请给我留言。一定会认真查询,修正不足。谢谢。

[外链图片转存中…(img-wXRAOTP6-1715818602749)]

最后针对Android程序员,我这边给大家整理了一些资料,包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter等全方面的Android进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料的时间来学习,也可以分享动态给身边好友一起学习!

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值