iOS实现底部弹出PopupWindow效果 iOS改变背景透明效果

底部弹出PopupWindow,背景变为半透明效果,采用两种方式实现

先来看看运行效果图


[方式一]实现从底部弹出PopupWindow

原理:定义一个高度为wrap_content的PopupWindow布局文件,根据屏幕底部的位置显示在Bottom

1.首先定义一个高度为wrap_content的PopupWindow布局文件

<?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:gravity="center"
  android:padding="8dp"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical"
    android:background="@drawable/shape_info_bg">
    <TextView android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="8dp"
      android:gravity="center"
      android:textColor="@color/theme_blue"
      android:text="拍照"/>
    <View android:layout_width="match_parent"
      android:layout_height="0.2dp"
      android:background="@color/theme_blue"/>
    <TextView android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="8dp"
      android:gravity="center"
      android:textColor="@color/theme_blue"
      android:text="相冊"/>
  </LinearLayout>

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:padding="1dp">
    <Button
      android:id="@+id/btn_cancle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:padding="8dp"
      android:textColor="@color/theme_blue"
      android:background="@drawable/shape_info_bg"
      android:text="取消" />
  </RelativeLayout>
</LinearLayout>

2.在PopupWindow所在的Activity根布局中声明id(在弹出PopupWindow作为位置参考的相对View)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/root_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:background="@color/white">

  <Button android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="底部弹出PopupWindow"
    android:onClick="openPop"/>

   <Button android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="半透明底部PopupWindow"
    android:onClick="openPop2"/>
</LinearLayout>

3.MainActivity中点击按钮弹出PopupWindow

/** 弹出底部对话框 */
public void openPop(View view) {
  View popView = LayoutInflater.from(mContext).inflate(
      R.layout.pop_bottom, null);
  View rootView = findViewById(R.id.root_main); // 當前頁面的根佈局
  final PopupWindow popupWindow = new PopupWindow(popView,    LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);

  setBackgroundAlpha(0.5f);//设置屏幕透明度

  popupWindow.setBackgroundDrawable(new BitmapDrawable());
  popupWindow.setFocusable(true);// 点击空白处时,隐藏掉pop窗口
  // 顯示在根佈局的底部
  popupWindow.showAtLocation(rootView, Gravity.BOTTOM | Gravity.LEFT, 0,
      0);

}

4.设置背景变为半透明效果,由于PopupWindow中并未设置背景色,所以弹出时PopupWindow以外的部分显示当前Acitivity的内容,设置背景色原理通过设置当前Activity所在屏幕的透明度来达到背景透明的效果!在退出时popupWindow时,需要恢复屏幕原有透明度

popupWindow.setOnDismissListener(new OnDismissListener() {
      @Override
      public void onDismiss() {
        // popupWindow隐藏时恢复屏幕正常透明度
        setBackgroundAlpha(1.0f);
      }
    });
/**
 * 设置添加屏幕的背景透明度
 *
 * @param bgAlpha
 *      屏幕透明度0.0-1.0 1表示完全不透明
 */
public void setBackgroundAlpha(float bgAlpha) {
  WindowManager.LayoutParams lp = ((Activity) mContext).getWindow()
      .getAttributes();
  lp.alpha = bgAlpha;
  ((Activity) mContext).getWindow().setAttributes(lp);
}

[方式二]全屏PopupWindow实现底部弹出,背景半透明

原理:弹出一个全屏popupWindow,高度为match_parent,将根布局的Gravity属性设置bottom,根布局背景设置为一个半透明的颜色#36000000, 弹出时全屏的popupWindow半透明效果背景覆盖了在Activity之上 给人感觉上是popupWindow弹出后,背景变成半透明

布局文件

<?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="match_parent"
  android:padding="8dp"
  android:orientation="vertical"
  android:background="#36000000"
  android:gravity="bottom">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical"
    android:background="@drawable/shape_info_bg">
    <TextView android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="8dp"
      android:gravity="center"
      android:textColor="@color/theme_blue"
      android:text="拍照"/>
    <View android:layout_width="match_parent"
      android:layout_height="0.2dp"
      android:background="@color/theme_blue"/>
    <TextView android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="8dp"
      android:gravity="center"
      android:textColor="@color/theme_blue"
      android:text="相冊"/>
  </LinearLayout>

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:padding="1dp">
    <Button
      android:id="@+id/btn_cancle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:padding="8dp"
      android:textColor="@color/theme_blue"
      android:background="@drawable/shape_info_bg"
      android:text="取消" />
  </RelativeLayout>
</LinearLayout>

弹出方法和方式一相似,不过不用再监听popupWindow的退出事件

/**
 * 弹出底部对话框,达到背景背景透明效果
 *
 * 实现原理:弹出一个全屏popupWindow,将Gravity属性设置bottom,根背景设置为一个半透明的颜色,
 * 弹出时popupWindow的半透明效果背景覆盖了在Activity之上 给人感觉上是popupWindow弹出后,背景变成半透明
 */
