我正在参与「启航方案」

效果图

前言

为了增强用户的体会，所以添加了这个每日弹窗，每日弹窗顾名思义，每天弹出一次，就不再弹窗，当然假如用户觉得烦的话，能够在弹窗中勾选上不再弹窗，或许在使用设置中，关闭每日弹窗都是能够的。下面来写这个功用。

正文

提到弹窗我就想起来我之前的使用更新弹窗那一篇文章了，那么这个功用怎么来写呢？其实也不难，首先想清楚这个弹窗要什么东西。

① 是弹窗的布景，我期望每一天都不相同，那么就能够选用必应的每日一图。 ② 弹窗可关闭不再弹出，能够经过缓存的方式判别处理， ③ 弹窗上面显现的值，能够经过主页面其它接口先获取到返回值，然后在弹窗中显现， ④ 每日只弹出一次，这个便是要在每日弹出弹窗时，存储一个时刻戳缓存，后面再进入APP时判别时刻巨细就能够了。

这么一看，目标就明晰了，下面进入实操环节。

一、弹窗布景

还记得之前我在写壁纸页面的时分，把必应的恳求放到壁纸办理页面了，那么主页面就没有恳求了，而我又需要这个恳求获取每日的壁纸url。所以在欢迎页面新增了一个恳求。

翻开SplashContract，新增如下代码：

		/**
         * 获取必应  每日一图
         */
        public void biying() {
            ApiService service = ServiceGenerator.createService(ApiService.class, 1);
            service.biying().enqueue(new NetCallBack<BiYingImgResponse>() {
                @Override
                public void onSuccess(Call<BiYingImgResponse> call, Response<BiYingImgResponse> response) {
                    if (getView() != null) {
                        getView().getBiYingResult(response);
                    }
                }
                @Override
                public void onFailed() {
                    if (getView() != null) {
                        getView().getDataFailed();
                    }
                }
            });
        }

	 	/**
         * 获取必应每日一图返回
         * @param response BiYingImgResponse
         */
        void getBiYingResult(Response<BiYingImgResponse> response);

添加方位如下：

然后进入SplashActivity，重写getBiYingResult办法，代码如下：

	/**
     * 必应壁纸数据返回
     *
     * @param response BiYingImgResponse
     */
    @Override
    public void getBiYingResult(Response<BiYingImgResponse> response) {
        if (response.body().getImages() != null) {
            //得到的图片地址是没有前缀的，所以加上前缀不然显现不出来
            String biyingUrl = "http://cn.bing.com" + response.body().getImages().get(0).getUrl();
            SPUtils.putString(Constant.EVERYDAY_TIP_IMG,biyingUrl,context);
        } else {
            ToastUtils.showShortToast(context, "未获取到必应的图片");
        }
    }

这儿你会发现Constant.EVERYDAY_TIP_IMG，没有这个特点值，那么就到Constant中去创立。

	/**
     * 每日提示弹窗的布景图
     */
    public static final String EVERYDAY_TIP_IMG = "everydayTipImg";
    /**
     * 每日提示弹窗是否弹出
     */
    public static final String EVERYDAY_POP_BOOLEAN = "everydayPopBoolean";

在Constant里边添加这两个体系变量，注释已经说明晰这两个变量的用途了。

