SunnyWeather

第一阶段

功能需求及技术可行性分析

在开始编码之前，我们需要先对程序进行需求分析，想一想SunnyWeather中应该具备哪些功能。将这些功能全部整理出来之后，我们才好动手去一一实现。这里我认为SunnyWeather中至少应该具备以下功能：

• 可以搜索全球大多数国家的各个城市数据
• 可以查看全球绝大多数城市的天气信息
• 可以自由地切换城市，查看其他城市的天气
• 可以手动刷新实时的天气

虽然看上去只有4个主要的功能点，但如果想要全部实现这些功能，却需要用到UI、网络、数据、存储、异步处理等技术，因此还是非常考验你的综合应用能力的。不过好在这些技术在前面的章节中我们全部学习过了，只要你学得用心，相信完成这些功能对你来说并不难。

分析完了需求之后，接下来就要进行技术可行性得分析了。毫无疑问，当前最重要得问题就是，我们如何才能得到全球大多数国家得城市数据，以及如何才能获取每个城市的天气信息。比较遗憾的是，现在网上免费的天气预报接口已经越来越少，很多之前可以使用的接口也慢慢关闭了。为了能够给你提供功能强大且长期稳定的服务器接口，本书最终选择了彩云天气。

彩云天气是一款非常出色的天气预报App，本章中我们即将编写的App就是以彩云天气为范本的。另外，彩云天气的开放API还提供了全球100多个国家的城市数据，以及每个城市的实时天气预报信息，并且这些API接口是长期稳定且可用的，从而帮你把前进的道路都铺平了。不过彩云天气的开放API并不是可以无限次免费使用的，而是每天最多提供1万次的免费请求，当然，这对于学习而言已经是相当充足了。

那么下面我们就来看一下彩云天气提供的这写开放API的具体用法。首先你需要注册一个账号，注册地址是https://dashboard.caiyunapp.com

这是我申请到的令牌值

xlZQEamTeTAz6E1Y

有了这个令牌值之后，我们就能使用彩云天气提供的各种API接口了，比如访问如下接口地址即可查询全球绝大多数城市的数据信息

https://api.caiyunapp.com/v2/place?query=北京&token={token}&lang=zh_CN

query参数指定的是要查询的关键字，token参数传入我们刚才申请到的令牌值即可。服务器会返回我们一段JSON格式的数据，大致内容如下所示：

{"status":"ok","query":"北京", 
"places":[ 
{"name":"北京市","location":{"lat":39.9041999,"lng":116.4073963}, 
"formatted_address":"中国北京市"}, 
{"name":"北京西站","location":{"lat":39.89491,"lng":116.322056}, 
"formatted_address":"中国 北京市 丰台区 莲花池东路118号"}, 
{"name":"北京南站","location":{"lat":39.865195,"lng":116.378545}, 
"formatted_address":"中国 北京市 丰台区 永外大街车站路12号"}, 
{"name":"北京站(地铁站)","location":{"lat":39.904983,"lng":116.427287}, 
"formatted_address":"中国 北京市 东城区 2号线"} 
]}

status代表请求的状态，ok表示成功。places是一个JSON数组，会包含几个与我们查询的关键字关系度比较高的地区信息。其中name表示该地区的名字，location表示该地区的经纬度，formatted_address表示该地区的地址。

通过这种方式，我们就能把全球绝大多数城市的数据信息获取到了。那么解决了城市数据的获取，我们怎么样才能查看到具体的天气消息呢？这个时候就得使用彩云天气的另一个API接口了，接口地址如下：

https://api.caiyunapp.com/v2.5/{token}/116.4073963,39.9041999/realtime.json

token部分仍然传入我们刚才申请到的令牌值，紧接着传入一个经纬度坐标，纬度和经度之间 要用逗号隔开，这样服务器就会把该地区的实时天气信息以JSON格式返回给我们了。不过，由 于返回的数据比较复杂，这里我做了一下精简处理，如下所示：

{ 
     "status": "ok", 
     "result": { 
         "realtime": { 
             "temperature": 23.16, 
             "skycon": "WIND", 
             "air_quality": { 
                 "aqi": { "chn": 17.0 } 
             } 
         } 
     } 
} 

