Android 天气APP（十八）常用城市

上一篇：Android 天气APP（十七）热门城市 - 国内城市
完成此篇文章实现的效果图如下：

前言

常用城市对于那些经常在外面出差的朋友来说相信是不陌生的，因为涉及到在不同城市之间居住，所以对于其他城市的天气是比较在意的，假如我要去一个城市的话，肯定要先了解天气怎么样，不然过去之后身体都受不了，何谈工作和生活呢，所以说我们需要在去之前做好准备工作，未雨绸缪，说实话这个功能是应该早就要有的，所以为了提高可用性，这里增加常用城市的功能。

正文

① 创建Activity

既然是一个新的功能当然是通过创建Activity来实现了，在app模块下的ui包下创建一个Empty Activity，命名为CommonlyUsedCityActivity

然后修改布局

这是布局中用到的图标

然后是颜色，

 <color name="shallow_gray">#F2F2F2</color><!--浅灰色--><color name="dark_gray">#707070</color><!--深灰色--><color name="shallow_black">#6D6D6D</color><!--褐黑色--><color name="red">#FF0A00</color><!--红色--><color name="line_gray">#E3E5E8</color><!--灰色分割线--><color name="shallow_yellow">#E7C373</color><!--浅黄色-->

<?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:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/shallow_gray"tools:context=".ui.CommonlyUsedCityActivity"><!--头部--><androidx.appcompat.widget.Toolbarxmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="@color/white"android:elevation="@dimen/dp_2"app:contentInsetLeft="0dp"app:contentInsetStart="0dp"app:contentInsetStartWithNavigation="0dp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintTop_toTopOf="parent"app:navigationIcon="@mipmap/icon_return"app:popupTheme="@style/AppTheme.PopupOverlay"><!--输入框布局--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="@dimen/dp_30"android:layout_marginRight="@dimen/dp_12"android:layout_weight="1"android:background="@drawable/shape_gray_bg_14"android:gravity="center_vertical"android:paddingLeft="@dimen/dp_12"android:paddingRight="@dimen/dp_12"><!--搜索图标--><ImageViewandroid:layout_width="@dimen/dp_16"android:layout_height="@dimen/dp_16"android:src="@mipmap/icon_search" /><!--输入框--><EditTextandroid:id="@+id/edit_query"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:background="@null"android:hint="添加城市"android:imeOptions="actionSearch"android:paddingLeft="@dimen/dp_8"android:paddingRight="@dimen/dp_4"android:singleLine="true"android:textColor="@color/black"android:textCursorDrawable="@drawable/cursor_style"android:textSize="@dimen/sp_14" /><!--清除输入的内容--><ImageViewandroid:id="@+id/iv_clear_search"android:layout_width="@dimen/dp_16"android:layout_height="@dimen/dp_16"android:src="@mipmap/icon_delete"android:visibility="gone" /></LinearLayout></androidx.appcompat.widget.Toolbar><!--没有数据时显示--><LinearLayoutandroid:visibility="gone"android:id="@+id/lay_normal"android:gravity="center"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:layout_width="@dimen/dp_160"android:layout_height="@dimen/dp_160"android:src="@mipmap/icon_normal"/><TextViewandroid:textSize="@dimen/sp_16"android:text="空空如也~"android:textColor="@color/dark_gray"android:layout_marginTop="@dimen/dp_12"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout><!--常用城市展示列表--><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/rv_commonly_used"android:layout_width="match_parent"android:layout_height="match_parent"android:scrollbars="none" /><!--搜索城市展示列表--><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/rv_search"android:visibility="gone"android:layout_width="match_parent"android:layout_height="match_parent"android:scrollbars="none" />
</LinearLayout>

可以看到这里布局和搜索城市的布局有些类似，但不一样，这里的搜索出来的结果不会产生搜索记录，当点击搜索出来的城市时，就去查询这个城市的天气，同时这个城市也会放入常用城市列表里面，这里可以用缓存来做处理，也可以通过数据库来处理。

② Android SQLite

相信很多从事Android开发的程序员都了解过SQLite，但是用过的人并不多，这是为什么呢？因为一旦数据量很多的情况下我们不会用SQLite，而是通过服务器的数据库返回数据，而数据量少的时候用缓存就可以解决问题，所以这也是SQLite尴尬的地方，这是我个人看法，不过这个SQLite还是很重要的，不然我还是会用缓存的，如果是使用原生的SQLite代码就会比较的繁琐，所以这里我们可以用第三方库来快速实现功能，这里使用郭霖大神的LitePal框架
首先是在mvplibrary下的build.gradle中添加依赖

 //Android SQLite操作框架api 'org.litepal.guolindev:core:3.1.1'//列表item侧滑删除api 'com.github.mcxtzhang:SwipeDelMenuLayout:V1.3.0'

