【PersimmonUI柿饼学习营】基于柿饼平板电脑的微实现---二牛哥

发布于 2018-09-12 09:14:37 浏览：2140 订阅该版

* 本帖最后由 二牛哥 于 2018-9-13 21:32 编辑 *

基于柿饼对平板电脑UI的微实现

一、目标：

用PersimmonUI 实现平板电脑UI的基本框架---通过按桌面图标从而跳转执行对应APP, 并制作一个图片浏览器APP,   本程序采用Persimmon UI Builder 在PC上模拟实现。 
       
**二、方法：****     在页面中放置card控件，在card控件中包含imagebox控件，在imagebox控件中显示图片。通过触摸事件触发页面跳转方法跳转到card页面，滑动控件浏览图片。**

三、步骤：

** 1准备素材，**
    1）图标图片两张，分别是正常显示时的“显示图片”、被触摸后有力反馈视觉效果的“点击图片”,分辨率此例为86x86    2）桌面背景图片1张，分辨率根据自己的硬件情况而定，此处为800x480
    3）被浏览的图片4张

2 建立工程，如下图所示：
![1.png](/uploads/201809/12/235541x6so5ghsh98hq9tq.png)
3 新建页面page1，设置页面page1属性（修改背景图），如下图所示
![2.png](/uploads/201809/12/235626akgbejeiblmu9wub.png)

4 在页面page1中放置button控件并设置其属性，如下图所示
![3.png](/uploads/201809/12/235641c10w7k01ew7hj891.png)
5 新建页面page2，在页面中放置card控件并设置其属性，如下图所示

![4.png](/uploads/201809/12/235703hoqqpp99owddn9rr.png)

6 在“card”控件中添加“ImageBox”控件，如下图所示:

![5.png](/uploads/201809/12/235742wd7w57fzc4cruw45.png)

7 在“ImageBox”控件中添加图片，如下图所示:
![6.png](/uploads/201809/12/235804lay1jjwag7maa1ki.png)

8 重复执行第6与第7步3次，即再添加3张图片

9 在页面中添加按钮并设置属性，如下图所示:

![7.png](/uploads/201809/12/235822cs2hlh22y9ed88sy.png)
10 在页面中添加lable标签，并根据需要设置标签属性，此例设置标签的文字内容为“ 请滑动窗口 ”。

11 编写程序：在page1.js中输入如下代码
 var page = {onButton : function(e) {
        console.dir(e);        
        pm.navigateTo({url: "page2/page2"});                                  
        }, 
};
Page(page);

在page2.js中输入如下代码
var page = {
onButton : function(e) {
        console.dir(e);        
        pm.navigateBack();                                      
        }, 
};
Page(page);

12 在PersimmonUI Builder 工具栏中点击运行按钮运行程序，效果如下图所示，按各页面中的按钮能实现正常跳转与显示
![10.png](/uploads/201809/13/000052ddkd75euj5she7je.png)

![11.png](/uploads/201809/13/000117qqrmsrrr1mrz7js0.png)

至此，目标达成。

拓展：           在熟悉了以上简单UI的制作后，可通过增加控件种类、灵活应用空间组合、控件隐藏与显示、后台编程等技巧设计制作更绚丽更复杂的UI，如下图所示，是一个简单展示PersimmonUI模拟windows与android风格的程序视频：

[视频](http://v.youku.com/v_show/id_XMzgyMjUzNjc0OA==.html?spm=a2h0j.11185381.listitem_page1.5!2~A)-A    、  [视频](http://v.youku.com/v_show/id_XMzgyMjU0NjEwOA==.html?spm=a2h3j.8428770.3416059.1)-B

![12.png](/uploads/201809/13/001200rg01505ghz4g046n.png)

下载附件 [PhotoBrowser.rar](https://oss-club.rt-thread.org/uploads/201809/13/212814mwv7wbs1zgg3j1w9.rar)