VLayoutDemo【VLayout的简单使用demo（基于V1.2.8版本）】

版权声明：本文为HaiyuKing原创文章，转载请注明出处！

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

设计思路

通过定制化的LayoutManager，接管整个RecyclerView的布局逻辑；LayoutManager管理了一系列LayoutHelper，LayoutHelper负责具体布局逻辑实现的地方；每一个LayoutHelper负责页面某一个范围内的组件布局；不同的LayoutHelper可以做不同的布局逻辑，因此可以在一个RecyclerView页面里提供异构的布局结构，这就能比系统自带的LinearLayoutManager、GridLayoutManager等提供更加丰富的能力。同时支持扩展LayoutHelper来提供更多的布局能力。

主要功能

  • 默认通用布局实现，解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等。
    • LinearLayoutHelper: 线性布局
    • GridLayoutHelper: Grid布局， 支持横向的colspan
    • FixLayoutHelper: 固定布局，始终在屏幕固定位置显示
    • ScrollFixLayoutHelper: 固定布局，但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等
    • FloatLayoutHelper: 浮动布局，可以固定显示在屏幕上，但用户可以拖拽其位置
    • ColumnLayoutHelper: 栏格布局，都布局在一排，可以配置不同列之间的宽度比值
    • SingleLayoutHelper: 通栏布局，只会显示一个组件View
    • OnePlusNLayoutHelper: 一拖N布局，可以配置1-5个子元素
    • StickyLayoutHelper: stikcy布局， 可以配置吸顶或者吸底
    • StaggeredGridLayoutHelper: 瀑布流布局，可配置间隔高度/宽度
  • 上述默认实现里可以大致分为两类：一是非fix类型布局，像线性、Grid、栏格等，它们的特点是布局在整个页面流里，随页面滚动而滚动；另一类就是fix类型的布局，它们的子节点往往不随页面滚动而滚动。
  • 所有除布局外的组件复用，VirtualLayout将用来管理大的模块布局组合，扩展了RecyclerView，使得同一RecyclerView内的组件可以复用，减少View的创建和销毁过程。

使用

这个demo只是简单记录下上面黄色标记的几种布局的实现。

注意

vlayout1.2.8版本中使用的recyclerview是23.1.1版本，v4是23.1.1，这个需要注意。如果项目中用到recyclerview和v4包的话，建议依赖新版本的recyclerview和v4。

下面是vlayout的build.gradle文件的部分源码：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    // compile project(':extension')
    if (project.hasProperty('useNewSupportLibrary')) {
        compile 'com.android.support:recyclerview-v7:25.2.0@aar'
        compile('com.android.support:support-v4:25.2.0@aar')
        compile 'com.android.support:support-annotations:25.2.0'
        compile 'com.android.support:support-compat:25.2.0'
        compile 'com.android.support:support-core-ui:25.2.0'
    } else {
        compile 'com.android.support:recyclerview-v7:23.1.1@aar'
        compile('com.android.support:support-v4:23.1.1@aar') {
            exclude group: 'com.android.support', module: 'support-annotations'
        }
        compile 'com.android.support:support-annotations:23.1.1'
    }

    androidTestCompile "org.robolectric:robolectric:3.0"
}

所以在项目中app目录的build.gradle中依赖vlayout时，会有这样的提醒：

VLayoutDemo【VLayout的简单使用demo（基于V1.2.8版本）】

效果图

 VLayoutDemo【VLayout的简单使用demo（基于V1.2.8版本）】

使用步骤

一、项目组织结构图

VLayoutDemo【VLayout的简单使用demo（基于V1.2.8版本）】

VLayoutDemo【VLayout的简单使用demo（基于V1.2.8版本）】

VLayoutDemo【VLayout的简单使用demo（基于V1.2.8版本）】

注意事项：

1、  导入类文件后需要change包名以及重新import R文件路径

2、  Values目录下的文件（strings.xml、dimens.xml、colors.xml等），如果项目中存在，则复制里面的内容，不要整个覆盖

二、导入步骤

