自定义view————广告弹窗

最新推荐文章于 2021-05-25 14:29:09 发布
最新推荐文章于 2021-05-25 14:29:09 发布
阅读量257 收藏
点赞数
文章标签： 移动开发 ui
原文链接：https://juejin.im/post/598c488651882548b31b4676
版权

今天给大家带来自定义view————广告弹窗，效果图中的照片文字都是随便找的，实际项目中根据UI的设计稍微修改修改基本上就能达到预想的效果了(注：女神刘亦菲的图是好好找的！！！)

效果图

效果图看完了，接下来分析一下实现过程，首先整体是继承Dialog去实现的，组合自定义view达到预想效果，倒计时是一个画圈圈的过程，接下来详细讲解吧

画给倒计时的圈圈

一个背景色的底盘drawCircle()，一个画圈圈drawArc(),一个文字的显示，今天这里的文字显示采取了一个新的实现方式StaticLayout(android中处理文字换行的一个工具类)

//画底盘
        canvas.drawCircle(width / 2, height / 2, min / 2, circlePaint);
        //画边框
        RectF rectF;
        if (width > height) {
            rectF = new RectF(width / 2 - min / 2 + borderWidth / 2, 0 + borderWidth / 2, width / 2 + min / 2 - borderWidth / 2, height - borderWidth / 2);
        } else {
            rectF = new RectF(borderWidth / 2, height / 2 - min / 2 + borderWidth / 2, width - borderWidth / 2, height / 2 - borderWidth / 2 + min / 2);
        }
        canvas.drawArc(rectF, -90, progress, false, borderPaint);
        //画居中的文字
        canvas.translate(width / 2, height / 2 - staticLayout.getHeight() / 2);
        staticLayout.draw(canvas);复制代码

看到这里staticLayout是那里来的呀，看下面就知道了

    int textWidth = (int) textPaint.measureText(text.substring(0, text.length()));
        staticLayout = new StaticLayout(text, textPaint, textWidth, Layout.Alignment.ALIGN_NORMAL, 1F, 0, false);复制代码

静态的圈圈背景都已经就位，现在开始执行倒计时动画，这里写的是5s

是时候让圈圈动起来了

这里采用倒计时器来倒计时然后通知刷新动画


   //倒计时
     public void start() {
         if (listener != null) {
             listener.onStartCount();
         }
         //倒计时器     第一个参数表示总时间，第二个参数表示间隔时间
         new CountDownTimer((long) lastTime, 30) {
             @Override
             public void onTick(long millisUntilFinished) {
                 progress = 360 - ((lastTime - millisUntilFinished) / lastTime) * 360;
                 invalidate();
             }

             @Override
             public void onFinish() {
                 progress = 0;
                 invalidate();
                 if (listener != null) {
                     listener.onFinishCount();
                 }
             }
         }.start();
     }复制代码

倒计时的准备工作做好了，将倒计时的完整代码奉上

/**
 * Created by Administrator on 2017/8/10.
 * 广告倒计时
 *
 * @auther madreain
 */

public class CountDownView extends View {

    private static final int BACKGROUND_COLOR = 0x50555555;
    private static final float BORDER_WIDTH = 15f;
    private static final int BORDER_COLOR = 0xFF6ADBFE;
    private static final String TEXT = "跳过";
    private static final float TEXT_SIZE = 50f;
    private static final int TEXT_COLOR = 0xFFFFFFFF;

    int width;
    int height;
    int min;

    private int backgroundColor;
    private float borderWidth;
    private int borderColor;
    private String text;
    private int textColor;
    private float textSize;

    private Paint circlePaint;
    private TextPaint textPaint;
    private Paint borderPaint;

    private float progress = 360;
    private StaticLayout staticLayout;

    private CountDownTimerListener listener;

    //倒计时 显示5秒什么的
    float lastTime = 5000;

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

