PopupWindow di Android che imita la finestra a scorrimento inferiore di iOS

Introduzione

In epoca di grande popolarità di H5, molti framework hanno rilasciato controlli di finestra a comparsa inferiore, conosciuti in H5 come ActionSheet, una sorta di menu a comparsa. Oggi proviamo a imitare una finestra a comparsa inferiore di iOS, ispirata alla funzione di selezione dell'avatar di Apple QQ.

Testo principale

Non facciamo troppe chiacchiere, diamo un'occhiata all'effetto che dobbiamo realizzare oggi

Codice di apertura dell'intero 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);
}

Analisi delle fasi:

Layout del PopupWindow
Creazione del PopupWindow
Aggiungi l'effetto animazione al PopupWindow
Imposta l'ombra di sfondo del PopupWindow
PopupWindow ascolta l'evento di clic
Ottieni l'altezza della barra di navigazione inferiore

Layout del PopupWindow: nel Layout, progettiamo la nostra layout necessaria

<?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="Puoi caricare le foto sul muro delle foto" 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="Scegli da album di telefono" 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="Scegliere dalla galleria degli spazi" 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="Annulla" android:textColor="#118" android:textSize="18sp" android:textStyle="bold" />
  </LinearLayout>
</LinearLayout>

Il suo effetto è:

Creazione di PopupWindow: il metodo di creazione è lo stesso del nostro metodo di creazione di controlli ordinari

//设置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);

Aggiungere l'effetto di animazione alla PopupWindow: creiamo una cartella anim, creiamo le nostre animazioni out e in, quindi aggiungiamo le nostre animazioni allo style

<?xml version="1.0" encoding="utf-8"?>
<!--Animazione di ingresso-->
<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"?>
<!--Animazione di uscita-->
<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"/>
<!--Animazione di finestra a comparsa-->
<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);

Impostare l'ombra di sfondo della PopupWindow: impostare l'opacità a 0.5 quando la finestra a comparsa viene aperta, impostare l'opacità a 1 quando la finestra a comparsa scompare

//Impostare l'effetto di trasparenza dello sfondo della schermata
public void setBackgroundAlpha(float alpha) {
  WindowManager.LayoutParams lp = getWindow().getAttributes();
  lp.alpha = alpha;
  getWindow().setAttributes(lp);
}

Ascoltare l'evento di clic della PopupWindow: ascoltare l'evento di clic dei controlli all'interno della nostra 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);
}

Ottieni l'altezza delNavigationBar: qui è necessario adattarsi a quei telefoni che non hannoNavigationBar e a quei telefoni che hanno, qui mostriamo con ilNavigationBar esistente
int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
navigationHeight = getResources().getDimensionPixelSize(resourceId);

Impostare la posizione di apparizione della PopupWindow sui telefoni conNavigationBar
//设置位置
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);

Impostare la posizione di apparizione della PopupWindow sui telefoni senzaNavigationBar
//设置位置
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);

Codice Sorgente

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, "Scegli da album foto del telefono", Toast.LENGTH_SHORT).show();
        popupWindow.dismiss();
        break;
      case R.id.tv_pick_zone:
        Toast.makeText(this, "Scegli da album foto dello spazio", 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);
  }
  //Impostare l'effetto di trasparenza dello sfondo della schermata
  public void setBackgroundAlpha(float alpha) {
    WindowManager.LayoutParams lp = getWindow().getAttributes();
    lp.alpha = alpha;
    getWindow().setAttributes(lp);
  }
  @Override
  public void onDismiss() {
    setBackgroundAlpha(1);
  }
}

Questo è tutto il contenuto dell'articolo, spero che sia utile per la tua apprendimento, e ti prego di supportare il tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright spetta ai rispettivi proprietari, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di copyright, invia un'e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di copyright.

Manuale di base

Ti piacerebbe anche