Android Control PopupWindow Imitates iOS Bottom Popup

Introduction

In H5In the hot era, many frameworks have come out with the control of bottom pop-up, in H5Called the popup menu ActionSheet, today we also come up with an imitation of an ios bottom popup, material from Apple QQ's choice of avatar function.

Main text

Without further ado, let's first see the effect diagram to be implemented today

The entire code to open PopupWindow

private void openPopupWindow(View v) {
  //Prevent repeated button presses
  if (popupWindow != null && popupWindow.isShowing()) {
    return;
  }
  //Set the PopupWindow's View
  View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
  popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
      RelativeLayout.LayoutParams.WRAP_CONTENT);
  //Set the background, this has no effect, it will report an error if not added
  popupWindow.setBackgroundDrawable(new BitmapDrawable());
  //Set to hide itself when clicking outside the popup window
  popupWindow.setFocusable(true);
  popupWindow.setOutsideTouchable(true);
  //Set the animation
  popupWindow.setAnimationStyle(R.style.PopupWindow);
  //Set the position
  popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);
  //Set the disappearance listener
  popupWindow.setOnDismissListener(this);
  //Set the click event of the PopupWindow's View
  setOnPopupViewClick(view);
  //Set background color
  setBackgroundAlpha(0.5f);
}

Step analysis:

PopupWindow layout
PopupWindow creation
PopupWindow adds animation effects
PopupWindow sets background shadow
PopupWindow listens to click events
Get the height of the NavigationBar

PopupWindow's layout: In the Layout, design the layout we need

<?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="You can upload photos to the photo wall" 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="Select from phone album" 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="Select from album" 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="16"cancel" android:textColor="#118" android:textSize="18sp" android:textStyle="bold" />
  </LinearLayout>
</LinearLayout>

The effect is:

Create PopupWindow: This creation is the same as our ordinary control creation method

//Set the PopupWindow's View
View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
        RelativeLayout.LayoutParams.WRAP_CONTENT);

Add animation effects to PopupWindow: We create an anim folder, create our out and in animation effects, and then add our animations to the style

<?xml version="1.0" encoding="utf-8"?>
!--Enter animation-->
<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"?>
!--Exit animation-->
<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"/>
!--Popup animation-->
<style name="PopupWindow"> <item name="android:windowEnterAnimation">@anim/window_in</item> <item name="android:windowExitAnimation">@anim/window_out</item> </style>

//Set the animation
popupWindow.setAnimationStyle(R.style.PopupWindow);

Set the background shadow of the PopupWindow: Set the opacity to 0 when the popup opens5, set the opacity to when the popup disappears1

//Set screen background transparency effect
public void setBackgroundAlpha(float alpha) {
  WindowManager.LayoutParams lp = getWindow().getAttributes();
  lp.alpha = alpha;
  getWindow().setAttributes(lp);
}

PopupWindow listens to click events: Listen to the click events of the controls inside our PopupWindow

//Set the click event of the PopupWindow's 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);
}

Get the height of the NavigationBar: Here we need to adapt to some phones without a NavigationBar and some phones with a NavigationBar. Here we demonstrate with the existence of a NavigationBar
int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
navigationHeight = getResources().getDimensionPixelSize(resourceId);

Set the appearance position of the PopupWindow on a phone with a NavigationBar
//Set the position
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);

Set the appearance position of the PopupWindow on a phone without a NavigationBar
//Set the position
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);

Source Code

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, "Select from phone album", Toast.LENGTH_SHORT).show();
        popupWindow.dismiss();
        break;
      case R.id.tv_pick_zone:
        Toast.makeText(this, "Select from space album", Toast.LENGTH_SHORT).show();
        popupWindow.dismiss();
        break;
      case R.id.tv_cancel:
        popupWindow.dismiss();
        break;
    }
  }
  private void openPopupWindow(View v) {
    //Prevent repeated button presses
    if (popupWindow != null && popupWindow.isShowing()) {
      return;
    }
    //Set the PopupWindow's View
    View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
    popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
        RelativeLayout.LayoutParams.WRAP_CONTENT);
    //Set the background, this has no effect, it will report an error if not added
    popupWindow.setBackgroundDrawable(new BitmapDrawable());
    //Set to hide itself when clicking outside the popup window
    popupWindow.setFocusable(true);
    popupWindow.setOutsideTouchable(true);
    //Set the animation
    popupWindow.setAnimationStyle(R.style.PopupWindow);
    //Set the position
    popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);
    //Set the disappearance listener
    popupWindow.setOnDismissListener(this);
    //Set the click event of the PopupWindow's View
    setOnPopupViewClick(view);
    //Set background color
    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);
  }
  //Set screen background transparency effect
  public void setBackgroundAlpha(float alpha) {
    WindowManager.LayoutParams lp = getWindow().getAttributes();
    lp.alpha = alpha;
    getWindow().setAttributes(lp);
  }
  @Override
  public void onDismiss() {
    setBackgroundAlpha(1);
  }
}

That's all for this article, I hope it will be helpful to everyone's learning, and I also hope everyone will support the呐喊 tutorial more.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please replace '#' with '@' when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.