android主流UI布局 (转)

发布日期:2012-11-01 08:57:50

这篇文章主要说的是android中的UI设定。先看真题效果图,说明。本程序参考新浪微博,图片为猫扑图片。

程序只有最基本的模版,没有任何内容。

UI布局

点击效果图

点击效果

这布局为顶部+中间内容+底部模式,现在很多布局都采用这种模式。或者九宫图布局

1:首先我们先实现顶部,代码如下:

 

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/main_tab_banner"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/bg_title"

        android:paddingLeft="10dip"

        android:paddingRight="10dip">

 

       

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="left|center_vertical"

            android:padding="8dip"

            android:text="返回"/>

 

       

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="标题内容"

            android:textColor="#000000"

            android:textSize="18dip"/>

 

       

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="right|center_vertical"

            android:padding="8dip"

            android:text="前进"/>

   

 

 

这里的TextView可以用一张图片或者一个按钮代替,看个人需要。

 

2:实现底部。底部采用TabHost,效果图:

 

底部

 

 

代码如下:

 

 

        android:id="@+id/main_tab"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:background="@drawable/bg_foot"

        android:gravity="center"

        android:orientation="horizontal">

 

       

            xmlns:android="http://schemas.android.com/apk/res/android"

            android:id="@+id/main_tab2"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent">

 

           

                android:layout_width="fill_parent"

                android:layout_height="fill_parent"

                android:orientation="vertical">

 

               

                    android:id="@android:id/tabcontent"

                    android:layout_width="fill_parent"

                    android:layout_height="0.0dip"

                    android:layout_weight="1.0"/>

 

               

                    android:id="@android:id/tabs"

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_weight="0.0"

                    android:visibility="gone"/>

 

                

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_gravity="bottom"

                    android:background="@drawable/bg_footbar"

                    android:gravity="center_vertical"

                    android:orientation="horizontal">

 

                   

                        android:id="@+id/radio_button1"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_zy01"

                        android:text="主页"/>

 

                   

                        android:id="@+id/radio_button2"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_dp01"

                        android:text="地盘"/>

 

                   

                        android:id="@+id/radio_button3"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_tt01"

                        android:text="贴帖"/>

 

                   

                        android:id="@+id/radio_button4"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_gd01"

                        android:text="更多"/>

               

           

       

   

 

底部有很多做法,这里只是纯模版。

 

3:把顶部和底部加起来。

 

 

        android:id="@+id/main_tab_container"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_above="@id/main_tab"

        android:layout_below="@id/main_tab_banner"

        android:background="#FFFFE0">

 

       

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:padding="30dip"

            android:text="中间内容"/>

   

最后我们的整体代码就出来了。

 

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical">

 

   

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/main_tab_banner"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/bg_title"

        android:paddingLeft="10dip"

        android:paddingRight="10dip">

 

       

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="left|center_vertical"

            android:padding="8dip"

            android:text="返回"/>

 

       

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:text="标题内容"

            android:textColor="#000000"

            android:textSize="18dip"/>

 

       

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="right|center_vertical"

            android:padding="8dip"

            android:text="前进"/>

   

 

   

        android:id="@+id/main_tab"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:background="@drawable/bg_foot"

        android:gravity="center"

        android:orientation="horizontal">

 

       

            xmlns:android="http://schemas.android.com/apk/res/android"

            android:id="@+id/main_tab2"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent">

 

           

                android:layout_width="fill_parent"

                android:layout_height="fill_parent"

                android:orientation="vertical">

 

               

                    android:id="@android:id/tabcontent"

                    android:layout_width="fill_parent"

                    android:layout_height="0.0dip"

                    android:layout_weight="1.0"/>

 

               

                    android:id="@android:id/tabs"

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_weight="0.0"

                    android:visibility="gone"/>

 

               

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_gravity="bottom"

                    android:background="@drawable/bg_footbar"

                    android:gravity="center_vertical"

                    android:orientation="horizontal">

 

                   

                        android:id="@+id/radio_button1"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_zy01"

                        android:text="主页"/>

 

                   

                        android:id="@+id/radio_button2"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_dp01"

                        android:text="地盘"/>

 

                   

                        android:id="@+id/radio_button3"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_tt01"

                        android:text="贴帖"/>

 

                   

                        android:id="@+id/radio_button4"

                        style="@style/tab_style"

                        android:layout_marginTop="2.0dip"

                        android:drawableTop="@drawable/ico_gd01"

                        android:text="更多"/>

               

            

       

   

 

   

        android:id="@+id/main_tab_container"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_above="@id/main_tab"

        android:layout_below="@id/main_tab_banner"

        android:background="#FFFFE0">

 

       

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:padding="30dip"

            android:text="中间内容"/>

   

 


styles.xml文件代码

 


  

   

  


radio_bg.xml代码

 

  xmlns:android="http://schemas.android.com/apk/res/android">