应该是一目了然吧，记得Sync哦~
然后配置litepal.xml，将项目预览模式切换为Project,然后打开mvplibrary，创建一个assets文件夹，再创建一个litepal.xml文件

文件中的代码如下

<?xml version="1.0" encoding="utf-8"?>
<litepal><!--数据库名称--><dbname value="GoodWeather" /><!--数据库版本--><version value="1" /><!--数据列表--><list></list>
</litepal>

比较的简单
然后要在app下的WeatherApplication中进行初始化

现在你可以创建数据实体了,然后在mvplibrary下创建一个数据实体bean

代码如下：

package com.llw.mvplibrary.bean;import org.litepal.crud.LitePalSupport;public class ResidentCity extends LitePalSupport {private int id;//编号private String location;//地区／城市名称private String parent_city;//该地区／城市的上级城市private String admin_area;//该地区／城市所属行政区域private String cnty;//该地区／城市所属国家名称public int getId() {return id;}public void setId(int id) {this.id = id;}public String getLocation() {return location;}public void setLocation(String location) {this.location = location;}public String getParent_city() {return parent_city;}public void setParent_city(String parent_city) {this.parent_city = parent_city;}public String getAdmin_area() {return admin_area;}public void setAdmin_area(String admin_area) {this.admin_area = admin_area;}public String getCnty() {return cnty;}public void setCnty(String cnty) {this.cnty = cnty;}
}

然后在litepal.xml中增加一个mapping

最后在WeatherApplication中的onCreate方法中初始化，初始化的时候，你的数据库就创建好了，数据库名称是GoodWeather,表名是ResidentCity

那么这一块的内容就写完了，只需要在实际应用中结合业务逻辑使用就可以了，当然你也可以去自己尝试一下，感兴趣的可以看Android LitePal的简单使用这篇文章。

③ 布局item

通过最上面的效果图可以看到是两个列表，其中一个是已经添加的城市列表，另一个是搜索出来的城市列表，既然两个列表就要有两个item，当然你也可以用一个item来写，只不过用的时候要多写一些代码，首先当然是从布局开始着手了。

在app中res下的layout中创建两个布局文件
item_commonly_city_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical"xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"><!--支持侧滑的布局--><com.mcxtzhang.swipemenulib.SwipeMenuLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="@dimen/dp_50"android:clickable="true"android:paddingBottom="1dp"><!--显示文本--><TextViewandroid:id="@+id/tv_city_name"android:gravity="center_vertical"android:paddingLeft="@dimen/dp_16"android:layout_width="match_parent"android:layout_height="match_parent"android:textColor="@color/shallow_black"android:background="?android:attr/selectableItemBackground"android:text="城市"/><!-- 侧滑菜单的内容  现在里面只有一个按钮 --><Buttonandroid:id="@+id/btn_delete"android:layout_width="@dimen/dp_100"android:layout_height="match_parent"android:background="@color/red"android:text="删除"android:textColor="@android:color/white"/></com.mcxtzhang.swipemenulib.SwipeMenuLayout><!--分隔线--><Viewandroid:background="@color/line_gray"android:layout_width="match_parent"android:layout_height="@dimen/dp_1"/>
</LinearLayout>

item_commonly_city_add_list.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"android:layout_width="match_parent"android:id="@+id/item_add_city"android:background="?android:attr/selectableItemBackground"android:layout_height="wrap_content"android:orientation="vertical"><!--城市信息--><TextViewandroid:id="@+id/tv_location"android:gravity="center_vertical"android:layout_width="match_parent"android:textSize="@dimen/sp_16"android:paddingLeft="@dimen/dp_16"android:layout_height="@dimen/dp_50"android:textColor="@color/shallow_black" /><!--分隔线--><Viewandroid:layout_width="match_parent"android:layout_height="@dimen/dp_1"android:background="@color/line_gray" />
</LinearLayout>

④ 列表适配器

然后创建适配器

