Android Dialog+ViewPager实现浮层轮播图效果

日常开发中经常有点击弹出浮层，再点击浮层任意位置，浮层消失的需求。今天为大家介绍通过Dialog+ViewPager实现浮层中带有轮播页效果。

本文GitHub源码地址
实现的具体效果如下：点击 弹出浮层2 按钮

ezgif.com-resize.gif

实现以上功能涉及以下知识点：

1.自定义Dialog
2.自定义ViewPager的切换动画
3.监听手势操作

自定义Dialog

  • 设置Dialog主题
    • 创建Dialog的子类，调用带有主题的构造方法，设置自定义主题。
  public MyDialog2(@NonNull Context context) {
        //设置自定义Dialog的主题风格
        super(context, R.style.selfDefDialog2);
    }
  • 设置自定义主题

    <style name="selfDefDialog2" parent="@android:style/Theme.Dialog">
        //设置Window背景色为透明，默认为黑色Drawable
        <item name="android:windowBackground">@android:color/transparent</item>
        //设置Window没有标题栏
        <item name="android:windowNoTitle">true</item>
        //设置背景色模糊
        <item name="android:backgroundDimEnabled">true</item>
        //设置Window是否悬浮在Activity之上，默认是true（设置原因看下文）
        <item name="android:windowIsFloating">false</item>
    </style>
  • 设置自定义样式：
    • 在Dialog的onCreate方法中设置布局，布局文件就是一个线性布局包裹一个ViewPager。
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置Dialog的显示动画
        getWindow().setWindowAnimations(R.style.popupAnimation);
        //设置Dialog布局
        setContentView(R.layout.dialog_layout2);
         ...
    }

自定义ViewPager切换动画

  • 调用ViewPager的设置页面轮播动画方法
//reverseDrawingOrder：绘制页面的顺序是否是倒序
//transformer：页面切换效果
setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)
  • 自定义轮播动画：自定义实现接口 PageTransformer类
    • 实现接口方法
// page：就是要执行动画的view
// position：取值范围是[-Infinity，+Infinity]，可见范围是[0,1)
void transformPage(View page, float position);
  • 举个例子说明下positon。ViewPager一共有三页，顺序依次是a，b，c。当前页面是a，执行操作是由a页面滑向b页面，a页面由可见变为不可见，b页面由不可见变为可见。
    • 页面a的position变化：0—>-1
    • 页面b的position变化：1—>0
    • 页面c的position变化：2—>1
      所以在屏幕上可见的范围是[0,1)，该position都是View的左边距相对屏幕的值。
  • 设置页面旋转中心点
    • 由0—>-1既页面向左移除屏幕，设置旋转的中心点为page的右下角

