效果图
每日提醒弹窗
前言
为了增强用户的体验，所以增加了这个每日弹窗，每日弹窗顾名思义，每天弹出一次，就不再弹窗，当然如果用户觉得烦的话，可以在弹窗中勾选上不再弹窗，或者在应用设置中，关闭每日弹窗都是可以的。下面来写这个功能。
正文
说到弹窗我就想起来我之前的应用更新弹窗那一篇文章了，那么这个功能怎么来写呢？其实也不难，首先想清楚这个弹窗要什么东西。
① 是弹窗的背景，我希望每一天都不一样，那么就可以采用必应的每日一图。
② 弹窗可关闭不再弹出，可以通过缓存的方式判断处理，
③ 弹窗上面显示的值，可以通过主页面其它接口先获取到返回值，然后在弹窗中显示，
④ 每日只弹出一次，这个就是要在每日弹出弹窗时，存储一个时间戳缓存，后面再进入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，之前我是为了测试所以没有加上每日第一次打开的限制，你只要按照博客来写就可以了。
文末
来者可追，文过饰非。写博客和写代码的思路都要清晰才行，还是要加油，菜鸟多飞，山高水长，后会有期~