realtime中包含的就是当前地区的实时天气信息，其中temperature表示当前的温度，

skycon表示当前的天气情况。而air_quality中会包含一些空气质量的数据，当然返回的空气质量数据有很多种，这里我准备使用aqi的值作为空气质量指数显示在界面上。

以上接口可以用来获取指定地区实时的天气信息，而如果想要获取未来几天的天气信息，还要借助另外一个API接口，接口地址如下：

https://api.caiyunapp.com/v2.5/{token}/116.4073963,39.9041999/daily.json

很简单，只需要将接口最后的realtime.json改成了daily.json就可以了，其他部分都是相 同的。这个接口返回的数据也比较复杂，我还是进行了一下精简处理，如下所示：

{ 
     "status": "ok", 
     "result": { 
         "daily": { 
             "temperature": [ {"max": 25.7, "min": 20.3}, ... ], 
             "skycon": [ {"value": "CLOUDY", "date":"2019-10-20T00:00+08:00"}, ... ], 
             "life_index": { 
                 "coldRisk": [ {"desc": "易发"}, ...], 
                 "carWashing": [ {"desc": "适宜"}, ... ], 
                 "ultraviolet": [ {"desc": "无"}, ... ], 
                 "dressing": [ {"desc": "舒适"}, ... ] 
             } 
         } 
     } 
}

daily中包含的就是当前地区未来几天的天气信息，temperature表示未来几天的温度值，skycon表示未来几天的天气情况。而life_index中包含一些生活指数，coldRisk表示感冒指数，carWashing表示当前洗车指数，ultraviolet表示紫外线指数，dressing表示穿衣指数。这个接口中返回的数据大部分是数组格式的，这一点需要格外注意。

接下来我们只需要对获得的JSON数据进行解析就可以了，这对于你来说应该很轻松了吧？

搭建MVVM项目架构

MVVM是一种高级项目架构模式，目前已被广泛应用在Android程序设计领域，类似的架构模式还有MVP、MVC等。简单来讲，MVVM架构可以将程序结构主要分成3部分：Model是数据模型部分；View是界面展示部分；而ViewModel比较特殊，可以将它理解成一个连接数据模型和界面展示的桥梁，从而实现让业务逻辑和界面展示分离的程序结构设计。

搜索全球城市数据

实现逻辑层代码

使用MVVM这种分层架构的设计，由于从ViewModel层开始就不再持有Activity的引用了，所以我们可以先使用第14章中学到的技术，给SunnyWeather项目提供一种全局获取Context的方式。

在com.sunnyweather.android包下新建一个SunnyWeatherApplilcation类，代码如下所示：

class SunnyWeatherApplication: Applicationi(){
    companion object{
        @SuppressLint("StaticFieldLeak")
        lateinit var context: Context
    }
    
    override fun onCreate(){
        super.onCreate()
        context = applicationContext
    }
}

这段代码我们刚刚在上一章中学习过，你应该记忆犹新吧。然后还需要在 AndroidManifest.xml文件的标签下指定SunnyWeatherApplication， 如下所示：

<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
     package="com.sunnyweather.android"> 
     <application 
         android:name=".SunnyWeatherApplication" 
         android:allowBackup="true" 
         android:icon="@mipmap/ic_launcher" 
         android:label="@string/app_name" 
         android:roundIcon="@mipmap/ic_launcher_round" 
         android:supportsRtl="true" 
         android:theme="@style/AppTheme"> 
         ... 
     </application> 
</manifest

经过这样的配置之后，我们就可以在项目的任何位置通过调用 SunnyWeatherApplication.context来获取Context对象了，非常便利。

另外，我们刚才不是在彩云天气的开发者平台申请到了一个令牌值吗？可以将这个令牌值也配 置在SunnyWeatherApplication中，方便之后的获取，如下所示：

class SunnyWeatherApplication: Application(){
    
    companion object{
        const val TOKEN = "xlZQEamTeTAz6E1Y"
        @SuppressLint("StaticFieldLeak")
        lateinit var context: Context
    }
    
    override fun onCreate(){
        super.onCreate()
        context = applicationContext
    }
    
}

接下来我们来定义下数据模型，在logic/model包下新建一个PlaceResponse.kt文件，并在这个文件中编写如下代码：