1、在build.gradle文件中依赖vlayout

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.why.project.vlayoutdemo"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //Vlayout
    implementation ('com.alibaba.android:vlayout:1.2.8@aar') {
        transitive = true
    }
    //下面的代码，根据实际情况添加，如果项目中用到了下面的库，则需要根据项目依赖高版本库，否则就会使用vlayout中的低版本库
    //RecyclerView【因为vlayout中的recyclerview版本低，所以需要重新依赖高版本，否则app中使用recyclerview的话会直接使用vlayout中的低版本recyclerview】
    implementation "com.android.support:recyclerview-v7:28.0.0"
    //v4
    implementation 'com.android.support:support-v4:28.0.0'
}

这样就将vlayout集成到项目中了。

三、使用方法

1、先在demo中添加测试数据文件

VLayoutDemo【VLayout的简单使用demo（基于V1.2.8版本）】

{
    "data": [
        {
            "modelname": "推送新闻",
            "data": [
                {
                    "image": "https://imgsa.baidu.com/news/q%3D100/sign=06d12a2732dbb6fd235be1263925aba6/b151f8198618367a8dbfe10125738bd4b31ce53c.jpg",
                    "url": "http://news.ifeng.com/a/20180120/55302258_0.shtml?_zbs_baidu_news",
                    "title": "安徽合肥：“非遗”进校园",
                    "id": "whyidzhi",
                    "order": "1"
                }
            ]
        },
        {
            "modelname": "焦点新闻",
            "data": [
                {
                    "image": "https://b.bdstatic.com/boxlib/20180120/2018012017100383423448679.jpg",
                    "url": "http://pic.chinadaily.com.cn/2018-01/20/content_35544757.htm",
                    "title": "西昌铁路警方用表情包宣传爱路小知识",
                    "id": "whyidzhi",
                    "order": "1"
                },
                {
                    "image": "https://b.bdstatic.com/boxlib/20180120/2018012017100311270281486.jpg",
                    "url": "http://pic.chinadaily.com.cn/2018-01/20/content_35544758.htm",
                    "title": "成都熊猫基地太阳产房全新升级",
                    "id": "whyidzhi",
                    "order": "2"
                },
                {
                    "image": "https://b.bdstatic.com/boxlib/20180120/2018012017100392134086973.jpg",
                    "url": "http://pic.chinadaily.com.cn/2018-01/20/content_35544759.htm",
                    "title": "长沙“90后”交警用手绘记录交警故事",
                    "id": "whyidzhi",
                    "order": "3"
                }
            ]
        },
        {
            "modelname": "国际人物",
            "data": [
                {
                    "image": "http://t12.baidu.com/it/u=264843290,870648681&fm=173&s=29C043870E531CDC082897A003006015&w=218&h=146&img.JPEG",
                    "url": "http://news.163.com/18/0120/15/D8JS570V00018AOQ_all_mobile.html",
                    "title": "法总统马克龙会见默克尔 强调欧洲改革需要德国（全文..",
                    "id": "whyidzhi",
                    "order": "1"
                },
                {
                    "image": "",
                    "url": "http://www.yidianzixun.com/article/0IBPUBcu",
                    "title": "默克尔组阁能否成功？全等这场党代会",
                    "id": "whyidzhi",
                    "order": "2"
                },
                {
                    "image": "",
                    "url": "http://www.yidianzixun.com/article/0IBMT9yr",
                    "title": "马克龙向默克尔表支持 强调推动欧洲改革需要德国",
                    "id": "whyidzhi",
                    "order": "3"
                },
                {
                    "image": "",
                    "url": "http://news.sina.com.cn/w/2018-01-20/doc-ifyquixe4989529.shtml",
                    "title": "德法首脑在巴黎会晤 默克尔：欧洲需要稳定的德国政府",
                    "id": "whyidzhi",
                    "order": "4"
                },
                {
                    "image": "",
                    "url": "http://news.sina.com.cn/o/2018-01-20/doc-ifyqtycx0664636.shtml",
                    "title": "德国社民党民众支持率创新低",
                    "id": "whyidzhi",
                    "order": "5"
                }
            ]
        },
        {
            "modelname": "图片新闻",
            "data": [
                {
                    "image": "https://t10.baidu.com/it/u=44207055,3448633405&fm=173&s=CFF20CC150452CEC9F9C491103005092&w=218&h=146&img.JPEG",
                    "url": "http://war.163.com/18/0120/11/D8JEFM5D000181KT_mobile.html",
                    "title": "外媒称朝鲜先遣队取消访韩",
                    "id": "whyidzhi",
                    "order": "1"
                },
                {
                    "image": "https://t10.baidu.com/it/u=1625316837,2876937793&fm=173&s=F507703317115D6644753AE80300E036&w=218&h=146&img.JPEG",
                    "url": "http://news.china.com/internationalgd/10000166/20180120/31985304.html",
                    "title": "狂风横扫欧洲多国，致10人",
                    "id": "whyidzhi",
                    "order": "2"
                },
                {
                    "image": "https://t10.baidu.com/it/u=2946973968,4057971581&fm=173&s=2D216D93C2F00B9219A825E703009060&w=218&h=146&img.JPEG",
                    "url": "http://news.sina.com.cn/w/2018-01-20/doc-ifyqtycx0654102.shtml",
                    "title": "津巴布韦反对党要人在美坠",
                    "id": "whyidzhi",
                    "order": "3"
                },
                {
                    "image": "https://t12.baidu.com/it/u=3788697896,2880168169&fm=173&s=D31A38C4D664D55FC29281010300309B&w=218&h=146&img.JPEG",
                    "url": "http://finance.ifeng.com/a/20180120/15937975_0.shtml",
                    "title": "美国政府关门 比特币闻讯",
                    "id": "whyidzhi",
                    "order": "4"
                },
                {
                    "image": "https://t10.baidu.com/it/u=1499851317,895362806&fm=173&s=BD04DF104871339C53A88C870100E0E3&w=218&h=146&img.JPEG",
                    "url": "http://news.sina.com.cn/o/2018-01-20/doc-ifyquixe5136803.shtml",
                    "title": "刚刚，美国政府正式宣告",
                    "id": "whyidzhi",
                    "order": "5"
                },
                {
                    "image": "https://t12.baidu.com/it/u=4229963978,641890755&fm=173&s=74B218D646A08B491AAF3E9903001088&w=218&h=146&img.JPEG",
                    "url": "http://www.chinanews.com/gj/2018/01-20/8428898.shtml",
                    "title": "超三成受访者称中国是“新",
                    "id": "whyidzhi",
                    "order": "6"
                }
            ]
        },
        {
            "modelname": "视频新闻",
            "data": [
                {
                    "image": "http://pic.rmb.bdstatic.com/1f01839d477aa7a3ffa36f07542f8d5b.jpg@h_660,w_370",
                    "url": "http://v.qq.com/x/page/h0527p90e2b.html",
                    "title": "杭州餐馆爆炸，路过公交车20余人受伤",
                    "id": "whyidzhi",
                    "order": "1"
                },
                {
                    "image": "http://pic.rmb.bdstatic.com/1f541422405ab18797795c0adc3318eb.jpg@h_660,w_370",
                    "url": "http://www.iqiyi.com/v_19rr7omigs.html",
                    "title": "中央措辞严厉批祁连山生态问题 8责任人被问责",
                    "id": "whyidzhi",
                    "order": "2"
                },
                {
                    "image": "http://pic.rmb.bdstatic.com/d46f662c1900de051da6de2eef2c485f.jpg@h_660,w_370",
                    "url": "http://v.qq.com/x/page/a0024q7bkg0.html",
                    "title": "吉林永吉 吉林市多地遭暴雨袭击 县城灾后清理正在进行",
                    "id": "whyidzhi",
                    "order": "3"
                },
                {
                    "image": "http://pic.rmb.bdstatic.com/b9cdfca4adeb36ac1a0730f70b9d63f9.jpg@h_660,w_370",
                    "url": "http://www.iqiyi.com/v_19rr7oosfs.html",
                    "title": "40 高温下一出租车行驶中自燃",
                    "id": "whyidzhi",
                    "order": "4"
                },
                {
                    "image": "http://pic.rmb.bdstatic.com/660e5152b144e48bbdffdad5d9fdc088.jpg@h_660,w_370",
                    "url": "http://v.qq.com/x/page/v0527bhjwh3.html",
                    "title": "徐光裕：印度航母只是二流航母",
                    "id": "whyidzhi",
                    "order": "5"
                }
            ]
        }
    ]
}
vlayout.txt

相关文章：

  • 2021-12-18
  • 2021-10-03
  • 2022-12-23
  • 2021-03-31
  • 2021-05-20
  • 2021-10-26
猜你喜欢
  • 2021-05-28
  • 2022-12-23
  • 2021-12-09
  • 2021-12-26
  • 2021-12-03
  • 2021-05-09
  • 2021-11-13
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode