Tangram属性

最新推荐文章于 2024-08-14 18:05:27 发布
最新推荐文章于 2024-08-14 18:05:27 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： Tangram 框架
本文详细介绍了Tangram的多种布局属性，包括流式布局、一拖N布局、浮标布局、固定布局、吸顶/吸底布局、轮播布局、横向线性滚动布局和瀑布流布局，涵盖各布局的type属性、style属性及其具体设置，如卡片间距、宽高比、背景色等。
摘要由CSDN通过智能技术生成

Tangram属性

Card属性：

	public static final String KEY_TYPE = "type";
    public static final String KEY_STYLE = "style";
    public static final String KEY_ID = "id";
    public static final String KEY_TYPE_KEY = "typeKey";	//adapter用 = type
    public static final String KEY_TYPE_REUSEID = "reuseId";
    public static final String KEY_INDEX = "index";
    public static final String KEY_POSITION = "position";
    public static final String KEY_ITEMS = "items";
    public static final String KEY_HEADER = "header";
    public static final String KEY_FOOTER = "footer";
    public static final String KEY_LOAD_TYPE = "loadType";
    public static final String KEY_LOADED = "loaded";
    public static final String KEY_API_LOAD = "load";
    public static final String KEY_HAS_MORE = "hasMore";
    public static final String KEY_API_LOAD_PARAMS = "loadParams";
    public static final String KEY_MAX_CHILDREN = "maxChildren";

style属性

	public static final String KEY_BIZ_ID = "bizId";
    public static final String KEY_BACKGROUND_IMAGE = "background-image";
    public static final String KEY_BACKGROUND_COLOR = "background-color";
    public static final String KEY_MARGIN = "margin";
    public static final String KEY_PADDING = "padding";
    public static final String KEY_WIDTH = "width";
    public static final String KEY_HEIGHT = "height";
    public static final String KEY_COLS = "cols";
    public static final String KEY_DISPLAY = "display";	//字体显示风格
    public static final String KEY_ZINDEX = "zIndex";
    public static final String KEY_ASPECT_RATIO = "aspectRatio";
    public static final String KEY_RATIO = "ratio";
    public static final String KEY_ANIMATION_DURATION = "animationDuration";
    public static final String KEY_SLIDABLE = "slidable";
    public static final String KEY_FOR_LABEL = "forLabel";
一，流式布局