下面在layout中新建一个dialog_everyday_tip.xml。里边的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="@dimen/dp_270"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <!--弹窗布景图-->
    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/iv_dialog_bg"
        android:layout_width="match_parent"
        android:layout_height="420dp"
        android:foreground="@drawable/shape_dialog_foreground_bg_12"
        android:scaleType="fitXY"
        android:src="@drawable/img_5"
        app:shapeAppearanceOverlay="@style/roundedImageStyle" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="420dp"
        android:padding="@dimen/dp_12">
        <TextView
            android:id="@+id/tv_week"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="周四"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_20"
            android:textStyle="bold" />
        <!--温度-->
        <TextView
            android:id="@+id/tv_temperature"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_week"
            android:text="温度"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_48" />
        <!--气候状况-->
        <TextView
            android:id="@+id/tv_weather_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_temperature"
            android:text="气候"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_20"
            android:typeface="monospace" />
        <!--气候状况图标-->
        <ImageView
            android:id="@+id/iv_weather_state"
            android:layout_width="@dimen/dp_80"
            android:layout_height="@dimen/dp_80"
            android:layout_alignParentRight="true"
            android:src="@mipmap/icon_100" />
        <!--降水预告-->
        <TextView
            android:id="@+id/tv_precipitation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iv_weather_state"
            android:layout_alignParentRight="true"
            android:layout_marginTop="@dimen/dp_10"
            android:drawableLeft="@mipmap/icon_weather_prec"
            android:drawablePadding="4dp"
            android:text="降水预告"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_12" />
        <!--温差提示-->
        <TextView
            android:id="@+id/tv_temp_difference"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_weather_state"
            android:layout_marginTop="@dimen/dp_100"
            android:text="温差提示"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_18"
            android:typeface="monospace" />
        <!--不再弹出-->
        <com.google.android.material.checkbox.MaterialCheckBox
            android:id="@+id/cb_no_pop_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:text="不再弹出"
            android:textSize="@dimen/sp_16"
            app:useMaterialThemeColors="true"
            app:buttonTint="@color/gray"
            android:textColor="@color/gray" />
    </RelativeLayout>
    <View
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/iv_dialog_bg"
        android:background="@color/white"
        android:layout_width="@dimen/dp_1"
        android:layout_height="@dimen/dp_12"/>
    <ImageView
        android:id="@+id/iv_close"
        android:layout_width="@dimen/dp_24"
        android:layout_height="@dimen/dp_24"
        android:layout_below="@+id/iv_dialog_bg"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/dp_12"
        android:src="@mipmap/icon_close_dialog" />
</RelativeLayout>

预览图如下所示（==里边的图标没有的话能够去我的源码里边下载，或许自行下载一个，由于是白色的所示我贴了也看不见，CSDN中，不开会员的人无法修正文章的主题色彩，免费的主题，改不了博文的色彩，这一点我觉得很坑，非要你开个会员，吃相太难看了==）

这儿面用到了一个style，在app的styles.xml中添加如下代码：

	<!-- 圆角图片 -->
    <style name="roundedImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">12dp</item>
    </style>

在drawable下新建一个shape_dialog_foreground_bg_12.xml文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="@dimen/dp_12" />
    <solid android:color="@color/transparent_bg_1" />
</shape>

在app的colors.xml中新增一个色彩

<color name="transparent_bg_1">#20000000</color><!--黑色半透明 一-->

布局有了，那么便是先改动布景，再添加数据。

二、每天第一次弹窗

下面进入到MainActivity中，将查看版别更新的办法移动一个方位

由于自动更新的弹窗也是在每日第一次才弹出，所以公用，不过也要修正一下checkAppVersion里边的逻辑才行。修正后代码如下：

	/**
     * 查看APP版别
     */
    private void checkAppVersion() {
        AppVersion appVersion = LitePal.find(AppVersion.class, 1);//读取第一条数据
        Log.d("appVersion", new Gson().toJson(appVersion.getVersionShort()));
        if (AppStartUpUtils.isTodayFirstStartApp(context)) {//今天第一次翻开APP
            if (!appVersion.getVersionShort().equals(APKVersionInfoUtils.getVerName(context))) {//提示更新
                //更新提示弹窗
                showUpdateAppDialog(appVersion.getInstall_url(), appVersion.getChangelog());
            }
            //设置每日提示弹窗
            setTipDialog();
        }
    }

之前是判别可不能够更新，再判别是否为第一次，现在判别是否为第一次翻开。

