2. 程式人生 > >Android 帶動畫的底部彈出檢視

Android 帶動畫的底部彈出檢視

阿新 • • 發佈：2018-12-20

最近在專案過程中，因為用到的底部彈出選擇檢視比較多，所以把之前《Android 高仿 IOS 滾輪選擇控制元件》 原始碼中的一個底部彈出動畫的效果整理了一下。先來看一下效果： 
底部彈出效果圖

先看一下我們的呼叫程式碼：

public void onClick(View view) {
        final BaseBottomView bottomView = new BaseBottomView(this, R.layout.layout_bottom);
        bottomView.findViewById(R.id.tv_content1).setOnClickListener(new
 
 View.OnClickListener() {
            @Override
            public void onClick(View view) {
                bottomView.setOnDismissListener(new OnDismissListener() {
                    @Override
                    public void onDismiss(Object o) {
                        Toast.makeText(MainActivity.this
 
, "跳轉SecondActivity", Toast.LENGTH_SHORT).show();
                        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
                        startActivity(intent);
                    }
                });
            }
        });

        bottomView.findViewById(R.id.tv_content2).setOnClickListener(new
 
 View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "選擇 content2", Toast.LENGTH_SHORT).show();
                bottomView.dismiss();
            }
        });
        bottomView.setCancelable(true);
        bottomView.show();
    }
  • 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

上面這個使我們 button 的點選事件方法，可以看到，我們要實現這個檢視彈出，主要程式碼只需要兩行， 
建立檢視：

final BaseBottomView bottomView = new BaseBottomView(this, R.layout.layout_bottom);
  • 1

顯示檢視：

bottomView.show();
  • 1

其他的就是我們去操作檢視內部的事件觸發，至於 bottomView.setCancelable(true); 這一句是控制我們的檢視是否可通過點選上面陰影區域取消當前檢視。這也可以算是一句主要程式碼，那麼這樣加起來 我們實現這麼一個彈出效果，不考慮邏輯程式碼的情況下，也就之需要三行程式碼而已，佈局不算哈。

這裡介紹一下 BaseBottomView 的兩個引數，第一個就不用說了肯定是 Context ，第二個大家肯定也知道就是我們的彈出介面佈局。 
這裡是我當前例子的彈出佈局 layout_bottom.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_content1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:onClick="onClick1"
        android:text="test content 1"
        android:textColor="#4a4a4a"
        android:textSize="16sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#e0e0e0" />

    <TextView
        android:id="@+id/tv_content2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:onClick="onClick2"
        android:text="test content 2"
        android:textColor="#4a4a4a"
        android:textSize="16sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#e0e0e0" />

    <TextView
        android:id="@+id/tv_content3"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:onClick="onClick3"
        android:text="test content 3"
        android:textColor="#4a4a4a"
        android:textSize="16sp" />

</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

我們只需要給出我們想要顯示的樣式效果，至於陰影部分，BaseBottomView 中有對應的處理，這裡就不需要我們去關心。也不用我們自己再去寫什麼自定義 PopupWindow 了。

另外，獲取檢視中的對應 View 可以直接通過 bottomView.findViewById(int id)來進行例項化操作。業務邏輯程式碼還是需要我們自己去實現的。至於 bottomView 內部的點選跳轉事件，都必須要通過 setOnDismissListener 方法來實現，以保證退出動畫結束後執行跳轉，具體用法上面有對應的程式碼。

下面我們來看一下 BaseBottomView 的整個實現程式碼：