data class PlaceResponse(val status: String, val places: List<Place>)

data class Place(val name: String, val location: Location,
                @SerializedName("formatted_address") val address: String)

data class Location(val lng: String, val lat: String)

定义好了数据模型，接下来我们就可以开始编写网络层相关的代码了。首先定义一个用于访问彩云天气城市搜索API的Retrofit接口，在logic/newwork包下新建PlaceService接口，代码如下所示：

interface PlaceService{
    @GET("v2/place?token=${SunnyWeatherApplication.TOKEN}&lang=zh_CN")
    fun searchPlaces(@Query("query") query: String): Call<PlaceResponse>
}

可以看到，我们在searchPlaces()方法的上面声明了一个@GET注解，这样当调用searchPlaces()方法的时候，Retrofit就会自动发起一条GET请求，去访问@GET注解中配置的地址。其中，搜索城市数据的API中只有query这个参数是需要动态指定的，我们使用@Query注解的方式来进行实现，另外两个参数是不会变的，因此固定写在@GET注解中即可。

另外，searchPlaces()方法的返回值被声明成了Call，这样Retrofit就会将服务器返回的JSON数据自动解析成PlaceResponse对象了。

定义好了PlaceService接口，为了能够使用它，我们还得创建一个Retrofit构建器才行。在logic/network包下新建一个ServiceCreator单例类，代码如下所示：

object ServiceCreator{
    private const val BASE_URL = "https://api.caiyunapp.com/"
    
    private val retrofi = Retrofit.Builder()
    	.baseUrl(BASE_URL)
    	.addConverterFactory(GsonConverterFactory.create())
    	.build()
    
    fun <T> create(serviceClass: Class<T>): T = retrofit.create(serviceClass)
    
    inline fun <reified T> create(): T = create(T::class.java)

}

接下来我们还需要再定义一个通用的网络数据源访问入口，对所有网络请求的API进行封装。同样再logic/network包下新建一个SunnyWeatherNetwork单例类，代码如下所示：

object SunnyWeatherNetwork{
    
    private val placeService = ServiceCreator.create<PlaceService>()
    
    suspend fun searchPlaces(query: String) = placeService.searchPlaces(query).await()
    
    private suspend fun <T> Call<T>.await(): T{
        return suspendCoroutine{ continuation ->
                                enqueue(object: Callback<T>{
                                    override fun onResponse(call: Call<T>, response: Reponse<T>){
                                        val body = response.body()
                                        if(body != null) continuation.resume(body)
                                        else continuation.resumeWithException(
                                        	RuntimeException("response body is null")
                                        )
                                    }
                                    
                                    override fun onFailure(call: Call<T>, t: Throwable){
                                        continuation.resumeWithException(t)
                                    }
                                })
            
        }
    }
}

这是一个非常关键的类，并且用到了许多高级技巧，我来带你慢慢解析一下。

首先我们使用ServiecCreator创建了一个PlaceService接口的动态代理对象，然后定义了一个searchPlaces()函数，并在这里调用刚刚在PlaceService接口中定义的searchPlaces()方法，以发起搜索城市的数据请求

但是为了让代码变得更加简洁，我们使用了之气学习的技巧来简化Retrofit回调的写法。由于是需要借助协程技术来实现的，因此这里又定义了一个await()函数，并将searchPlaces()函数也声明成挂起函数。至于await()函数的实现，之前在11.7.3小节就解析过了，所以应该是很好理解的。

这样，当外部调用SunnyWeatherNetwork的searchPlaces()函数时，Retrofit就会立即发起网络请求，同时当前的协程也会被阻塞住。直到服务器响应我们的请求之后，await()函数会将解析出来的数据模型对象返回，同时恢复当前协程的执行，searchPlaces()函数在得到await()函数的返回值后会将该数据返回到上一层。

这样网络层相关的代码我们就编写完了，下面开始编写仓库层的代码。之前已经解释过，仓库层的主要工作就是判断调用方法请求的数据应该是从本地数据源中获取还是从网络数据源中获取，并将获得的数据返回给调用方。因此，仓库层有点像是一个数据获取与缓存的中间层，在本地没有缓存数据的情况下就去网络层获取，如果本地已经有缓存了，就之u姐将缓存数据返回。