    public CountDownView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CountDownView);
        backgroundColor = ta.getColor(R.styleable.CountDownView_background_color, BACKGROUND_COLOR);
        borderWidth = ta.getDimension(R.styleable.CountDownView_borders_width, BORDER_WIDTH);
        borderColor = ta.getColor(R.styleable.CountDownView_borders_color, BORDER_COLOR);
        text = ta.getString(R.styleable.CountDownView_text);
        if (text == null) {
            text = TEXT;
        }
        textSize = ta.getDimension(R.styleable.CountDownView_text_size, TEXT_SIZE);
        textColor = ta.getColor(R.styleable.CountDownView_text_color, TEXT_COLOR);
        ta.recycle();
        init();
    }

    private void init() {
        circlePaint = new Paint();
        circlePaint.setAntiAlias(true);
        circlePaint.setDither(true);
        circlePaint.setColor(backgroundColor);
        circlePaint.setStyle(Paint.Style.FILL);

        textPaint = new TextPaint();
        textPaint.setAntiAlias(true);
        textPaint.setDither(true);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
        textPaint.setTextAlign(Paint.Align.CENTER);

        borderPaint = new Paint();
        borderPaint.setAntiAlias(true);
        borderPaint.setDither(true);
        borderPaint.setColor(borderColor);
        borderPaint.setStrokeWidth(borderWidth);
        borderPaint.setStyle(Paint.Style.STROKE);

        int textWidth = (int) textPaint.measureText(text.substring(0, text.length()));
        staticLayout = new StaticLayout(text, textPaint, textWidth, Layout.Alignment.ALIGN_NORMAL, 1F, 0, false);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (widthMode != MeasureSpec.EXACTLY) {
            width = staticLayout.getWidth();
        }
        if (heightMode != MeasureSpec.EXACTLY) {
            height = staticLayout.getHeight();
        }
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width=w;
        height=h;
        min = Math.min(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //画底盘
        canvas.drawCircle(width / 2, height / 2, min / 2, circlePaint);
        //画边框
        RectF rectF;
        if (width > height) {
            rectF = new RectF(width / 2 - min / 2 + borderWidth / 2, 0 + borderWidth / 2, width / 2 + min / 2 - borderWidth / 2, height - borderWidth / 2);
        } else {
            rectF = new RectF(borderWidth / 2, height / 2 - min / 2 + borderWidth / 2, width - borderWidth / 2, height / 2 - borderWidth / 2 + min / 2);
        }
        canvas.drawArc(rectF, -90, progress, false, borderPaint);
        //画居中的文字
        canvas.translate(width / 2, height / 2 - staticLayout.getHeight() / 2);
        staticLayout.draw(canvas);
    }


    //倒计时
    public void start() {
        if (listener != null) {
            listener.onStartCount();
        }
        //倒计时器     第一个参数表示总时间，第二个参数表示间隔时间
        new CountDownTimer((long) lastTime, 30) {
            @Override
            public void onTick(long millisUntilFinished) {
                progress = 360 - ((lastTime - millisUntilFinished) / lastTime) * 360;
                invalidate();
            }

            @Override
            public void onFinish() {
                progress = 0;
                invalidate();
                if (listener != null) {
                    listener.onFinishCount();
                }
            }
        }.start();
    }

    public void setCountDownTimerListener(CountDownTimerListener listener) {
        this.listener = listener;
    }

    public interface CountDownTimerListener {
        void onStartCount();

        void onChangeCount(int second);

        void onFinishCount();
    }
}复制代码

广告弹窗

广告弹窗上的倒计时已经准备好了，开始组合自定义view的撰写了，后期实际项目开发中，这一块可以根据实际情况修改组合的view布局

/**
 * Created by Administrator on 2017/8/10.
 * 闪屏广告
 *
 * @auther madreain
 */

public class SplashDialog extends Dialog {

    private Context mContext;
    //展示的
    AdvertisingImgModel advertisingImgModel;

    //背景照片
    private ImageView img_background;
    //倒计时
    private CountDownView count_down_view;

    private OnSplashDetailClickListener onSplashDetailClickListener;

