EP 7: Design the layout of item by DataTemplate in TopStore App

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~

本篇是 Re: 从零开始用 Xamarin 技术来复刻过去开发的一个 App: TopStore 系列文的 EP7。

在上一篇 EP6 当中我们已经在 PeoplePage 当中设计了一个 ListView,再来的话我们要在针对 ListView 里面作一些设计跟项目的呈现资讯。
PeoplePageViewModel 的 Command 设计

而在 PeoplePage 当中的 ListView 其 ItemsSource 所系结到的物件对象是设计为 ObservableCollection<Person> 的 People,所以这也就代表着在 ListView 当中呈现的项目是要根据 People 里面的每一项 Person 所规划设计的类别属性,来进行资料呈现的系结。

来来来,开始罗~~~


在今天这回的 EP 当中 这个资料的内容当然我们就会先用假资料,也就是先写死在程序码当中的一个资料,以利後续让画面跟资料的一个撷取处理呈现上面是可以完成的。

当这样的一个完成之後,後续还有很多事情,比如说可能我们在资料的处理上面,可能包括要把它储存到一个永久的 Storage 里面去...等等的,不过,那就之後有谈到的机会再说吧^_<

我们就先从 Models 资料夹找到今天的配角 Person 这个类别,并且来帮它增加四个属性 Name、Tel、Email、Address。
Person 类别的修改

暂时利用自动属性这样完成设计之後,就可以先用来撰写 ListView 的资料系结的部分,但因为之後还可能会针对 Person 的资料直接跟 "编辑" 或 "新增" 的页面作系结的处理,所以它还会再作一些修正,不过就到时候再修正吧!

接着回到 PeoplePage.xmal 之後找到 ListView 的标记,并且先修改成完整的对称式标记。
ListVeiw 标记的修改 1

并且开始再其中增加 ListView.ItemTemplate 标记之後再继续增加 DataTemplate 的标记。
ListVeiw 标记的修改 2

完成之後,我们可以在这边思考一下是否有需要用到额外已经设计好的 ViewCell 样板,很有可能在这个专案里面有类似的 ViewCell 要呈现在不同页面的 ListView 或其他的多资料呈现元件。不过在这边,我们毕竟是 "Re: 从零..." 系列文,所以就直接在这边设计下去吧,鸠咪^_<

写上 ViewCell 标记後,在脑海里大概想像了一下之後想要呈现的项目样式。
VeiwCell 当中的版型规划 1

这边的 ViewCell 当中的版型规划就透过 Grid ,看起来会是比较快速简便的方式来切划。
VeiwCell 当中的版型规划 2

那接着就动手来编纂相关的 XAML 标记,来...三步骤,握...折...搭啦~~~
VeiwCell 版型透过 Grid 的规划
完成!

接着再继续来编纂 ViewCell 内部要呈现的相关控制项,并且配合 Grid 的版型设计来完成所放置的位置。

第一个为 Label 标记,来...三步骤,握...折...搭啦~~~
ViewCell 内部要呈现的相关控制项 1
Good~~~

第二个为 Label 标记,来...三步骤,握...折...搭啦~~~
ViewCell 内部要呈现的相关控制项 2
Awesome~~~

第三个为 Label 标记,来...三步骤,握...折...搭啦~~~
ViewCell 内部要呈现的相关控制项 3
Perfet~~~

第四个为 Button 标记,来...三步骤,握...折...搭啦~~~
ViewCell 内部要呈现的相关控制项 4
Wonderful~~~

以上这四个控制项的前三个 Label 控制项,其标记的撰写都会将 Text 属性,透过 Binding (系结)的方式来完成资料的设定。可能各位会问到说 Button 怎麽没有系结到电话的资料?

这里并不需要显示电话的资讯来显示,就没有需要在这边处理系结的动作,反倒是需要一篇专门的 EP 来介绍这个部分。(想先睹为快的话请跳到 EP15)

完成 PeoplePage 的 XAML 编纂之後,接着我们就到 PeoplePageViewModel 当中来透过 Constructor 建立预设的 People 的假资料(MockData)。
People 的假资料 1
Tab 两下
People 的假资料 2
new 出新滋味 ObservableCollection<Person> 的物件设定给 People 属性。
People 的假资料 3
来...三步骤,握...折...搭啦~~~
People 的假资料 4

这边只是为了能够在 PeoplePage 的画面呈现时,在 LiveView 当中能有资料的呈现出来,所以不要太在意当中的资料产生的方式。当然可以规划设计到专属的 MockData 类别当中去,以防扰乱我们 ViewModel 程序中的逻辑理解,又或者是之後要抽换成透过永久储存的方式来处理也比较方便,但在本 EP7 的部分我们就先不谈这麽多了。

BTW, 如果嫌资料产生很麻烦,可以透过 Generatedata 这个网站来协助你产生假资料(虽然有 "中" 文...但你知道的,还是建议用英文):
https://generatedata3.com/

好的,都撰写完成後我们就将专案重新建置 "Ctrl + F5"(执行但不侦错) 到双平台(iOS、Android)上跑看看,确认到目前为止所变更的效果如何。
双平台(iOS、Android)上执行呈现的效果

所以当今天画面双平台(iOS、Android) 呈现的效果完成时,我们回头来检视 PeoplePage 里的 ListView 每个项目所呈现的效果是否符合前面所提及的版型规划。

首先各位可以看到在第一个 Row 当中的两个 Label 所呈现的宽度比例大约是 2:3,这个没有问题。
ListView 每个项目所呈现的效果检视 1

再来可以看到在第二个 Row 当中的 Label 所呈现的位置横跨了两个 Column,这个也没有问题。
ListView 每个项目所呈现的效果检视 2

再来可以看到在第三个 Column 当中的 Button 所呈现的位置纵跨了两个 Row,这个也没有问题。
ListView 每个项目所呈现的效果检视 3

不过呢,由於 iOS 跟 Android 在原生 UI 控制项的一些处理上,对於我们设计 Button 所在 Grid 的 Column 将宽度设定 Auto 时,两个平台对於 Button 呈现的解释有所的不同,所以会看到在画面上 iOS 在按钮的呈现上比较怪异一些,然後感觉 Android 似乎比较正常,但这都是可以在後续的处理上去做画面的调整。

这边就先按照我们原先的设计规划来结束这篇 EP7 吧,鸠咪^_<

甘温各位~~~


<<:  Day 03 - 动态调整的PM职涯规划(2)

>>:  Day 3 就是你了!

[Day 12] 资料产品生命周期管理-加工资料(一)

加工资料泛指各种处理资料的行为,这部分要一篇文章写完真滴难,所以就也只能蜻蜓点水的各介绍一点,让大家...

D-12, Ruby 正规表达式(二) 量词 、锚 && Reverse Vowels of a String

昨天的重点复习/./就是一个最简单的正规表达式。 先认识一下match与=~。 match回传匹配的...

http 与 https

HTTP 和 HTTPS 简介 HTTP Http的全名是 HyperText Transfer P...

Day-21 SONY 的刁蛮三公主、PS3 步步艰辛的复兴之路

以 PS1 和 PS2 称霸於前两个世代的 SONY、在新的世代推出的主机当然就叫做 PS3。然而身...