Smobiler上海石磨_.NET移动开发平台
标题:
使用Smobiler实现类似美团的界面
[打印本页]
作者:
Lula.Jin
时间:
2020-3-26 19:05
标题:
使用Smobiler实现类似美团的界面
### 目标
下图为本次实现目标
[attach]1868[/attach]
### 准备
事先准备图片放在路径下\bin\Debug\Resources\Image
[attach]1869[/attach]
### 实现
首先可以将界面分成A，B，C三个部分，这三个部分里的内容可以使用Image，TextBox，IconMenuView，PageView,ListView，ToolBar等控件实现。
[attach]1870[/attach]
创建SmobilerForm类，并在窗体类中依次加入Panel（Name属性设置headPanel），Toolbar ，Panel（Name属性设置bodyPanel）控件，
headPanel的size设置（300，40），Dock属性设置top；Toolbar 的Size设置（300，40），ToolBar的Dock默认Bottom，因此不需要设置；bodyPanel的Dock属性设置Fill即可，这样外层界面就实现了。
[attach]1871[/attach]
接着来实现部分A中的界面，先将headPanel的Layout设置Relative，Padding设置（10,5,10,5），Direction设置Row，BackColor设置gold，其余属性默认。
1.
在headPanel加入ImageButton，Name为imageButton1，其属性设置如下：Size设置（30，30），BorderRadius设置30，Margin设置（0,0,5,0），ImageBorderRadius设置30，ResourceId设置"logon.png"，其余属性默认。
2.
在headPanel中加入Panel，Name为panel1,panel1的size设置（45，30），Padding设置（10,5,10,5），Touchable设置true。
在panel1中加入两个label，label1的size设置（45，20），Bold设置true，Text设置“上海”，HorizontalAlignment设置Center，其余属性默认；label2的size设置（45，10），ForeSize设置10，Text设置"阴19℃"，HorizontalAlignment设置Center，其余属性默认。label1和label2上下排列撑满panel1
3.
再往headPanel中加入Panel，Name为panel2，panel2的size设置（157，30），BackColor设置white，BorderRadius设置6，Touchable设置true。在panel2中加入fonticon，size设置（15，15），ResourceId设置"search",ForeColor是在DimGrey，接着往panel2中加入label控件，label的size设置（127，30），Text设置“汉堡”，FontSize设置14。将fonticon和label并排在 panel2中。
4.
最后在headPanel中加imageButton，Name为imageButton2，ResourceId设置“plus”，Size设置（32，30）
headPanel的最终界面如下
[attach]1872[/attach]
接着实现部分B，bodyPanel的Layout设置Relative，Scrollable设置true。
1.
再往bodyPanel里加入panel，Name设置rspanel，rspanel的Size设置（300，20），Padding设置（10,5,10,5），Layout设置Relative，Direction设置Row，BackColor设置Gold。
2.
在rspanel里加入Button，Button的FontSi则设置10，Width设置45，HorizontalAlignment设置Center。通过代码往rspanel里加入热搜词，代码写在窗体的Load事件中：
```c#
string
[] words = {
"奶茶"
,
"冰可乐"
,
"巨无霸汉堡"
,
"炸鸡"
};
//热搜词
for
(
int
i =
0
; i <
4
; i++) {
rspanel.Controls.Add(
new
Button
()
{
BackColor = System.Drawing.Color.FromArgb(
50
,
255
,
255
,
255
),
Text = words,
ForeColor = System.Drawing.Color.Black,
Padding =
new
Padding
(
10
,
0
,
10
,
0
),
Margin =
new
Margin
(
0
,
0
,
5
,
0
),
FontSize=
10
}) ;
}
```
3.
在bodyPanel中再加入panel，Name设置icpanel，icpanel的Size设置（300，60），Padding设置（10,5,10,5），Layout设置Relative，Direction设置Row，BackColor设置Gold。
4.
在icpanel里加入四个imagaButton，Size都是设置（70，50），ImageType设置FontIcon，ResourcId分别设置“ios-barcode”，“qrcode”，“bicycle”，“bus”，Text分别设置“扫一扫”，“付款码”，“骑车”，“乘公交”
5.
在bodyPanel里加入IconMenuView，iconMenuView1的Margin设置（10,5,10,5），Padding设置（0,10,0,0），BorderRadus设置6，Height设置135，ColumnNum设置5，通过一下代码添加icon，可以写在窗体的load事件中：
```c#
IconMenuViewGroup
ig =
new
IconMenuViewGroup
();
ig.Items.Add(
new
IconMenuViewItem
(
"0"
,
"icon1"
,
"外卖"
));
ig.Items.Add(
new
IconMenuViewItem
(
"1"
,
"icon2"
,
"美食"
));
ig.Items.Add(
new
IconMenuViewItem
(
"2"
,
"icon3"
,
"酒店住宿"
));
ig.Items.Add(
new
IconMenuViewItem
(
"3"
,
"icon4"
,
"休闲玩乐"
));
ig.Items.Add(
new
IconMenuViewItem
(
"4"
,
"icon5"
,
"电影演出"
));
ig.Items.Add(
new
IconMenuViewItem
(
"5"
,
"icon6"
,
"打车"
));
ig.Items.Add(
new
IconMenuViewItem
(
"6"
,
"icon7"
,
"丽人美发"
));
ig.Items.Add(
new
IconMenuViewItem
(
"7"
,
"icon8"
,
"超市药店"
));
ig.Items.Add(
new
IconMenuViewItem
(
"8"
,
"icon6"
,
"借钱"
));
ig.Items.Add(
new
IconMenuViewItem
(
"9"
,
"icon7"
,
"火车票"
));
iconMenuView1.Groups.Add(ig);
```
6.
在bodyPanel中加入pageview，pageview的Height设置90，Margin设置（10,5,10,5），BorderRadus设置6，IsLoop设置true。这个步骤需要创建一个SmobilerUserControl，类名为pageviewlayout，
usercontrol设置如下图，图中usercontrol，panel，image的size设置（300，90），image的DisplayMember设置img，
[attach]1873[/attach]
数据绑定代码，可以写在窗体的load事件中：
```c#
DataTable
dt =
new
DataTable
();
dt.Columns.Add(
"img"
);
dt.Rows.Add(
"img1"
);
dt.Rows.Add(
"img2"
);
pageView1.TemplateControl =
new
pageviewlayout();
pageView1.DataSource = dt;
pageView1.DataBind();
```
7.
在bodyPanel里加入Listview，listview的Size设置（0，0），listview也是需要模板的，模板设计如下：
[attach]1874[/attach]
usercontrol中控件的DisPlayMember设置分为：label1.DisplayMember = "sname";
label2.DisplayMember = "clabel";
label3.DisplayMember = "slabel";
label4.DisplayMember = "tlabel";
image1.DisplayMember = "img1";
image2.DisplayMember = "img2";
image3.DisplayMember = "img3";
绑定代码：
```c#
DataTable
dt1 =
new
DataTable
();
dt1.Columns.Add(
"sname"
);
dt1.Columns.Add(
"clabel"
);
dt1.Columns.Add(
"slabel"
);
dt1.Columns.Add(
"tlabel"
);
dt1.Columns.Add(
"c_label"
);
dt1.Columns.Add(
"img1"
);
dt1.Columns.Add(
"img2"
);
dt1.Columns.Add(
"img3"
);
dt1.Rows.Add(
"xxxx汉堡店"
,
"4.4分"
,
"人均￥36"
,
"55分钟送达"
,
"满10减2，满20减3，满60减6"
,
"food"
,
"food"
,
"food"
);
dt1.Rows.Add(
"xxxx汉堡店"
,
"4.4分"
,
"人均￥36"
,
"55分钟送达"
,
"满10减2，满20减3，满60减6"
,
"food"
,
"food"
,
"food"
);
dt1.Rows.Add(
"xxxx汉堡店"
,
"4.4分"
,
"人均￥36"
,
"55分钟送达"
,
"满10减2，满20减3，满60减6"
,
"food"
,
"food"
,
"food"
);
dt1.Rows.Add(
"xxxx汉堡店"
,
"4.4分"
,
"人均￥36"
,
"55分钟送达"
,
"满10减2，满20减3，满60减6"
,
"food"
,
"food"
,
"food"
);
listView1.TemplateControl =
new
listviewlayout();
listView1.DataSource = dt1;
listView1.DataBind();
```
bodyPanel的最终界面如下：
[attach]1875[/attach]
最后设置Toolbar的Items，选中Toolbar，点击右侧的Items，在ToolBarItem编辑器中添加4个Item，ImageType都设置FontIcon，IconID和SelectIconID分别设"home"，"compass"，"calendar-o"，"user"，Text分别设置"x团"，"发现"，"订单"，"我的"，其余设置如下图。
[attach]1876[/attach]
运行后的效果
[attach]1877[/attach]
作者:
南瓜
时间:
2020-6-19 17:32
大佬 有源码么 我想比这做一下。
作者:
18500974850
时间:
2020-9-18 13:58
顶一下
作者:
lichao8872
时间:
2020-9-19 10:55
能提供源码就好了
欢迎光临 Smobiler上海石磨_.NET移动开发平台 (https://www.smobiler.com/)
Powered by Discuz! X3.2
