smobiler仿饿了么app搜索页面
饿了么-搜索页面如下图所示:
完整代码见git :https://github.com/comsmobiler/BlogsCode
创建窗体
创建一个smobilerForm ,文件名设置ElmSearch, 将窗体的Layout设置Relative,再设置窗体的Statusbar属性
并在窗体中拖入Panel和ListView,Panel.Height 设置40,Listview.Flex设置1 ,Listview的模板类设置成ListLayout
实现搜索框
将上图的panel1.Layout设置Relative,panel1.Direction设置Row,panel1.Padding设置(6,6,6,6),panel1.Size设置为(0,40)。
在panel1中拖入imageButton1,
imageButton1.ImagtType设置FontIcon,
imageButton1.ResourceID设置” angle-left” ,
imageButton1.Size设置(27,0)。
在imageButton1的点击事件中写this.Close();
接着在panel1中拖入panel2,
panel2.BorderRadius设置12,
panel2.Direction设置Row,
panel2.ItemAlign设置Center,
panel2.Layout设置Relative,
panel2.Touchable设置true,
panel2.BackColor设置WhiteSmoke,
panel2.Magrin设置(6,0,0,0),
panel2.Flex设置1 。
在panel2 中加入fonticon控件,
fontIcon1.Location设置(6,0),
fontIcon1.Size设置(15,15),
fontIcon1.ForeColor设置Gainsboro,
fontIcon1.Resource设置”search”
在panel2中继续加入Label控件,Label控件的Name设置KeyLab,
KeyLab.Flex设置1
KeyLab.ForeColor设置Gainsboro
KeyLab.Location设置(6,0,0,0)
KeyLab.Margin设置(6,0,0,0)
KeyLab.Padding设置(4,0,0,0)
KeyLab.Text设置”曼玲粥店”
创建SmobilerUserControl
创建一个SmobilerUserControl,文件名设置ElmLayout, 将ElmLayout.Layout设置Relative,BackColor s设置White,Flex设置1
上图panel1 用来实现搜索框,步骤和前面一样,只是ELmLayout中的KeyLab改成TextBox控件,最后在ElmLayout中拖入两个panel,分别命名为hisPanel和disPanel,这两个Panel的Size设置(0,0)。这样设计器部分就完成了。
代码
ElmSearch.cs
1 using System; 2 using System.Collections.Generic; 3 using System.Data; 4 using System.Linq; 5 using System.Text; 6 using SelectDemo.Layouts; 7 using Smobiler.Core; 8 using Smobiler.Core.Controls; 9 10 namespace SelectDemo 11 { 12 partial class ElmSearch : Smobiler.Core.Controls.MobileForm 13 { 14 public ElmSearch() : base() 15 { 16 //This call is required by the SmobilerForm. 17 InitializeComponent(); 18 } 19 20 private DBClass dBClass = new DBClass();//DBClass 数据库查询类 21 private void panel2_Press(object sender, EventArgs e) 22 { 23 ShowElmLayout(); 24 } 25 private void ShowElmLayout() 26 { 27 //筛选项数据 28 SelectData d1 = new SelectData() 29 { 30 title = "历史搜索", 31 items = new String[] { "粥" }, 32 ishow = true 33 }; 34 SelectData d2 = new SelectData() 35 { 36 title = "历史搜索", 37 items = new String[] { "超级发布30减20起", "小恒水饺", "早餐", "油条", "炸鸡" ,"包子","皮蛋瘦肉粥"}, 38 ishow = false 39 }; 40 41 List<SelectData> sds = new List<SelectData>(); 42 sds.Add(d1); 43 sds.Add(d2); 44 45 // 实例化ElmLayout 46 ElmLayout uc = new ElmLayout(sds, keyLab.Text); 47 DialogOptions footerDialogOptions; 48 footerDialogOptions = new DialogOptions(LayoutJustifyAlign.FlexStart, System.Drawing.Color.Transparent, Smobiler.Core.Controls.Padding.Empty, true); 49 //在窗体中弹出ElmLayout 50 ShowDialog(uc, footerDialogOptions, (obj, args) => 51 { 52 if (uc.ShowResult == ShowResult.Yes) 53 { 54 keyLab.Text = uc.currentkey; 55 DataTable dt = dBClass.DbConnectAndQuert(uc.querystr); 56 listView1.Rows.Clear(); 57 listView1.DataSource = dt; 58 listView1.DataBind(); 59 } 60 }); 61 62 } 63 private void imageButton1_Press(object sender, EventArgs e) 64 { 65 this.Close(); 66 } 67 } 68 }
ElmLayout.cs
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using Smobiler.Core; 6 using Smobiler.Core.Controls; 7 8 namespace SelectDemo.Layouts 9 { 10 ////ToolboxItem用于控制是否添加自定义控件到工具箱,true添加,false不添加 11 //[System.ComponentModel.ToolboxItem(true)] 12 partial class ElmLayout : Smobiler.Core.Controls.MobileUserControl 13 { 14 public ElmLayout() : base() 15 { 16 //This call is required by the SmobilerUserControl. 17 InitializeComponent(); 18 } 19 public ElmLayout(List<SelectData> selectDatas, string defalutStr) : base() 20 { 21 //This call is required by the SmobilerUserControl. 22 InitializeComponent(); 23 GethHistory(selectDatas, defalutStr); 24 } 25 public string currentkey; 26 public string querystr; 27 28 private void CloseDialog_Press(object sender, EventArgs e) 29 { 30 this.ShowResult = ShowResult.No; 31 this.Close(); 32 33 } 34 private void GethHistory(List<SelectData> selectDatas, string defaultstr) 35 { 36 this.KeyLab.Text = defaultstr; 37 foreach (SelectData data in selectDatas) 38 { 39 //该label用于显示“历史搜索”文字 40 Label label1 = new Label() 41 { 42 Text = data.title, 43 Flex = 1, 44 FontSize = 15, 45 Size = new System.Drawing.Size(0, 25), 46 Bold=true, 47 ForeColor=System.Drawing.Color.Gray 48 }; 49 50 Panel p1 = new Panel() 51 { 52 Layout = LayoutPosition.Relative, 53 Direction = LayoutDirection.Row, 54 Size = new System.Drawing.Size(0, 0), 55 Padding = new Padding(12, 0, 12, 0) 56 }; 57 58 p1.Controls.Add(label1); 59 60 Panel p2 = new Panel() 61 { 62 Layout = LayoutPosition.Relative, 63 Direction = LayoutDirection.Row, 64 Size = new System.Drawing.Size(0, 0), 65 Padding = new Padding(12, 0, 12, 0), 66 Wrap = LayoutWrap.Wrap 67 }; 68 if (data.ishow == true) 69 { 70 //添加“历史搜索”后的删除按钮 71 ImageButton imgbtn = new ImageButton() 72 { 73 ImageType = ImageEx.ImageStyle.FontIcon, 74 ResourceID = "trash-o", 75 IconColor = System.Drawing.Color.Silver, 76 Size = new System.Drawing.Size(25, 25) 77 }; 78 imgbtn.Press += this.DeleteButtonPress; 79 p1.Controls.Add(imgbtn); 80 81 for (int i = 0; i < data.items.Length; i++) 82 { 83 Button btn = new Button() 84 { 85 Text = data.items[i], 86 BackColor = System.Drawing.Color.WhiteSmoke, 87 ForeColor = System.Drawing.Color.Gray, 88 Size = new System.Drawing.Size(0, 0), 89 Padding = new Padding(12,8,12,8), 90 BorderRadius = 4, 91 Margin = new Margin(0, 4, 12, 4) 92 }; 93 btn.Press += this.SelectButtonPress; 94 p2.Controls.Add(btn); 95 } 96 hisPanel.Controls.Add(p1); 97 hisPanel.Controls.Add(p2); 98 } 99 else 100 { 101 //原型上“超级发布30减20起 按钮” 102 Button spbtn = new Button() 103 { 104 Text = data.items[0], 105 BackColor = System.Drawing.Color.AliceBlue, 106 ForeColor = System.Drawing.Color.DeepSkyBlue, 107 Size = new System.Drawing.Size(0, 0), 108 Padding = new Padding(12,8,12,8), 109 BorderRadius = 4, 110 Margin = new Margin(0,4, 12, 4) 111 }; 112 spbtn.Press += this.SelectButtonPress; 113 p2.Controls.Add(spbtn); 114 115 for (int i = 1; i < data.items.Length; i++) 116 { 117 Button btn = new Button() 118 { 119 Text = data.items[i], 120 BackColor = System.Drawing.Color.WhiteSmoke, 121 ForeColor = System.Drawing.Color.Gray, 122 Size = new System.Drawing.Size(0, 0), 123 Padding = new Padding(12,8,12,8), 124 BorderRadius = 4, 125 Margin = new Margin(0, 4, 12, 4) 126 }; 127 btn.Press += this.SelectButtonPress; 128 p2.Controls.Add(btn); 129 } 130 disPanel.Controls.Add(p1); 131 disPanel.Controls.Add(p2); 132 } 133 134 } 135 } 136 137 /// <summary> 138 /// 清空历史搜索记录 139 /// </summary> 140 /// <param name="sender"></param> 141 /// <param name="e"></param> 142 private void DeleteButtonPress(object sender, EventArgs e) 143 { 144 hisPanel.Controls.Clear(); 145 } 146 /// <summary> 147 /// 搜索内容查询 148 /// </summary> 149 /// <param name="sender"></param> 150 /// <param name="e"></param> 151 private void SelectButtonPress(object sender, EventArgs e) 152 { 153 Button btn = (Button)sender; 154 this.ShowResult = ShowResult.Yes; 155 currentkey = btn.Text; 156 //将查询关键字替换进去 157 querystr = @"SELECT * FROM `testdata` where data like '%"+currentkey+"%'"; 158 this.Close(); 159 } 160 /// <summary> 161 /// 搜索框回车键事件 162 /// </summary> 163 /// <param name="sender"></param> 164 /// <param name="e"></param> 165 private void KeyLab_SubmitEditing(object sender, EventArgs e) 166 { 167 this.ShowResult = ShowResult.Yes; 168 currentkey = KeyLab.Text; 169 //将查询关键字替换进去 170 querystr = @"SELECT * FROM `testdata` where data like '%" + KeyLab.Text+ "%'"; 171 this.Close(); 172 } 173 174 private void imageButton1_Press(object sender, EventArgs e) 175 { 176 this.ShowResult = ShowResult.No; 177 this.Close(); 178 } 179 } 180 }
SelectData.cs
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 7 namespace SelectDemo 8 { 9 class SelectData 10 { 11 public String title { set; get; } 12 public String[] items { set; get;} 13 public Boolean ishow { set; get; } 14 public Boolean isradio { set; get; } 15 public String type { set; get; } 16 17 } 18 }
DBClass.cs
1 using System; 2 using System.Collections.Generic; 3 using System.Data; 4 using System.Data.SqlClient; 5 using System.Linq; 6 using System.Text; 7 using System.Threading.Tasks; 8 using MySql.Data.MySqlClient; 9 namespace SelectDemo 10 { 11 class DBClass 12 { 13 /// <summary> 14 /// 连接数据库并查询相应数据 15 /// </summary> 16 /// <param name="query">数据库查询语句</param> 17 /// <returns></returns> 18 public DataTable DbConnectAndQuert(string query) 19 { 20 21 String connetStr = "server=127.0.0.1;port=3306;user=****;password=****; database=***;charset=utf8"; 22 MySqlConnection conn = new MySqlConnection(connetStr); 23 try 24 { 25 DataTable dt = new DataTable(); 26 conn.Open(); 27 MySqlCommand com = new MySqlCommand(query, conn); 28 MySqlDataAdapter adapter = new MySqlDataAdapter(com); 29 adapter.Fill(dt); 30 return dt; 31 32 } 33 catch (MySqlException ex) 34 { 35 Console.WriteLine(ex.Message); 36 return null; 37 } 38 finally 39 { 40 conn.Close(); 41 } 42 } 43 } 44 }