依次填充，满一行换下一行。
type属性：
container-oneColumn 单列(一排一)
container-twoColumn 双列
container-threeColumn 三列
container-fourColumn 四列
container-fiveColumn 五列
container-flow N列
style属性：
margin 卡片的外间距，上右下左 [9,9,9,9],"[9,9,9,9]"，[“9”,“9”,“9”,“9”]均可，建议使用第一种
padding 卡片的内间距，上右下左 [9,9,9,9],"[9,9,9,9]",[“9”,“9”,“9”,“9”]均可，建议使用第一种
aspectRatio 每一行的宽高比 String “9”
vGap 垂直方向上，每个组件的间距 String/Number “9”
hGap 水平方向上，每个组件的间距 String/Number “9”
background-image 背景图 String https://gw.alicdn.com/tps/TB1dkjfOXXXXXb0aXXXXXXXXXXX-1125-220.png
background-color 背景色 String “#FFFFFF”
cols 每列的百分比，如果是N列，可以只写Array中只写N-1项，最后一项会自动填充，如果加一起大于100，就按照填写的来算 Array(String/Number) [“30”,“30”] 或 [30",30]

二，一拖N(N=2/3/4)布局

左边一个大的，右边N个小的，可调整比例。
type属性：
container-onePlusN 一拖2/3/4
style属性：
margin 卡片的外间距，顺序是上右下左 [9,9,9,9],"[9,9,9,9]",[“9”,“9”,“9”,“9”]均可，建议使用第一种
aspectRatio 整体宽高比 String “9”
background-image 背景图 String https://gw.alicdn.com/tps/TB1dkjfOXXXXXb0aXXXXXXXXXXX-1125-220.png
background-color 背景色 String “#FFFFFF”
cols 设定宽度比例，内容是百分比的数字 Array(String/Number) [“30”,“30”] 或 [30,30]
rows 设定上下比例，只能有两项 Array(String/Number) [“30”,“30”] 或 [30,30]

三，浮标布局

可拖动，自动吸边。
type属性：
container-float
style属性：
align 相对初始位置来说，初始出现位置的原点 String top_left/top_right/bottom_left/bottom_right
x 相对原点的横向偏移量 String/Number 9
y 相对原点的纵向偏移量 String/Number 9
background-color 背景色 String “#FFFFFF”

四，固定布局

固定在某个位置，不可拖动。
type属性：
container-fix 固定顶部或者底部，根据属性指定
container-scrollFix 滚动固定(滚动到某个布局的时候，出现并固定)
style属性：
align 相对初始位置来说，初始出现位置的原点， 8(固定底部)默认是bottom_left 9(固定顶部)默认是top_left String top_left/top_right/bottom_left/bottom_right
x 相对原点的横向偏移量 String/Number 9
y 相对原点的纵向偏移量 String/Number 9
background-color 背景色 String “#FFFFFF”
showType 前一个显示时显示/前一个消失时显示/永远显示(默认永远显示) String “showOnEnter”,”showOnLeave”,”always”

五，吸顶/吸底布局

碰到Tangram的顶端或底端就吸住。
type属性：
container-sticky 吸顶或吸底，根据属性指定
style属性：
margin 卡片的外间距，顺序是上右下左 [9,9,9,9],”[9,9,9,9]”,[“9”,”9”,”9”,”9”]均可，建议使用第一种
offset 吸住的时候距离顶部或底部的偏移量，单位是系统单位 String/Number “9”
sticky 固定的位置 enum(start/end)，start 表示固定到顶部，end 表示固定到底部，默认 start “start”
enableScroll 是否平铺&可滚动 Bool true,”false”

六，轮播布局

适用于Banner的场景，按页可自动滚动，循环滚动，一页一页的滚动。
type属性：
container-banner
style属性：
itemRatio 内部 View 的宽高比，宽度=满屏幕， 高度=根据ratio计算高度，建议设置此属性，可预先占位，避免 Banner 有一个高度撑开的过程 Number或者String 2.4
pageRatio 内部 View 宽度占总屏幕宽度的比例
margin 卡片的外间距，顺序是上右下左 [9,9,9,9],"[9,9,9,9]",[“9”,“9”,“9”,“9”]均可，建议使用第一种
padding 卡片的内间距，顺序是上右下左 [9,9,9,9],"[9,9,9,9]",[“9”,“9”,“9”,“9”]均可，建议使用第一种
autoScroll 自动滚动的间隔，单位毫秒，填写数字大于0就开始自动滚动，默认值 String/Number “3000”,3000
specialInterval 单独指定每一帧的自动滚动的间隔，单位毫秒，key从0开始计数；与autoScroll配合使用，当未在此声明某一帧的停留时间的时候，使用autoScroll指定的间隔，否则使用此处声明的间隔时间 Map {“1”: “10000”, “2”: “5000”}
infinite 是否无限滚动 String/Bool “true”,“false”
indicatorImg1 指示器选中状态的图片，必须带图片宽高比后缀 String
https://img.alicdn.com/tps/TB16i4qNXXXXXbBXFXXXXXXXXXX-32-4.png
indicatorImg2 指示器未被选中状态的图片，必须带图片宽高比后缀String https://img.alicdn.com/tps/TB1XRNFNXXXXXXKXXXXXXXXXXXX-32-4.png
indicatorGravity 指示器位置，居中居左还是居右 String “left”/“right”/“center”
indicatorPosition 指示器位置，在内部还是在外部 String “inside”/“outside”
indicatorGap 每个之间的指示器间距 String/Number “9”
indicatorMargin 指示器相对于布局底端的间距 String/Number “9”
indicatorHeight 指示器高度 String/Number “9”
pageWidth 页面宽度，配置了此参数，轮播布局的滚动会变为线性,不配置的话，就是一页一页的滚动 String/Number “100”
scrollMarginLeft 最左边一帧距离布局左边的间距 String/Number “100”
scrollMarginRight 最右边一帧距离布局右边的间距 String/Number “100”
hGap 横向每一帧之间的间距 String/Number “100”

七，横向线性滚动布局

连续滚动，不是Banner一页一页的滚动。
type属性：
container-scroll
style属性：
pageWidth 页面宽度，在iOS上配置了此参数，轮播布局的滚动会变为线性,不配置的话，就是一页一页的滚动，Android需要依赖此选型设置页面宽度 String/Number “100”
pageHeight 页面高度 String/Number “78”
hGap 横向每一帧之间的间距(Android不支持) String/Number “100”
scrollMarginLeft 最左边一帧距离布局左边的间距 String/Number “100”
scrollMarginRight 最右边一帧距离布局右边的间距(iOS上不支持) String/Number “100”
hasIndicator 是否显示指示器 Boolean false
indicatorColor 指示器选中颜色(iOS不支持) Color #FF0000
defaultIndicatorColor 指示器默认颜色(iOS不支持) Color #666666

八，瀑布流布局

type属性：
container-waterfall
style属性：
margin 卡片的外间距，顺序是上右下左 [9,9,9,9],”[9,9,9,9]”,[“9”,”9”,”9”,”9”]均可，建议使用第一种
vGap 垂直方向上，每个组件的间距 String/Number “9”
hGap 水平方向上，每个组件的间距 String/Number “9”
background-color 背景色 String “#FFFFFF”
column 列数 String/Number “3”或3

峰雪轩
关注
专栏目录
Android Tangram模型：连淘宝、天猫都在用的UI框架模型你一定要懂
郭霖
07-28 2517
今日科技快讯 乐视网(300104)7月27日晚间发布公告：截至公告日，公司控股股东贾跃亭以及乐视控股合计持有5.24亿股，占公司总股本的比例为26.27%，其中贾跃亭直接持有乐视网5.12亿股，占公司总股本25.67%，直接持有乐视网股份被冻结
Tangram入门
yyq的博客
12-05 1041
iOS入门 Tangram2.0库 Android Tangram-Android Virtualview-Android iOS Tangram-iOS Virtualview-iOS tangram 使用的工具类 virtualview_tools Tangram ios的Tagram总体由四部分构成：Core,Layout,EventBus,Helper 1、Core Tangram的...
Android 动态界面开发框架 Tangram 使用完整教程
热门推荐
孙强 Jimmy 的博客
04-25 2万+
阅读本文大概需要20分钟 熟悉阿里出品的vlayout的读者都知道，vlayout极大地扩展了RecyclerView的LayoutManager，从而为RecyclerView提供了一组布局。使用该开源项目，可以让我们在同一个RecyclerView里处理线性、网格等等各种复杂的布局。然而，使用vlayout时，一切都需要用Java代码实现，而且都是写在客户端上，一旦需要修改就必须发版，不...
IOS 04 TangramKit 纯代码开发
最新发布
sziitjin的博客
08-14 632
由于自定义的ItemView左右两端都有控件，所以继承自TGRelativeLayout，更方便实现UI效果。//////init() {///左侧图标}()///右侧图标}()///标题textView.text = "标题"}()懒加载创建自定义View，并添加到页面中title = "设置界面"view.titleView.text = "设置"}()view.titleView.text = "设置"}()//////
flutter入门学习：container,column,row的属性
qq_55655826的博客
08-02 824
k
ios-用Swift编写的一套iOS界面布局框架:TangramKit.zip
07-11
TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局体系以及HTML/CSS中的float和flex-box的布局功能和思想，目的是为iOS开发人员提供一套功能强大、多屏幕灵活适配、简单易用的UI布局解决方案。 Swift版本TangramKit: https://github.com/youngsoft/TangramKit OC版本MyLayout: https://github.com/youngsoft/MyLinearLayout
tangram框架响应式加载图片方法
09-04
`loading()`函数通常会包含实际的图片加载逻辑，例如通过改变图片的`src`属性或使用懒加载库。 为了在页面滚动时触发`scrollLoad`函数，你需要监听`window`对象的`scroll`事件，并在事件回调中调用`scrollLoad`，以...
Tangram Plugin FrameWork 安裝及配置 IDE
12-20
1. **右击『电脑』** → **『属性』** → **『高级系统设置』** 2. **点击『环境变量』**按钮。 3. 在**系统变量**区域中找到名为`Path`的环境变量，并点击**编辑**。 4. 在`Path`的**变量值**编辑框中添加框架核心...
藏经阁-Tangram.pdf
08-26
1. Tangram的发展历程：从文件描述中，我们可以看到Tangram团队花了5年时间跟平台打游击，忽略了前端技术本身的进化，JS/HTML转Native技术天生具有跨平台和快速发布的属性，但是性能和稳定性却仅仅是接近原生Native...
tangram.js库实现js类的方式实例分析
10-18
5. 全局配置和实例控制：在创建类的过程中，tangram.js还考虑到了全局配置的添加和实例属性的控制。`options`对象允许开发者为类添加全局配置，并且可以通过`options`的`decontrolled`属性来控制是否将实例添加到...
Tangram 的基础 —— vlayout（Android）
BillyLu的博客
03-04 4181
前言 vlayout 是手机天猫 Android 版内广泛使用的一个基础 UI 框架项目 提供了一个用于RecyclerView的自定义的LayoutManger，可以实现不同布局格式的混排，目标是支撑客户端native页面的快速开发。它也是Tangram 框架的基础模块，现已开源，欢迎移步到 github 上指教。 简介 背景 Android中UI性能消耗主要来自于两
Android Tangram模型 ，Tangram 的基础 —— vlayout
ElevenDGQ的博客
09-19 805
Tangram 的基础 —— vlayout
百度地图Map属性和方法
weixin_30679823的博客
10-07 815
map的L属性:TANGRAM__1 map的F属性:[object Object] map的xa属性:[object HTMLDivElement] map的width属性:1340 map的height属性:0 map的offsetX属性:0 map的offsetY属性:0 map的platform属性:[object HTMLDivElement] map的Bd属性:[o...
nc65 树单据类型教程
qq_31968809的博客
09-28 4238
nc65 树单据类型教程  实现效果: 实现思路 1. 可以完全手写，也可以先利用向导生成一个 主子VO的单据，然后在调整界面样式：去掉列表模板，替换左侧树     1. 实现方式二    可以先想到生成一个 标准的主子类型单据，   再使用附件中的XML替换， 并将xml文件中zl备注的地方，根据需要修改成自己的   2.后续代码实现   1.
用SIMD技术实现TANGRAM算法
04-30
Tangram算法是一种图像分割算法，其主要目的是将一张图片分割成若干个由直线和曲线组成的封闭图形。SIMD（Single Instruction Multiple Data）技术是一种并行计算技术，可以同时对多个数据进行相同的运算，从而提高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值