PopupWindow do Android imitando a janela flutuante inferior do iOS

Introdução

No H5Neste tempo fervoroso, muitos frameworks lançaram componentes de janela de pop-up inferior, no H5Conhecido como Menu de Ação Pop-up, hoje também vamos imitar uma janela de pop-up inferior do iOS, inspirada na função de escolha de avatar do Apple QQ.

Texto principal

Sem mais delongas, vamos mostrar o efeito que vamos implementar hoje

O código completo para abrir o PopupWindow

private void openPopupWindow(View v) {
  //prevenir cliques repetidos
  if (popupWindow != null && popupWindow.isShowing()) {
    return;
  }
  //definir View do PopupWindow
  View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
  popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
      RelativeLayout.LayoutParams.WRAP_CONTENT);
  //definir fundo, isso não tem efeito, não adicionar causará erro
  popupWindow.setBackgroundDrawable(new BitmapDrawable());
  //definir ocultar ao clicar fora do popup
  popupWindow.setFocusable(true);
  popupWindow.setOutsideTouchable(true);
  //definir animação
  popupWindow.setAnimationStyle(R.style.PopupWindow);
  //definir posição
  popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);
  //definir ouvinte de desaparecimento
  popupWindow.setOnDismissListener(this);
  //definir evento de clique no View do PopupWindow
  setOnPopupViewClick(view);
  //definir cor de fundo
  setBackgroundAlpha(0.5f);
}

Análise de passos:

A disposição do PopupWindow
A criação do PopupWindow
O PopupWindow adiciona efeitos de animação
O PopupWindow define a sombra de fundo
O PopupWindow escuta eventos de clique
Obter a altura da Barra de Navegação

A disposição do PopupWindow: No Layout, desenhamos a disposição necessária

<?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="Você pode enviar fotos para a parede de fotos" 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="Escolher da galeria do telefone" 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="Escolher da galeria de espaço" 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="Cancelar" android:textColor="#118" android:textSize="}}18sp" android:textStyle="bold" />
  </LinearLayout>
</LinearLayout>

Seu efeito é:

Criação do PopupWindow: Este método de criação é o mesmo que o método de criação de controles comuns

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

Adicionar efeito de animação ao PopupWindow: Criamos uma pasta anim, criamos nossos efeitos de animação out e in, e então adicionamos nossas animações ao style

<?xml version="1.0" encoding="utf-8"?>
!--Efeito de animação de entrada-->
<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"?>
!--Efeito de animação de saída-->
<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"/>
!--Efeito de animação de popup-->
<style name="PopupWindow"> <item name="android:windowEnterAnimation">@anim/window_in</item> <item name="android:windowExitAnimation">@anim/window_out</item> </style>

//definir animação
popupWindow.setAnimationStyle(R.style.PopupWindow);

Ajuste da sombra de fundo do PopupWindow: Ao abrir a janela popup, ajuste a opacidade para 0.5, ao desaparecer, ajuste a opacidade para1

//Definir efeito de transparência do fundo da tela
public void setBackgroundAlpha(float alpha) {
  WindowManager.LayoutParams lp = getWindow().getAttributes();
  lp.alpha = alpha;
  getWindow().setAttributes(lp);
}

Ocultação de PopupWindow ao ouvir eventos de clique: Escutar eventos de clique em controles dentro do nosso PopupWindow

//definir evento de clique no View do PopupWindow
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);
}

Obter a altura do NavigationBar: Aqui é necessário ajustar para alguns telefones que não têm NavigationBar e outros que têm. Vamos demonstrar com o NavigationBar existente
int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
navigationHeight = getResources().getDimensionPixelSize(resourceId);

Para telefones com NavigationBar, ajuste a posição de aparecimento do PopupWindow
//definir posição
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);

Para telefones sem NavigationBar, ajuste a posição de aparecimento do PopupWindow
//definir posição
popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);

Código-fonte

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, "Escolher da galeria do telefone", Toast.LENGTH_SHORT).show();
        popupWindow.dismiss();
        break;
      case R.id.tv_pick_zone:
        Toast.makeText(this, "Escolher da galeria do espaço", Toast.LENGTH_SHORT).show();
        popupWindow.dismiss();
        break;
      case R.id.tv_cancel:
        popupWindow.dismiss();
        break;
    }
  }
  private void openPopupWindow(View v) {
    //prevenir cliques repetidos
    if (popupWindow != null && popupWindow.isShowing()) {
      return;
    }
    //definir View do PopupWindow
    View view = LayoutInflater.from(this).inflate(R.layout.view_popupwindow, null);
    popupWindow = new PopupWindow(view, RelativeLayout.LayoutParams.MATCH_PARENT,
        RelativeLayout.LayoutParams.WRAP_CONTENT);
    //definir fundo, isso não tem efeito, não adicionar causará erro
    popupWindow.setBackgroundDrawable(new BitmapDrawable());
    //definir ocultar ao clicar fora do popup
    popupWindow.setFocusable(true);
    popupWindow.setOutsideTouchable(true);
    //definir animação
    popupWindow.setAnimationStyle(R.style.PopupWindow);
    //definir posição
    popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);
    //definir ouvinte de desaparecimento
    popupWindow.setOnDismissListener(this);
    //definir evento de clique no View do PopupWindow
    setOnPopupViewClick(view);
    //definir cor de fundo
    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);
  }
  //Definir efeito de transparência do fundo da tela
  public void setBackgroundAlpha(float alpha) {
    WindowManager.LayoutParams lp = getWindow().getAttributes();
    lp.alpha = alpha;
    getWindow().setAttributes(lp);
  }
  @Override
  public void onDismiss() {
    setBackgroundAlpha(1);
  }
}

Isso é tudo o que há no artigo, espero que ajude no seu aprendizado, e espero que todos apoiem o tutorial Yell.

Declaração: O conteúdo deste artigo foi extraído da Internet, pertence ao respectivo proprietário, o conteúdo foi contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w3Avisos: Este conteúdo foi extraído da Internet, pertence ao respectivo proprietário, o conteúdo foi contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w