Android UI-底部旋转菜单栏
以前都是说每逢佳节倍思亲，现在的工作状态是每到周末倍亲切，年底真的是加班加的没完没了的，也没时间写博客，也没时间学习，周末闲来无事看到一个比较有意思的旋转菜单，没事自己实战了一下感觉还不错，代码倒是没什么，主要是有两个技术点，一个就是布局文件，第二个就是动画旋转，关于布局文件是仁者见仁智者见智，只能自己研究，动画的话之前写过这方面的文章有兴趣的可以看下本人之前的博客，开始正题吧:
基础布局
先看下要实现的效果吧:
下面的主要是三个图片，一个半圆，两个版圆环，最外面的是三级菜单，中间的是二级菜单；
一级菜单布局:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<RelativeLayout
android:id=
"@+id/menuFirst"
android:layout_width=
"100dp"
android:layout_height=
"50dp"
android:layout_alignParentBottom=
"true"
android:layout_centerHorizontal=
"true"
android:background=
"@drawable/menu1"
>
<ImageView
android:id=
"@+id/icon_home"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_centerInParent=
"true"
android:background=
"@drawable/icon_home"
/>
</RelativeLayout>
|
二级菜单布局:
|
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
|
<RelativeLayout
android:id=
"@+id/menuSecond"
android:layout_width=
"170dp"
android:layout_height=
"90dp"
android:layout_alignParentBottom=
"true"
android:layout_centerHorizontal=
"true"
android:background=
"@drawable/menu2"
>
<ImageView
android:id=
"@+id/icon_search"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_alignParentBottom=
"true"
android:layout_margin=
"8dp"
android:background=
"@drawable/icon_search"
/>
<ImageView
android:id=
"@+id/icon_menu"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_centerHorizontal=
"true"
android:layout_marginTop=
"5dp"
android:background=
"@drawable/icon_menu"
/>
<ImageView
android:id=
"@+id/icon_center"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_alignParentBottom=
"true"
android:layout_alignParentRight=
"true"
android:layout_margin=
"8dp"
android:background=
"@drawable/icon_center"
/>
</RelativeLayout>
|
三级菜单布局，这个布局的时候需要注意的是左边的三个图片设置完之后，设置的是对称方向的最底部的一个图片，以此为依据搞定其他两个图标:
|
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<RelativeLayout
android:id=
"@+id/menuThird"
android:layout_width=
"270dp"
android:layout_height=
"140dp"
android:layout_alignParentBottom=
"true"
android:layout_centerHorizontal=
"true"
android:background=
"@drawable/menu3"
>
<ImageView
android:id=
"@+id/channel1"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_alignParentBottom=
"true"
android:layout_marginBottom=
"8dp"
android:layout_marginLeft=
"8dp"
android:background=
"@drawable/channel1"
/>
<ImageView
android:id=
"@+id/channel2"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_above=
"@id/channel1"
android:layout_alignLeft=
"@id/channel1"
android:layout_marginBottom=
"8dp"
android:layout_marginLeft=
"16dp"
android:background=
"@drawable/channel2"
/>
<ImageView
android:id=
"@+id/channel3"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_above=
"@id/channel2"
android:layout_alignLeft=
"@id/channel2"
android:layout_marginBottom=
"8dp"
android:layout_marginLeft=
"30dp"
android:background=
"@drawable/channel3"
/>
<ImageView
android:id=
"@+id/channel4"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_centerHorizontal=
"true"
android:layout_marginTop=
"5dp"
android:background=
"@drawable/channel4"
/>
<ImageView
android:id=
"@+id/channel7"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_alignParentBottom=
"true"
android:layout_alignParentRight=
"true"
android:layout_marginBottom=
"8dp"
android:layout_marginRight=
"8dp"
android:background=
"@drawable/channel7"
/>
<ImageView
android:id=
"@+id/channel6"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_above=
"@id/channel7"
android:layout_alignRight=
"@id/channel7"
android:layout_marginBottom=
"8dp"
android:layout_marginRight=
"20dp"
android:background=
"@drawable/channel6"
/>
<ImageView
android:id=
"@+id/channel5"
android:layout_width=
"wrap_content"
android:layout_height=
"wrap_content"
android:layout_above=
"@id/channel6"
android:layout_alignRight=
"@id/channel6"
android:layout_marginBottom=
"8dp"
android:layout_marginRight=
"30dp"
android:background=
"@drawable/channel5"
/>
</RelativeLayout>
|
实现Demo
主要实现的主要就是两个按钮，一个按钮式最底层的按钮，一个是二级菜单的按钮:
|
1
2
3
4
5
6
7
|
homeView = (ImageView) findViewById(R.id.icon_home);
menuView = (ImageView) findViewById(R.id.icon_menu);
menuFirst = (RelativeLayout) findViewById(R.id.menuFirst);
menuSecond = (RelativeLayout) findViewById(R.id.menuSecond);
menuThird = (RelativeLayout) findViewById(R.id.menuThird);
homeView.setOnClickListener(
this
);
menuView.setOnClickListener(
this
);
|
两个按钮的点击事件:
|
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
|
@Override
public
void
onClick(View v) {
// TODO Auto-generated method stub
switch
(v.getId()) {
case
R.id.icon_home:
if
(isSecond) {
MyHelper.StartAninationOut(menuSecond,
500
,
200
);
if
(isThird) {
MyHelper.StartAninationOut(menuThird,
500
,
300
);
isThird=
false
;
}
}
else
{
MyHelper.StartAninationIn(menuSecond,
500
,
300
);
}
isSecond=!isSecond;
break
;
case
R.id.icon_menu:
if
(isThird) {
MyHelper.StartAninationOut(menuThird,
500
,
200
);
isThird=
false
;
}
else
{
MyHelper.StartAninationIn(menuThird,
500
,
200
);
isThird=
true
;
}
break
;
default
:
break
;
}
}
|
两个按钮都有点击点击事件，封装一个可以主要就是淡入和淡出的效果:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
public
class
MyHelper {
public
static
void
StartAninationIn(RelativeLayout layout,
long
duratoin,
long
offset) {
// TODO Auto-generated method stub
RotateAnimation rotateAnimation=
new
RotateAnimation(
180
,
360
, layout.getWidth()/
2
, layout.getHeight());
rotateAnimation.setDuration(duratoin);
rotateAnimation.setFillAfter(
true
);
//保持旋转之后的状态
rotateAnimation.setStartOffset(offset);
//延迟加载时间
layout.startAnimation(rotateAnimation);
}
public
static
void
StartAninationOut(RelativeLayout layout,
long
duratoin,
long
offset) {
// TODO Auto-generated method stub
RotateAnimation rotateAnimation=
new
RotateAnimation(
0
,
180
, layout.getWidth()/
2
, layout.getHeight());
rotateAnimation.setDuration(duratoin);
rotateAnimation.setFillAfter(
true
);
rotateAnimation.setStartOffset(offset);
layout.startAnimation(rotateAnimation);
}
}
|
最后看下效果图:
本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4162283.html，如需转载请自行联系原作者
