主流UI设计

macgg · 发表于 2013-8-28 16:27

24

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

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

点击效果图

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

1：首先我们先实现顶部，代码如下：

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

2：实现底部。底部采用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="标题内容"
         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/</font

› 智能家居 / NAS / 路由 / 开发 / 音响 › TV应用开发交流

主流UI设计

主流UI设计

相关帖子