smobiler imitation Jingdong app search page

The JD app search interface is shown in the following figure:

See git for the complete code: https://github.com/comsmobiler/BlogsCode/blob/master/Source/BlogsCode_SmobilerForm/Forms/JDSearch.cs

Create a form

Create a smobilerForm, set the file name to JDSearch, set the Layout of the form to Relative, and then set the Statusbar property of the form

And drag Panel and ListView into the form, Panel.Height is set to 40, Listview.Flex is set to 1, and the template class of Listview is set to ListLayout

Implement the search box

Set the panel1.Layout of the above figure to Relative, panel1.Direction to Row, panel1.Padding to (6,6,6,6), and panel1.Size to (0,40).

In panel1 dragged imageButton1 in ,

imageButton1.ImagtType sets FontIcon,

imageButton1.ResourceID设置” angle-left” ,

imageButton1.Size setting (36,30).

Write this.Close() in the click event of imageButton1;

Then drag panel2 into panel1,

panel2.BorderRadius is set to 12.

panel2.Direction sets Row,

panel2.ItemAlign set Center,

panel2.Layout set Relative,

panel2.Touchable is set to true,

panel2.BackColor设置WhiteSmoke，

panel2.Magrin settings(6,0,0,0),

panel2.Flex setting 1.

In panel2 added fonticon in control,

fontIcon1.Location setting(6,0),

fontIcon1.Size setting(15,15),

fontIcon1.ForeColor sets Gainsboro,

fontIcon1.Resource setting "search"

fontIcon.Size setting (15,15),

Add the Label control to panel2, the Name of the Label control is set to KeyLab,

KeyLab.Flex settings 1

KeyLab.ForeColor settings Gainsboro

KeyLab.Location settings (6,0,0,0)

KeyLab.Margin setting (6,0,0,0)

KeyLab.Padding setting (4,0,0,0)

KeyLab.Text set "outdoor backpack"

Add ImageButton control to panel2,

imageButton2.IconColor设置Gray

imageButton2.Loaction setting(12,0)

imageButton2.Margin setting(0,0,06,0)

imageButton2.ResourceID set "instagram"

imageButton2.Size setting (35,30)

Create SmobilerUserControl

Create a SmobilerUserControl, set the file name to JDLayout, set JDLayout.Layout to Relative, BackColor to White, and Flex to 1

Panel1 in the above figure is used to implement the search box. The steps are the same as before, except that KeyLab in JDLayout is changed to TextBox control, and finally two panels are dragged into JDLayout, named hisPanel and disPanel respectively. The Size settings of these two Panels (0 ,0). This completes the designer part.

Achieve effect