Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to achieve smobiler imitating app filtering page". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Prototype diagram:

Create a form

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

And drag two Panel into the form

Panel1 is used to place search boxes, and panel2 is used to place "comprehensive ranking", "highest sales", "closest", "filter" buttons and listview1.

Panel1.Height setting 40 focus panel2.Flex setting 1

Implement the search box

Set the panel1.Layout settings in the image above, Relative,panel1.Direction settings, Row,panel1.Padding settings (6, 6, 6, 6, and 6), and panel1.Size to (0, 40).

Drag imageButton into panel1

ImageButton6.ImagtType sets FontIcon

ImageButton6.ResourceID setting "angle-left"

ImageButton6.Flex Settings 1

ImageButton6.IconColor sets Silver.

Write this.Close () in the click event of imageButton6

Then drag panel3 into panel1

Panel3.BorderRadius Settings 4

Panel3.Direction sets Row

Panel3.ItemAlign sets Center

Panel3.Layout sets Relative

Panel3.Touchable sets true

Panel3.BackColor sets WhiteSmoke

Panel3.Flex setting 6.

Add fonticon control to panel3

FontIcon1.Location Settings (6. 0)

FontIcon1.Size Settings (155.15)

FontIcon1.ForeColor sets Gainsboro

FontIcon1.Resource setting "search"

Add the Label control to panel2, and the Name of the Label control sets KeyLab

KeyLab.Size Settings (0Phone0)

KeyLab.ForeColor sets Gainsboro

KeyLab.Location settings (126.0p0p0p0p0pl 0)

KeyLab.Text sets "Qinghe"

Finally, drag imageButton7 into panel1

ImageButton7.ImagtType sets FontIcon

ImageButton7.ResourceID setting "crosshairs"

ImageButton7.Flex Settings 1

ImageButton7.IconColor sets Silver.

Place filter button

Panel4.Direction settings Row,Layout settings Relative,Padding settings (1210 0pm 1210 0), Height settings 40. Then place all four ImageButton,Flex properties in panel4 and set them to 1.

ImageButton1.ImageDirection sets Right

ImageButton1.ImageType setting "FontIcon"

ImageButton1.ResourceID setting "angel-down"

ImageButton1.Text sets "sharing"

ImageButton1.ImgTextRatio Settings (2pc8)

ImageButton2.ImageDirection sets Right

ImageButton2.ImageType setting "FontIcon"

ImageButton2.ResourceID setting "angel-down"

ImageButton2.Text sets "location"

ImageButton2.ImgTextRatio Settings (2pc8)

ImageButton3.ImageDirection sets Right

ImageButton3.ImageType setting "FontIcon"

ImageButton3.ResourceID setting "angel-down"

ImageButton3.Text sets "rent"

ImageButton3.ImgTextRatio Settings (2pc8)

ImageButton4.ImageDirection sets Right

ImageButton4.ImageType setting "FontIcon"

ImageButton4.ResourceID setting "angle-down"

ImageButton4.Text sets "filter"

ImageButton4.ImgTextRatio Settings (2pc8)

ImageButton5.ImageDirection sets Right

ImageButton5.ImageType setting "FontIcon"

ImageButton5.ResourceID setting "arrows-v"

ImageButton5.ImgTextRatio Settings (3pc7)

Create SmobilerUserControl

Create a SmobilerUserControl, set the file name to ZRSelectLayout, set ZRSelectLayout.Layout to Relative,BackColor, set White

The panel1 above is used to implement the search box, and the panel4 is used to place the filter button, with the same steps as in the previous section, followed by two panel named mianpanel and panel3. Mianpanel.Layout sets Relative,Flex setting 1, which is used to place filter items.

Panel3.Layout setting Relative,Direction setting Row,Height setting 46 Magi padding setting (6 padding 6). Place two more button,Flex settings 1 and 2 in the panel3. Button1.Text setting "clear", BackColor setting Silver, button2.Text setting "viewing", BackColor setting orange.

This completes the designer part, and the code part, please see git.

Realize the effect

This is the end of the content of "how to achieve smobiler imitating app filtering pages". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.