菜單

時間  2019-11-06
標籤 菜單 简体版
原文   原文鏈接

引用：http://my.eoe.cn/blue_rain/archive/477.htmlhtml

首先，看下效果：
111111.jpg
222222.jpgandroid

首先，看下xml文件：app

  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
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#c9c9c9" >

    <RelativeLayout
        android:id="@+id/relate_level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level3" >

        <ImageButton
            android:id="@+id/c1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="6dip"
            android:layout_marginLeft="12dip"
            android:background="@drawable/channel1" />

        <ImageButton
            android:id="@+id/c2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/c1"
            android:layout_marginBottom="12dip"
            android:layout_marginLeft="28dip"
            android:background="@drawable/channel2" />

        <ImageButton
            android:id="@+id/c3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/c2"
            android:layout_marginBottom="8dip"
            android:layout_marginLeft="6dip"
            android:layout_toRightOf="@+id/c2"
            android:background="@drawable/channel3" />

        <ImageButton
            android:id="@+id/c4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_margin="6dip"
            android:background="@drawable/channel4" />

        <ImageButton
            android:id="@+id/c5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/c6"
            android:layout_marginBottom="8dip"
            android:layout_marginRight="6dip"
            android:layout_toLeftOf="@+id/c6"
            android:background="@drawable/channel5" />

        <ImageButton
            android:id="@+id/c6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/c7"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="12dip"
            android:layout_marginRight="28dip"
            android:background="@drawable/channel6" />

        <ImageButton
            android:id="@+id/c7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="6dip"
            android:layout_marginRight="12dip"
            android:background="@drawable/channel7" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relate_level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2" >

        <ImageButton
            android:id="@+id/menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_margin="6dip"
            android:background="@drawable/icon_menu" />

        <ImageButton
            android:id="@+id/search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_margin="10dip"
            android:background="@drawable/icon_search" />

        <ImageButton
            android:id="@+id/myyouku"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="10dip"
            android:background="@drawable/icon_myyouku" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/relate_level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level1" >

        <ImageButton
            android:id="@+id/home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="10dp"
            android:background="@drawable/icon_home" />
    </RelativeLayout>

</RelativeLayout>

你們看到主要有三個RalativeLayout，就是你們看到的三層，可是關於圖片的傾斜 是怎樣實現的呢？其實是個假象，圖片是正放的，裏面圖像是傾斜的。以下圖：
33333.png
這樣大概能明白，下面就是開始動畫效果了，先看下主Activity：ide

 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
 
public class TestYoukuActivity extends Activity {
    /** Called when the activity is first created. */
    private boolean areLevel2Showing = true, areLevel3Showing = true;
    private RelativeLayout relate_level2, relate_level3;
    private ImageButton home, menu;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        findViews();
        setListener();  
    }

    private void findViews() {
        relate_level2 = (RelativeLayout) findViewById(R.id.relate_level2);
        relate_level3 = (RelativeLayout) findViewById(R.id.relate_level3);
        home = (ImageButton) findViewById(R.id.home);
        menu = (ImageButton) findViewById(R.id.menu);
    }

    private void setListener() {
        // 給大按鈕設置點擊事件
        home.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!areLevel2Showing) {
                    MyAnimation.startAnimationsIn(relate_level2, 500);
                } else {
                    if (areLevel3Showing) {
                        MyAnimation.startAnimationsOut(relate_level2, 500, 500);
                        MyAnimation.startAnimationsOut(relate_level3, 500, 0);
                        areLevel3Showing = !areLevel3Showing;
                    } else {
                        MyAnimation.startAnimationsOut(relate_level2, 500, 0);
                    }
                }
                areLevel2Showing = !areLevel2Showing;
            }
        });
        menu.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!areLevel3Showing) {
                    MyAnimation.startAnimationsIn(relate_level3, 500);
                } else {
                    MyAnimation.startAnimationsOut(relate_level3, 500, 0);
                }
                areLevel3Showing = !areLevel3Showing;
            }
        });
    }
}

