Weather app: 使用Glide來顯示各種天氣圖示

Sunday, February 2, 2020 | Sunday, February 2, 2020 | Android

Table of Contents

Github
build.gradle中入Glide
使用Glide顯示圖片
天氣詳細畫面中的城市名

上一篇文章介紹天氣資訊畫面的設計，但是天氣狀況的圖示尚未完成。本篇文章將介紹使用Glide來顯示各種天氣圖示，並且修正程式碼讓城市名可以在畫面上顯示出來。

Github

https://github.com/scobin/Android_WeatherApp/tree/feature/addGildeLib

build.gradle中入Glide

開啟 app 資料夾下的buid.gradle檔案，加入以下程式碼。完成後執行「sync now」。

// glide
implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

使用Glide顯示圖片

在WeatherDetailRecyclerAdapter的onBindViewHolder函數中加入Glide程式碼。 with中設置 holder.itemView。 load中設置圖片URL。(https://openweathermap.org/img/wn/"+ weather.weather[0].icon + "@2x.png) into裡則是要放上圖片的畫面元件，這裡設置成 holder.itemView.weather_icon。

override fun onBindViewHolder(holder: WeatherDetailRecyclerHolder, position: Int) {
    ...

    Glide.with(holder.itemView)
    .load("https://openweathermap.org/img/wn/"+ weather.weather[0].icon + "@2x.png")
    .into(holder.itemView.weather_icon)
}

天氣詳細畫面中的城市名

上一段影片在WeatherDetailFragment中產生了viewModel物件但尚未設定到databinding上，因此城市名無法被顯示。只要將viewModel物件設定好即可顯示城市名。

override fun onActivityCreated(savedInstanceState: Bundle?) {
    ...
    viewModel = ViewModelProviders.of(this).get(WeatherDetailViewModel::class.java)
    binding.viewModel = viewModel // <-- 設定viewModel
    val adapter = WeatherDetailRecyclerAdapter(arrayListOf())
    ...
}