Android 天气APP（八）城市切换 之 自定义弹窗与使用

in_right_to_left.xml

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

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

android:duration=“500”

android:fromXDelta=“100%p”

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

android:toXDelta=“0%p” >

out_left_to_right.xml

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

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

android:duration=“500”

android:fromXDelta=“0%p”

android:toXDelta=“100%p”

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

out_top_to_bottom.xml

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

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

android:duration=“500”

android:fromYDelta=“0%p”

android:toYDelta=“100%p”

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

然后在模块的styles.xml中增加样式

然后在模块的utils包中新建一个LiWindow类

代码如下：

package com.llw.mvplibrary.utils;

import android.app.Activity;

import android.content.Context;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.WindowManager;

import android.widget.PopupWindow;

import com.llw.mvplibrary.R;

import java.util.HashMap;

import java.util.Map;

/**

• 自定义弹窗

*/

public class LiWindow {

private LiWindow mLiWindow;

private PopupWindow mPopupWindow;

private LayoutInflater inflater;

private View mView;

private Context mContext;

private WindowManager show;

WindowManager.LayoutParams context;

private Map<String,Object> mMap = new HashMap<>();

public Map<String, Object> getmMap() {

return mMap;

}

public LiWindow(Context context){

this.mContext = context;

inflater = LayoutInflater.from(context);

mLiWindow = this;

}

public LiWindow(Context context, Map<String,Object> map){

this.mContext = context;

this.mMap = map;

inflater = LayoutInflater.from(context);

}

/**

• 右侧显示 自适应大小

• @param mView

*/

public void showRightPopupWindow(View mView) {

mPopupWindow = new PopupWindow(mView,

ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT , true);

mPopupWindow.setContentView(mView);

mPopupWindow.setOutsideTouchable(true);//点击空白处不关闭弹窗 true为关闭

mPopupWindow.setFocusable(true);

mPopupWindow.setAnimationStyle(R.style.AnimationRightFade); //设置动画

mPopupWindow.showAtLocation(mView, Gravity.RIGHT,0 ,0);

setBackgroundAlpha(0.5f,mContext);

WindowManager.LayoutParams nomal = ((Activity) mContext).getWindow().getAttributes();

nomal.alpha = 0.5f;

((Activity) mContext).getWindow().setAttributes(nomal);

mPopupWindow.setOnDismissListener(closeDismiss);

}

/**

• 右侧显示 高度占满父布局

• @param mView

*/

public void showRightPopupWindowMatchParent(View mView) {

mPopupWindow = new PopupWindow(mView,

ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT , true);

mPopupWindow.setContentView(mView);

mPopupWindow.setOutsideTouchable(true);//点击空白处不关闭弹窗 true为关闭

mPopupWindow.setFocusable(true);

mPopupWindow.setAnimationStyle(R.style.AnimationRightFade); //设置动画

mPopupWindow.showAtLocation(mView, Gravity.RIGHT,0 ,0);

setBackgroundAlpha(0.5f,mContext);

WindowManager.LayoutParams nomal = ((Activity) mContext).getWindow().getAttributes();

nomal.alpha = 0.5f;

((Activity) mContext).getWindow().setAttributes(nomal);

mPopupWindow.setOnDismissListener(closeDismiss);

}

/**

• 底部显示

• @param mView

*/

public void showBottomPopupWindow(View mView) {

mPopupWindow = new PopupWindow(mView,

ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, true);

mPopupWindow.setContentView(mView);

mPopupWindow.setOutsideTouchable(true);//点击空白处不关闭弹窗 true为关闭

mPopupWindow.setFocusable(true);

mPopupWindow.setAnimationStyle(R.style.AnimationBottomFade); //设置动画

mPopupWindow.showAtLocation(mView, Gravity.BOTTOM, 0, 0);

setBackgroundAlpha(0.5f,mContext);

WindowManager.LayoutParams nomal = ((Activity) mContext).getWindow().getAttributes();

nomal.alpha = 0.5f;

((Activity) mContext).getWindow().setAttributes(nomal);

mPopupWindow.setOnDismissListener(closeDismiss);

}

public static void setBackgroundAlpha(float bgAlpha,Context mContext){

WindowManager.LayoutParams lp = ((Activity) mContext).getWindow().getAttributes();

lp.alpha = bgAlpha;

((Activity) mContext).getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);

((Activity) mContext).getWindow().setAttributes(lp);

}

/**

• 设置弹窗动画

• @param animId

• @return showPopu

*/

