PopupWindow 使用详解（二） Popwindow 制作常见花哨效果

2018-10-24 567

帝都几日降温，终于被撂倒了。but 只要一息尚存就得不断进步！于是，写出《PopupWindow 使用详解》的第二篇笔记，先奉上第一篇链接: 《PopupWindow 使用详解（一）中文API 文档赠送 ListPopupWindow 中文 API》。下面给大家展示一下制作的效果gif。

下面进行一个样式一个样式的肢解哈，对了，所有效果笔者都没有制作载入动画和退出动画。有需要的小伙伴可以通过这个方法 public void setAnimationStyle(int animationStyle) 进行设置,也是很简单、很常用的。

效果一、图片选取功能（带阴影）

1、布局设置

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:orientation="vertical">

        <Button
            android:id="@+id/btn_pic_photo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="1dp"
            android:background="#ffffff"
            android:text="相  册"
            android:textColor="#3c3c3c"
            android:textSize="16sp" />

        <Button
            android:id="@+id/btn_pic_camera"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="1dp"
            android:background="#ffffff"
            android:text="拍  照"
            android:textColor="#3c3c3c"
            android:textSize="16sp" />

        <Button
            android:id="@+id/btn_pic_cancel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="1dp"
            android:background="#ffffff"
            android:text="取  消"
            android:textColor="#3c3c3c"
            android:textSize="16sp" />
    </LinearLayout>
</LinearLayout>

