Android Layout Learning-use framelayout and linearlayout to make the bottom navigation bar of the QQ space

"Disclaimer: This blog through learning" J Know Yu Xiau "blog and Write, Link:http://www.cnblogs.com/yc-755909659/p/4288260.html"

--------------------------------------------------------------------------------------------------------

The interface effect is as follows:

-------------------------------------------------------------------------------------------------------------

Analysis

The design of this navigation bar is written by Framelayout and LinearLayout, and we know that each framelayout has an overlay effect: (further understanding through the picture)

For this analysis, the small series took a picture:

-------------------------------------------------------------------------------------------------------------

Code

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" match_parent "> <Frame Layout android:id= "@+id/frame_content" android:layout_width= "match_parent" android:layout_height= "mat Ch_parent "android:layout_above=" @+id/framemenu "android:layout_alignparenttop=" true "> </framel ayout> <framelayout android:id= "@+id/framemenu" android:layout_width= "Match_parent" Android: layout_height= "Wrap_content" android:layout_alignparentbottom= "true" > <linearlayout Androi D:layout_width= "Match_parent" android:layout_height= "match_parent" android:background= "@color/skin_t                ABBAR_BG "android:orientation=" Horizontal "> <!--dynamic--<framelayout             Android:id= "@+id/layout_at"   Android:layout_width= "Fill_parent" android:layout_height= "Wrap_content" Android:layout_we ight= "1" > <imageview android:id= "@+id/image_at" Android:layout_ Width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_gravity= "to                    P|center "android:background=" @drawable/skin_tabbar_icon_auth_select "/> <textview                    Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content"                    Android:layout_gravity= "Bottom|center" android:text= "@string/skin_tabbar_icon_auth" Android:textsize= "12SP"/> </FrameLayout> <!--related to me-<framela Yout android:id= "@+id/layout_auth" android:layout_width= "Fill_parent" Android : layout_height= "Wrap_conTent "android:layout_weight=" 1 "> <imageview android:id=" @+id/image                    _auth "android:layout_width=" wrap_content "android:layout_height=" Wrap_content " Android:layout_gravity= "Top|center" android:src= "@drawable/skin_tabbar_icon_at_select"/ > <textview android:layout_width= "wrap_content" Android:layout_ height= "Wrap_content" android:layout_gravity= "Bottom|center" android:text= "@string/S  Kin_tabbar_icon_at "android:textcolor=" @android: Color/black "android:textsize=" 12SP " /> </FrameLayout> <!--stay white--<framelayout Android:layo            Ut_width= "Fill_parent" android:layout_height= "Wrap_content" android:layout_weight= "1" > </framelayoUt> <!--My Space--<framelayout android:id= "@+id/layout_space" Android:layout_width= "Fill_parent" android:layout_height= "Wrap_content" Android:layout_w eight= "1" > <imageview android:id= "@+id/image_space" Android:la Yout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:layout_gravit                    Y= "Top|center" android:src= "@drawable/skin_tabbar_icon_space_select"/> <textview                    Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content"                    Android:layout_gravity= "Bottom|center" android:text= "@string/skin_tabbar_icon_space" Android:textcolor= "@android: Color/black" android:textsize= "12sp"/> </framela Yout> <!--Play-<framelayout android:id= "@+id/layout_more" android:layout_width=                "Fill_parent" android:layout_height= "Wrap_content" android:layout_weight= "1" >                    <imageview android:id= "@+id/image_more" android:layout_width= "Wrap_content"                    android:layout_height= "Wrap_content" android:layout_gravity= "Top|center" android:src= "@drawable/skin_tabbar_icon_more_select"/> <textview android: Layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:layout_grav Ity= "Bottom|center" android:text= "@string/skin_tabbar_icon_more" android:textcolor= " @android: Color/black "android:textsize=" 12sp "/> </FrameLayout> </linear Layout> <liNearlayout android:layout_width= "match_parent" android:layout_height= "1px" android:backgr Ound= "@android: Color/black" > </LinearLayout> </FrameLayout> <!--middle button background--<ima Geview android:id= "@+id/toggle_btn" android:layout_width= "wrap_content" android:layout_height= "Wrap_c Ontent "android:layout_alignparentbottom=" true "android:layout_aligntop=" @+id/framemenu "Android:layo        Ut_centerinparent= "true" android:src= "@drawable/skin_tabbar_btn"/> <!--middle button--<imageview        Android:id= "@+id/plus_btn" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_alignparentbottom= "true" android:layout_aligntop= "@+id/framemenu" Android:layout_centerinpar Ent= "true" android:src= "@drawable/skin_tabbar_icon_select"/></relativelayout>

"Structure Diagram"

Android Layout Learning-use framelayout and linearlayout to make the bottom navigation bar of the QQ space