public void openPop2(View view) {
  View popView = LayoutInflater.from(mContext).inflate(
      R.layout.pop_bottom_alpha, null);
  View rootView = findViewById(R.id.root_main); // 當前頁面的根佈局
  final PopupWindow popupWindow = new PopupWindow(popView,
      LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

  // 设置弹出动画
  popupWindow.setAnimationStyle(R.style.AnimationFadeBottom);
  popupWindow.setBackgroundDrawable(new BitmapDrawable());
  // 顯示在根佈局的底部
  popupWindow.showAtLocation(rootView, Gravity.BOTTOM | Gravity.LEFT, 0,
      0);
}

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

(0)

相关推荐

  • iOS中自定义弹出pickerView效果(DEMO)

    UIPickerView平常用的地方好像也不是很多,顶多就是一些需要选择的地方,这次项目需要这一个功能,我就单独写了一个简单的demo,效果图如下: 新增主页面弹出view,在主页面添加的代码 有个小问题就是第四个直接添加在主页弹出来的view好像被导航栏给覆盖了,我还没去研究,就着急的先吧功能写了.大家谅解下 最初版本 话说我终于弄了gif了,再也不要去截图每张图都发一遍了!! 这个demo呢,等于是可以拿来直接用的第三方了吧,只需要传数据就可以了,弹出的三个框显示的数据也不一样,我的封装能力

  • iOS自定义提示弹出框实现类似UIAlertView的效果

    首先来看看实现的效果图 下面话不多说,以下是实现的示例代码 #import <UIKit/UIKit.h> typedef void(^AlertResult)(NSInteger index); @interface XLAlertView : UIView @property (nonatomic,copy) AlertResult resultIndex; - (instancetype)initWithTitle:(NSString *)title message:(NSString

  • IOS开发代码分享之设置UISearchBar的背景颜色

    今天用到UISearchBar,之前网上提供的方法已经不能有效的去除掉它的背景色了,修改背景色方法如下: mySearchBar.backgroundColor = RGBACOLOR(249,249,249,1);     mySearchBar.backgroundImage = [self imageWithColor:[UIColor clearColor] size:mySearchBar.bounds.size];   //取消searchbar背景色 - (UIImage *)im

  • android底部弹出iOS7风格对话选项框(QQ对话框)--第三方开源之IOS_Dialog_Library

    先给大家展示下效果图,喜欢的朋友可以下载源码哦. 完成这个效果的是使用了 IOS_Dialog_Library 下载地址:http://xiazai.jb51.net/201509/yuanma/IOS_Dialog_Library(jb51.net) 下载后导入到Eclipse中,然后作为Library引入到自己的工程中,直接作为第三方控件使用. 测试代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/a

  • Android仿IOS底部弹出对话框

    在Android开发过程中,常常会因为感觉Android自带的Dialog的样式很丑,项目开发过程中会影响整体效果,会使得开发过程很是忧伤....(话唠时间结束!) 本文我将介绍一款开源的Dialog仿IOS底部弹窗效果IOS_Dialog_Library的使用.我将通过几个简单的示例介绍IOS_Dialog_Library.zip的使用方法. 1.IOS_Dialog_Library是开源的Dialog框架,所以首先你得下载IOS_Dialog_Library.zip包,并作为Library引

  • iOS开发中ViewController的页面跳转和弹出模态

    ViewController 页面跳转 从一个Controller跳转到另一个Controller时,一般有以下2种: 1.利用UINavigationController,调用pushViewController,进行跳转:这种采用压栈和出栈的方式,进行Controller的管理.调用popViewControllerAnimated方法可以返回. 复制代码 代码如下: PickImageViewController *ickImageViewController = [[PickImageV

  • iOS仿简书、淘宝等App的View弹出效果

    用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四个View,self.view , 图中白色VC的View rootVC.view ,白色VC上的maskView maskView , 以及弹出的popView popView .我们创建它们: self.view.backgroundColor = [UIColor blackColor]; _po

  • 高仿IOS的Android弹出框

    先看一下效果图,不过这是网上的图片. 效果不错,就借此拿来与大伙分享分享. github源码地址:https://github.com/saiwu-bigkoo/Android-AlertView. 1.怎么用:添加依赖. compile 'com.bigkoo:alertview:1.0.3' 2.实例demo(大家可以根据需要来选择自己需要的框框). package com.example.my.androidalertview; import android.app.Activity; i

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

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

  • iOS10 widget实现3Dtouch 弹出菜单

    文章将依次从以下几个问题着手,进行详细说明: 1.如何为现有的工程添加widget: 2.如何绘制UI: 3.如何调起app: 4.如何与host app共享数据. 图2 添加today的target 图3 添加today之后的工程目录 这是添加Today Extension之后的工程目录. 到这里,为现有的工程添加Today Extension算是完成了,运行程序就可以看到类似图1的简单的效果了,很简单哈. 绘制UI 图4 删除默认创建的MainInterface并修改Info.plist 这

随机推荐