Android 天气APP（十三）仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片

147dp

148dp

149dp

150dp

151dp

152dp

153dp

154dp

155dp

156dp

157dp

158dp

159dp

160dp

161dp

162dp

163dp

164dp

165dp

166dp

167dp

168dp

169dp

170dp

171dp

172dp

173dp

174dp

175dp

176dp

177dp

178dp

179dp

180dp

181dp

182dp

183dp

184dp

185dp

186dp

187dp

188dp

189dp

190dp

191dp

192dp

193dp

194dp

195dp

196dp

197dp

198dp

199dp

200dp

201dp

202dp

203dp

204dp

205dp

206dp

207dp

208dp

209dp

210dp

211dp

212dp

213dp

214dp

215dp

216dp

217dp

218dp

219dp

220dp

221dp

222dp

223dp

224dp

225dp

226dp

227dp

228dp

229dp

230dp

231dp

232dp

233dp

234dp

235dp

236dp

237dp

238dp

239dp

240dp

241dp

242dp

243dp

244dp

245dp

246dp

247dp

248dp

249dp

250dp

251dp

252dp

253dp

254dp

255dp

256dp

257dp

258dp

259dp

260dp

261dp

262dp

263dp

264dp

265dp

266dp

267dp

268dp

269dp

270dp

271dp

272dp

273dp

274dp

275dp

276dp

277dp

278dp

279dp

280dp

281dp

282dp

283dp

284dp

285dp

286dp

287dp

288dp

289dp

290dp

291dp

292dp

293dp

294dp

295dp

296dp

297dp

298dp

299dp

300dp

301dp

302dp

303dp

304dp

305dp

306dp

307dp

308dp

309dp

310dp

311dp

312dp

313dp

314dp

315dp

316dp

317dp

318dp

319dp

320dp

321dp

322dp

323dp

324dp

325dp

326dp

327dp

328dp

329dp

330dp

331dp

332dp

333dp

334dp

335dp

336dp

337dp

338dp

339dp

340dp

341dp

342dp

343dp

344dp

345dp

346dp

347dp

348dp

349dp

350dp

351dp

352dp

353dp

354dp

355dp

356dp

357dp

358dp

359dp

360dp

365dp

370dp

400dp

410dp

422dp

472dp

500dp

600dp

640dp

720dp

6sp

7sp

8sp

9sp

10sp

11sp

12sp

13sp

14sp

15sp

16sp

17sp

18sp

19sp

20sp

21sp

22sp

23sp

24sp

25sp

26sp

27sp

28sp

29sp

30sp

31sp

32sp

33sp

34sp

35sp

36sp

37sp

38sp

40sp

42sp

48sp

弹窗页面的布局如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:background=“@color/transparent”

android:orientation=“vertical”>

<LinearLayout

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_marginEnd=“@dimen/dp_8”

android:background=“@mipmap/icon_add_bg_9”

android:orientation=“vertical”

android:paddingBottom=“@dimen/dp_20”

android:paddingTop=“@dimen/dp_20”>

<TextView

android:id=“@+id/tv_change_city”

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”/>

<TextView

android:id=“@+id/tv_change_bg”

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”/>

<TextView

android:id=“@+id/tv_more”

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”/>

然后是对activity_main.xml文件的修改

这里修改了原来的id和src里面的图片，增加了点击的效果

icon_add.png

selector_bg_img.xml,点击之后背景变色，增加用户体验

<?xml version="1.0" encoding="utf-8"?>

MainActivity.java

这里我是把原来的id注释掉，不过我没有删掉，因为我要让你们知道是怎么样一个过程，你们是可以直接替换的，不替换会报错了，当然你不改Id就不会报错，但是id的命名和现在是意思对不上，会对其他人造成困扰，严谨一点就修改ID。

更改点击之后的弹窗。

要显示弹窗一些基本的配置必不可少，这里用到了一个动画工具类AnimationUtil，代码如下：

package com.llw.mvplibrary.utils;

import android.animation.Animator;

import android.animation.ValueAnimator;

import android.view.animation.Interpolator;

import android.view.animation.LinearInterpolator;

/**

• 动画工具类

• UpdateListener： 动画过程中通过添加此监听来回调数据

• EndListener： 动画结束的时候通过此监听器来做一些处理

*/

public class AnimationUtil {

private ValueAnimator valueAnimator;

private UpdateListener updateListener;

private EndListener endListener;

private long duration;

private float start;

private float end;

private Interpolator interpolator = new LinearInterpolator();

public AnimationUtil() {

duration = 1000; //默认动画时常1s

start = 0.0f;

end = 1.0f;

interpolator = new LinearInterpolator();// 匀速的插值器

}

public void setDuration(int timeLength) {

duration = timeLength;

}

public void setValueAnimator(float start, float end, long duration) {

this.start = start;

this.end = end;

this.duration = duration;

}

public void setInterpolator(Interpolator interpolator) {

this.interpolator = interpolator;

}

public void startAnimator() {

if (valueAnimator != null){

valueAnimator = null;

}

valueAnimator = ValueAnimator.ofFloat(start, end);

valueAnimator.setDuration(duration);

valueAnimator.setInterpolator(interpolator);

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator valueAnimator) {

if (updateListener == null) {

return;

}

float cur = (float) valueAnimator.getAnimatedValue();

updateListener.progress(cur);

}

});

valueAnimator.addListener(new Animator.AnimatorListener() {

@Override

public void onAnimationStart(Animator animator) {}

@Override

public void onAnimationEnd(Animator animator) {

if(endListener == null){

return;

}

endListener.endUpdate(animator);

}

@Override

public void onAnimationCancel(Animator animator) {}

@Override

public void onAnimationRepeat(Animator animator) {}

});

valueAnimator.start();

}

public void addUpdateListener(UpdateListener updateListener) {

this.updateListener = updateListener;

}

public void addEndListner(EndListener endListener){

this.endListener = endListener;

}

public interface EndListener {

void endUpdate(Animator animator);

}

public interface UpdateListener {

void progress(float progress);

}

}

然后写三个方法，一个显示弹窗，及控制里面的点击事件、计算动画时间、第三个修改背景的透明度类似蒙版的效果。

这三个方法的代码我都会贴上来。不过首先，先增加弹窗出现和关闭的动画效果。

这张图告诉你在什么地方添加这个样式

pop_add_show.xml 显示动画

<?xml version="1.0" encoding="utf-8"?>

<alpha

android:duration=“500”

android:fromAlpha=“0.0”

android:toAlpha=“1.0”/>

<scale

android:duration=“500”

android:fromXScale=“0”

android:fromYScale=“0”

android:interpolator=“@android:anim/decelerate_interpolator”

android:pivotX=“85%”

android:pivotY=“0%”

android:toXScale=“1.0”

android:toYScale=“1.0”/>

pop_add_hide.xml 隐藏动画

<?xml version="1.0" encoding="utf-8"?>

<alpha

android:duration=“500”

android:fromAlpha=“1.0”

android:toAlpha=“0.0”/>

<scale

android:duration=“500”

android:fromXScale=“1.0”

android:fromYScale=“1.0”

android:interpolator=“@android:anim/accelerate_interpolator”

android:pivotX=“85%”

android:pivotY=“0%”

android:toXScale=“0”

android:toYScale=“0”/>

然后贴一下三个方法的代码：

showAddWindow方法

/**

• 更多功能弹窗，