Android控件PopupWindow模仿ios底部弹窗_Android

前言

在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="你可以将照片上传至照片墙" 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:
        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);
  }

  //设置屏幕背景透明效果
  public void setBackgroundAlpha(float alpha) {
    WindowManager.LayoutParams lp = getWindow().getAttributes();
    lp.alpha = alpha;
    getWindow().setAttributes(lp);
  }

  @Override
  public void onDismiss() {
    setBackgroundAlpha(1);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ios
， android
， popupwindow
弹窗
popupwindow底部弹出、popupwindow底部显示、popupwindow底部滑出、底部popupwindow、popupwindow 屏幕底部，以便于您获取更多的相关知识。

时间： 2024-09-11 16:52:29

Android控件PopupWindow模仿ios底部弹窗_Android的相关文章

Android控件PopupWindow模仿ios底部弹窗

前言 在H5火热的时代,许多框架都出了底部弹窗的控件,在H5被称为弹出菜单ActionSheet,今天我们也来模仿一个ios的底部弹窗,取材于苹果QQ的选择头像功能. 正文 废话不多说,先来个今天要实现的效果图 整个PopupWindow的开启代码 private void openPopupWindow(View v) { //防止重复按按钮 if (popupWindow != null && popupWindow.isShowing()) { return; } //设置Popup

Android控件之ScrollView用法实例分析_Android

本文实例讲述了Android控件之ScrollView用法.分享给大家供大家参考.具体如下: ScrollView滚动视图是指当拥有很多内容,屏幕显示不完时,需要通过滚动跳来显示的视图. ScrollView只支持垂直滚动. 以下为案例 main.xml布局文件: <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android

Android控件系列之CheckBox使用介绍_Android

学习目的: 1.掌握在Android中如何建立CheckBox 2.掌握CheckBox的常用属性 3.掌握CheckBox选中状态变换的事件(监听器) CheckBox简介: CheckBox和Button一样,也是一种古老的控件,它的优点在于,不用用户去填写具体的信息,只需轻轻点击,缺点在于只有"是"和"否"两种情况,但我们往往利用它的这个特性,来获取用户的一些信息. 如一个身份表单中,常常让用户填写"是否已经结婚",显然让用户去填写&quo

Android控件之Gallery用法实例分析_Android

本文实例讲述了Android控件之Gallery用法.分享给大家供大家参考.具体如下: Gallery组件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能有限地显示指定的图像.也就是说,如果为Gallery组件指定了10张图像,那么当Gallery组件显示到第10张时,就不会再继续显示了.这虽然在大多数时候没有什么关系,但在某些情况下,我们希望图像显示到最后一张时再重第1张开始显示,也就是循环显示.要实现这种风格的Gallery组件,就需要对Gallery的Adapter对象进行

Android控件Chronometer定时器的实现方法_Android

Chronometer是一个简单的定时器,你可以给它一个开始时间,并以此定时,或者如果你不给它一个开始时间,它将会使用你的时间通话开始.默认情况下它会显示在当前定时器的值的形式"分:秒"或"H:MM:SS的",或者可以使用的Set(字符串)格式的定时器值到一个任意字符串 1.重要属性 android:format:定义时间的格式如:hh:mm:ss 2.重要方法 setBase(long base):设置倒计时定时器 setFormat(String format)

Android控件系列之Toast使用介绍_Android

Toast英文含义是吐司,在Android中,它就像烘烤机里做好的吐司弹出来,并持续一小段时间后慢慢消失 Toast也是一个容器,可以包含各种View,并承载着它们显示. 使用场景: 1.需要提示用户,但又不需要用户点击"确定"或者"取消"按钮. 2.不影响现有Activity运行的简单提示. 用法: 1.可以通过构造函数初始化: 复制代码 代码如下: //初始化Toast Toast toast = new Toast(this); //设置显示时间,可以选择To

Android控件之ImageView用法实例分析_Android

本文实例讲述了Android控件之ImageView用法.分享给大家供大家参考.具体如下: ImageView控件是一个图片控件,负责显示图片. 以下模拟手机图片查看器 目录结构: main.xml布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android控件之GridView用法实例分析_Android

本文实例讲述了Android控件之GridView用法.分享给大家供大家参考.具体如下: GridView是一项显示二维的viewgroup,可滚动的网格.一般用来显示多张图片. 以下模拟九宫图的实现,当鼠标点击图片时会进行相应的跳转链接. 目录结构如下: main.xml布局文件,存放GridView控件 <?xml version="1.0" encoding="utf-8"?> <!-- android:numColumns="au

Android控件之ProgressBar用法实例分析_Android

本文实例讲述了Android控件之ProgressBar用法.分享给大家供大家参考.具体如下: ProgressBar位于android.widget包下,其继承于View,主要用于显示一些操作的进度.应用程序可以修改其长度表示当前后台操作的完成情况.因为进度条会移动,所以长时间加载某些资源或者执行某些耗时的操作时,不会使用户界面失去响应.ProgressBar类的使用非常简单,只需将其显示到前台,然后启动一个后台线程定时更改表示进度的数值即可. 以下ProgressBar跟Handle结合,模