android主流UI布局

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

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

UI布局

点击效果图

点击效果

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

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

<FrameLayout
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">

<TextView
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
="返回"/>

<TextView
android:layout_width="wrap_content"
android:layout_height
="wrap_content"
android:layout_gravity
="center"
android:text
="标题内容"
android:textColor
="#000000"
android:textSize
="18dip"/>

<TextView
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
="前进"/>
</FrameLayout>

 

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

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

底部

代码如下:

 <LinearLayout
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">

<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id
="@+id/main_tab2"
android:layout_width
="fill_parent"
android:layout_height
="fill_parent">

<LinearLayout
android:layout_width="fill_parent"
android:layout_height
="fill_parent"
android:orientation
="vertical">

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width
="fill_parent"
android:layout_height
="0.0dip"
android:layout_weight
="1.0"/>

<TabWidget
android:id="@android:id/tabs"
android:layout_width
="fill_parent"
android:layout_height
="wrap_content"
android:layout_weight
="0.0"
android:visibility
="gone"/>

<RadioGroup
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">

<RadioButton
android:id="@+id/radio_button1"
style
="@style/tab_style"
android:layout_marginTop
="2.0dip"
android:drawableTop
="@drawable/ico_zy01"
android:text
="主页"/>

<RadioButton
android:id="@+id/radio_button2"
style
="@style/tab_style"
android:layout_marginTop
="2.0dip"
android:drawableTop
="@drawable/ico_dp01"
android:text
="地盘"/>

<RadioButton
android:id="@+id/radio_button3"
style
="@style/tab_style"
android:layout_marginTop
="2.0dip"
android:drawableTop
="@drawable/ico_tt01"
android:text
="贴帖"/>

<RadioButton
android:id="@+id/radio_button4"
style
="@style/tab_style"
android:layout_marginTop
="2.0dip"
android:drawableTop
="@drawable/ico_gd01"
android:text
="更多"/>
</RadioGroup>
</LinearLayout>
</TabHost>
</LinearLayout>


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

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

 <LinearLayout
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">

<TextView
android:id="@+id/textView1"
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:padding
="30dip"
android:text
="中间内容"/>
</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width
="fill_parent"
android:layout_height
="fill_parent"
android:orientation
="vertical">

<FrameLayout
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">

<TextView
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
="返回"/>

<TextView
android:layout_width="wrap_content"
android:layout_height
="wrap_content"
android:layout_gravity
="center"
android:text
="标题内容"
android:textColor
="#000000"
android:textSize
="18dip"/>

<TextView
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
="前进"/>
</FrameLayout>

<LinearLayout
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">

<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id
="@+id/main_tab2"
android:layout_width
="fill_parent"
android:layout_height
="fill_parent">

<LinearLayout
android:layout_width="fill_parent"
android:layout_height
="fill_parent"
android:orientation
="vertical">

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width
="fill_parent"
android:layout_height
="0.0dip"
android:layout_weight
="1.0"/>

<TabWidget
android:id="@android:id/tabs"
android:layout_width
="fill_parent"
android:layout_height
="wrap_content"
android:layout_weight
="0.0"
android:visibility
="gone"/>

<RadioGroup
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">

<RadioButton
android:id="@+id/radio_button1"
style
="@style/tab_style"
android:layout_marginTop
="2.0dip"
android:drawableTop
="@drawable/ico_zy01"
android:text
="主页"/>

<RadioButton
android:id="@+id/radio_button2"
style
="@style/tab_style"
android:layout_marginTop
="2.0dip"
android:drawableTop
="@drawable/ico_dp01"
android:text
="地盘"/>

<RadioButton
android:id="@+id/radio_button3"
style
="@style/tab_style"
android:layout_marginTop
="2.0dip"
android:drawableTop
="@drawable/ico_tt01"
android:text
="贴帖"/>

<RadioButton
android:id="@+id/radio_button4"
style
="@style/tab_style"
android:layout_marginTop
="2.0dip"
android:drawableTop
="@drawable/ico_gd01"
android:text
="更多"/>
</RadioGroup>
</LinearLayout>
</TabHost>
</LinearLayout>

<LinearLayout
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">

<TextView
android:id="@+id/textView1"
android:layout_width
="wrap_content"
android:layout_height
="wrap_content"
android:padding
="30dip"
android:text
="中间内容"/>
</LinearLayout>

</RelativeLayout>

styles.xml文件代码

<?xml version="1.0" encoding="UTF-8"?>
<resources>

<style name="tab_style">
<item name="android:textSize">9.0dip</item>
<item name="android:ellipsize">middle</item>
<item name="android:gravity">center</item>
<item name="android:background">@drawable/radio_bg</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">2.0dip</item>
<item name="android:button">@null</item>
<item name="android:singleLine">true</item>
<item name="android:layout_weight">1.0</item>
</style>

</resources>

radio_bg.xml代码

<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/home_btn_bg_s"/>
<item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s"/>
<item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/home_btn_bg_d"/>

</selector>

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

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




 

posted @ 2011-11-11 13:03  左浪国  阅读(17903)  评论(9编辑  收藏  举报