Android UI-底部旋转菜单栏

以前都是说每逢佳节倍思亲,现在的工作状态是每到周末倍亲切,年底真的是加班加的没完没了的,也没时间写博客,也没时间学习,周末闲来无事看到一个比较有意思的旋转菜单,没事自己实战了一下感觉还不错,代码倒是没什么,主要是有两个技术点,一个就是布局文件,第二个就是动画旋转,关于布局文件是仁者见仁智者见智,只能自己研究,动画的话之前写过这方面的文章有兴趣的可以看下本人之前的博客,开始正题吧:

基础布局

先看下要实现的效果吧:

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(180360, 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(0180, layout.getWidth()/2, layout.getHeight());
        rotateAnimation.setDuration(duratoin);
        rotateAnimation.setFillAfter(true);
        rotateAnimation.setStartOffset(offset);
        layout.startAnimation(rotateAnimation);
    }
 
}

 最后看下效果图:

Android UI-底部旋转菜单栏

本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/4162283.html,如需转载请自行联系原作者

上一篇:flash基础教程:帧、关键帧、空白帧概念及区别介绍


下一篇:Photoshop制作绝色古代美女签名特效