不过我个人认为，这种搜索城市数据的请求并没有太多缓存的必要，每次都发起网络请求去获取最新的数据即可，因此这里就不进行本地缓存的实现了。在logic包下新建一个Repository单例类，作为仓库层的统一封装入口，代码如下所示：

object Repository{
    
    fun searchPlaces(query: String) = liveData(Dispathcer.IO){
        val result = try{
            val placeResponse = SunnyWeatherNetwork.searchPlaces(query)
            if(placeResponse.status == "ok"){
                val places = placeResponse.places
                Result.success(places)
            }else{
                Result.failure(RuntimeException("response stats is ${placeResponse.status}"))
            } catch(e: Exception){
                Result.failure<List<Place>>(e)
            }
            emit(result)
        }
    }
}

一般在仓库层中定义的方法，为了能将异步获取的数据以响应式编程的方式通知给上一层，通常会返回一个LiveData对象。上述代码中我们还将liveData()函数的线程参数类型指定成了 Dispatchers.IO，这样代码块中的所有代码就都运行在子线程中了。

写到这里，逻辑层的实现就只剩最后一步了：定义ViewModel层。ViewModel相当于逻辑层和 UI层之间的一个桥梁，虽然它更偏向于逻辑层的部分，但是由于ViewModel通常和Activity或 Fragment是一一对应的，因此我们还是习惯将它们放在一起。

在ui/place包下新建一个PlaceViewModel，代码如下所示：

class PlaceViewModel : ViewModel() {

    private val searchLiveData = MutableLiveData<String>()

    val placeList = ArrayList<Place>()

    val placeLiveData = searchLiveData.switchMap{ query ->
        Repository.searchPlaces(query)
    }

    fun searchPlaces(query: String) {
        searchLiveData.value = query
    }

}

ViewModel层的代码就相对比较简单了。首先PlaceViewModel中也定义了一个 searchPlaces()方法，但是这里并没有直接调用仓库层中的searchPlaces()方法，而是将 传入的搜索参数赋值给了一个searchLiveData对象，并使用Transformations的 switchMap()方法来观察这个对象，否则仓库层返回的LiveData对象将无法进行观察。

另外，我们还在PlaceViewModel中定义了一个placeList集合，用于对界面上显示的城市数 据进行缓存，因为原则上与界面相关的数据都应该放到ViewModel中，这样可以保证它们在手 机屏幕发生旋转的时候不会丢失，稍后我们会在编写UI层代码的时候用到这个集合。

好了，关于逻辑层的实现到这里就基本完成了，现在SunnyWeather项目已经拥有了搜索全球 城市数据的能力，那么接下来就开始进行UI层的实现吧。

实现UI层代码

UI层的实现一般是从编写布局文件开始的，由于搜索城市数据的功能我们在后面还会复用，因 此就不建议写在Activity里面了，而是应该写在Fragment里面，这样当需要复用的时候直接在 布局里面引入该Fragment即可。

在res/layout目录中新建fragment_place.xml布局，代码如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="?android:windowBackground"> 

     <ImageView
         android:id="@+id/bgImageView" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_alignParentBottom="true" 
         android:src="@drawable/bg_place"/> 

     <FrameLayout 
         android:id="@+id/actionBarLayout" 
         android:layout_width="match_parent" 
         android:layout_height="60dp" 
         android:background="@color/colorPrimary"> 

         <EditText 
             android:id="@+id/searchPlaceEdit" 
             android:layout_width="match_parent" 
             android:layout_height="40dp" 
             android:layout_gravity="center_vertical" 
             android:layout_marginStart="10dp" 
             android:layout_marginEnd="10dp" 
             android:paddingStart="10dp" 
             android:paddingEnd="10dp" 
             android:hint="输入地址" 
             android:background="@drawable/search_bg"/> 
     </FrameLayout> 

     <androidx.recyclerview.widget.RecyclerView 
         android:id="@+id/recyclerView" 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:layout_below="@id/actionBarLayout" 
         android:visibility="gone"/> 

</RelativeLayout>

