主流UI設(shè)計

macgg · 發(fā)表于 2013-8-28 16:27

24

這篇文章主要說的是android中的UI設(shè)定。先看真題效果圖，說明。本程序參考新浪微博，圖片為貓撲圖片。

程序只有最基本的模版，沒有任何內(nèi)容。

點擊效果圖

這布局為頂部+中間內(nèi)容+底部模式，現(xiàn)在很多布局都采用這種模式。或者九宮圖布局

1：首先我們先實現(xiàn)頂部，代碼如下：

這里的TextView可以用一張圖片或者一個按鈕代替，看個人需要。

2：實現(xiàn)底部。底部采用TabHost，效果圖：

代碼如下：

底部有很多做法，這里只是純模版。

3：把頂部和底部加起來。

最后我們的整體代碼就出來了。

<?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="標題內(nèi)容"
         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="中間內(nèi)容"/>
</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/</font

› 智能家居 / NAS / 路由 / 開發(fā) / 音響 › TV應用開發(fā)交流

主流UI設(shè)計

主流UI設(shè)計

相關(guān)帖子