2、Java 逻辑代码

  /**
     * 照片选择器
     */
    @SuppressLint("InflateParams")
    private void showPicSelect() {
        view = LayoutInflater.from(this).inflate(R.layout.item_pic_select, null, false);
        LinearLayout llPop = view.findViewById(R.id.ll_pic);
        Button btnCamera = view.findViewById(R.id.btn_pic_camera);
        Button btnPhoto = view.findViewById(R.id.btn_pic_photo);
        Button btnCancel = view.findViewById(R.id.btn_pic_cancel);

        btnCamera.setOnClickListener(this);
        btnPhoto.setOnClickListener(this);
        btnCancel.setOnClickListener(this);
        llPop.setOnClickListener(this);

        myPop = new PopupWindow(view, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        myPop.setBackgroundDrawable(new ColorDrawable());
        myPop.showAtLocation(rlMain, Gravity.BOTTOM, 0, 0);
    }

   @Override
    public void onBackPressed() {
        if (myPop.isShowing()) {
            myPop.dismiss();
        } else {
            super.onBackPressed();
        }
    }

3、实现思路

之前笔者看了看网上百度来的答案，实现阴影效果的思路大概是，当 PopupWindow 弹出时将 Activity 设置为半透明，但是这种思路的弊端是 Activity 透明了，你懂得，你可以在 A Activity 界面直接看到了桌面或者是 B Activity 界面的东西，很蛋疼。
笔者的思路是：为 PopupWindow 设置一个半透明的背景色，然后监听这不背景 layout 的点击事件，和物理键的返回事件。否则会出现点击无效果的现象。具体逻辑如上。

二、仿qq和微信的长按置顶删除功能

1、布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">



    <LinearLayout
        android:id="@+id/ll_qq"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="@drawable/shape_qq"
        android:orientation="horizontal"
        tools:ignore="UselessParent">

        <TextView
            android:id="@+id/tv_delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="删除"
            android:textColor="#ffffff"
            android:textSize="16sp" />

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:background="#666666" />

        <TextView
            android:id="@+id/tv_be_top"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="置顶"
            android:textColor="#ffffff"
            android:textSize="16sp" />

    </LinearLayout>
    <ImageView
        android:id="@+id/iv_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ll_qq"
        android:layout_centerHorizontal="true"
        android:background="@null"
        android:layout_marginTop="-5dp"
        android:contentDescription="@string/app_name"
        android:src="@mipmap/ic_three" />
</RelativeLayout>

2、Java 逻辑

 /**
     * 仿qq 产生水滴按钮
     */
    @SuppressLint("InflateParams")
    private void showQq() {
        view = LayoutInflater.from(this).inflate(R.layout.item_qq, null, false);
        TextView tvTop = view.findViewById(R.id.tv_be_top);
        TextView tvDelete = view.findViewById(R.id.tv_delete);
        tvDelete.setOnClickListener(this);
        tvTop.setOnClickListener(this);

        myPop = new PopupWindow(view, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        myPop.setBackgroundDrawable(new ColorDrawable());
        myPop.setOutsideTouchable(true);
        myPop.getContentView().measure(0, 0);
        myPop.showAsDropDown(cvMain, (cvMain.getWidth() - myPop.getContentView().getMeasuredWidth()) / 2,
                -(cvMain.getHeight() + myPop.getContentView().getMeasuredHeight()));
    }

3、实现思路

这个其实没什么好说的，但是需要注意的两点是：（1）、ui 一定要有的或者是自己会个ps 也行，仔细看笔者布局，有一个地方，设置 margin 属性居然用了负值否则无法保证下面的shape 背景与三角标进行无缝衔接；（2）、注意这个方法一定要设置即便是不设置值 public void setBackgroundDrawable(Drawable background) 否则会导致 public void setOutsideTouchable(boolean touchable) 这个方法不起作用，即出现点击 PopupWindow 外部区域无法隐藏 PopupWindow 的尴尬局面

三、实现悬浮图片轮播

1、布局代码

<!--布局 1-->
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#00000000"
    app:cardCornerRadius="10dp">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pop"
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:background="#48BAFF" />

</android.support.v7.widget.CardView>

<!--布局 2-->
<?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:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:contentDescription="@string/app_name"
        android:src="@mipmap/pic_1" />
</LinearLayout>

2、Java 逻辑代码

 /**
     * 轮播效果
     */
    @SuppressLint("InflateParams")
    private void showPager() {
        views = new ArrayList<>();
        view = LayoutInflater.from(this).inflate(R.layout.item_pager, null, false);
        ViewPager vpPop = view.findViewById(R.id.vp_pop);
        picView01 = LayoutInflater.from(this).inflate(R.layout.item_pop_vp_01, null, false);
        picView02 = LayoutInflater.from(this).inflate(R.layout.item_pop_vp_02, null, false);
        picView03 = LayoutInflater.from(this).inflate(R.layout.item_pop_vp_03, null, false);
        picView04 = LayoutInflater.from(this).inflate(R.layout.item_pop_vp_04, null, false);

        views.add(picView01);
        views.add(picView02);
        views.add(picView03);
        views.add(picView04);
        vpPop.setAdapter(new MyPopAdapter());

        myPop = new PopupWindow(view, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        myPop.setOutsideTouchable(true);
        //悬浮效果
        myPop.setElevation(5);
        myPop.setBackgroundDrawable(new ColorDrawable(0x00ffffff));
        myPop.showAtLocation(rlMain, Gravity.CENTER, 0, 0);
    }


  /**
     * 配置  adapter
     */
    class MyPopAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return views.size();
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
            return view == o;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            container.addView(views.get(position));
            return views.get(position);
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView(views.get(position));
        }
    }


    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (views != null) {
            views.remove(picView01);
            views.remove(picView02);
            views.remove(picView03);
            views.remove(picView04);
        }
        if (myPop.isShowing()) {
            myPop.dismiss();
        }
    }

3、实现思路及注意事项

首先，加载图片需要进行相关处理，比如说用过Picasso 或者是 Glide 等框架，当然了也可将进行自己压缩；

其次，由于为了突出美观，笔者用了一个 CardView 可以设置圆角，但是 CardView 的阴影属性失效了，为了凸显层次感可以设置 PopupWindow 的这个方法 public void setElevation(float elevation) 该方法可以是你感觉出一种悬浮的效果；

最后，没用的 view 需要进行清理，否则会留在内存哦。

四、向下弹出水滴效果

1、布局源码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/iv_beauty"
        android:layout_toEndOf="@+id/iv_beauty"
        android:src="@mipmap/ic_right" />

    <ImageView
        android:id="@+id/iv_beauty"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:background="#669"
        android:src="@mipmap/pic_5" />
