Android UI设计 屏幕底部的菜单栏 动画切换Activity

替换后:最终效果如下图,点击菜单会切换Activity,有动画效果。 从早上起床就研究这个东西，因为之前一直都直接用系统提供的几个控件，从来没搞过图片背景、嵌套布局什么的，今天是第一次，没什么经验，花了一个上午才搞定。 简单介绍一下思路，使用LinearLayout嵌套，分三部分，第一部分是顶部的标题栏，第二部分是内容，第三部分是底部菜单。参考网上的代码，一路顺风顺水搞定，但在模拟器测试时出了问题（开发时用I9000），模拟器的屏幕是HVGA的，在上面运行看不到菜单栏。这个问题困扰了很久，网上也搜不出有用的答案（说是用dip，不用px，我开始就是用dip的），最后还是自己冥思苦想解决了问题，解决方法也很简单，就是让内容fill_parent，然后菜单layout_marginTop取个负值。 2011年7月18日更新：其实上面的问题可以用相对布局RelativeLayout解决，很简单，具体用法自己搜索一下吧，有时间我会写篇 main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:gravity="clip_horizontal"
    android:layout_height="fill_parent" android:id="@+id/toplayout">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="fill_parent"
        android:layout_height="30dip" android:background="@drawable/header"
        android:gravity="center">
        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:id="@+id/toptv"
            android:gravity="center" android:textSize="20dip"
            android:layout_gravity="center" android:text="@string/home"/>
    </LinearLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="fill_parent"
        android:layout_height="fill_parent">
                <TextView android:layout_width="wrap_content"
            android:gravity="center" android:textSize="20dip"
            android:layout_gravity="center" android:text="@string/home" android:layout_height="fill_parent"/>
    </LinearLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="fill_parent" android:layout_marginTop="-50dip"
        android:layout_height="50dip" android:gravity="bottom" android:background="@drawable/header">
        <include layout="@layout/foot" />
    </LinearLayout>
</LinearLayout>

foot.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="80dip"
        android:layout_height="80dip" android:id="@+id/home"
        android:gravity="center_horizontal"
        >
        <TextView android:layout_width="wrap_content"
            android:layout_height="50dip"
            android:gravity="center" android:paddingTop="29dip"
            android:background="@drawable/tab_home"
            android:id="@+id/hometv"			
             />
    </LinearLayout>
    <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"  android:src="@drawable/line" />
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="80dip"
        android:layout_height="wrap_content" android:gravity="center_horizontal"
        android:id="@+id/channel">
        <TextView android:layout_width="wrap_content"
            android:layout_height="50dip"
            android:gravity="center" android:paddingTop="29dip"
             android:background="@drawable/tab_channel" android:id="@+id/channeltv" />
    </LinearLayout>
    <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"  android:src="@drawable/line" />
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="80dip" android:id="@+id/fav"
        android:layout_height="wrap_content" android:gravity="center_horizontal" >
        <TextView android:layout_width="wrap_content"
            android:layout_height="50dip"
            android:gravity="center" android:paddingTop="29dip"
             android:background="@drawable/tab_fav" android:id="@+id/favtv" />
    </LinearLayout>
    <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"  android:src="@drawable/line" />
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="80dip" android:id="@+id/search"
        android:layout_height="wrap_content" android:gravity="center_horizontal">
        <TextView android:layout_width="wrap_content"
            android:layout_height="50dip"
            android:gravity="center" android:paddingTop="29dip"
             android:background="@drawable/tab_search" android:id="@+id/searchtv"/>
    </LinearLayout>
</LinearLayout>

main.java: 动画效果scale.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:interpolator="@android:anim/decelerate_interpolator"
        android:fromXScale="0.0" 
        android:toXScale="1.0" 
        android:fromYScale="0.0"
        android:toYScale="1.0" 
        android:pivotX="50%" 
        android:pivotY="50%"
        android:fillAfter="true" 
        android:duration="300" />
</set>

其他几个activity代码就不贴了，反正内容都一样，下面有代码打包供大家参考。 [download id=”11”]