CommonlyCityAdapter.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.mvplibrary.bean.ResidentCity;import java.util.List;/*** 常用城市列表适配器*/
public class CommonlyCityAdapter extends BaseQuickAdapter<ResidentCity, BaseViewHolder> {public CommonlyCityAdapter(int layoutResId, @Nullable List<ResidentCity> data) {super(layoutResId, data);}@Overrideprotected void convert(BaseViewHolder helper, ResidentCity item) {helper.setText(R.id.tv_city_name, item.getLocation());//添加点击事件helper.addOnClickListener(R.id.tv_city_name).addOnClickListener(R.id.btn_delete);}
}

CommonlyCityAddAdapter.java

package com.llw.goodweather.adapter;import android.text.SpannableStringBuilder;
import android.text.style.ForegroundColorSpan;
import android.widget.TextView;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.SearchCityResponse;import java.util.List;import static android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE;/*** 添加城市时搜索返回结果列表适配器*/
public class CommonlyCityAddAdapter extends BaseQuickAdapter<SearchCityResponse.HeWeather6Bean.BasicBean, BaseViewHolder> {private String edStr;//关键字public CommonlyCityAddAdapter(int layoutResId, @Nullable List<SearchCityResponse.HeWeather6Bean.BasicBean> data) {super(layoutResId, data);}@Overrideprotected void convert(BaseViewHolder helper, SearchCityResponse.HeWeather6Bean.BasicBean item) {TextView textView = helper.getView(R.id.tv_location);String result = item.getLocation() + " , " + item.getParent_city() + " , " + item.getAdmin_area() + " , " + item.getCnty();if (edStr != null && edStr.length() > 0) {textView.setText(matcherSearchText(mContext.getResources().getColor(R.color.shallow_yellow),result,edStr));} else {textView.setText(item.getLocation() + " , " +item.getParent_city() + " , " +item.getAdmin_area() + " , " +item.getCnty());}helper.addOnClickListener(R.id.item_add_city);}/*** 改变颜色* @param str  输入的文本*/public void changTxColor(String str) {edStr = str;notifyDataSetChanged();}/*** 改变一段文本中第一个关键字的文字颜色* @param color  要改变文字的颜色* @param string  文本字符串* @param keyWord  关键字* @return*/public static CharSequence matcherSearchText(int color, String string, String keyWord) {SpannableStringBuilder builder = new SpannableStringBuilder(string);int indexOf = string.indexOf(keyWord);if (indexOf != -1) {builder.setSpan(new ForegroundColorSpan(color), indexOf, indexOf + keyWord.length(), SPAN_EXCLUSIVE_EXCLUSIVE);}return builder;}
}

适配器的代码都是比较简单的，其中matcherSearchText方法是根据传入的关键字找到它在一段字符串中的第一次出现的位置，并修改字体颜色。

⑤ 代码整合

打开CommonlyUsedCityActivity.java

然后会出现五个构造方法，分别是

 //数据初始化@Overridepublic void initData(Bundle savedInstanceState) {}@Overridepublic int getLayoutId() {return R.layout.activity_commonly_used_city;}@Overrideprotected SearchCityContract.SearchCityPresenter createPresent() {return new SearchCityContract.SearchCityPresenter();}/*** 请求数据返回处理* @param response*/@Overridepublic void getSearchCityResult(Response<SearchCityResponse> response) {}/*** 网络异常返回处理*/@Overridepublic void getDataFailed() {dismissLoadingDialog();//关闭弹窗ToastUtils.showShortToast(context, "网络异常");//这里的context是框架中封装好的，等同于this}

现在你可以把onCreate方法删掉了。

首先初始化控件

 @BindView(R.id.edit_query)EditText editQuery;//输入框@BindView(R.id.iv_clear_search)ImageView ivClearSearch;//清除输入框内容的图标@BindView(R.id.toolbar)Toolbar toolbar;//标题控件@BindView(R.id.rv_commonly_used)RecyclerView rvCommonlyUsed;//常用城市列表@BindView(R.id.rv_search)RecyclerView rvSearch;//搜索城市列表@BindView(R.id.lay_normal)LinearLayout layNormal;//常用城市为空时展示的布局CommonlyCityAdapter mAdapter;//常用城市列表适配器List<SearchCityResponse.HeWeather6Bean.BasicBean> mList = new ArrayList<>();//数据源CommonlyCityAddAdapter mAdapterAdd;//搜索城市列表适配器List<ResidentCity> cityList;//常用城市列表

根据常用城市数据来进行页面控件显示/隐藏