</RelativeLayout>

2、Java 逻辑

  /**
     * 向下弹出
     */
    @SuppressLint("InflateParams")
    private void showDown() {
        view = LayoutInflater.from(this).inflate(R.layout.item_anywhere, null, false);

        myPop = new PopupWindow(view, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        myPop.setBackgroundDrawable(new ColorDrawable());
        myPop.setOutsideTouchable(true);
        myPop.getContentView().measure(0, 0);
        myPop.showAsDropDown(btnPopDown, -((myPop.getContentView().getMeasuredWidth() - btnPopDown.getWidth()) / 2), 0);
    }

3、注意事项

这个没什么可说的了，和上面小标题二相同，具体查看上方即可。

五、实现屏幕右侧向左弹出

1、布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/iv_beauty"
        android:layout_toEndOf="@+id/iv_beauty"
        android:src="@mipmap/ic_right" />

    <ImageView
        android:id="@+id/iv_beauty"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:background="#669"
        android:src="@mipmap/pic_5" />
</RelativeLayout>

2、Java 逻辑代码

 /**
     * 向左弹出
     */
    @SuppressLint("InflateParams")
    private void showStart() {
        view = LayoutInflater.from(this).inflate(R.layout.item_pop_start, null, false);

        myPop = new PopupWindow(view, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        myPop.setBackgroundDrawable(new ColorDrawable());
        myPop.setOutsideTouchable(true);
        myPop.getContentView().measure(0, 0);
        myPop.showAsDropDown(fabStart, -(myPop.getContentView().getMeasuredWidth()), -(fabStart.getHeight() / 2 + myPop.getContentView().getMeasuredHeight()));
    }

3、注意事项

这里比较复杂的就是 PopupWindow 的锚点位置为其寄生的控件的左下角，而 Popwindow 的起始点为左上角，但是 PopupWindow 默认不超出界面。这就导致了 PopupWindow 明明在控件则左侧，但是却无法到达自己的想要位置。
所以对于该现象，我们只能在计算偏移量的时候需要向左移动（控件长度+PopupWindow的长度 +其他长度）

六、实现需要获取焦点的控件使用

1、布局代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#00000000"
    app:cardCornerRadius="10dp">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00000000"
        android:padding="10dp">

        <TextView
            android:id="@+id/tv_name_p"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:gravity="center_vertical"
            android:text="账户："
            android:textSize="16sp" />

        <EditText
            android:layout_width="200dp"
            android:layout_height="40dp"
            android:layout_toEndOf="@+id/tv_name_p"
            android:background="@null"
            android:gravity="center_vertical"
            android:inputType="number"
            android:paddingStart="10dp"
            android:paddingEnd="10dp"
            android:singleLine="true"
            android:textSize="16sp"
            tools:text="123" />

        <TextView
            android:id="@+id/tv_password_p"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_below="@+id/tv_name_p"
            android:gravity="center_vertical"
            android:text="密码："
            android:textSize="16sp" />

        <EditText
            android:layout_width="200dp"
            android:layout_height="40dp"
            android:layout_below="@+id/tv_name_p"
            android:layout_toEndOf="@+id/tv_password_p"
            android:background="@null"
            android:gravity="center_vertical"
            android:inputType="numberPassword"
            android:paddingStart="10dp"
            android:paddingEnd="10dp"
            android:singleLine="true"
            android:textSize="16sp"
            tools:text="123" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

2、逻辑代码

 /**
     * 向右弹出 输入框
     */

    @SuppressLint("InflateParams")
    private void showEnd() {
        view = LayoutInflater.from(this).inflate(R.layout.item_end_input, null, false);

        myPop = new PopupWindow(view, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        myPop.setBackgroundDrawable(new ColorDrawable(0x00ffffff));
        myPop.setElevation(10);
        myPop.setOutsideTouchable(true);
        myPop.setFocusable(true);
        myPop.getContentView().measure(0, 0);
        myPop.showAsDropDown(fadEnd, (int) (fadEnd.getWidth() * 1.3), -((fadEnd.getHeight() + myPop.getContentView().getMeasuredHeight()) / 2));
    }

3、注意事项

这里一定要设置该方法 public void setFocusable(boolean focusable) 否则在切换EditText 的时候只是光标进行了移动，但是无法召唤软键盘。

七、总结

1、笔者认为，上面的大概可以满足比较简单的开发需求了，笔者很菜，这些已经足可以满足笔者了目前；
2、关于偏移量这个会涉及导到一些小小的计算和一点点逻辑想法，所以不要只是做 cv 战士，作为文雅的程序员，我们还是需要有点自己的想法的哈；
3、代码上传 github 地址为：PopupWindow
4、希望可以帮到你，批评和建议，望各位大佬留言，小生在这里谢过了。

微信关注我们

原文链接：https://yq.aliyun.com/articles/657709

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

安卓开发学习笔记（一）：如何用Android Stuidio导出apk文件？

一，首先，我们在菜单栏上找到这一栏：然后点击build，再点击generate apk，然后出现以下界面：由于之前我们并没有进行apk文件的生成，因此需要这个apk key做一个验证，以防您的app上线之后被别人盗用，同时证明自己对这个app的拥有权。key store path就是您app key所储存的位置，这个位置是可以自己随便填的，想让自己的app ke放在哪里就放在哪里。ley store password，是你自己设定的密码，由于个人习惯我把key store pass word 和 key password 都设成了一样的。这样的话就可以方便自己下次再进行密码的输入了。二，后面的password和前面填写的一样，certificate自己按照真实情况填写就可以了，以免引起不必要的纠纷。默认的选项则不改变。三，最后点击v1,或者v2，v1是自己的测试版本，v2是官方版本的签名，再点击finish，就可以在你所创建的app项目的build文件条目下面生成的apk了吗，传递至您的手机就可以进行运行试试了。

2018-10-25

569

目前, 个人了解的前端比较流行的框架是三个: BootStrap, React, Vue 想要为公司选一个作为接下来的前端技术研发方向, 因此作了一番调查, 有点浅见. BootStrap: 特点是栅格系统, 使用简单, 上手容易. 专为响应式页面而生. 一套代码就可以自适应平板电脑和PC. 缺点在于, 缺少一套有力的成体系的组件(当时调查的时候还没有, 现在据说有了), 我在实际使用时, 发生了作用域冲突的问题, 如果没有整理好一整套组件, 开发很累. React: 特点主要有2个: 1. 数据的单向响应.当数据发生变化的时候, React将会自动的管理UI界面更新 2. VisualDom(虚拟Dom). 由React来管理Dom树的变化, 开发者只需使用React的虚拟Dom进行开发, 页面的呈现会更快. 这个引申出了一个更大的优点: 虚拟Dom到真实Dom的映射, 是由React来控制的. 那么如果虚拟Dom映射为IOS或者Android呢? 于是React Native诞生了, 约80%的Reactive Native代...

2018-10-25

549

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

PopupWindow 使用详解（二） Popwindow 制作常见花哨效果

效果一、图片选取功能（带阴影）

1、布局设置

2、Java 逻辑代码

3、实现思路

二、仿qq和微信的长按置顶删除功能

1、布局

2、Java 逻辑

3、实现思路

三、实现悬浮图片轮播

1、布局代码

2、Java 逻辑代码

3、实现思路及注意事项

四、向下弹出水滴效果

1、布局源码

2、Java 逻辑

3、注意事项

五、实现屏幕右侧向左弹出

1、布局代码

2、Java 逻辑代码

3、注意事项

六、实现需要获取焦点的控件使用

1、布局代码

2、逻辑代码

3、注意事项

七、总结

安卓开发学习笔记（一）：如何用Android Stuidio导出apk文件？

BootStrap,React,Vue的比较

相关文章

发表评论

资源下载

优质分享App

Spring

Rocky Linux

Sublime Text

欢迎您来访！