这个布局中主要有两部分内容：EditText用于给用户提供一个搜索框，这样用户就可以在这里 搜索任意城市；RecyclerView则主要用于对搜索出来的结果进行展示。另外这个布局中还有一 个ImageView控件，它的作用只是为了显示一张背景图，从而让界面变得更加美观，和主体功 能无关。

另外，简单起见，所有布局中显示的文字我都会使用硬编码的写法。这当然不是一种良好的习 惯，你在实现的时候应该将这些文字都定义到strings.xml中，然后在布局中进行引用。

既然用到了RecyclerView，那么毫无疑问，我们还得定义它的子项布局才行。在layout目录下 新建一个place_item.xml文件，代码如下所示：

<com.google.android.material.card.MaterialCardView 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:layout_width="match_parent" 
     android:layout_height="130dp" 
     android:layout_margin="12dp" 
     app:cardCornerRadius="4dp"> 

     <LinearLayout 
         android:orientation="vertical" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_margin="18dp" 
         android:layout_gravity="center_vertical"> 

         <TextView 
             android:id="@+id/placeName" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:textColor="?android:attr/textColorPrimary" 
             android:textSize="20sp"/> 

         <TextView 
             android:id="@+id/placeAddress" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:layout_marginTop="10dp" 
             android:textColor="?android:attr/textColorSecondary" 
             android:textSize="14sp"/> 

     </LinearLayout> 
 
</com.google.android.material.card.MaterialCardView> 

这里使用了MaterialCardView来作为子项的最外层布局，从而使得RecyclerView中的每个元 素都是在卡片中的。至于卡片中的元素内容非常简单，只用到了两个TextView，一个用于显示 搜索到的地区名，一个用于显示该地区的详细地址。

将子项布局也定义好了之后，接下来就需要为RecyclerView准备适配器了。在ui/place包下新 建一个PlaceAdapter类，让这个适配器继承自RecyclerView.Adapter，并将泛型指定为 PlaceAdapter.ViewHolder，代码如下所示：

class PlaceAdapter(private val fragment: Fragment, private val placeList: List<Place>):
    RecyclerView.Adapter<PlaceAdapter.ViewHolder>(){
        inner class ViewHolder(val binding: PlaceItemBinding):RecyclerView.ViewHolder(binding.root)

        override fun getItemCount(): Int {
            return placeList.size
        }

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
            val binding = PlaceItemBinding.inflate(LayoutInflater.from(parent.context),parent,false)
            return ViewHolder(binding)
        }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val place = placeList[position]
        holder.binding.placeName.text = place.name
        holder.binding.placeAddress.text = place.address
    }
}

现在适配器也准备好了，只剩下对Fragment进行实现了。在ui/place包下新建一个 PlaceFragment，并让它继承自AndroidX库中的Fragment，代码如下所示：

package com.example.sunnyweather.ui.place

import PlaceViewModel
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.core.widget.addTextChangedListener
import androidx.fragment.app.Fragment
import androidx.lifecycle.Observer
import androidx.lifecycle.ViewModelProvider
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.example.sunnyweather.R
import com.example.sunnyweather.databinding.FragmentPlaceBinding
import kotlinx.coroutines.newFixedThreadPoolContext

class PlaceFragment: Fragment() {
    val viewModel by lazy { ViewModelProvider(this).get(PlaceViewModel::class.java) }

    private lateinit var adapter: PlaceAdapter
    private lateinit var binding: FragmentPlaceBinding

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View?{

        binding = FragmentPlaceBinding.inflate(inflater,container, false)
        return binding.root
    }

    override fun onActivityCreated(savedInstanceState: Bundle?){
        super.onActivityCreated(savedInstanceState)
        val recyclerView = binding.recyclerView
        val layoutManager = LinearLayoutManager(activity)
        recyclerView.layoutManager = layoutManager
        adapter = PlaceAdapter(this,viewModel.placeList)
        recyclerView.adapter = adapter
        val searchPlaceEdit = binding.searchPlaceEdit
        val bgImageView = binding.bgImageView
        searchPlaceEdit.addTextChangedListener{ editable ->
            val content = editable.toString()
            if(content.isNotEmpty()){
                viewModel.searchPlaces(content)
            }else{
                recyclerView.visibility = View.GONE
                bgImageView.visibility = View.VISIBLE
                viewModel.placeList.clear()
                adapter.notifyDataSetChanged()
            }
        }
        viewModel.placeLiveData.observe(viewLifecycleOwner, Observer{ result ->
            val places = result.getOrNull()
            if(places != null){
                recyclerView.visibility = View.VISIBLE
                bgImageView.visibility = View.GONE
                viewModel.placeList.clear()
                viewModel.placeList.addAll(places)
                adapter.notifyDataSetChanged()
            } else{
                Toast.makeText(activity,"未能查询到任何地点",Toast.LENGTH_SHORT).show()
                result.exceptionOrNull()?.printStackTrace()
            }
        })
    }
}