 /*** 根据常用城市数据来进行页面控件显示/隐藏*/private void initHideOrShow() {ivClearSearch.setVisibility(View.GONE);//隐藏清除输入框内容的图标rvSearch.setVisibility(View.GONE);//隐藏搜索结果列表if (cityList != null && cityList.size() > 0) {//有数据rvCommonlyUsed.setVisibility(View.VISIBLE);//显示常用城市列表layNormal.setVisibility(View.GONE);//隐藏没有数据时的布局} else {//没数据rvCommonlyUsed.setVisibility(View.GONE);//隐藏常用城市列表layNormal.setVisibility(View.VISIBLE);//显示没有数据时的布局}}

初始化常用城市列表数据

这个方法主要是查询表中的所有数据，有数据就渲染出来，没有数据就更换为相应的表示布局，其中对item中的点击事件做了处理，分别item的点击和侧滑菜单的点击。

     /*** 初始化常用城市列表数据*/private void initCityList() {//查询ResidentCity表中所有数据cityList = LitePal.findAll(ResidentCity.class);if (cityList.size() > 0 && cityList != null) {mAdapter = new CommonlyCityAdapter(R.layout.item_commonly_city_list, cityList);rvCommonlyUsed.setLayoutManager(new LinearLayoutManager(context));rvCommonlyUsed.setAdapter(mAdapter);mAdapter.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() {@Overridepublic void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {switch (view.getId()) {case R.id.tv_city_name:SPUtils.putString(Constant.LOCATION, cityList.get(position).getLocation(), context);//发送消息EventBus.getDefault().post(new SearchCityEvent(cityList.get(position).getLocation(),cityList.get(position).getParent_city()));finish();break;case R.id.btn_delete://删除LitePal.delete(ResidentCity.class, cityList.get(position).getId());//删除指定idinitCityList();//删除数据后判断一下显示和隐藏的控件initHideOrShow();break;}}});mAdapter.notifyDataSetChanged();} else {rvCommonlyUsed.setVisibility(View.GONE);layNormal.setVisibility(View.VISIBLE);}}

添加城市列表item，点击保存数据并发送事件

/*** 添加城市列表item，点击保存数据并发送事件** @param position*/private void QueryWeather(int position) {ResidentCity residentCity = new ResidentCity();residentCity.setLocation(mList.get(position).getLocation());//地区／城市名称residentCity.setParent_city(mList.get(position).getParent_city());//该地区／城市的上级城市residentCity.setAdmin_area(mList.get(position).getAdmin_area());//该地区／城市所属行政区域residentCity.setCnty(mList.get(position).getCnty());//该地区／城市所属国家名称residentCity.save();//保存数据到数据库中if (residentCity.save()) {//保存成功//然后使用之前在搜索城市天气中写好的代码SPUtils.putString(Constant.LOCATION, mList.get(position).getLocation(), context);//发送消息EventBus.getDefault().post(new SearchCityEvent(mList.get(position).getLocation(),mList.get(position).getParent_city()));finish();} else {//保存失败ToastUtils.showShortToast(context, "添加城市失败");}}

初始化搜索要添加的城市列表

 /*** 初始化搜索要添加的城市列表*/private void initQueryAddList() {mAdapterAdd = new CommonlyCityAddAdapter(R.layout.item_commonly_city_add_list, mList);rvSearch.setLayoutManager(new LinearLayoutManager(context));rvSearch.setAdapter(mAdapterAdd);//点击item时保存到数据库中，同时传递数据到主页面查询出天气mAdapterAdd.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() {@Overridepublic void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {QueryWeather(position);}});}

初始化搜索输入框 ,输入后马上查询数据，不需要额外点击，同时查询到数据之后隐藏默认城市列表

 /*** 初始化搜索输入框 ,输入后马上查询数据，不需要额外点击，同时查询到数据之后隐藏默认城市列表*/private void initEdit() {editQuery.addTextChangedListener(new TextWatcher() {@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}@Overridepublic void afterTextChanged(Editable s) {if (!s.toString().equals("")) {//输入后，显示清除按钮ivClearSearch.setVisibility(View.VISIBLE);mAdapterAdd.changTxColor(s.toString());mPresent.searchCity(context, s.toString());//开始搜索} else {//隐藏和显示控件initHideOrShow();}}});}

然后修改返回数据的方法

 /*** 请求数据返回处理* @param response*/@Overridepublic void getSearchCityResult(Response<SearchCityResponse> response) {dismissLoadingDialog();if (("ok").equals(response.body().getHeWeather6().get(0).getStatus())) {if (response.body().getHeWeather6().get(0).getBasic().size() > 0) {rvCommonlyUsed.setVisibility(View.GONE);//隐藏常用城市列表mList.clear();mList.addAll(response.body().getHeWeather6().get(0).getBasic());mAdapterAdd.notifyDataSetChanged();rvSearch.setVisibility(View.VISIBLE);//显示搜索城市列表layNormal.setVisibility(View.GONE);} else {ToastUtils.showShortToast(context, "很抱歉，未找到相应的城市");}} else {ToastUtils.showShortToast(context, CodeToStringUtils.WeatherCode(response.body().getHeWeather6().get(0).getStatus()));}}

再修改initData

 @Overridepublic void initData(Bundle savedInstanceState) {StatusBarUtil.setStatusBarColor(context, R.color.white);//白色状态栏StatusBarUtil.StatusBarLightMode(context);//黑色字体Back(toolbar);initCityList();//初始化常用城市列表initQueryAddList();//初始化搜索城市列表initEdit();//初始化输入框}

OK,整合完毕，运行，效果图如下：

OK，写完收工。

源码地址：GoodWeather
欢迎 Star 和 Fork

下一篇：Android 天气APP（十九）更换新版API接口（更高、更快、更强）