    public SplashDialog(Context context, AdvertisingImgModel advertisingImgModel) {
        super(context, R.style.ADDialog);
        mContext = context;
        this.advertisingImgModel = advertisingImgModel;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splash_dialog);
        full(true);
        initView();
    }

    /**
     * @param enable false 显示，true 隐藏
     */
    private void full(boolean enable) {
        WindowManager.LayoutParams p = this.getWindow().getAttributes();
        if (enable) {

            p.flags |= WindowManager.LayoutParams.FLAG_FULLSCREEN;//|=：或等于，取其一

        } else {
            p.flags &= (~WindowManager.LayoutParams.FLAG_FULLSCREEN);//&=：与等于，取其二同时满足，     ~ ： 取反

        }
        getWindow().setAttributes(p);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
    }

    private void initView() {

        img_background = (ImageView) findViewById(R.id.img_background);
        Glide.with(mContext).load(advertisingImgModel.getImgurl()).into(img_background);
        //广告倒计时
        count_down_view = (CountDownView) findViewById(R.id.count_down_view);
        count_down_view.setCountDownTimerListener(new CountDownView.CountDownTimerListener() {
            @Override
            public void onStartCount() {

            }

            @Override
            public void onChangeCount(int second) {

            }

            @Override
            public void onFinishCount() {
                dismiss();
            }
        });
        //启动倒计时
        count_down_view.start();
        //点击跳过按钮
        count_down_view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();
            }
        });
        //点击事件
        img_background.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (onSplashDetailClickListener != null) {
                    onSplashDetailClickListener.onSplashDetailClick(advertisingImgModel);
                }
                dismiss();
            }
        });

    }


    public void setOnSplashDetailClickListener(OnSplashDetailClickListener onSplashDetailClickListener) {
        this.onSplashDetailClickListener = onSplashDetailClickListener;
    }

    public interface OnSplashDetailClickListener {
        void onSplashDetailClick(AdvertisingImgModel advertisingImgModel);
    }

}复制代码

代码中使用

  txt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                AdvertisingImgModel advertisingImgModel = new AdvertisingImgModel(1, "http://bmob-cdn-10899.b0.upaiyun.com/2017/05/09/34b6d85c406894f3803d949a78c4546e.jpg");
                splashDialog = new SplashDialog(MainActivity.this, advertisingImgModel);
                splashDialog.setOnSplashDetailClickListener(new SplashDialog.OnSplashDetailClickListener() {
                    @Override
                    public void onSplashDetailClick(AdvertisingImgModel advertisingImgModel) {
                        Toast.makeText(MainActivity.this, "跳转到广告的详情页", Toast.LENGTH_SHORT).show();
                    }
                });
                splashDialog.show();
            }
        });复制代码

大家如果有什么好的自定义view推荐练手的，欢迎留言

SplashView github demo