ViewCompat.setPivotX(page, page.getMeasuredWidth());
ViewCompat.setPivotY(page, page.getMeasuredHeight());
- 由1—>0 既页面从左进入屏幕，设置旋转的中心点为page的左下角
ViewCompat.setPivotX(page, 0);
ViewCompat.setPivotY(page, page.getMeasuredHeight());
```

  • PageTransformer的具体实现
public class MyPageTransformer implements ViewPager.PageTransformer {
    private static final float ROT_MAX = 20.0f;
    private float mRot;

    @Override
    public void transformPage(View page, float position) {
        //页面不可见
        if (position < -1) {
            Log.e("TAG [-Infinity,-1)  ", page + " , " + position + "");
            ViewCompat.setRotation(page, 0);

        }
        //页面可见：页面的左边界已划出屏幕
        else if (position < 0) {
            Log.e("TAG [-1, 0]", page + " , " + position + "");
            mRot = (ROT_MAX * position);
            ViewCompat.setPivotX(page, page.getMeasuredWidth());
            ViewCompat.setPivotY(page, page.getMeasuredHeight());
            ViewCompat.setRotation(page, mRot);
        //页面可见：页面的左边界已进入屏幕
        } else if (position < 1) {
            Log.e("TAG [0, 1]", page + " , " + position + "");
            mRot = (ROT_MAX * position);
            ViewCompat.setPivotX(page, 0);
            ViewCompat.setPivotY(page, page.getMeasuredHeight());
            ViewCompat.setRotation(page, mRot);
        }
        //页面不可见
        else {
            Log.e("TAG (1,+Infinity] ", page + " , " + position + "");
            ViewCompat.setRotation(page, 0);
        }
    }
}

监听手势操作

  • 监听手势操作是通过GestureDetector，该类可以识别多种手势操作。主要监控的操作是点击事件onSingleTapUp。
  • 自定义封装LinearLayout，对外暴露关闭页面要执行的操作。主要在事件向子View传递时先执行自定义GestureDetector的事件处理方法，如果是点击事件就执行关闭页面逻辑。
public class ClickableLinearLayout extends LinearLayout {
    private GestureDetector mGestureDetector;
    private ICloseListener mIClose;

    public ClickableLinearLayout(Context context) {
        this(context, null);
    }

    public ClickableLinearLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public void setOnCloseListener(ICloseListener listener) {
        this.mIClose = listener;
    }


    private void init() {
        mGestureDetector = new GestureDetector(getContext(), new GestureDetector.SimpleOnGestureListener() {
            @Override
            public boolean onSingleTapUp(MotionEvent ev) {
                if (mIClose != null) {
                    mIClose.close();
                }
                return true;
            }
        });
        setClickable(true);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        mGestureDetector.onTouchEvent(ev);
        return super.onInterceptTouchEvent(ev);
    }

}
  • 在Dialog中设置关闭时执行的操作
llContent.setOnCloseListener(new ICloseListener() {
            @Override
            public void close() {
                dismiss();
            }
        });

以上内容是实现功能所有知识点，下面总结下开发过程中Dialog的使用。

Dialog使用小结

  • 属性 <item name="android:windowIsFloating">false</item>

    开始给Dialog设置主题时并没有设置该属性，然后发现布局中match_parent失效。造成这个问题有以下两点原因：

    • Dialog默认该属性值是true
    • PhoneWindow根据该设置值设置布局参数
  protected ViewGroup generateLayout(DecorView decor) {
...
 mIsFloating = a.getBoolean(R.styleable.Window_windowIsFloating, false);
      ...
       if (mIsFloating) {
           setLayout(WRAP_CONTENT, WRAP_CONTENT);
           setFlags(0, flagsToUpdate);
       } else {
          setFlags(FLAG_LAYOUT_IN_SCREEN|FLAG_LAYOUT_INSET_DECOR, flagsToUpdate);
       }
...
   }

既默认mIsFloating是true，Dialog的大小就是内容的大小，match_parent失效。

  • 点击非Dialog内容区域，Dialog会自动消失。
    • 首先看下Dialog的touch事件处理方式：
protected boolean mCancelable = true;
//touch事件处理
public boolean onTouchEvent(@NonNull MotionEvent event) {
        if (mCancelable && mShowing && mWindow.shouldCloseOnTouch(mContext, event)) {
            cancel();
            return true;
        }
        
        return false;
    }
  • Window的shouldCloseOnTouch
public boolean shouldCloseOnTouch(Context context, MotionEvent event) {
        if (mCloseOnTouchOutside && event.getAction() == MotionEvent.ACTION_DOWN
                && isOutOfBounds(context, event) && peekDecorView() != null) {
            return true;
        }
        return false;
    }

以上可知当点击一个显示的Dialog非内容区时mCancelable是true ，mShowing是true, 也满足Window的shouldCloseOnTouch方法，所以会执行cancel方法（内容既dismiss）。

同理返回键可以让Dialog消失，主要是监听onKeyUp事件确定按键为返回键，然后执行cancel方法。

  • 取消默认点击背景区域和返回键Dialog消失
    • 取消默认点击背景消失操作：
Dialog:setCanceledOnTouchOutside(false);

该方法主要设置Window的变量mCloseOnTouchOutside为false，该变量在上面介绍的shouldCloseOnTouch中使用并返回false，所以不会让Dialog执行到cancel方法。

  • 取消返回键消失操作：
    自定义OnKeylistener，监听返回键并在创建Dialog时注册上自己的OnKeyListener。

以上就是本文全部内容，欢迎所有善意的交流和指正！_

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,956评论 25赞 709
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 135,099评论 19赞 139
  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 6,662评论 0赞 17
  • 名思教育初中奥数
    学习数学，尤其是奥数，部分同学会有一些畏难情绪，其实我们真正的理解学习的过程和本质，学习也就有乐趣的多了。 一：学...
    七七丶七月的雨阅读 242评论 0赞 0
  • 拿什么来对抗你的“床重力”
    这是一股难以抗拒的力量，却能让你挣扎纠结甚至有了先破罐子破摔舒服了再说。梦想能够对抗你的“床重力”吗？ 前段时间刷...
    花柚豆阅读 335评论 0赞 0