Android控制項PopupWindow模仿ios底部彈窗_Android

前言

在H5火熱的時代，許多架構都出了底部彈窗的控制項，在H5被稱為快顯功能表ActionSheet，今天我們也來模仿一個ios的底部彈窗，取材於蘋果QQ的選擇頭像功能。

本文

廢話不多說，先來個今天要實現的效果圖

整個PopupWindow的開啟代碼

private void openPopupWindow(View v) {  //防止重複按按鈕  if (popupWindow != null && popupWindow.isShowing()) {    return;  }  //設定PopupWindow的View  View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);  popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,      RelativeLayout.LayoutParams.WRAP_CONTENT);  //設定背景,這個沒什麼效果，不添加會報錯  popupWindow.setBackgroundDrawable(new BitmapDrawable());  //設定點擊彈窗外隱藏自身  popupWindow.setFocusable(true);  popupWindow.setOutsideTouchable(true);  //設定動畫  popupWindow.setAnimationStyle(R.style.PopupWindow);  //設定位置  popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);  //設定消失監聽  popupWindow.setOnDismissListener(this);  //設定PopupWindow的View點擊事件  setOnPopupViewClick(view);  //設定背景色  setBackgroundAlpha(0.5f);}

步驟分析：

PopupWindow的布局
PopupWindow的建立
PopupWindow添加動畫效果
PopupWindow設定背景陰影
PopupWindow監聽點擊事件
擷取NavigationBar的高度

PopupWindow的布局：在Layout中，設計我們需要的布局

<?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:orientation="vertical">  <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:background="@drawable/popup_shape" android:orientation="vertical">    <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="你可以將照片上傳至照片牆" android:textColor="#666" android:textSize="14sp" />    <View android:layout_width="match_parent" android:layout_height="0.1px" android:background="#888" />    <TextView android:id="@+id/tv_pick_phone" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="從手機相簿選擇" android:textColor="#118" android:textSize="18sp" />    <View android:layout_width="match_parent" android:layout_height="0.1px" android:background="#888" />    <TextView android:id="@+id/tv_pick_zone" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="從空間相簿選擇" android:textColor="#118" android:textSize="18sp" />  </LinearLayout>  <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:background="@drawable/popup_shape">    <TextView android:id="@+id/tv_cancel" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="取消" android:textColor="#118" android:textSize="18sp" android:textStyle="bold" />  </LinearLayout></LinearLayout>

其效果是：

PopupWindow的建立：這個建立與我們普通的控制項建立方法是一樣的

//設定PopupWindow的ViewView view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,        RelativeLayout.LayoutParams.WRAP_CONTENT);

PopupWindow添加動畫效果：我們建立一個anim檔案夾，建立我們的out和in動畫效果，然後在style添加我們的動畫

<?xml version="1.0" encoding="utf-8"?><!--進入動畫--><translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="100%" android:toYDelta="0" android:duration="200"/><?xml version="1.0" encoding="utf-8"?><!--退齣動畫--><translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="0" android:toYDelta="100%" android:duration="200"/><!--彈窗動畫--><style name="PopupWindow"> <item name="android:windowEnterAnimation">@anim/window_in</item> <item name="android:windowExitAnimation">@anim/window_out</item> </style>

//設定動畫
popupWindow.setAnimationStyle(R.style.PopupWindow);

PopupWindow設定背景陰影：彈窗開啟時設定透明度為0.5，彈窗消失時設定透明度為1

//設定螢幕背景透明效果public void setBackgroundAlpha(float alpha) {  WindowManager.LayoutParams lp = getWindow().getAttributes();  lp.alpha = alpha;  getWindow().setAttributes(lp);}

PopupWindow監聽點擊事件：監聽我們PopupWindow裡面控制項的點擊事件

//設定PopupWindow的View點擊事件setOnPopupViewClick(view);private void setOnPopupViewClick(View view) {  TextView tv_pick_phone, tv_pick_zone, tv_cancel;  tv_pick_phone = (TextView) view.findViewById(R.id.tv_pick_phone);  tv_pick_zone = (TextView) view.findViewById(R.id.tv_pick_zone);  tv_cancel = (TextView) view.findViewById(R.id.tv_cancel);  tv_pick_phone.setOnClickListener(this);  tv_pick_zone.setOnClickListener(this);  tv_cancel.setOnClickListener(this);}

擷取NavigationBar的高度：這裡需要適配有些手機沒有NavigationBar有些手機有，這裡以存在NavigationBar來示範
int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
navigationHeight = getResources().getDimensionPixelSize(resourceId);

對存在NavigationBar的手機上，設定其PopupWindow的出現位置
//設定位置
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);

對沒有NavigationBar的手機上，設定其PopupWindow的出現位置
//設定位置
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);

源碼

Github：https://github.com/AndroidHensen/IOSPopupWindow

public class MainActivity extends AppCompatActivity implements View.OnClickListener, PopupWindow.OnDismissListener {  private Button bt_open;  private PopupWindow popupWindow;  private int navigationHeight;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    bt_open = (Button) findViewById(R.id.bt_open);    bt_open.setOnClickListener(this);    int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");    navigationHeight = getResources().getDimensionPixelSize(resourceId);  }  @Override  public void onClick(View v) {    switch (v.getId()) {      case R.id.bt_open:        openPopupWindow(v);        break;      case R.id.tv_pick_phone:        Toast.makeText(this, "從手機相簿選擇", Toast.LENGTH_SHORT).show();        popupWindow.dismiss();        break;      case R.id.tv_pick_zone:        Toast.makeText(this, "從空間相簿選擇", Toast.LENGTH_SHORT).show();        popupWindow.dismiss();        break;      case R.id.tv_cancel:        popupWindow.dismiss();        break;    }  }  private void openPopupWindow(View v) {    //防止重複按按鈕    if (popupWindow != null && popupWindow.isShowing()) {      return;    }    //設定PopupWindow的View    View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);    popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,        RelativeLayout.LayoutParams.WRAP_CONTENT);    //設定背景,這個沒什麼效果，不添加會報錯    popupWindow.setBackgroundDrawable(new BitmapDrawable());    //設定點擊彈窗外隱藏自身    popupWindow.setFocusable(true);    popupWindow.setOutsideTouchable(true);    //設定動畫    popupWindow.setAnimationStyle(R.style.PopupWindow);    //設定位置    popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);    //設定消失監聽    popupWindow.setOnDismissListener(this);    //設定PopupWindow的View點擊事件    setOnPopupViewClick(view);    //設定背景色    setBackgroundAlpha(0.5f);  }  private void setOnPopupViewClick(View view) {    TextView tv_pick_phone, tv_pick_zone, tv_cancel;    tv_pick_phone = (TextView) view.findViewById(R.id.tv_pick_phone);    tv_pick_zone = (TextView) view.findViewById(R.id.tv_pick_zone);    tv_cancel = (TextView) view.findViewById(R.id.tv_cancel);    tv_pick_phone.setOnClickListener(this);    tv_pick_zone.setOnClickListener(this);    tv_cancel.setOnClickListener(this);  }  //設定螢幕背景透明效果  public void setBackgroundAlpha(float alpha) {    WindowManager.LayoutParams lp = getWindow().getAttributes();    lp.alpha = alpha;    getWindow().setAttributes(lp);  }  @Override  public void onDismiss() {    setBackgroundAlpha(1);  }}

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。