public LiWindow setAnim(int animId) {

if (mPopupWindow != null) {

mPopupWindow.setAnimationStyle(animId);

}

return mLiWindow;

}

//弹窗消失时关闭阴影

public PopupWindow.OnDismissListener closeDismiss = new PopupWindow.OnDismissListener() {

@Override

public void onDismiss() {

WindowManager.LayoutParams nomal = ((Activity)mContext).getWindow().getAttributes();

nomal.alpha = 1f;

((Activity)mContext).getWindow().setAttributes(nomal);

}

};

public void closePopupWindow() {

if (mPopupWindow != null) {

mPopupWindow.dismiss();

}

}

/*

使用方法

• LiWindow liWindow = new LiWindow(MainActivity.this);

View mView = LayoutInflater.from(MainActivity.this).inflate(R.layout.center_layout,null);

liWindow.showCenterPopupWindow(mView);

• */

}

弹窗也是需要布局文件的，现在创建一个新的布局文件，用于显示城市列表。

返回图标：

在项目的layout下创建一个名为window_city_list.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:orientation=“vertical”

android:fitsSystemWindows=“true”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”>

<LinearLayout

android:orientation=“vertical”

android:background=“#FFF”

android:layout_width=“240dp”

android:layout_height=“match_parent”>

<RelativeLayout

android:layout_width=“match_parent”

android:layout_height=“wrap_content”>

<androidx.appcompat.widget.Toolbar

android:layout_width=“match_parent”

android:layout_height=“?attr/actionBarSize”

app:contentInsetLeft=“16dp”

app:popupTheme=“@style/AppTheme.PopupOverlay”>

<TextView

android:id=“@+id/tv_title”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_gravity=“center”

android:textSize=“16sp”

android:textColor=“#000”

android:text=“中国” />

</androidx.appcompat.widget.Toolbar>

<ImageView

android:visibility=“gone”

android:layout_marginLeft=“@dimen/dp_10”

android:layout_centerVertical=“true”

android:id=“@+id/iv_back_city”

android:src=“@mipmap/icon_page_return”

android:padding=“15dp”

android:layout_width=“40dp”

android:layout_height=“40dp”/>

<ImageView

android:visibility=“gone”

android:layout_marginLeft=“@dimen/dp_10”

android:layout_centerVertical=“true”

android:id=“@+id/iv_back_area”

android:src=“@mipmap/icon_page_return”

android:padding=“15dp”

android:layout_width=“40dp”

android:layout_height=“40dp”/>

<View

android:layout_width=“match_parent”

android:layout_height=“0.5dp”

android:background=“#EEEEEE”/>

<androidx.recyclerview.widget.RecyclerView

android:id=“@+id/rv”

android:layout_width=“match_parent”

android:layout_height=“match_parent”/>

为了让点击的时候有一个效果，在模块的res文件下的drawable下创建一个rounded_corners.xml的样式文件，点击的水波纹效果

代码如下

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

接下来在res文件下下新建一个drawable-v21的文件夹，文件夹下创建一个bg_white.xml

代码如下：

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

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

android:color=“#20000000”

android:drawable=“@drawable/rounded_corners”/>

点击的样式做好了，接下来创建城市列表的item

在项目的layout文件夹下创建一个名为item_city_list.xml的布局文件

代码如下：

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

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

android:id=“@+id/item_city”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:background=“#FFF”

android:orientation=“vertical”>

<TextView

android:id=“@+id/tv_city”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:foreground=“@drawable/bg_white”

android:gravity=“center”

android:padding=“10dp”

android:textColor=“#FF000000”

android:textSize=“15sp” />

<View

android:layout_width=“match_parent”

android:layout_height=“0.5dp”

android:background=“#EEEEEE”/>

接下来就是要创建一个实体Bean用来接收JSON中解析出来的城市数据，里面包含了省、市、区/县

在项目的bean包下新建一个CityResponse

代码如下：

package com.llw.goodweather.bean;

import java.util.List;