應該注意到了：動畫

1
 
MyAnimation.startAnimationsIn(relate_level2, 500);

看一下這個靜態方法的實現：ui

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
public static void startAnimationsIn(ViewGroup viewgroup, int durationMillis) {
        viewgroup.setVisibility(0);
        for (int i = 0; i < viewgroup.getChildCount(); i++) {
            viewgroup.getChildAt(i).setVisibility(0);
            viewgroup.getChildAt(i).setClickable(true);
            viewgroup.getChildAt(i).setFocusable(true);
        }
        Animation animation;
        animation = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
        animation.setFillAfter(true);
        animation.setDuration(durationMillis);
        viewgroup.startAnimation(animation);
    }

RotateAnimation是畫面轉移旋轉動畫效果，看一下它的構造方法：
RotateAnimation(Context context, AttributeSet attrs)
Constructor used when a RotateAnimation is loaded from a resource.this

RotateAnimation(float fromDegrees, float toDegrees)
Constructor to use when building a RotateAnimation from code.spa

RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
Constructor to use when building a RotateAnimation from codecode

RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
Constructor to use when building a RotateAnimation from code
在這裏使用的是第四個構造方法：orm

fromDegrees：旋轉的開始角度。

toDegrees：旋轉的結束角度。

pivotXType：X軸的伸縮模式，能夠取值爲ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。

pivotXValue：X座標的伸縮值。

pivotYType：Y軸的伸縮模式，能夠取值爲ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。

pivotYValue：Y座標的伸縮值。

關於角度問題：

1
2
3
4
5
6
 
當角度爲負數——表示逆時針旋轉
                     當角度爲正數——表示順時針旋轉              
                     (負數from——to正數:順時針旋轉)   
                     (負數from——to負數:逆時針旋轉) 
                     (正數from——to正數:順時針旋轉) 
                     (正數from——to負數:逆時針旋轉)

關於pivotXValue：這一點的X座標的對象被旋轉,在指定的絕對數字0是左邊邊緣。若是pivotXType數是絕對的這個值能夠是一個絕對,另外也能夠是百分比(在1.0爲100%)。50%是x中點，100%爲右邊緣。

同理，pivotYValue：這一點的Y座標的對象被旋轉,在指定的絕對數字0是頂部邊緣。若是pivotYType數是絕對的這個值能夠是一個絕對,另外也能夠是百分比(在1.0爲100%)。50%是Y中點，100%爲下邊緣。

而後再看下調用的其餘的方法：

setFillAfter：

If fillAfter is true, the transformation that this animation performed will persist when it is finished. Defaults to false if not set. Note that this applies when using an AnimationSet to chain animations. The transformation is not applied before the AnimationSet itself starts.
若是fillAfter爲真,transformation 動畫將一直運行直到它完成。默認設置爲假。注意:這適用於當使用一個AnimationSet連鎖動畫。transformation 是不適用AnimationSet自己以前開始。

setDuration：設置動畫時間。

再看一下退出：

 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
 
// 圖標的動畫(出動畫)
    public static void startAnimationsOut(final ViewGroup viewgroup,
            int durationMillis, int startOffset) {

        Animation animation;
        animation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
        animation.setFillAfter(true);
        animation.setDuration(durationMillis);
        animation.setStartOffset(startOffset);
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation arg0) {}
            @Override
            public void onAnimationRepeat(Animation arg0) {}
            @Override
            public void onAnimationEnd(Animation arg0) {
                viewgroup.setVisibility(8);
                for (int i = 0; i < viewgroup.getChildCount(); i++) {
                    viewgroup.getChildAt(i).setVisibility(8);
                    viewgroup.getChildAt(i).setClickable(false);
                    viewgroup.getChildAt(i).setFocusable(false);
                }
            }
        });
        viewgroup.startAnimation(animation);
    }

有一個animation.setStartOffset(startOffset);是設置animation多長時間之後執行。

源碼下載地址：http://dl.vmall.com/c0hkh1m6kw

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程