封装弹性dialog框架,使用只需一行代码

作者: lkkz | 来源:发表于2017-08-02 15:06 被阅读91次

效果图

弹性弹窗.gif

效果图

使用

build.gradle中添加

compile 'com.cool:elasticdialog:1.0.0'

你要使用的地方

if(elasticDialog== null) {
            elasticDialog = new ElasticDialog(this)
                    .layout(R.layout.dialog_elastic)
                    .arcColor(Color.WHITE)
                    .duration(1000)
                    .arcHight(40);
            mRecyclerView = elasticDialog.findViewById(R.id.recyclerview);
        }

布局文件dialog_elastic

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_gravity="bottom">

    </android.support.v7.widget.RecyclerView>
</FrameLayout>

有两点需要注意：

布局文件dialog_elastic子View需要设置android:layout_gravity="bottom"属性
根布局使用FrameLayout

实现思路：

我们可以在dialog中设置的布局中做手脚，dialog的根布局使用FrameLayout,在渲染dialog的布局完成后，偷偷的添加一个背景view,放在FrameLayout的最底部，然后通过背景view的onDraw方法画view的背景,可以看到，背景view的背景是不规则的，首先想到的就是path,具体实现方式当然是贝塞尔曲线了，下面是具体步骤。

一、创建ElasticDialog

ElasticDialog是继承Dialog的

1.1在构造函数里进行相关初始化

public ElasticDialog(@NonNull Context context) {
        super(context, R.style.stlyle_dialog_transparent_bg);
        this.mContext = context;
        mArcHight = dp2px(40);//弧形的高度
        mDuration = 1000;//动画时长
        arcColor = Color.WHITE;//弧形颜色
    }

1.2设置dialog的布局和相关参数

/**
     * 设置dialog的布局
     * @param layoutId
     * @return
     */
    public ElasticDialog layout(int layoutId) {
        view = LayoutInflater.from(mContext).inflate(layoutId, null);
        setContentView(view);
        Window window = getWindow();
        window.setGravity(Gravity.BOTTOM);
        window.setWindowAnimations(R.style.style_anim_bottom_in);
        WindowManager.LayoutParams params = window.getAttributes();
        params.width = getContext().getResources().getDisplayMetrics().widthPixels;
        window.setAttributes(params);
        return this;
    }

其中看到的R.style.stlyle_dialog_transparent_bg和R.style.style_anim_bottom_in是两个主题，如下：

<!--透明背景dialog主题-->
    <style name="stlyle_dialog_transparent_bg" parent="android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>

    <!--底部弹框dialog动画主题-->
    <style name="style_anim_bottom_in">
        <item name="android:windowEnterAnimation">@anim/dialog_enter</item>
        <item name="android:windowExitAnimation">@anim/dialog_exit</item>
    </style>

1.3显示dialog

    @Override
    public void show() {
        super.show();
        addBackgroundView();//添加背景view
        doAnim();//开始动画
    }
  /**
     * 添加背景动画view
     */
    private void addBackgroundView() {
        if (view instanceof FrameLayout) {
            FrameLayout fl = (FrameLayout) view;
            View backView = fl.getChildAt(0);
            if(backView instanceof ElasticBackgroundView){//判断之前是否已经添加过背景view
                return;
            }
            fl.measure(0, 0);//为了拿到根布局测量高度
            int measuredHeight = fl.getMeasuredHeight();
            int realHight = measuredHeight + mArcHight;//根布局高度加上圆弧高度
            FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, realHight);
            backgroundView = new ElasticBackgroundView(mContext);
            backgroundView.setArcHight(mArcHight);
            backgroundView.setDuration(mDuration);
            backgroundView.setArcColor(arcColor);
            fl.addView(backgroundView, 0, layoutParams);
        }else {
            throw new IllegalArgumentException("dialog的根布局必须为FrameLayout");
        }
    }

    /**
     * 开始动画
     */
    private void doAnim() {
        if (backgroundView != null) {
            backgroundView.doStartAnimation();
        }
    }

二、绘制ElasticBackgroundView的背景

2.1初始化paint、path、动画时长

private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);
        path = new Path();

        mDuration = 1000;
    }

2.2重写onDraw方法

mArcHight为圆弧的高度，currentArcHight为动画过程中圆弧的高度，mWidth，mHight是背景View的宽高

 @Override
    protected void onDraw(Canvas canvas) {
        path.reset();
        path.moveTo(0, mArcHight);
        path.quadTo(mWidth/2,currentArcHight,mWidth, mArcHight);
        path.lineTo(mWidth,mHight);
        path.lineTo(0,mHight);
        path.close();
        canvas.drawPath(path,mPaint);
    }

2.3开启动画

public void doStartAnimation() {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(mArcHight,-mArcHight, mArcHight);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                currentArcHight = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.setDuration(mDuration);
        valueAnimator.start();
    }

