تقليد نافذة PopupWindow لـ Android لتحقيق نافذة منخفضة على قاعدة iOS

مقدمة

في عصر الH5 الشائع، أنشأت العديد من الفرقام وحدات نافذة قفازية في الأسفل، وتسمى في H5 باسم ActionSheet، اليوم سنقوم بمحاكاة نافذة قفازية في أسفل iOS، مستوحاة من وظيفة اختيار الصورة الشخصية في QQ من شركة Apple.

نص المقال

لا شيء آخر يمكن أن يقال، لنبدأ بعرض النتيجة التي نريد تحقيقها اليوم

كود فتح 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的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: نقوم بإنشاء مجلد 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:
        Toas.makeText(this, ٢٢٤ ٣٢٥ ٢٢٤ ٩٢٥٤٩٥٤٧, Toast.LENGTH_SHORT).show();
        popupWindow.dismiss();
        break;
      case R.id.tv_pick_zone:
        Toas.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);
  {}
{}

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أيضًا أن تدعموا دليل الشعور.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع المالك الأصلي بحقوق الطبع والنشر، ويتم توفير المحتوى من قبل مستخدمي الإنترنت الذين يقدمون المساهمات بشكل تلقائي وغير محرر يدويًا، ويتمتع الموقع بعدم امتلاك الحقوق، ولا يتحمل أي مسؤولية قانونية. إذا وجدت محتوى مشبوهًا بحقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@'). للإبلاغ، وقدم الأدلة ذات الصلة، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.