Android控件PopupWindow模仿ios底部弹窗

前言

在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); } }

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

时间： 2024-10-29 10:09:47

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

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

前言 在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群英传笔记——第三章：Android控件架构与自定义控件讲解

Android群英传笔记--第三章:Android控件架构与自定义控件讲解 真的很久没有更新博客了,三四天了吧,搬家干嘛的,心累,事件又很紧,抽时间把第三章大致的看完了,当然,我还是有一点View的基础的,可以先看下我之前写的几篇基础的View博客 Android绘图机制(一)--自定义View的基础属性和方法 Android绘图机制(二)--自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解 Android绘图机制(三)--自定义View的三种实现方式以及实战

图片-android控件自定义属性为什么引用报错呢

问题描述 android控件自定义属性为什么引用报错呢 解决方案 改成xmlns:tvtext=""http://schemas.android.com/apk/res-auto"",如果这样也不行,那就是attrs那里定义有问题 解决方案二: http://blog.csdn.net/lmj623565791/article/details/45022631 解决方案三: 检查attrs写了没 解决方案四: Android 自定义控件与属性Android自定义控件

android控件点击变背景

问题描述 android控件点击变背景 怎么在点击一个控件后改变背景呢?我说的是在不点击其他控件的时候保持背景的改变,不是点击的瞬间改变,再强调一句:不是点击的瞬间改变 解决方案 Android控件背景点击改变 解决方案二: 如果没理解错你的意思的话, 事件监听+延迟 解决方案三: 监听click事件,然后调用postDelayed 解决方案四: 用选择器selector呀,设置一下就行了 解决方案五: 开启线程延迟执行切换背景 解决方案六: 表达不清楚~~~~~

设计-Android控件如何根据屏幕大小自适应？

问题描述 Android控件如何根据屏幕大小自适应? 我想设计出这种登陆界面,后面的牌牌是一个背景图片,但是在不同大小的屏幕下,几个EditText控件不能正好在牌字上.该如何使这几个控件始终在牌子上呢? 解决方案 建议初期就是用相对布局就很好了 也就是 RelativeLayout布局.可以自己调整位置在预览里面! 解决方案二: 使用相对布局,RelativeLayout布局 解决方案三: http://yixiong89921.blog.163.com/blog/static/1325377

android 控件-android:这个控件叫什么，怎么实现的呢？

问题描述 android:这个控件叫什么,怎么实现的呢? 50C 如题,哪位朋友会呢,帮忙下吧,谢谢了. 解决方案 Android控件倒计时的实现Android 实现控件浮动效果Android Studio中Spinner控件的数据绑定实现 解决方案二: 自定义的 自定义的 自定义的 解决方案三: http://www.javaapk.com/source/6640.html,这个是仿乐动力体重设计例子,拿过来改改是可以的 解决方案四: 能说的清楚一点吗?比如这个控件有什么效果 解决方案五: 应

【Android】关于Android控件EditText的属性InputType的一些经验

关于Android控件EditText的属性InputType的一些经验   来源:http://blog.163.com/inflexible_simple/blog/static/16769468420131014382424/ 1.InputType属性在代码中的设置必须放在setSingleLine()函数之后,否则无效: 2.关于InputType属性xml与代码的对应值如下: android java代码设置EditText输入格式参数对应Description列 setInputT

cocos2d-x-cocos怎么调用Android控件并反馈控件的输入信息

问题描述 cocos怎么调用Android控件并反馈控件的输入信息 我知道可以用JNI实现JAVA和C++之间的相互调用,但是如何把JAVA的数据再反馈给Cocos呢? 解决方案 参考:http://www.tuicool.com/articles/UbaEre