完整的ElasticDialog

public class ElasticDialog extends Dialog {
    private ElasticBackgroundView backgroundView;
    private Context mContext;
    private View view;
    private int mArcHight;//顶部遗留高度,默认40dp,白色圆弧形能够达到的高度相关连,经测试40效果较好
    private long mDuration;//动画执行时间
    private int arcColor;

    public ElasticDialog(@NonNull Context context) {
        super(context, R.style.stlyle_dialog_transparent_bg);
        this.mContext = context;
        mArcHight = dp2px(40);
        mDuration = 1000;
        arcColor = Color.WHITE;
    }

    /**
     * 设置dialog的布局
     * @param layoutId
     * @return
     */
    public ElasticDialog layout(int layoutId) {
        view = LayoutInflater.from(mContext).inflate(layoutId, null);
        setContentView(view);
        Window window = getWindow();
        window.setGravity(Gravity.BOTTOM);
        window.setWindowAnimations(R.style.style_anim_bottom_in);
        WindowManager.LayoutParams params = window.getAttributes();
        params.width = getContext().getResources().getDisplayMetrics().widthPixels;
        window.setAttributes(params);
        return this;
    }


    @Override
    public void show() {
        super.show();
        addBackgroundView();
        doAnim();
    }

    /**
     * 添加背景动画view
     */
    private void addBackgroundView() {
        if (view instanceof FrameLayout) {
            FrameLayout fl = (FrameLayout) view;
            View backView = fl.getChildAt(0);
            if(backView instanceof ElasticBackgroundView){
                return;
            }
            fl.measure(0, 0);
            int measuredHeight = fl.getMeasuredHeight();
            int realHight = measuredHeight + mArcHight;
            FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, realHight);
            backgroundView = new ElasticBackgroundView(mContext);
            backgroundView.setArcHight(mArcHight);
            backgroundView.setDuration(mDuration);
            backgroundView.setArcColor(arcColor);
            fl.addView(backgroundView, 0, layoutParams);
        }else {
            throw new IllegalArgumentException("dialog的根布局必须为FrameLayout");
        }
    }

    /**
     * 开始动画
     */
    private void doAnim() {
        if (backgroundView != null) {
            backgroundView.doStartAnimation();
        }
    }

    /**
     * 设置达到的弧高
     * @param arcHight
     * @return
     */
    public ElasticDialog arcHight(int arcHight) {
        this.mArcHight = dp2px(arcHight);
        return this;
    }

    /**
     * 设置背景动画时间
     * @param duration
     * @return
     */
    public ElasticDialog duration(long duration) {
        if (duration < 0) {
            this.mDuration = 1000;
        }
        this.mDuration = duration;
        return this;
    }

    /**
     * 弧形背景颜色
     * @param color
     * @return
     */
    public ElasticDialog arcColor(int color){
        this.arcColor = color;
        return this;
    }

    /**
     * 是否可取消
     * @param cancelable
     * @return
     */
    public ElasticDialog cancelable(boolean cancelable){
        setCancelable(cancelable);
        return this;
    }


    private int dp2px(int dp){
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, mContext.getResources().getDisplayMetrics());
    }
}

完整的ElasticBackgroundView

public class ElasticBackgroundView extends View {
    private Paint mPaint;
    private Path path;
    private int mWidth;
    private int mHight;
    private int mArcHight;//顶部遗留高度,默认40dp,遗留为了画顶部白色弧形并且能够看到
    private float currentArcHight;
    private long mDuration;//动画执行时间

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

    public ElasticBackgroundView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public ElasticBackgroundView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);
        path = new Path();

        mDuration = 1000;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        path.reset();
        path.moveTo(0, mArcHight);
        path.quadTo(mWidth/2, currentArcHight,mWidth, mArcHight);
        path.lineTo(mWidth,mHight);
        path.lineTo(0,mHight);
        path.close();
        canvas.drawPath(path,mPaint);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHight = h;
    }

    public void doStartAnimation() {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(mArcHight,-mArcHight, mArcHight);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                currentArcHight = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.setDuration(mDuration);
        valueAnimator.start();
    }

    public void setArcHight(int leaveHight){
        this.mArcHight = leaveHight;
    }

    public void setDuration(long duration){
        this.mDuration = duration;
    }

    public void setArcColor(int color){
        if(mPaint != null){
            mPaint.setColor(color);
        }
    }
}

源码地址：https://github.com/lkkz/ElasticDialog
欢迎star,issuse

封装弹性dialog框架,使用只需一行代码

效果图

使用

实现思路：

一、创建ElasticDialog

1.1在构造函数里进行相关初始化

1.2设置dialog的布局和相关参数

1.3显示dialog

二、绘制ElasticBackgroundView的背景

2.1初始化paint、path、动画时长

2.2重写onDraw方法

2.3开启动画

完整的ElasticDialog

完整的ElasticBackgroundView

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读