public class BaseBottomView {
    private final FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.BOTTOM
    );

    private Context context;
    protected ViewGroup contentContainer;
    private ViewGroup decorView;//activity的根View
    private ViewGroup rootView;//附加View 的 根View

    private OnDismissListener onDismissListener;
    private boolean isDismissing;

    private Animation outAnim;
    private Animation inAnim;
    private int gravity = Gravity.BOTTOM;

    public BaseBottomView(Context context, int layoutId) {
        this.context = context;

        initViews();
        init();

        LayoutInflater.from(context).inflate(layoutId, contentContainer);
    }

    protected void initViews() {
        LayoutInflater layoutInflater = LayoutInflater.from(context);
        decorView = (ViewGroup) ((Activity) context).getWindow().getDecorView().findViewById(android.R.id.content);
        rootView = (ViewGroup) layoutInflater.inflate(R.layout.layout_basepickerview, decorView, false);
        rootView.setLayoutParams(new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT
        ));
        contentContainer = (ViewGroup) rootView.findViewById(R.id.content_container);
        contentContainer.setLayoutParams(params);
    }

    protected void init() {
        inAnim = getInAnimation();
        outAnim = getOutAnimation();
    }

    /**
     * show的時候呼叫
     *
     * @param view 這個View
     */
    private void onAttached(View view) {
        decorView.addView(view);
        contentContainer.startAnimation(inAnim);
    }

    /**
     * 新增這個View到Activity的根檢視
     */
    public void show() {
        if (isShowing()) {
            return;
        }
        onAttached(rootView);
    }

    /**
     * 檢測該View是不是已經新增到根檢視
     *
     * @return 如果檢視已經存在該View返回true
     */
    public boolean isShowing() {
        View view = decorView.findViewById(R.id.outmost_container);
        return view != null;
    }

    public void dismiss() {
        if (isDismissing) {
            return;
        }

        //消失動畫
        outAnim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                decorView.post(new Runnable() {
                    @Override
                    public void run() {
                        //從activity根檢視移除
                        decorView.removeView(rootView);
                        isDismissing = false;
                        if (onDismissListener != null) {
                            onDismissListener.onDismiss(BaseBottomView.this);
                        }
                    }
                });
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        contentContainer.startAnimation(outAnim);
        isDismissing = true;
    }

    public Animation getInAnimation() {
        int res = AnimateUtil.getAnimationResource(this.gravity, true);
        return AnimationUtils.loadAnimation(context, res);
    }

    public Animation getOutAnimation() {
        int res = AnimateUtil.getAnimationResource(this.gravity, false);
        return AnimationUtils.loadAnimation(context, res);
    }

    public BaseBottomView setOnDismissListener(OnDismissListener onDismissListener) {
        this.onDismissListener = onDismissListener;
        dismiss();
        return this;
    }

    public BaseBottomView setCancelable(boolean isCancelable) {
        View view = rootView.findViewById(R.id.outmost_container);

        if (isCancelable) {
            view.setOnTouchListener(onCancelableTouchListener);
        } else {
            view.setOnTouchListener(null);
        }
        return this;
    }


    /**
     * Called when the user touch on black overlay in order to dismiss the dialog
     */
    private final View.OnTouchListener onCancelableTouchListener = new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                dismiss();
            }
            return false;
        }
    };

    public View findViewById(int id) {
        return contentContainer.findViewById(id);
    }
  • 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
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152

BaseBottomView 對應的佈局檔案 layout_basepickerview.xml ：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:id="@+id/outmost_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:background="@color/bgColor_overlay">

    <FrameLayout
        android:id="@+id/content_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </FrameLayout>

</FrameLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

主要操作也就這些，其他的就剩下一些配置檔案了，這裡也是做一些常用整理，有興趣的可以下載 Demo 嘗試一下。

相關推薦

Android 帶動畫的底部彈出檢視

