Android development my Sina Weibo client-user homepage UI (5.1)

Source: Internet
Author: User

 

After the user login function is completed in the previous article, the development of the user's homepage starts. The main content of the user's homepage is the list of Weibo posts that the current login user pays attention to. This article first describes the implementation of the UI. The effect is as follows, the entire page is divided into three parts: Top, middle, and bottom. The above part is a tool bar, showing the nickname of the current login user, as well as the Weibo and refresh buttons; the middle part is the latest Weibo list that the current user is interested in. The following part is the function switching column for switching between functions.

First, create an activity named homeactivity. Java as the user's homepage, and then create a layout named Home. XML in the Res/layout directory.CodeAs follows:

 

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <linearlayout <br/> xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Id = "@ + ID/layout" <br/> Android: orientation = "vertical" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent"> </P> <p> <relativelayout <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: layout_margin = "3px"> <br/> <imageview <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: src = "@ drawable/logo_ss"> <br/> </imageview> <br/> <textview <br/> Android: id = "@ + ID/showname" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: layout_centerinparent = "true" <br/> Android: textcolor = "#343434" <br/> Android: textsize = "15px"> <br/> </textview> <br/> <imagebutton <br/> Android: id = "@ + ID/writebtn" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: layout_toleftof = "@ + ID/refreshbtn" <br/> Android: background = "@ drawable/btn_write_selector"> <br/> </imagebutton> <br/> <imagebutton <br/> Android: id = "@ + ID/refreshbtn" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: layout_alignparentright = "true" <br/> Android: layout_marginleft = "12px" <br/> Android: background = "@ drawable/btn_refresh_selector"> <br/> </imagebutton> <br/> </relativelayout> </P> <p> <linearlayout <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: background = "@ drawable/hr"> <br/> </linearlayout> </P> <p> <relativelayout <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "fill_parent"> </P> <p> <listview <br/> Android: id = "@ + ID/msglist" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "match_parent" <br/> Android: divider = "@ drawable/divider" <br/> Android: dividerheight = "2px" <br/> Android: layout_margin = "0px" <br/> Android: background = "# bbffffff" <br/> Android: cachecolorhint = "#00000000" <br/> Android: layout_above = "@ + ID/toolbarlayout" <br/> Android: fastscrollenabled = "true" <br/> Android: focusable = "true"> <br/> </listview> </P> <p> <linearlayout <br/> Android: id = "@ + ID/loadinglayout" <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: orientation = "vertical" <br/> Android: visibility = "invisible" <br/> Android: layout_centerinparent = "true"> <br/> <progressbar <br/> Android: id = "@ + ID/loading" <br/> Android: layout_width = "31px" <br/> Android: layout_height = "31px" <br/> Android: layout_gravity = "center" <br/> style = "@ style/progressstyle"> <br/> </progressbar> <br/> <textview <br/> Android: layout_width = "wrap_content" <br/> Android: layout_height = "wrap_content" <br/> Android: text = "loading" <br/> Android: textsize = "12px" <br/> Android: textcolor = "# 9c9c9c" <br/> Android: layout_gravity = "center" <br/> Android: layout_below = "@ + ID/loading"> <br/> </textview> <br/> </linearlayout> </P> <p> <linearlayout <br/> android: id = "@ + ID/toolbarlayout" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "44dip" <br/> Android: layout_alignparentbottom = "true"> <br/> </linearlayout> <br/> </relativelayout> <br/> </linearlayout>

This layout is first a vertical root linearlayout. In this root linearlayout, there are two relativelayout, and the first relativelayout is used to display the toolbar of the page, the second relativelayout is used to display the list and the function bar at the bottom. Specifically, the second relativelayout contains a linearlayout with the ID loadinglayout, which is used to display the animation in data loading. Its Android: the visibility attribute is invisible (you can also set it to gone. Difference: invisible This view still retains its position in viewgroupt and does not relayout
Gone> Invisible, but this view does not retain its position in viewgroupt. If you re-layout the view, it will replace its position. ), That is, the meaning of not displayed at the beginning. Let's take a look.

<Progressbarandroid: Id = "@ + ID/loading" Android: layout_width = "31px" Android: layout_height = "31px" Android: layout_gravity = "center" style = "@ style/progressstyle"> </progressbar>

 

This progressbar control is used to display animations. The key is style = "@ style/progressstyle". In the Res/values directory, create loadingstyles. XML with the following content:

 

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <resources> <br/> <style name = "progressstyle" width = "38" Height = "38" parent = "@ Android: style/widget. progressbar. small "> <br/> <item name =" Android: indeterminatedrawable "> @ anim/loading </item> <br/> </style> <br/> </resources>
connect r1.png-r8.png, eight different small images represent 45 degrees of rotation, and the eight images are 360 degrees of rotation. Add these images to the res/drawable-mdpi directory. Create an animation file named loading. XML in the Res/anim directory. The content is as follows:


<Textarea class = "Java" style = "width: 845px; Height: 110px; margin: 1.111px;" name = "code" readonly> <? XML version = "1.0" encoding = "UTF-8"?> <Br/> <animation-list Android: oneshot = "false" <br/> xmlns: Android = "http://schemas.android.com/apk/res/android"> <br/> <item Android: duration = "200" Android: drawable = "@ drawable/R1"/> <br/> <item Android: Duration = "200" Android: drawable = "@ drawable/R2"/> <br/> <item Android: Duration = "200" Android: drawable = "@ drawable/R3"/> <br/> <item Android: Duration = "200" Android: drawable = "@ drawable/r4"/> <br/> <item Android: Duration = "200" Android: drawable = "@ drawable/R5"/> <br/> <item Android: Duration = "200" Android: drawable = "@ drawable/R6"/> <br/> <item Android: Duration = "200" Android: drawable = "@ drawable/R7"/> <br/> <item Android: Duration = "200" Android: drawable = "@ drawable/R8"/> <br/> </animation-List> </textarea>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.