【Win10应用开发】自适应磁贴中的分组
老周在上一篇文章中介绍过了自适应磁贴的基本结构,以及给大家演示了一些例子。
本文老周给大伙伴们说说自适应磁贴的另一个特点——分组呈现。
当磁贴的内容被分组后,每个组中的内容就会被视为一个整体。比如某磁贴在更新时定义了其内容包含有两个组,有些设备(比如手机、上世纪70年代的电脑、小霸王学习机等)的分辨率较低,磁贴不能显示两个组的信息,于是就会把第一组的内容整个显示出来,第二组信息就被忽略。就算空间不够,连第一组的内容都显示不全,然而一个组会被视为一个整体,不管空间够不够,第一组都要全部呈现。如果空间相当充足,当然两个分组的内容都会显示出来。
分组的方法是在binding元素下使用1个或n个group元素,每个group元素代表一组。对于单个group元素而言,它的子元素必须是subgroup(子组)元素,数量可以为n个,但至少你得有一个subgroup元素。正因为如此,group元素下面最少最少都会有一个subgroup元素。
先给大伙看一个例子。
<tile> <visual> <binding template="TileMedium"> <group> <subgroup> <text hint-style="subtitle">第一组</text> <text>今天天气真好。</text> </subgroup> </group> <group> <subgroup> <text hint-style="subtitle">第二组</text> <text>天上的白云真白。</text> </subgroup> </group> </binding> </visual> </tile>
上面定义的这个磁贴,分为两个组,每个组中都有两个text元素来呈现文本,虽然group中不打算设置子分组,但必须有一个subgroup,因为group元素的子元素必须为subgroup。
得到的磁贴如下图所示。
在一个group中,实际上一个subgroup可以理解为一列,因为subgroup元素有一个hint-weight属性,这个属性用来定义该subgroup的比重,这个比重实际上是该subgroup的宽度所占的比例。所以说,subgroup其实是用来定义列的。
大家应该会用XAML中的Grid控件,大家不妨想想,Grid在划分行和列的时候,是不是有一个按比例划分的方法。比如第一行为1*,第二行为2*,那就是把行的所有空间均分为3等份,第一行占1/3,第二行占2/3。
hint-weight的原理是一样的,但是,它不用写“*”,比如,一个组中有两个subgroup,每个subgroup的hint-weight的值都为1,那么每个subgroup的宽度将相等,各占50%。
再如,三个subgroup,设置它们的hint-weight属性。第一个为2,第二个为1,第三个为3,即把所有空间平均分为6份,第一列占2/6,第二列占1/6,第三列占3/6。
请看下面的例子:
<tile> <visual> <binding template="TileWide"> <group> <subgroup hint-weight="1"> <image src="ms-appx:///Assets/images/关羽.png" hint-removeMargin="true"/> <text hint-align="center" hint-style="body">关羽</text> </subgroup> <subgroup hint-weight="1"> <image src="ms-appx:///Assets/images/张飞.png" hint-removeMargin="true"/> <text hint-align="center" hint-style="body">张飞</text> </subgroup> <subgroup hint-weight="1"> <image src="ms-appx:///Assets/images/曹操.png" hint-removeMargin="true"/> <text hint-align="center" hint-style="body">曹操</text> </subgroup> <subgroup hint-weight="1"> <image src="ms-appx:///Assets/images/孙坚.png" hint-removeMargin="true"/> <text hint-align="center" hint-style="body">孙坚</text> </subgroup> <subgroup hint-weight="1"> <image src="ms-appx:///Assets/images/袁绍.png" hint-removeMargin="true"/> <text hint-align="center" hint-style="body">袁绍</text> </subgroup> </group> </binding> </visual> </tile>
每个subgroup的hint-weight的值都为1,表明磁贴将一个组的水平空间平分为5列,每列显示图像和文本。
大家注意到,这里image元素设置了一个hint-removeMargin属性为true,表示删除图像的边距。如果为false,表示保留边距。默认情况下,图像周围的边距为8,由于这个磁贴内容多,比较拥挤,所以要去掉图像默认的边距。
磁贴更新后如下图所示。
再看下面一例:
<tile> <visual> <binding template="TileWide"> <group> <subgroup hint-weight="1"> <image src="ms-appx:///Assets/images/曹操.png" hint-removeMargin="true" /> </subgroup> <subgroup hint-weight="5"> <image src="ms-appx:///Assets/images/袁绍.png" hint-removeMargin="true" /> </subgroup> <subgroup hint-weight="3"> <image src="ms-appx:///Assets/images/孙坚.png" hint-removeMargin="true" /> </subgroup> </group> </binding> </visual> </tile>
一个分组中有三个subgroup,即三列,所有空间被划分为9等份,第一列占其中1份,第二列占5份,第三列占3份。
磁贴更新后如下图。
另外,hint-weight属性还可以使用百分比来划分列,方法是指定的所有subgroup的weight值加起来刚好等于100,这时候就会被识别为百分比。
看例子。
<tile> <visual> <binding template="TileWide"> <group> <subgroup hint-weight="70"> <image src="ms-appx:///Assets/images/张飞.png" hint-removeMargin="true" /> </subgroup> <subgroup hint-weight="30"> <image src="ms-appx:///Assets/images/袁绍.png" hint-removeMargin="true" /> </subgroup> </group> </binding> </visual> </tile>
第一列的比重为70,第二列的比重为30,加起来正好是100,所以识别为百分比。
磁贴更新后的结果如下图:
好了,本文的牛皮就吹到这里。
相关文章
- 支付宝首页可以自己编辑了!长按图标即可排序/删除
- Android 手势检测 - GestureDetector 全面分析
- 手机多久一换最合适?内行人这样解释,终于搞懂了
- 什么时候买手机最便宜?内行人这样说
- Android中深入学习对象的四种引用类型(强引用、软引用、弱引用、虚引用)
- 1个100元!团伙用变脸App“复活”上万限用微信号
- 微信崩了!大量用户无法收发图片:5G网络也不行
- 安卓比苹果危险?98%恶意软件针对安卓 苹果反对开放APP第三方下载
- 为什么现在的手机电池越来越大,可电量反而更不耐用了?
- 为什么国产手机那么火,可还是卖不过苹果?
- 微信搞了一个“深度清理” 能帮你省出好几个G
- 微信又上线新功能,内测深度清理功能,可一键清理微信存储空间
- 为什么现在的手机都这么贵?
- 为何大家买了5G手机,到手第一件事却是关5G?原因在这
- 手机越更新越卡,到底是怎么回事?
- 一部手机最长能用几年?三个主要因素决定了手机的寿命
- 环绕屏和折叠屏开启手机新战役?
- 谷歌 Chrome App 将于 2022 年 6 月停用,向 PWA 应用转型
- Android源码进阶之深入理解SharedPreference原理机制
- 已经2021年了,为什么还有人坚持用LCD屏手机的三大原因