Android Animation實戰之屏幕底部彈出PopupWindow

原文鏈接（建議跳轉）：Android Animation實戰之屏幕底部彈出PopupWindow

我們仿寫一個這種效果的實例吧： 

1、我們首先定義一下，彈出窗口的頁面佈局組件：take_photo_pop.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:id="@+id/pop_layout"
        android:background="#ffffff"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/iv_mall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@android:color/transparent"
                android:src="@mipmap/ic_launcher"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/iv_mall"
                android:orientation="vertical">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:layout_margin="2dp"
                    android:text="¥ 599"
                    android:textColor="#ff0000"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:layout_margin="2dp"
                    android:text="中科智慧康復診儀20項指標"
                    android:textColor="#000"/>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_margin="2dp"
                    android:layout_height="wrap_content">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="15sp"
                        android:layout_marginRight="15dp"
                        android:text="銷量：95"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:textSize="15sp"
                        android:text="庫存：150"/>
                </LinearLayout>
            </LinearLayout>

        </RelativeLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#9e9e9e"/>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000"
                android:text="購買數量"
                android:textSize="18sp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="－      ＋"
                android:textSize="20sp"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10dp"/>
        </RelativeLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#9e9e9e"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="此處用於展示商品規格參數"/>
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#9e9e9e"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:layout_margin="20dp"
            android:gravity="center"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="10dp"
                android:textSize="20sp"
                android:background="#F6F6F6"
                android:text="加入購物車"/>
            <TextView
                android:id="@+id/btn_cancel"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:gravity="center"
                android:background="#2090fe"
                android:padding="10dp"
                android:text="立即購買"/>
        </LinearLayout>
    </LinearLayout>

• 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

• 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

2、現在定義動畫，要知道該Popupwindow出現時是從頁面底部向上滑動，消失時是從上向下滑動消失,，所以我們需要定義兩個動畫文件：

• 1、退出動畫pop_exit_anim.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
  <translate 
    android:duration="200" 
    android:fromYDelta="0" 
    android:toYDelta="50%p" /> 
  <alpha 
    android:duration="200" 
    android:fromAlpha="1.0" 
    android:toAlpha="0.0" /> 
</set>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 2、顯示動畫pop_enter_anim.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 

  <translate 
    android:duration="200" 
    android:fromYDelta="100%p" 
    android:toYDelta="0" /> 
  <alpha 
    android:duration="200" 
    android:fromAlpha="0.0" 
    android:toAlpha="1.0" /> 
</set>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

3、自定義彈出框Popupwindow：TakePhotoPopWin

public class TakePhotoPopWin extends PopupWindow {

    private Context mContext;

    private View view;

    private TextView btn_cancel;


    public TakePhotoPopWin(Context mContext, View.OnClickListener itemsOnClick) {

        this.view = LayoutInflater.from(mContext).inflate(R.layout.take_photo_pop, null);

//        btn_take_photo = (Button) view.findViewById(R.id.btn_take_photo);
//        btn_pick_photo = (Button) view.findViewById(R.id.btn_pick_photo);
        btn_cancel = (TextView) view.findViewById(R.id.btn_cancel);
        // 取消按鈕
        btn_cancel.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                // 銷燬彈出框
                dismiss();
            }
        });
        // 設置按鈕監聽
//        btn_pick_photo.setOnClickListener(itemsOnClick);
//        btn_take_photo.setOnClickListener(itemsOnClick);

        // 設置外部可點擊
        this.setOutsideTouchable(true);
        // mMenuView添加OnTouchListener監聽判斷獲取觸屏位置如果在選擇框外面則銷燬彈出框
        this.view.setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event) {

                int height = view.findViewById(R.id.pop_layout).getTop();

                int y = (int) event.getY();
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    if (y < height) {
                        dismiss();
                    }
                }
                return true;
            }
        });


    /* 設置彈出窗口特徵 */
        // 設置視圖
        this.setContentView(this.view);
        // 設置彈出窗體的寬和高
        this.setHeight(RelativeLayout.LayoutParams.WRAP_CONTENT);
        this.setWidth(RelativeLayout.LayoutParams.MATCH_PARENT);

        // 設置彈出窗體可點擊
        this.setFocusable(true);

        // 實例化一個ColorDrawable顏色爲半透明
        ColorDrawable dw = new ColorDrawable(0xb0000000);
        // 設置彈出窗體的背景
        this.setBackgroundDrawable(dw);

        // 設置彈出窗體顯示時的動畫，從底部向上彈出
        this.setAnimationStyle(R.style.take_photo_anim);

    }
}

• 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

• 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

4、給Popupwindow指定開啓和關閉動畫：take_photo_anim style

<style name="take_photo_anim" parent="android:Animation"> 
    <item name="android:windowEnterAnimation">@anim/pop_enter_anim</item> 
    <item name="android:windowExitAnimation">@anim/pop_exit_anim</item> 
</style> 

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

5、就這麼幾步，一個可以從屏幕底部滑動彈出的組件，我們還需要進行一些設置監聽

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void showPopFormBottom(View view) {
        TakePhotoPopWin takePhotoPopWin = new TakePhotoPopWin(this, onClickListener);
//        設置Popupwindow顯示位置（從底部彈出）
        takePhotoPopWin.showAtLocation(findViewById(R.id.main_view), Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL, 0, 0);
        params = getWindow().getAttributes();
        //當彈出Popupwindow時，背景變半透明
        params.alpha=0.7f;
        getWindow().setAttributes(params);
        //設置Popupwindow關閉監聽，當Popupwindow關閉，背景恢復1f
        takePhotoPopWin.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                params = getWindow().getAttributes();
                params.alpha=1f;
                getWindow().setAttributes(params);
            }
        });

//        takePhotoPopWin.lis
    }

• 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

• 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