English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 所在位置
  2. 首页
  3. 经验笔记
  4. 正文

Android-Kontrollen PopupWindow imitieren ios-Boden-Dialog

前言

在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="Sie können Fotos auf die Fotowand hochladen" 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="Aus dem Telefonalbum auswählen" 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="Aus dem Galeriealbum auswählen" 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="Abbrechen" android:textColor="#118" android:textSize="18sp" android:textStyle="bold" />
  </LinearLayout>
</LinearLayout>

Der Effekt ist:


Erstellung der PopupWindow: Diese Erstellung ist wie die Erstellung unserer gewöhnlichen Steuerelemente

//设置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 hinzufügen Animationseffekt: Wir erstellen einen anim-Ordner, erstellen unsere out- und in-Animationseffekte und fügen sie dann in den style hinzu

<?xml version="1.0" encoding="utf-8"?>
!--Eingangsanimation-->
<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"?>
!--Abgangsanimation-->
<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"/>
!--Pop-up-Animation-->
<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-Effekt der Hintergrundschatten: Bei der Öffnung des Pop-ups die Transparenz auf 0 setzen.5, bei der Aufhebung des Pop-ups die Transparenz auf1

//Einstellen der Transparenz des Bildschirmhintergrunds
public void setBackgroundAlpha(float alpha) {
  WindowManager.LayoutParams lp = getWindow().getAttributes();
  lp.alpha = alpha;
  getWindow().setAttributes(lp);
}

PopupWindow auf Klickereignisse hören: Hören wir auf die Klickereignisse der Elemente innerhalb unserer 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);
}

Höhe derNavigationBar ermitteln: Hier muss angepasst werden, dass einige Handys keineNavigationBar haben und einige Handys sie haben, hier wird mit einer vorhandenenNavigationBar demonstriert
int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
navigationHeight = getResources().getDimensionPixelSize(resourceId);

Für Handys mitNavigationBar, die Position der PopupWindow einstellen
//设置位置
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);

Für Handys ohneNavigationBar, die Position der PopupWindow einstellen
//设置位置
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);
  }
  //Einstellen der Transparenz des Bildschirmhintergrunds
  public void setBackgroundAlpha(float alpha) {
    WindowManager.LayoutParams lp = getWindow().getAttributes();
    lp.alpha = alpha;
    getWindow().setAttributes(lp);
  }
  @Override
  public void onDismiss() {
    setBackgroundAlpha(1);
  }
}

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und dass Sie die Anleitung kräftig unterstützen.

Erklärung: Der Inhalt dieses Artikels stammt aus dem Internet und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetbenutzern freiwillig bereitgestellt und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Wir übernehmen keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte mit urheberrechtlichen Bedenken finden, sind Sie herzlich eingeladen, eine E-Mail an: notice#w zu senden.3Anzeige: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetbenutzern freiwillig bereitgestellt und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Wir übernehmen keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte mit urheberrechtlichen Bedenken finden, senden Sie bitte eine E-Mail an: notice#w

Grund教程
Gefällt mir