android主流UI布局

这篇文章主要说的是android中的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">






源码下载http://115.com/file/bhqy968k# Test.7z.建议用400*800分辨率测试

转载请注明出处：小左程序 http://xzuo.cnblogs.com/