第一阶段小节

实现逻辑层代码

获取全局Context，将TOKEN值填入

class SunnyWeatherApplication: Application(){
    
    companion object{
        const val TOKEN = "填入你申请到的令牌值"
        
        @SuppressLint("StaticFieldLeak")
        lateinit var context: Context
    }
    
    override fun onCreate(){
        super.onCreate()
        context = applicationContext
    }
}

还需要在AndroidManifest.xml文件的 application标签中指定SunnyWeatherApplication

定义数据模型

data class PlaceResponse(val status: String, val places: List<Place>)

data class Place(val name: String, val location: Location, 
                @SerializedName("formatted_address") val address: String)

data class Location(val lng: String, val lat: String)

定义一个用于访问彩云天气城市搜索API的Retrofit接口

interface PlaceService{
    
    @GET("v2/place?token=${SunnyWeatherApplication.TOKEN}&lang=zh_CN")
    fun searchPlaces(@Query("query") query: String): Call<PlaceResponse>
    
}

定义一个ServiceCreator类

object ServiceCreator{
    
    private const val BASE_URL = "https://api.caiyunapp.com/"
    
    private val retrofit = Retrofit.Builde()
    	.baseUrl(BASE_URL)
    	.addConverterFactory(GsonConverterFatory.create())
    	.build()
    
    fun <T> create(serviceClass: Class<T>): T = retrofit.create(serviceClass)
    
    inline fun <refied T> create(): T = create(T::class.java)
    
}

定义一个统一的网络数据资源访问入口

object SunnyWeatherNetwork{
    
    private val placeService = ServiceCreator.create<PlaceService>()
    
    suspend fun searchPlaces(query: String) = placeService.searchPlaces(query).await()
    
    private suspend fun <T> Call<T>.await(): T{
        return suspendCoroutine{ continuation ->
                                enqueue(object: Callbakc<T>){
                                    override fun onResponse(call: Call<T>, response: Response<T>){
                                        val body = response.body()
                                        if(body != null) continuation.resume(body)
                                        else continuation.resumeWithException(
                                        	RuntimeException("response body is null")
                                        )
                                    }
                                    
                                    override fun onFailure(call: Call<T>, t: Throwable){
                                        continuation.resumeWithException(t)
                                    }
                                }
        }
    }
}

仓库层

object Repository{

    fun searchPlaces(query: String) = liveData(Dispatchers.IO){
        val result = try{
            val placeResponse = SunnyWeatherNetwork.searchPlaces(query)
            if(placeResponse.status == "ok"){
                val places = placeResponse.places
                Result.success(places)
            } else{
                Result.failure(RuntimeException("response status is ${placeResponse.status}"))
            }
        }catch(e: Exception){
            Result.failure<List<Place>>(e)
        }
        emit(result)
    }
}

定义ViewModel层

class PlaceViewModel: ViewModel(){
    
    private val searchLiveData = MutableLiveData<String>()
    
    val placeList = ArrayList<Place>()
    
    val placeLiveData = searchLiveData.switchMap{query ->
                                                Repository.searchPlaces(query)
                                                }
    
    fun searchPlaces(query: String){
        searchLiveData.value = query
    }
}

实现UI层代码

新建一个布局fragment_place.xml