最近在專案過程中，因為用到的底部彈出選擇檢視比較多，所以把之前《Android 高仿 IOS 滾輪選擇控制元件》 原始碼中的一個底部彈出動畫的效果整理了一下。先來看一下效果：  先看一下我們的呼叫程式碼： public void onClick(View view

Android仿ios底部彈出框效果

準備： public class ActionSheet { public interface OnActionSheetSelected { void onClick(int whichButton); } private ActionShee

Android實現從底部彈出Dialog(和PopWindow實現的效果一樣)

上菜,不,上圖:       相信上圖的效果,大家在android 裝置中經常碰到.有時候進行分享操作的時候-----要求從從底部自下而上彈出.上圖中的效果**既可以通過自定義Dialog實現也可以通過自定義PopWindow來實現.**關於popWindow

Android 解決介面底部彈出dialog被虛擬按鍵遮擋一部分的問題

mDialog.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION); mDialog.getWindow().getDecorView().setOnSystemUiVisibilityCh

Android實現從底部彈出的Dialog

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

Android DialogFragment實現底部彈出選單效果

底部彈出式選單, 可以使用PopupWindow來做，也可以用自定義View來做。當然這裡採用DialogFragment來做。 DialogFragment是3.0之後引入的，使用DialogFragment，我們不用管理其生命週期，並且可以作為元件重用。比

Android開發-實現底部彈出選單欄

效果圖： activity_main: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/and

android 動畫效果 translate 詳解，包括 Dialog 上方彈出，底部彈出，中間彈出

先給出動畫效果程式碼，可以直接拿去用： 1.上方彈出: 滑入動畫（ actionsheet_dialog_in）： <translate     xmlns:android="http://schemas.android.com/apk/res/android"

android Dialog 底部彈出

param sid tde 獲取 半透明 overlay desc .get owa 、if (dialShareDialog == null) { dialShareDialog = new Dialog(context, R.style.dialog);

Android安卓自定義由底部彈出對話方塊

努力不一定立刻會有好的結果，但一定是朝著好的方向                           ——李尚龍 《你所謂的穩定，不過是在浪費生命》

微信小程式之 動畫 —— 自定義底部彈出層

wxml： <view class='buy' bindtap='showBuyModal'>立即購買</view> <!-- 點選立即購買 彈出購買遮罩層 --> <view class="cover_screen" bindtap="hideBuyModal"

微信小程序之 動畫 —— 自定義底部彈出層

modals num view radi let art time cit 點擊 wxml： <view class='buy' bindtap='showBuyModal'>立即購買</view> <!--

Android 底部彈出選擇選單ActionSheet

對於各式各樣的選擇選單彈框可以使用很多中方式來實現，下面我們來看看ActionSheet是如何實現的： 一.第三方ActionSheet實現方法： compile 'com.baoyz.actionsheet:library:1.1.4' 1.新增以上依賴，實現下面

android 底部彈出提示框的實現方式

1.android實現底部彈框的兩種實現方式： （1） 使用系統自帶對話方塊AlertDialog 實現 （2）自定義對話方塊實現  1.1使用系統自帶對話方塊AlertDialog 實現 public class MainActivity extends AppCo

Android中自定義底部彈出框ButtomDialog

先看看效果和你要的是否一樣 一 、先來配置自定義控制元件需要的資源。 1.在res資料夾下建立一個anim資料夾並建立兩個slide_in_bottom.xml、slide_out_bottom.xml檔案，負責彈框進出動畫。 <?xml version="1.0" enco

android 點選 頭像對應的 底部彈出框拍照，相簿取消 簡單實現

標準 看完這個帖子一定看看這個， 兩個結合 ， 實現  拍照 相簿 回撥 主頁面佈局  這裡對應的就是一個點選事件 實現 ， <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

Android 底部彈出Activity

網上百度了很多方案，很多都是過時的，下面介紹我的方案： 第一步：新建3個anim檔案 1 bottom_in.xml（底部彈入動畫） <?xml version="1.0" encodi

android 自定義dialog彈出和消失動畫

自定義dialog視窗，根據座標可隨意設定dialog顯示位置，實現了視窗彈出動畫 Java程式碼： package com.sunxu.org.IndividualityDialog; import android.app.Activity; import and

Android開發問題：底部彈出popwindow，會被某些手機底部的選單欄擋住

描述 正常狀態下應是下圖 而底部彈出popwindow後會出現下圖的問題： 解決方法 一句話解決問題。 //防止虛擬軟鍵盤被彈出選單遮住 popupWindow.s

android 底部彈出選單

好久沒寫筆記了，好不容易今天有空，就分享一下android底部彈出選單的效果。 主要用popupwindow來實現。 先看一下效果圖： 點選按鈕就可以建立一個底部選單了。 現在來看程式碼： 首先在res目錄下新建anim目錄，在anim目錄下建兩個