android:layout_above="@id/xxx" --将控件置于给定ID控件之上
android:layout_below="@id/xxx" --将控件置于给定ID控件之下
android:layout_toLeftOf="@id/xxx" --将控件的右边缘和给定ID控件的左边缘对齐
android:layout_toRightOf="@id/xxx" --将控件的左边缘和给定ID控件的右边缘对齐
android:layout_alignLeft="@id/xxx" --将控件的左边缘和给定ID控件的左边缘对齐
android:layout_alignTop="@id/xxx" --将控件的上边缘和给定ID控件的上边缘对齐
android:layout_alignRight="@id/xxx" --将控件的右边缘和给定ID控件的右边缘对齐
android:layout_alignBottom="@id/xxx" --将控件的底边缘和给定ID控件的底边缘对齐
android:layout_alignParentLeft="true" --将控件的左边缘和父控件的左边缘对齐
android:layout_alignParentTop="true" --将控件的上边缘和父控件的上边缘对齐
android:layout_alignParentRight="true" --将控件的右边缘和父控件的右边缘对齐
android:layout_alignParentBottom="true" --将控件的底边缘和父控件的底边缘对齐
android:layout_centerInParent="true" --将控件置于父控件的中心位置
android:layout_centerHorizontal="true" --将控件置于水平方向的中心位置
android:layout_centerVertical="true" --将控件置于垂直方向的中心位置
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 tools:context=".MainActivity" > 6 7 <TextView 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:layout_centerHorizontal="true" 11 android:layout_centerVertical="true" 12 android:text="@string/hello_world" /> 13 14 <!-- 底部半圆黑块 --> 15 <RelativeLayout 16 android:id="@+id/level1" 17 android:layout_width="100dp" 18 android:layout_height="50dp" 19 android:layout_alignParentBottom="true" 20 android:layout_centerHorizontal="true" 21 android:background="@drawable/level1" > 22 <!-- 小房子图片 --> 23 <ImageView 24 android:id="@+id/icon_home" 25 android:layout_width="wrap_content" 26 android:layout_height="wrap_content" 27 android:layout_centerInParent="true" 28 android:background="@drawable/icon_home" /> 29 </RelativeLayout> 30 31 <!-- 中间半圆 --> 32 <RelativeLayout 33 android:id="@+id/level2" 34 android:layout_width="180dp" 35 android:layout_height="90dp" 36 android:layout_alignParentBottom="true" 37 android:layout_centerHorizontal="true" 38 android:background="@drawable/level2" > 39 <!-- 查询图标 --> 40 <ImageView 41 android:id="@+id/icon_search" 42 android:layout_width="wrap_content" 43 android:layout_height="wrap_content" 44 android:layout_alignParentBottom="true" 45 android:layout_margin="10dp" 46 android:background="@drawable/icon_search" /> 47 <!-- 三杠图标 --> 48 <ImageView 49 android:id="@+id/icon_menu" 50 android:layout_width="wrap_content" 51 android:layout_height="wrap_content" 52 android:layout_centerHorizontal="true" 53 android:layout_marginTop="5dp" 54 android:background="@drawable/icon_menu" /> 55 <!-- 倾斜感叹号 --> 56 <ImageView 57 android:id="@+id/icon_myyouku" 58 android:layout_width="wrap_content" 59 android:layout_height="wrap_content" 60 android:layout_alignParentBottom="true" 61 android:layout_alignParentRight="true" 62 android:layout_margin="10dp" 63 android:background="@drawable/icon_myyouku" /> 64 </RelativeLayout> 65 66 <!-- 顶端半圆 --> 67 <RelativeLayout 68 android:id="@+id/level3" 69 android:layout_width="280dp" 70 android:layout_height="140dp" 71 android:layout_alignParentBottom="true" 72 android:layout_centerHorizontal="true" 73 android:background="@drawable/level3" > 74 <!-- 音乐图标 --> 75 <ImageView 76 android:id="@+id/channel1" 77 android:layout_width="wrap_content" 78 android:layout_height="wrap_content" 79 android:layout_alignParentBottom="true" 80 android:layout_marginBottom="10dp" 81 android:layout_marginLeft="10dp" 82 android:background="@drawable/channel1" /> 83 <!-- 电影图标 --> 84 <ImageView 85 android:id="@+id/channel2" 86 android:layout_width="wrap_content" 87 android:layout_height="wrap_content" 88 android:layout_above="@id/channel1" 89 android:layout_alignLeft="@id/channel1" 90 android:layout_marginBottom="6dp" 91 android:layout_marginLeft="20dp" 92 android:background="@drawable/channel2" /> 93 <!-- 小猴图标 --> 94 <ImageView 95 android:id="@+id/channel3" 96 android:layout_width="wrap_content" 97 android:layout_height="wrap_content" 98 android:layout_above="@id/channel2" 99 android:layout_alignLeft="@id/channel2" 100 android:layout_marginBottom="6dp" 101 android:layout_marginLeft="30dp" 102 android:background="@drawable/channel3" /> 103 <!-- --> 104 <ImageView 105 android:id="@+id/channel4" 106 android:layout_width="wrap_content" 107 android:layout_height="wrap_content" 108 android:layout_centerHorizontal="true" 109 android:layout_marginTop="5dp" 110 android:background="@drawable/channel4" /> 111 <!-- --> 112 <ImageView 113 android:id="@+id/channel7" 114 android:layout_width="wrap_content" 115 android:layout_height="wrap_content" 116 android:layout_alignParentBottom="true" 117 android:layout_alignParentRight="true" 118 android:layout_marginBottom="10dp" 119 android:layout_marginRight="10dp" 120 android:background="@drawable/channel7" /> 121 <!-- --> 122 <ImageView 123 android:id="@+id/channel6" 124 android:layout_width="wrap_content" 125 android:layout_height="wrap_content" 126 android:layout_above="@id/channel7" 127 android:layout_alignRight="@id/channel7" 128 android:layout_marginBottom="6dp" 129 android:layout_marginRight="20dp" 130 android:background="@drawable/channel6" /> 131 <!-- --> 132 <ImageView 133 android:id="@+id/channel5" 134 android:layout_width="wrap_content" 135 android:layout_height="wrap_content" 136 android:layout_above="@id/channel6" 137 android:layout_alignRight="@id/channel6" 138 android:layout_marginBottom="6dp" 139 android:layout_marginRight="30dp" 140 android:background="@drawable/channel5" /> 141 </RelativeLayout> 142 143 </RelativeLayout>
1 package com.example.testdemo;
2
3 import android.view.animation.RotateAnimation;
4 import android.widget.RelativeLayout;
5
6 public class MyUtils {
7
8 /**
9 * 让指定的view 执行 旋转离开的动画
10 * @param view
11 */
12 public static void startAnimOut(RelativeLayout view) {
13 startAnimOut(view, 0);
14 }
15
16 /**
17 * 让指定view 延时 执行旋转离开的动画，
18 * @param offset
19 * 延时的时间
20 */
21 public static void startAnimOut(RelativeLayout view, long offset) {
22 // 默认圆为 为view的左上角， 水平向右 为 0度 顺时针旋转度数增加
23 RotateAnimation animation = new RotateAnimation(0, 180,
24 view.getWidth() / 2, view.getHeight());
25 // 设置运行的时间
26 animation.setDuration(500);
27 // 动画执行完以后，保持最后的状态
28 animation.setFillAfter(true);
29 // 设置延时执行的时间
30 animation.setStartOffset(offset);
31
32 view.startAnimation(animation);
33 }
34
35 /**
36 * 让指定的view 执行 旋转进入的动画
37 * @param view
38 */
39 public static void startAnimIn(RelativeLayout view) {
40 startAnimIn(view, 0);
41 }
42
43 /**
44 * 让指定的view 延时执行 旋转进入的动画
45 * @param i
46 * 延时的时间
47 */
48 public static void startAnimIn(RelativeLayout view, int i) {
49 // 默认圆为 为view的左上角， 水平向右 为 0度 顺时针旋转度数增加
50 RotateAnimation animation = new RotateAnimation(180, 360,
51 view.getWidth() / 2, view.getHeight());
52 // 设置运行的时间
53 animation.setDuration(500);
54 // 动画执行完以后，保持最后的状态
55 animation.setFillAfter(true);
56 // 设置延时执行的时间
57 animation.setStartOffset(i);
58 view.startAnimation(animation);
59 }
60
61 }
1 package com.example.testdemo;
2
3 import android.app.Activity;
4 import android.os.Bundle;
5 import android.view.KeyEvent;
6 import android.view.View;
7 import android.view.View.OnClickListener;
8 import android.widget.ImageView;
9 import android.widget.RelativeLayout;
10
11 public class MainActivity extends Activity implements OnClickListener {
12
13 private ImageView icon_menu;
14 private ImageView icon_home;
15
16 private RelativeLayout level1;
17 private RelativeLayout level2;
18 private RelativeLayout level3;
19 /**
20 * 判断 第3级菜单是否显示 true 为显示
21 */
22 private boolean isLevel3Show = true;
23 /**
24 * 判断 第2级菜单是否显示 true 为显示
25 */
26 private boolean isLevel2Show = true;
27 /**
28 * 判断 第1级菜单是否显示 true 为显示
29 */
30 private boolean isLevel1show = true;
31
32 @Override
33 protected void onCreate(Bundle savedInstanceState) {
34 super.onCreate(savedInstanceState);
35 setContentView(R.layout.activity_main);
36
37 icon_home = (ImageView) findViewById(R.id.icon_home);
38 icon_menu = (ImageView) findViewById(R.id.icon_menu);
39
40 level1 = (RelativeLayout) findViewById(R.id.level1);
41 level2 = (RelativeLayout) findViewById(R.id.level2);
42 level3 = (RelativeLayout) findViewById(R.id.level3);
43
44 icon_home.setOnClickListener(this);
45 icon_menu.setOnClickListener(this);
46
47 }
48
49 @Override
50 public void onClick(View v) {
51 switch (v.getId()) {
52 // 处理 menu 图标的点击事件
53 case R.id.icon_menu:
54 // 如果第3级菜单是显示状态，那么将其隐藏
55 if (isLevel3Show) {
56 // 隐藏 第3级菜单
57 MyUtils.startAnimOut(level3);
58 } else {
59 // 如果第3级菜单是隐藏状态，那么将其显示
60 MyUtils.startAnimIn(level3);
61 }
62
63 isLevel3Show = !isLevel3Show;
64
65 break;
66 // 处理 home 图标 的点击事件
67 case R.id.icon_home:
68 // 如果第2级菜单是显示状态，那么就隐藏，2，3级菜单
69 if (isLevel2Show) {
70 MyUtils.startAnimOut(level2);
71 isLevel2Show = false;
72 // 如果此时，第3级菜单也显示，那也将其隐藏
73 if (isLevel3Show) {
74 MyUtils.startAnimOut(level3, 200);
75 isLevel3Show = false;
76 }
77 } else {
78 // 如果第2级菜单是隐藏状态，那么就显示2级菜单
79 MyUtils.startAnimIn(level2);
80 isLevel2Show = true;
81 }
82 break;
83 }
84 }
85
86 /**
87 * 改变第1级菜单的状态
88 */
89 private void changeLevel1State() {
90 // 如果第1级菜单是显示状态，那么就隐藏 1，2，3级菜单
91 if (isLevel1show) {
92 MyUtils.startAnimOut(level1);
93 isLevel1show = false;
94 // 判断2级菜单是否显示
95 if (isLevel2Show) {
96 MyUtils.startAnimOut(level2, 100);
97 isLevel2Show = false;
98 // 判断3级菜单是否显示
99 if (isLevel3Show) {
100 MyUtils.startAnimOut(level3, 200);
101 isLevel3Show = false;
102 }
103 }
104 } else {
105 // 如果第1级菜单是隐藏状态，那么就显示 1，2级菜单
106 MyUtils.startAnimIn(level1);
107 isLevel1show = true;
108 MyUtils.startAnimIn(level2, 200);
109 isLevel2Show = true;
110 }
111
112 }
113
114 @Override
115 /**
116 * 响应按键的动作
117 */
118 public boolean onKeyDown(int keyCode, KeyEvent event) {
119 // 监听 menu 按键
120 if (keyCode == KeyEvent.KEYCODE_MENU) {
121 changeLevel1State();
122 }
123 return super.onKeyDown(keyCode, event);
124 }
125
126 }
DEMO下载地址：http://pan.baidu.com/s/1bnaUFhl
时间： 2024-10-12 04:40:52