public class CityResponse {

/**

• name : 北京市

• city : [{“name”:“北京市”,“area”:[“东城区”,“西城区”,“崇文区”,“宣武区”,“朝阳区”,“丰台区”,“石景山区”,“海淀区”,“门头沟区”,“房山区”,“通州区”,“顺义区”,“昌平区”,“大兴区”,“平谷区”,“怀柔区”,“密云县”,“延庆县”]}]

*/

private String name;

private List city;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public List getCity() {

return city;

}

public void setCity(List city) {

this.city = city;

}

public static class CityBean {

/**

• name : 北京市

• area : [“东城区”,“西城区”,“崇文区”,“宣武区”,“朝阳区”,“丰台区”,“石景山区”,“海淀区”,“门头沟区”,“房山区”,“通州区”,“顺义区”,“昌平区”,“大兴区”,“平谷区”,“怀柔区”,“密云县”,“延庆县”]

*/

private String name;

private List area;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public static class AreaBean {

/**

• name : 北京市

• area : [“东城区”,“西城区”,“崇文区”,“宣武区”,“朝阳区”,“丰台区”,“石景山区”,“海淀区”,“门头沟区”,“房山区”,“通州区”,“顺义区”,“昌平区”,“大兴区”,“平谷区”,“怀柔区”,“密云县”,“延庆县”]

*/

private String name;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

}

}

}

接下来创建适配器，需要三个适配器，省、市、区/县。在adapter包下创建ProvinceAdapter、CityAdapter、AreaAdapter

ProvinceAdapter.java

package com.llw.goodweather.adapter;

import androidx.annotation.Nullable;

import com.chad.library.adapter.base.BaseQuickAdapter;

import com.chad.library.adapter.base.BaseViewHolder;

import com.llw.goodweather.R;

import com.llw.goodweather.bean.CityResponse;

import java.util.List;

/**

• 省列表适配器

*/

public class ProvinceAdapter extends BaseQuickAdapter<CityResponse, BaseViewHolder> {

public ProvinceAdapter(int layoutResId, @Nullable List data) {

super(layoutResId, data);

}

@Override

protected void convert(BaseViewHolder helper, CityResponse item) {

helper.setText(R.id.tv_city,item.getName());//省名称

helper.addOnClickListener(R.id.item_city);//点击之后进入市级列表

}

}

CityAdapter.java

package com.llw.goodweather.adapter;

import androidx.annotation.Nullable;

import com.chad.library.adapter.base.BaseQuickAdapter;

import com.chad.library.adapter.base.BaseViewHolder;

import com.llw.goodweather.R;

import com.llw.goodweather.bean.CityResponse;

import java.util.List;

/**

• 市列表适配器

*/

public class CityAdapter extends BaseQuickAdapter<CityResponse.CityBean, BaseViewHolder> {

public CityAdapter(int layoutResId, @Nullable List<CityResponse.CityBean> data) {

super(layoutResId, data);

}

@Override

protected void convert(BaseViewHolder helper, CityResponse.CityBean item) {

helper.setText(R.id.tv_city,item.getName());//市名称

helper.addOnClickListener(R.id.item_city);//点击事件 点击进入区/县列表

}

}

AreaAdapter.java

package com.llw.goodweather.adapter;

import androidx.annotation.Nullable;

import com.chad.library.adapter.base.BaseQuickAdapter;

import com.chad.library.adapter.base.BaseViewHolder;

import com.llw.goodweather.R;

import com.llw.goodweather.bean.CityResponse;

import java.util.List;

/**

• 区/县列表适配器

*/

public class AreaAdapter extends BaseQuickAdapter<CityResponse.CityBean.AreaBean, BaseViewHolder> {

public AreaAdapter(int layoutResId, @Nullable List<CityResponse.CityBean.AreaBean> data) {

super(layoutResId, data);

}

@Override

protected void convert(BaseViewHolder helper, CityResponse.CityBean.AreaBean item) {

helper.setText(R.id.tv_city,item.getName());//区/县的名称

helper.addOnClickListener(R.id.item_city);//点击事件 点击之后得到区/县 然后查询天气数据

}

}

万事具备了，接下来就是在MainActivity.java里面实现这个城市弹窗数据的渲染了。

private List list;//字符串列表

private List provinceList;//省列表数据

private List<CityResponse.CityBean> citylist;//市列表数据

private List<CityResponse.CityBean.AreaBean> arealist;//区/县列表数据

ProvinceAdapter provinceAdapter;//省数据适配器

CityAdapter cityAdapter;//市数据适配器

AreaAdapter areaAdapter;//县/区数据适配器

String provinceTitle;//标题

LiWindow liWindow;//自定义弹窗

使用弹窗

/**

• 城市弹窗

*/

