iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
1
Mobile Development

Android 開發經驗三十天系列 第 26

[Android 開發經驗三十天]#D26一Glide教學+小畫家繼續

技術是成功的基石,耐力是飛翔的翅膀,堅持下去終將展翅高飛。

Android Glide

hi,今天來講一下關於glide的使用

gradle,因為是kotlin所以要有kapt

Q:kapt是什麼?
A:kapt 即 Kotlin annotation processing tool
kotlin註解工具的縮寫
爲了讓glide與 Kotlin 類一起工作,所以要加上kapt

apply plugin: 'kotlin-kapt'
    implementation 'com.github.bumptech.glide:glide:4.10.0'

    kapt 'com.github.bumptech.glide:compiler:4.9.0'

Q:Glide功用?
A:主要用來載入圖片,支持 Jpg png gif webp,也支持從網路載入

我們這邊主要使用的就是從網路載入,因為是從自己開的API載入的

Q:方法?
A: context為上下文,url,imageView

Glide.with(context)
    .load(url)
    .into(imageView);

還可以重製大小
.override(width,height) 單位用px
.priority (Priority.HIGH/LOW ) 圖片優先度 (同時載入多圖片時使用)
.error( R.drawable.error ) 若載入錯誤時顯示此drawable做錯誤處裡
.dontAnimate() 開啟或關閉動畫

範例,將我們的小畫家APP多一個可以載入之前所寫好的API

activity,創一個recycleview,內容是圖片
特別的是這邊的LayoutManager改成GridLayoutManager為了是讓他可以兩兩一排
當然你也可以依設定控制他多少一排

 recyclerView=findViewById(R.id.rrrr)
        recyclerView.layoutManager = StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL)
        var adapter=PhotoGalleryAdapter()
        recyclerView.adapter =adapter
        viewModel.getListData()
        // Create the observer which updates the UI.
        val nameObserver = Observer<List<UrLAndFilenameResponse>> {

            list ->
                Log.d("fuck","dddd")
                adapter.addList(list,this)
                adapter.notifyDataSetChanged()
        }

        // Observe the LiveData, passing in this activity as the LifecycleOwner and the observer.
        viewModel.list.observe(this, nameObserver)

viewmodel,打自己寫好的api,並配合livedata讓activity去監聽

    fun getListData(){
        CoroutineScope(Dispatchers.IO).launch {
            //waint
            val result = apiManager.getFilenameAndUrl().await()
            val response=result
//            withContext(Dispatchers.Main){
//                list.value=response
//            }
            list.postValue(response)
        }
    }

adapter,這邊重點是吃前面傳入的list
在bindviewHolder時使用Glide載入圖片
當確定有監聽到圖片回傳並且glide載入圖片後再讓他可以使用按下後的改變
注意:這邊用bundle包著傳入,因為bitmap不能是serilizabel必須是parceble,但因為需求必須將一整個list傳過去,所以必須將list變成byteArray才行

  ll.get(position).bitmap=bs.toByteArray()
imageView.setOnClickListener {
                var bundle=Bundle()
//                bundle.putParcelable("BitmapImage",blist)
                bundle.putSerializable(FILELIST,ll)
                bundle.putInt(FILEPOSITION,position)
                intent1.putExtras(bundle)
                mContext.startActivity(intent1)
            }
Glide.with(mContext).load(ll.get(position).fileUrl).into(imageView)
class PhotoGalleryAdapter : RecyclerView.Adapter<PhotoGalleryAdapter.MyViewHolder>() {
    private val viewModel = PaintPhotoViewModel()
    private lateinit var mContext :Context
    private  var ll:ArrayList<UrLAndFilenameResponse> = arrayListOf()
    companion object {
         var FILEPOSITION: String="FILEPOSITION"
          var FILELIST: String="FILELIST"
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val v = LayoutInflater.from(parent.context).inflate(R.layout.item_painter_photo, parent, false)
        val holder=MyViewHolder(v)

        return MyViewHolder(v)
    }

    fun addList(list :List<UrLAndFilenameResponse>,mContext :Context){
        ll= ArrayList(list)
        this.mContext=mContext
    }
    override fun getItemCount(): Int {
        Log.d("gggg",""+ll.size)
        return ll.size

    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val imageView = holder.imageView
        Log.d("urllllllll",ll.get(position).fileUrl)
        Glide.with(mContext).load(ll.get(position).fileUrl).into(imageView)
        val intent1  = Intent(mContext, BigPhotoActivity::class.java)
//        var blist:ArrayList<Bitmap> = arrayListOf()
        viewModel.getBitmap(ll.get(position))
        val nameObserver = Observer<Bitmap> {
                bitmap ->
            val bs = ByteArrayOutputStream()
            var compressB=bitmap.compress(Bitmap.CompressFormat.PNG, 50, bs)

            ll.get(position).bitmap=bs.toByteArray()
//            var bb=ll.get(position).bitmap
//            blist.add(bitmap)

            imageView.setOnClickListener {
                var bundle=Bundle()
//                bundle.putParcelable("BitmapImage",blist)
                bundle.putSerializable(FILELIST,ll)
                bundle.putInt(FILEPOSITION,position)
                intent1.putExtras(bundle)
                mContext.startActivity(intent1)
            }
        }

        // Observe the LiveData, passing in this activity as the LifecycleOwner and the observer.
        viewModel.bitmap.observe(holder.itemView.context as LifecycleOwner, nameObserver)




    }

    class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageButton = itemView.findViewById(R.id.photo)
    }
}


其餘的大多是正常recycleView的設置,今天就這樣囉!

tags: 鐵人賽

上一篇
[Android 開發經驗三十天]D25一小畫家串接自己寫的上傳API+打開圖片+選擇圖片
下一篇
[Android 開發經驗三十天]D27一Android Firebase && Crashlytics
系列文
Android 開發經驗三十天30

尚未有邦友留言

立即登入留言