smobiler仿自如app筛选页面
原型图:
完整代码见git :
https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/Sele
ctForm/ZRSelectForm.cs
创建窗体
创建一个SmobilerForm ,文件名设置ZRSelectForm,将窗体的Layout设置Relative,再设置窗体的Statusbar属性
并在窗体中拖入两个Panel
panel1用来放置搜索框,panel2用来放置“综合排序”、“销量最高”、“距离最近”、“筛选”按钮和listview1。
panel1.Height 设置40,panel2.Flex设置1
实现搜索框
将上图的panel1.Layout设置Relative,panel1.Direction设置Row,panel1.Padding设置(6,6,6,6),panel1.Size设置为(0,40)。
在panel1中拖入imageButton,
imageButton6.ImagtType设置FontIcon,
imageButton6.ResourceID设置” angle-left” ,
imageButton6.Flex设置1,
imageButton6.IconColor设置Silver。
在imageButton6的点击事件中写this.Close();
接着在panel1中拖入panel3,
Panel3.BorderRadius设置4,
Panel3.Direction设置Row,
Panel3.ItemAlign设置Center,
Panel3.Layout设置Relative,
Panel3.Touchable设置true,
Panel3.BackColor设置WhiteSmoke,
Panel3.Flex设置6。
在panel3 中加入fonticon控件,
fontIcon1.Location设置(6,0),
fontIcon1.Size设置(15,15),
fontIcon1.ForeColor设置Gainsboro,
fontIcon1.Resource设置”search”
在panel2中加入Label控件,Label控件的Name设置KeyLab,
KeyLab.Size设置(0,0)
KeyLab.ForeColor设置Gainsboro
KeyLab.Location设置(12,0,0,0)
KeyLab.Text设置“清河”
最后在panel1中拖入imageButton7,
imageButton7.ImagtType设置FontIcon,
imageButton7.ResourceID设置“crosshairs” ,
imageButton7.Flex设置1,
imageButton7.IconColor设置Silver。
放置筛选按钮
panel4.Direction设置Row,Layout设置Relative,Padding设置(12,0,12,0),Height设置40。接着在panel4中放置4个ImageButton,Flex属性都设置1,
imageButton1.ImageDirection设置Right,
imageButton1.ImageType设置“FontIcon”,
imageButton1.ResourceID设置”angel-down”,
imageButton1.Text设置“合租”,
imageButton1.ImgTextRatio设置(2,8)
imageButton2.ImageDirection设置Right,
imageButton2.ImageType设置“FontIcon”,
imageButton2.ResourceID设置”angel-down”,
imageButton2.Text设“位置”
imageButton2.ImgTextRatio设置(2,8)
imageButton3.ImageDirection设置Right,
imageButton3.ImageType设置“FontIcon”,
imageButton3.ResourceID设置”angel-down”,
imageButton3.Text设置“租金”
imageButton3.ImgTextRatio设置(2,8)
imageButton4.ImageDirection设置Right,
imageButton4.ImageType设置“FontIcon”,
imageButton4.ResourceID设置” angle-down “
imageButton4.Text设置“筛选”,
imageButton4.ImgTextRatio设置(2,8)
imageButton5.ImageDirection设置Right,
imageButton5.ImageType设置“FontIcon”,
imageButton5.ResourceID设置“arrows-v”
imageButton5.ImgTextRatio设置(3,7)
创建SmobilerUserControl
创建一个SmobilerUserControl,文件名设置ZRSelectLayout, 将ZRSelectLayout.Layout设置Relative,BackColor设置White
上图panel1 用来实现搜索框,panel4用来放置筛选按钮,步骤和前文中的一样,接着再入两个panel,分别命名为mianpanel和panel3。mianpanel.Layout设置Relative,Flex设置1,用来放置筛选项。
Panel3.Layout设置Relative,Direction设置Row,Height设置46,Padding设置(6,6,6,6)。再往panel3中放置两个button,Flex分别设置1和2,。button1.Text设置“清除”,BackColor设置Silver, button2.Text设置“查看”,BackColor设置orange。
这样设计器部分就完成了,代码部分请查看git。
实现效果
smobiler仿自如app筛选页面相关推荐
- smobiler仿京东app搜索页面
京东app搜索界面如下图所示: 完整代码见git :https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_Smob ...
- 仿京东App分类页面的实现
今天群里有人问了关于仿京东App分类页面的实现,而我之前正好查过这方面的资料,手上正好有一个demo,正好分享给大家看看,个人觉得效果棒棒哒! 首先来看效果图吧 是不是很6呢,来分析这个demo的主体 ...
- Android OpenGL 仿自如 APP 裸眼 3D 效果
概述 之前看到 自如团队 发布的 自如客APP裸眼3D效果的实现 ,非常有趣,不久后,社区内 Android 的开发者们陆续提供了 Flutter. Android 原生 .Android Jetpa ...
- 高仿 自如APP 底部导航切换动画效果
code小生 一个专注大前端领域的技术平台公众号回复Android加入安卓技术群 作者:孔鹏飞 链接:https://www.jianshu.com/p/7a544cf34bcf 声明:本文已获孔鹏飞 ...
- 仿茶馆APP前端页面/UNI-APP编译包仿茶馆的前端
介绍: 仿茶馆APP前端页面/UNI-APP编译包仿2020版本茶馆的前端 源码为仿茶馆2020年一个版本界面,单UNI-APP编译后的模板,没有VUE(UNI-APP)源码和后台 此套就是模板,不带 ...
- 仿京东APP分类页面(mvp模式+OkHttp封装工具类+拦截器+弱引用回收)
仿京东APP分类页面: 添加依赖 compile 'com.android.support:recyclerview-v7:24.0.0' compile 'com.google.code.gson: ...
- 卷起来了!Android OpenGL仿自如APP裸眼3D效果
/ 今日科技快讯 / 近日,"乘联会"微信公众号发布消息,2021年12月新能源乘用车市场多元化发力,厂商批发销量突破万辆的企业有14家,较前期大幅增多,其中:比亚迪933 ...
- Flutter 实现高仿开眼 APP 的页面开发 03
这是本实战系列的最后一篇文章了,也是本专栏的最后一篇文章.这篇文章将继续上一篇的文章,把剩余的发现页面和社区页面进行开发.以及抽离了一些可复用的业务组件,并且新增加了图片轮播组件.九宫格布局组件等等. ...
- Flutter 实现高仿开眼 APP 的页面开发 01
通过前面一系列有关 Dart 基础知识.Dart 进阶知识以及 Dart 核心异步编程的学习.终于迎来了 Dart 的实战篇,理论终将要服务实践.之前很多小伙伴一开始上来就非常看重实战开发,对基础知识 ...
最新文章
- AI一分钟 | 科大讯飞2017年度财报:营收54.45亿元,净利润4.35亿元;滴滴首谈无人驾驶战略:只做软件不造车
- jsp中未登录用户也可以浏览页面的功能实现代码
- 尼康d850相机参数测试软件,尼康 D850最全参数信息曝光 快来围观
- connect SAP Hybris Enterprise Commerce Platform to SAP Kyma
- java i o总结_Java I/O 总结
- Dataphin的代码自动化能力如何助力商业决策
- 管理工作中的50点感悟
- 比较好的电脑系统_效果好的筛分移动破碎站有优惠吗?
- AD的小知识贴片的template
- Java的GUI窗体出现乱码解决方法
- 医院住院管理信息系统类图
- Since Due to Because of Because 的用法和区别
- OpenCV+Python 彩色图片的 BGR、灰度图、HSV分量图显示的程序
- S@Kura的PHP进阶之路(三)
- ps图文教程:ps钢笔工具在哪里
- BZOJ1022:[SHOI2008]小约翰的游戏John(博弈论)
- Spring Boot pdf文件转图片
- “如何实现高效的应用交付”鲁班会开发者训练营厦门站进行时
- violate关键字的用法
- 五洲制冷中央空调西门子S7-200 PLC控制系统程序 PLC和屏程序
热门文章
- [BZOJ2154]Crash的数字表格 莫比乌斯反演
- Unknown bits set in runtime_flags
- 打包发布firefox的主题
- 购买二手苹果笔记本有哪些注意事项
- VsQt无法打开pdb文件的问题
- 2018南航计算机考研分数线,2018-2020南京航空航天大学MEM考研分数线-MEM历年分数线-工程管理硕士复试线 - 希赛网...
- Bilibili Mini 客户端
- 海康工业相机排雷笔记02-像素格式解析
- easyui后台界面如何添加选项卡(Tab)
- Atitt 支付业务 银行国际代码(SWIFT Code银行国际代码(SWIFT Code)是由SWIFT协会提出并被ISO通过的银行识别代码,凡该协会的成员银行都有自己特定的SWIFT代码