<RelativeLayout xmlns: android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:backgrount="?android:windowBackground"
                >
    
    <ImageView
               andorid:id="@+id/bgImageView"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:layout_allignParentBottom="true"
               android:src="@drawable/bg_place"/>
    
    <FrameLayout
                 android:id="@+id/actionBarLayout"
                 andorid:layout_width="match_parent"
                 andorid:layout_height="60dp"
                 andorid:background="@color/colorPrimary"
                 >
        <EditText
                  android:id="@+id/searchPlaceEdit"
                  andorid:layout_width="match_parent"
                  android:layout_height="40dp"
                  andorid:layout_gravity="center_vertival"
                  android:layout_marginStart="10dp"
                  android:paddingStart="10dp"
                  android:paddingEnd="10dp"
                  android:hint="输入地址"
                  android:backgroutn="@drawable/search_bg"/>
    </FrameLayout>
    
    <androidx.recyclerview.widget.RecyclerView
                                               android:id="@+id/recyclerView"
                                               android:layout_width="match_parent"
                                               android:layout_height="match_parent"
                                               andorid:layout_below="@id/actionBarLayout"
                                               android:visibility="gone"/>
</RelativeLayout>

定义RecyclerView的子布局place_item.xml

<com.google.android.material.card.MaterialCardView
                                                   xmlns:android="http://schemas.android.com/apk/res/android"
                                                   xmlns:app="http://shcemas.android.com/apk/res-auto"
                                                   android:layout_width="match_parent"
                                                   android:layout_height="130dp"
                                                   android:layout_margin="12dp"
                                                   app:cardCornerRadius="4dp">
    <LinearLayout
                  android:orientation="vertical"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_margin="18dp"
                  android:layout_gravity="center_vertical">
        
        <TextView
                  android:id="@+id/placeName"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:textColor="?android:attr/textColorPrimary"
                  android:textSize="2osp"/>
        
        <TextView
                  android:id="@id/placeAddress"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  androd:layout_marginTop="10dp"
                  andorid:textColor="?android:attr/textColorSecondary"
                  android:textSize="14sp"/>
    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

定义RecyclerView的适配器

class PlaceAdapter(private val fragment: Fragment, private val placeList: List<Place>):
	RecyclerView.Adapter<PlaceAdapter.ViewHolder>(){
        inner class ViewHolder(val binding: PlaceItemBinding): RecyclerView.ViewHolder(binding.root)
        
        override fun getItemCount(): Int{
            return placeList.size
        }
        
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder{
            val binding = PlaceItemBinding.inflate(LayouInfalter.from(parent.context),parent,false)
            return VeiwHolder(binding)
        }
        
        overrdin fun onBindViewHolder(holder: ViewHolder, position: Int){
            val place = placeList[position]
            holder.binding.placeName.text = place.name
            holder.binding.placeAddress.text = place.address
        }
    }

实现Fragment

class PlaceFragment: Fragment() {
    val viewModel by lazy { ViewModelProvider(this).get(PlaceViewModel::class.java) }

    private lateinit var adapter: PlaceAdapter
    private lateinit var binding: FragmentPlaceBinding

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View?{

        binding = FragmentPlaceBinding.inflate(inflater,container, false)
        return binding.root
    }

    override fun onActivityCreated(savedInstanceState: Bundle?){
        super.onActivityCreated(savedInstanceState)
        val recyclerView = binding.recyclerView
        val layoutManager = LinearLayoutManager(activity)
        recyclerView.layoutManager = layoutManager
        adapter = PlaceAdapter(this,viewModel.placeList)
        recyclerView.adapter = adapter
        val searchPlaceEdit = binding.searchPlaceEdit
        val bgImageView = binding.bgImageView
        searchPlaceEdit.addTextChangedListener{ editable ->
            val content = editable.toString()
            if(content.isNotEmpty()){
                viewModel.searchPlaces(content)
            }else{
                recyclerView.visibility = View.GONE
                bgImageView.visibility = View.VISIBLE
                viewModel.placeList.clear()
                adapter.notifyDataSetChanged()
            }
        }
        viewModel.placeLiveData.observe(viewLifecycleOwner, Observer{ result ->
            val places = result.getOrNull()
            if(places != null){
                recyclerView.visibility = View.VISIBLE
                bgImageView.visibility = View.GONE
                viewModel.placeList.clear()
                viewModel.placeList.addAll(places)
                adapter.notifyDataSetChanged()
            } else{
                Toast.makeText(activity,"未能查询到任何地点",Toast.LENGTH_SHORT).show()
                result.exceptionOrNull()?.printStackTrace()
            }
        })
    }
}