크레이의 앱 개발 도전기 #10. 세컨드라이프 정보 뷰어(코틀린)

※ 이 게시글은 크레이의 IT개발 관련 성장기를 다루고 있습니다. 관련지식이 약간 있어야 이해되실 수 있습니다. 가벼운 마음으로 읽어보시면서 흥미가 생기고 의욕이 생긴다면? 개발자의 자질이 있으신 겁니다 :)

홍드로이드님의 코틀린 강좌 중 리스트뷰와 웹뷰를 청강하면서 응용 예제를 만들어 보았는데요.
한 때 크레이가 심~취해 있던 세컨드라이프 컨텐츠 정보를 제공하는 뷰어를 구성해보았습니다!
웬지 추억이 소록 소록 나네요 ㅎ..

---

참조한 홍드로이드님의 강좌 URL은 아래와 같습니다.

https://edu.goorm.io/learn/lecture/23399/현직-개발자가-알려주는-안드로이드-코틀린-앱-제작/lesson/1121044/listview 

https://edu.goorm.io/learn/lecture/23399/현직-개발자가-알려주는-안드로이드-코틀린-앱-제작/lesson/1121053/webview-웹-페이지-실행

개발에 대한 상세한 내용은 홍드님의 영상을 참조해 주시구요.
크레이가 응용해서 적용한 부분에 대한 경험만 공유드리도록 하겠습니다.

---

홍드님의 리스트뷰 강좌를 따라하면서,
프로필 이미지 부분에 웹페이지 URL을 직접 적용할 방법은 없을까 고민해보았는데요.

여기저기를 구글링해본 결과, 오! 비슷한 기능이 있더라구요.
리스트뷰용 예제는 아니고, 이미지 뷰에 웹이미지 URL을 불러오는 예제인데,
리스트뷰에서도 작동하지 않을까 해서 시도해보았습니다.

---

세컨드라이프 정보를 제공하기 위한 클래스를 아래와 같이 정의하고

class SecondListInfo (
    val urlimg: String,
    var linkurl: String,
    val name: String,
    val desc: String
)

리스트뷰를 표시할 액티비티는 아래와 같이 구성하였습니다.
왼쪽에 사람 그림 모양에는 이미지 URL이 들어갈 예정이지요.
이 부분은 홍드님 강좌와 별 차이는 없습니다.

---

어댑터 처리에서 아이템 단위로 뷰를 반환하는 코드가 상이한데요.
여기서 밑줄친 부분이 바로 웹에서 이미지를 다운받아 바로 뷰에 적용하는 부분입니다.

class SecondLifeAdapter (
    val context: Context,
    val secondListInfoList: ArrayList<SecondListInfo>
) : BaseAdapter ()
{
    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val InfoOne = secondListInfoList[position]
        val view: View =
            LayoutInflater.from(context)
                .inflate(R.layout.list_item_info, null)

        Glide.with(context)
            .load(InfoOne.urlimg) // 불러올 이미지 url
            .into(view.findViewById(R.id.iv_url)) // 이미지를 넣을 뷰

        view.findViewById<TextView>(R.id.tv_name)
            .text = InfoOne.name

        view.findViewById<TextView>(R.id.tv_desc)
            .text = InfoOne.desc

        return view
    }

위 기능이 작동하기 위해서는 몇가지 설정을 잡아주어야 하는데요.
AndroidManifest.xm 파일에서 밑줄친 부분이 설정되어야 하는데,
이 부분은 홍드님의 웹뷰 강좌에도 등장합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:usesCleartextTraffic="true"
        android:allowBackup="true"

부가적으로 웹이미지를 바로 이미지뷰에 적용하기 위한 설정으로
build.gradle(Module 어쩌고) 파일에 아래 밑줄친 부분을 추가해 주어야 합니다.
이 기능이 바로 웹URL이미지를 불러와 이미지 뷰에 적용하는 기능이거든요.

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.5.1'
    implementation 'com.google.android.material:material:1.7.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    implementation 'com.github.bumptech.glide:glide:4.12.0' // 이미지로딩 라이브러리
    testImplementation 'junit:junit:4.13.2'

---

위쪽을 리스트뷰, 아래쪽을 웹뷰로 구성했는데, 위에서 제목을 클릭하면 아래 관련 네이버 블로그 게시글이 표시됩니다.이 부분은 홍드님의 웹뷰 소스를 응용해서 아래와 같이 적용하였지요.
잘 되더라구요~

var secondLifeAdapter = SecondLifeAdapter(this, secondLifeInfoArr )
listView.adapter = secondLifeAdapter

listView.onItemClickListener =
    AdapterView.OnItemClickListener { parent, view, position, id ->
        val selectOne = parent.getItemAtPosition(position) as SecondListInfo        
        val webView = findViewById<WebView>(R.id.webView)

        webView.settings.javaScriptEnabled = true;
        webView.webViewClient = WebViewClient()
        webView.webChromeClient = WebChromeClient()
        webView.loadUrl(selectOne.linkurl)
    } 

개발에 적용한 소스는 아래 GITHUB URL에 올려놓았으니 필요하신 분은 참조해 주시면 될것 같습니다.

drlee7-cray/SecondlifeInfoKt (github.com)

---

오늘 눈이 엄청나게 많이 내렸더라구요.
이번 겨울은 정말 겨울다운 겨울이 아닌가 싶기도 하더라구요.
다녀가시는 모든 분들의 마음 속에 하얀 꽃들이 피어나길 바라고 
크레이가 믿는 주 예수 그리스도께서 강림하신 이 기쁨의 달에
모든 분들에게 성탄의 기쁨과 축복이 함께 하시기를 바라는 바입니다.

만일 마음이 아픈 일이 있다면, 슬픔이 있다면 아래 찬양을 들어보세요.
예수님은 약한 자, 애통하는 자를 위해 이 땅에 오셨으니까요 :)

"애통하는 자는 복이 있나니 그들이 위로를 받을 것임이요" (마 5:4)

"어디선가 들리는 소리, 성탄의 종소리~"