private void showCityWindow() {

provinceList = new ArrayList<>();

citylist = new ArrayList<>();

arealist = new ArrayList<>();

list = new ArrayList<>();

liWindow = new LiWindow(context);

final View view = LayoutInflater.from(context).inflate(R.layout.window_city_list, null);

ImageView areaBack = (ImageView) view.findViewById(R.id.iv_back_area);

ImageView cityBack = (ImageView) view.findViewById(R.id.iv_back_city);

TextView windowTitle = (TextView) view.findViewById(R.id.tv_title);

RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.rv);

liWindow.showRightPopupWindow(view);

}

//点击事件

@OnClick(R.id.iv_city_select)

public void onViewClicked() {//显示城市弹窗

showCityWindow();

}

接下来就是花里胡哨的操作了，首先我希望我的列表市动画展示出来的。

先创建动画文件，在模块中的anim文件

加下

item_animation_from_bottom.xml

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

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

android:duration=“500”>

<translate

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

android:fromYDelta=“50%p”

android:toYDelta=“0”/>

<alpha

android:fromAlpha=“0”

android:toAlpha=“1”

android:interpolator=“@android:anim/accelerate_decelerate_interpolator” />

item_animation_from_right.xml

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

作者2013年从java开发，转做Android开发，在小厂待过，也去过华为，OPPO等大厂待过，18年四月份进了阿里一直到现在。

参与过不少面试，也当面试官 面试过很多人。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长，而且极易碰到天花板技术停滞不前！

我整理了一份阿里P7级别的最系统的Android开发主流技术，特别适合有3-5年以上经验的小伙伴深入学习提升。

主要包括阿里，以及字节跳动，腾讯，华为，小米，等一线互联网公司主流架构技术。如果你想深入系统学习Android开发，成为一名合格的高级工程师，可以收藏一下这些Android进阶技术选型

我搜集整理过这几年阿里，以及腾讯，字节跳动，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 Xmind（实际上比预期多花了不少精力），包含知识脉络 + 分支细节。

Java语言与原理；
大厂，小厂。Android面试先看你熟不熟悉Java语言

高级UI与自定义view；
自定义view，Android开发的基本功。

性能调优；
数据结构算法，设计模式。都是这里面的关键基础和重点需要熟练的。

NDK开发；
未来的方向，高薪必会。

前沿技术；
组件化，热升级，热修复，框架设计

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

我在搭建这些技术框架的时候，还整理了系统的高级进阶教程，会比自己碎片化学习效果强太多，CodeChina上可见；

当然，想要深入学习并掌握这些能力，并不简单。关于如何学习，做程序员这一行什么工作强度大家都懂，但是不管工作多忙，每周也要雷打不动的抽出 2 小时用来学习。

不出半年，你就能看出变化！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
，在小厂待过，也去过华为，OPPO等大厂待过，18年四月份进了阿里一直到现在。

参与过不少面试，也当面试官 面试过很多人。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长，而且极易碰到天花板技术停滞不前！

我整理了一份阿里P7级别的最系统的Android开发主流技术，特别适合有3-5年以上经验的小伙伴深入学习提升。

主要包括阿里，以及字节跳动，腾讯，华为，小米，等一线互联网公司主流架构技术。如果你想深入系统学习Android开发，成为一名合格的高级工程师，可以收藏一下这些Android进阶技术选型

我搜集整理过这几年阿里，以及腾讯，字节跳动，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 Xmind（实际上比预期多花了不少精力），包含知识脉络 + 分支细节。

[外链图片转存中…(img-Ba0fGUxF-1714412372399)]

Java语言与原理；
大厂，小厂。Android面试先看你熟不熟悉Java语言

[外链图片转存中…(img-bBjHIsxB-1714412372401)]

高级UI与自定义view；
自定义view，Android开发的基本功。

[外链图片转存中…(img-9mu2nufk-1714412372404)]

性能调优；
数据结构算法，设计模式。都是这里面的关键基础和重点需要熟练的。

[外链图片转存中…(img-ut2Zd4eM-1714412372405)]

NDK开发；
未来的方向，高薪必会。

[外链图片转存中…(img-T7L9GMwa-1714412372407)]

前沿技术；
组件化，热升级，热修复，框架设计

[外链图片转存中…(img-mcq3jxCy-1714412372409)]

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

我在搭建这些技术框架的时候，还整理了系统的高级进阶教程，会比自己碎片化学习效果强太多，CodeChina上可见；

当然，想要深入学习并掌握这些能力，并不简单。关于如何学习，做程序员这一行什么工作强度大家都懂，但是不管工作多忙，每周也要雷打不动的抽出 2 小时用来学习。

不出半年，你就能看出变化！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！