然后下面的重点便是这个setTipDialog办法了

	/**
     * 设置每日弹窗
     */
    private void setTipDialog() {
        boolean isShow = SPUtils.getBoolean(Constant.EVERYDAY_POP_BOOLEAN, true, context);
        if (isShow) {
            new Handler().postDelayed(new Runnable() {
                @Override
                public void run() {
                    //当所有数据加载完结之后显现弹窗
                    if (everyDayTipDialog != null) {
                        return;
                    }
                    //弹出每日提醒弹窗
                    showEveryDayTipDialog();
                }
            },1000);
        }
    }

这儿用到那么那个体系变量，判别是否能够弹窗这个弹窗，然后延时弹出。

三、弹出每日提示弹窗

	/**
     * 每日提示弹窗
     */
    private void showEveryDayTipDialog() {
        AlertDialog.Builder builder = new AlertDialog.Builder(context)
                .addDefaultAnimation()//默认弹窗动画
                .setCancelable(false)
                .setText(R.id.tv_week, DateUtils.getWeekOfDate(new Date()))//星期
                .setText(R.id.tv_weather_state, dialogWeatherState)//气候状况
                .setText(R.id.tv_precipitation, dialogPrecipitation)//降水预告
                .setText(R.id.tv_temp_difference,
                        WeatherUtil.differenceTempTip(dialogTempHeight, dialogTempLow))//温差提示信息
                .setContentView(R.layout.dialog_everyday_tip)//载入布局文件
                .setWidthAndHeight(SizeUtils.dp2px(context, 270), ViewGroup.LayoutParams.WRAP_CONTENT)//设置弹窗宽高
                .setOnClickListener(R.id.iv_close, v -> {//关闭
                    everyDayTipDialog.dismiss();
                });
        everyDayTipDialog = builder.create();
        String imgUrl = SPUtils.getString(Constant.EVERYDAY_TIP_IMG, "", context);
        ShapeableImageView bg = everyDayTipDialog.getView(R.id.iv_dialog_bg);
        Glide.with(context).load(imgUrl).into(bg);
        //温度
        Typeface typeface = Typeface.createFromAsset(getAssets(), "fonts/Roboto-Light.ttf");
        TextView temp = everyDayTipDialog.getView(R.id.tv_temperature);
        temp.setTypeface(typeface);
        temp.setText(dialogTemp + "℃");
        //设置气候状况图标
        ImageView weatherStateIcon = everyDayTipDialog.getView(R.id.iv_weather_state);
        WeatherUtil.changeIcon(weatherStateIcon, dialogWeatherStateCode);
        //不再弹出
        MaterialCheckBox cb = everyDayTipDialog.getView(R.id.cb_no_pop_up);
        cb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    SPUtils.putBoolean(Constant.EVERYDAY_POP_BOOLEAN, false, context);
                } else {
                    SPUtils.putBoolean(Constant.EVERYDAY_POP_BOOLEAN, true, context);
                }
            }
        });
        everyDayTipDialog.show();
    }

这儿面的代码便是先显现一些要的数据，经过缓存拿到必应的url设置布景，然后在弹窗的底部有一个选中框，选中后再关闭这个弹窗，那么这个弹窗以后都不会再弹出了，除非你再使用设置中进行翻开。

到这一步，弹窗就呈现了。

四、弹窗的开关

既然是添加用户的体会，那么自然要让用户能够自行操控，于是，我在新增了一个使用设置页面。在ui包下新建一个Empty Activity。命名为SettingActivity。它的xml布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:fitsSystemWindows="true"
    android:background="@color/gray_white"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.SettingActivity">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/white"
        app:contentInsetLeft="@dimen/dp_16"
        android:elevation="@dimen/dp_10"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_scrollFlags="scroll|enterAlways"
        app:navigationIcon="@mipmap/icon_return"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        <!--标题-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="使用设置"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_18" />
    </androidx.appcompat.widget.Toolbar>
    <!--每日一图-->
    <LinearLayout
        android:layout_marginTop="@dimen/dp_12"
        android:background="@color/white"
        android:paddingLeft="@dimen/dp_16"
        android:paddingRight="@dimen/dp_16"
        android:paddingTop="@dimen/dp_8"
        android:paddingBottom="@dimen/dp_8"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:text="每日弹窗"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_16"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"/>
        <com.llw.mvplibrary.view.SwitchButton
            android:id="@+id/wb_everyday"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</LinearLayout>

