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

最终效果如下图,点击菜单会切换Activity,有动画效果。

从早上起床就研究这个东西,因为之前一直都直接用系统提供的几个控件,从来没搞过图片背景、嵌套布局什么的,今天是第一次,没什么经验,花了一个上午才搞定。
简单介绍一下思路,使用LinearLayout嵌套,分三部分,第一部分是顶部的标题栏,第二部分是内容,第三部分是底部菜单。参考网上的代码,一路顺风顺水搞定,但在模拟器测试时出了问题(开发时用I9000),模拟器的屏幕是HVGA的,在上面运行看不到菜单栏。这个问题困扰了很久,网上也搜不出有用的答案(说是用dip,不用px,我开始就是用dip的),最后还是自己冥思苦想解决了问题,解决方法也很简单,就是让内容fill_parent,然后菜单layout_marginTop取个负值。
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?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:

package com.BottomMenu;
 
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;
import android.widget.TextView;
 
public class main extends Activity {
	private LinearLayout home, channel, fav, search;
	TextView toptv;
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.main);
		Init();
	}
	public void Init(){
        Animation anim = AnimationUtils.loadAnimation(this,R.anim.scale);
        findViewById(R.id.toplayout).startAnimation(anim);
        //这两行是启动activity的动画效果
		home = (LinearLayout) findViewById(R.id.home);
		TextView hometv=(TextView)home.findViewById(R.id.hometv);
		hometv.setBackgroundResource(R.drawable.tab_home_select);
		home.setBackgroundResource(R.drawable.tab_two_highlight);
		toptv=(TextView)findViewById(R.id.toptv);
 
		channel = (LinearLayout) findViewById(R.id.channel);
		channel.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Intent intent=new Intent();
				intent.setClass(main.this, channel.class);
				main.this.startActivity(intent);
			}
		});
 
		fav = (LinearLayout) findViewById(R.id.fav);
		fav.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Intent intent=new Intent();
				intent.setClass(main.this, fav.class);
				main.this.startActivity(intent);
			}
		});
 
		search = (LinearLayout) findViewById(R.id.search);
		search.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Intent intent=new Intent();
				intent.setClass(main.this, search.class);
				main.this.startActivity(intent);
			}
		});
	};
}

动画效果scale.xml:

1
2
3
4
5
6
7
8
9
10
11
<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代码就不贴了,反正内容都一样,下面有代码打包供大家参考。 BottomMenu (275)

 

 

http://www.pocketdigi.com/20110225/186.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值