weixin_33923148
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
支持View弹窗提示
04-05
作者LeeWongSnail，源码ALiProgressHUD，让所有的地方都可以弹窗项目中，大多数时候都是在view或者控制器中进行弹窗的操作，有时候仅仅是为了一个弹窗还要把状态从view或者model中传到控制器进行弹窗，这相当的麻烦，为什么不让所有的NSObject都可以弹窗呢！
广告弹窗
小牛的博客
10-18 602
导入HWPopTool.h .m 文件 @property (strong, nonatomic) UIView *contentView; @property (strong, nonatomic) UIButton *popBtn; _contentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 300)]; ...
自定义弹窗(uialertview)
michaelKiven的博客
02-19 599
适用iOS 7的自定义弹窗(uialertview) 标签： IOS 自定义弹框 2014-05-12 16:56 5332人阅读 评论(1) 收藏 举报  分类：   记录（42）  版权声明：本文为博主原创文章，未经博主允许不得转载。 今天心血来潮，突然想实现个功能，随时随地的调用类试图，现实需要的结果调用。所以就试着写了这么个de
关于弹窗的view是以怎么样的形式存在的问题
quange14的博客
03-06 258
https://blog.csdn.net/haiyang497661292/article/details/78097775 https://blog.csdn.net/qq_21556263/article/details/82768420 https://www.cnblogs.com/waleyx/p/3649411.html https://www.jianshu.com/p/1c...
自己总结了一下别人作品自定义view和弹窗选择功能
qq_43158307的博客
12-23 248
首先看一下我的布局代码： <com.bt.mylibrary.TimeLineMarkerView android:id="@+id/tv_rv_activity_orderdetail_timelineview" android:layout_width="80dp" android:layout_height=&am
android尺子的自定义view——RulerView详解
08-19
主要介绍了android尺子的自定义view——RulerView详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Android自定义view——组合控件
08-04
共同学习共同进步
自定义View——日历的绘制
11-20
自定义View—日历的绘制，有onMesure、onLayout、onDraw方法等，具体讲解请看博客。
Android自定义View——饼图
09-23
Android自定义View——饼图，可参考博客http://blog.csdn.net/liuwan1992/article/details/52637259
android 自定义控件队列弹出,实现轮转广告带底部指示的自定义ViewPager控件
weixin_29505425的博客
05-25 111
有许多博客和开源项目都致力于这项工作，但是他们的工作大都是为了制作类似于启动页的效果，ViewPager全屏显示，或者自己可操作的属性难以满足要求，因此我想把ViewPager和底部的指示物封装在一个自定义的View中，作为一个新的控件在xml中使用，所以自己来实现了一个。而且，在用自定义视图封装ViewPager时，出现了一个问题，就是ViewPager的所有页不能全部显示的问题，不知道是因为这...
自定义组件-SplashView
01-15
一个小清新等待动画
View下弹出提示框,并且增加弹出隐藏View动画效果.
10-20
android View下弹出提示框,并且增加弹出隐藏View动画效果. 博客地址:http://blog.csdn.net/lowprofile_coding/article/details/49279589
卓开发：弹出自定义对话框自动播放视频（仿视频广告效果，使用mediaplayer和surfaceview做播放器）
08-01
界面比较简单，就是弹出一个自定义的对话框，对话框中自动播放视频，播放完毕后对话框消失，与视频广告功能相似。
Android简单的广告控件View
编程语言小筑
03-15 163
在布局文件中引用此View控件即可。 publicclassGGViewextendsView{ intCOMPONENT_WIDTH;//该控件宽度 intCOMPONENT_HEIGHT;//该控件高度 booleaninitflag=false;//是否要获取控件的高度和宽度标志 staticBitmap[]bma;//需要播放的图片的数组 Paintpaint;/...
SYAlertView弹窗视图
番薯大佬的专栏
06-08 315
SYAlertView自定义弹窗子视图UI根据UI设计需求，自定义各种样式的弹窗子视图：* 自定义UI及样式* 自定义显示动画* 编辑控件自适应键盘高度效果图代码示例1、导入头文件#import "SYAlertView.h"2、实例化SYAlertView *alertView = [[SYAlertView alloc] init]; alertView.isAnimation = YES;3...
广告View效果学习
Harbor9999的专栏
01-09 460
布局文件： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view
自定义闪屏页广告倒计时view
野生程序员
05-19 974
如今APP越来越多,我们每天所使用的的软件也越来越多,可是在我们不付费的情况下,App制造商如何变现,实现收入甚至是盈利呢?答案就是在我们打开软件所必须经过的地方穿插广告,当然为了顾及用户的感受,一般都会以倒计时的形式展示给用户,用户可以选择跳过.可能是因为自己的强迫症,总想着是怎么做的,自己就尝试了一下,分享给大家的同时,顺便加深自己的理解.效果如图：
自定义一个View作为弹出对话框
不会写代码的丝丽
09-28 709
public void dialog(){ View view = LayoutInflater.from(getActivity()).inflate(R.layout.dialog_loading, null); view.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.
[自定义VIEW]仿闪屏页面的倒计时控件
zcpHappy的博客
07-13 1014
初衷：自己以前学习自定义控件什么的，都是看到别人做出来，然后自己在敲出来，就象没有自己的思想，最近在跟进抛物线大神的HenCoder项目，大神的第一课就是关于UI方面的知识，自己也决定撸出来一个自定义VIEW，这是本人的第一个自定义VIEW，功能简陋，比较简单，但是也见证着我的成长，分享一下，大家一起成长！！！
一步一步教你自定义控件——01
最新发布
09-12
这个类应该继承自Android框架中的现有控件，例如View、TextView等。例如，如果你想要创建一个自定义按钮，可以创建一个名为CustomButton的类，并让它继承自Button类。 第二步：实现构造函数和属性。 在你的自定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值