整体来看这个页面现在只要一个办理每日弹窗的功用，有些孤独，不过后续我可能会参加其他的一些功用，敬请期待。

下面进入SettingActivity。里边的代码如下：

package com.llw.goodweather.ui;
import android.os.Bundle;
import androidx.appcompat.widget.Toolbar;
import com.llw.goodweather.R;
import com.llw.goodweather.utils.Constant;
import com.llw.goodweather.utils.SPUtils;
import com.llw.goodweather.utils.StatusBarUtil;
import com.llw.mvplibrary.base.BaseActivity;
import com.llw.mvplibrary.view.SwitchButton;
import org.litepal.util.Const;
import butterknife.BindView;
import butterknife.ButterKnife;
/**
 * 使用设置页面
 *
 * @author llw
 */
public class SettingActivity extends BaseActivity {
    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.wb_everyday)
    SwitchButton wbEveryday;
    @Override
    public void initData(Bundle savedInstanceState) {
        //白色状况栏
        StatusBarUtil.setStatusBarColor(context, R.color.white);
        //黑色字体
        StatusBarUtil.StatusBarLightMode(context);
        Back(toolbar);
        boolean isChecked = SPUtils.getBoolean(Constant.EVERYDAY_POP_BOOLEAN,true,context);
        wbEveryday.setChecked(isChecked);
        wbEveryday.setOnCheckedChangeListener(new SwitchButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(SwitchButton view, boolean isChecked) {
                if(isChecked){
                    SPUtils.putBoolean(Constant.EVERYDAY_POP_BOOLEAN,true,context);
                }else {
                    SPUtils.putBoolean(Constant.EVERYDAY_POP_BOOLEAN,false,context);
                }
            }
        });
    }
    @Override
    public int getLayoutId() {
        return R.layout.activity_setting;
    }
}

便是经过控件改动缓存值，一语中的。

然后便是在window_add.xml中添加一个TextView

		<TextView
            android:id="@+id/tv_setting"
            android:gravity="center"
            android:layout_width="@dimen/dp_140"
            android:layout_height="@dimen/dp_48"
            android:text="使用设置"
            android:foreground="@drawable/bg_white"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_16"/>

如下图所示

然后进入到MainActivity，在showAddWindow办法中。

绑定视图id

添加点击跳转事情

然后代码就写完了，是不是趁热打铁呢？运行效果图如下：

这个GIF，之前我是为了测试所以没有加上每日第一次翻开的约束，你只要按照博客来写就能够了。

文末

来者可追，讳疾忌医。写博客和写代码的思路都要明晰才行，仍是要加油，菜鸟多飞，山高水长，后会有期~

源码地址：GoodWeather 欢迎 Star 和 Fork

Android 天气APP（三十一）每日提醒弹窗

前言

正文

一、弹窗布景

二、每天第一次弹窗

三、弹出每日提示弹窗

四、弹窗的开关

文末

作者信息

Android 天气APP（三十一）每日提醒弹窗

前言

正文

一、弹窗布景

二、每天第一次弹窗

三、弹出每日提示弹窗

四、弹窗的开关

文末

相关文章

【写作能力提升】“5种搭建⽂章架构的⽅法”免费赠送!

什么？你连个三色渐变圆角按钮都需要UI切图？

Go并发编程 Goroutine、Channel、Select、Mutex锁、sync、Atomic等

KMP 跨端在Android 和iOS 原生工程中的集成和使用

作者信息