chris_park.log

[Project/Android] 오늘의 물가 - #4. Activity 화면 기본 UI 만들기

Tue, 02 Jan 2024 09:03:05 GMT

기획 및 디자인을 보면 화면마다 중복되는 부분이 있다.

바로, 툴바(Toolbar)다. 위 이미지의 빨간색 선 구역을 우린 보통 Toolbar, Appbar로 지칭하는데 이 부분은 대부분의 화면에 들어가기 때문에 이 부분을 기본적으로 구현하고 있는 Activity를 만들것이다. 그리고 이 툴바가 필요한 화면을 만들때는 이 툴바가 구현된 Activity를 상속받을 것이다.

구현 기능

여러 종류의 툴바 제공
사이드 네비게이션 제공
화면 전환 시 애니메이션 제공

위 3가지 기능을 제공하는 Activity를 상속받아 중복되는 코드 줄이는 것이 최종적인 이번 구현의 목적이다.

UI 그리기

기본이 되는 화면의 UI 구조는 아래와 같다.

메뉴 버튼을 누르면 왼쪽에서 메뉴 화면이 슬라이드되면서 나온다. 이 화면이 필요없으면 DrawerLayout이랑 NavigationView는 제외하고 CoordinatorLayout부터 만들면 된다.

activity_base.xml

기본 Activity 만들기

각 코드에 주석 참고

BaseActivity.kt

// 툴바 타입
enum class ToolbarType {
    MENU,
    BACK,
    HOME,
}

// 애니메이션 타입
enum class TransitionMode {
    NONE,
    HORIZON,
    VERTICAL
}

open class BaseActivity(
    private val toolbarType: ToolbarType,
    private val transitionMode: TransitionMode = TransitionMode.NONE,
) : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    // activity_base의 dataBinding
    protected lateinit var baseBinding: ActivityBaseBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        baseBinding = ActivityBaseBinding.inflate(layoutInflater)
        setContentView(baseBinding.root)
        setSupportActionBar(baseBinding.toolbar)
        setToolbar()

       // navigationView에 리스너 추가
       baseBinding.navigationView.setNavigationItemSelectedListener(this)

        // 애니메이션 모드에 따라 애니메이션 설정 (화면 나타날때)
        when (transitionMode) {
            TransitionMode.HORIZON -> overridePendingTransition(R.anim.horizon_enter, R.anim.none)
            TransitionMode.VERTICAL -> overridePendingTransition(R.anim.vertical_enter, R.anim.none)
            else -> {}
        }

    }

    override fun finish() {
        super.finish()

        // 애니메이션 모드에 따라 애니메이션 설정 (화면 사라질 때)
        when (transitionMode) {
            TransitionMode.HORIZON -> overridePendingTransition(R.anim.none, R.anim.horizon_exit)
            TransitionMode.VERTICAL -> overridePendingTransition(R.anim.none, R.anim.vertical_exit)
            else -> {}
        }
    }

    override fun onBackPressed() {

        // navigationView가 나와있으면 onBackPressed()가 아닌 navigationView 닫기
        if (baseBinding.drawerLayout.isDrawerOpen(GravityCompat.START)) {
            baseBinding.drawerLayout.closeDrawers()
        } else {
            super.onBackPressed()

            if (isFinishing) {
                when (transitionMode) {
                    TransitionMode.HORIZON -> overridePendingTransition(
                        R.anim.none,
                        R.anim.horizon_exit
                    )
                    TransitionMode.VERTICAL -> overridePendingTransition(
                        R.anim.none,
                        R.anim.vertical_exit
                    )
                    else -> Unit
                }
            }
        }
    }

    override fun onDestroy() {
        // navigationView 리스너 제거
        baseBinding.navigationView.setNavigationItemSelectedListener(null)
        super.onDestroy()
    }

    // Toolbar의 아이템 클릭 별 수행 코드
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.action_search -> {
                actionMenuSearch()
            }

            R.id.action_favorite -> {
                actionMenuFavorite()
            }

            R.id.action_home -> {
                actionMenuHome()
            }

            android.R.id.home -> {
                actionHome()
            }
        }
        return super.onOptionsItemSelected(item)
    }

    // 툴바 타입에 따라 메뉴 아이템 변경
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        when (toolbarType) {
            ToolbarType.MENU -> menuInflater.inflate(R.menu.menu_with_search, menu)
            ToolbarType.BACK -> menuInflater.inflate(R.menu.back_with_search, menu)
            ToolbarType.HOME -> menuInflater.inflate(R.menu.back_with_home, menu)
        }
        return true
    }

    private fun setToolbar() {
    // 툴바 타입에 따라 왼쪽 상단 이미지 변경
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setBackgroundDrawable(
            ColorDrawable(
                ContextCompat.getColor(
                    applicationContext,
                    R.color.background
                )
            )
        )

        when (toolbarType) {
            ToolbarType.MENU -> supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)
            ToolbarType.BACK -> supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_back)
            ToolbarType.HOME -> supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_back)
        }

    }

    // 상단에 이미지 띄우는게 필요할 때 사용 (상속받는 Activity에서 호출)
    fun setImageView(url: String) {
        if (url.isNotEmpty()) {
            Glide.with(baseBinding.root)
                .load(url)
                .centerCrop()
                .error(R.drawable.no_picture)
                .into(baseBinding.backgroundImageView)
        } else {
            baseBinding.backgroundImageView.setImageResource(R.drawable.no_picture)
        }
    }

    // 상단에 타이틀이 필요한 경우 사용 (상속받는 Activity에서 호출)
    fun setTitle(title: String) {
        baseBinding.toolbarLayout.title = title
        baseBinding.backgroundImageView.isVisible = true
        supportActionBar?.setBackgroundDrawable(
            ColorDrawable(
                ContextCompat.getColor(
                    applicationContext,
                    android.R.color.transparent
                )
            )
        )
    }

    private fun actionMenuSearch() {
        Toast.makeText(this, "검색하기", Toast.LENGTH_SHORT).show()
    }

    private fun actionMenuFavorite() {
        Toast.makeText(this, "즐겨찾기", Toast.LENGTH_SHORT).show()
    }

    private fun actionMenuHome() {
        Toast.makeText(this, "호오옴", Toast.LENGTH_SHORT).show()
    }


    private fun actionHome() {
        Toast.makeText(this, "왼쪽 상단 버튼", Toast.LENGTH_SHORT).show()
    }

    // navigationView의 item 클릭 시 수행 코드
    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.menuItem1 -> Toast.makeText(this, "item1 is clicked", Toast.LENGTH_SHORT).show()
            R.id.menuItem2 -> Toast.makeText(this, "item2 is clicked", Toast.LENGTH_SHORT).show()
            R.id.menuItem3 -> Toast.makeText(this, "item3 is clicked", Toast.LENGTH_SHORT).show()
        }
        return false
    }
}

상속받는 Activity 만들기

이제 기본 Activity를 상속받는 Activity를 만들어보자.

activity_item.xml

ItemActivity.kt

//  BaseActivity를 상속하고 인자로 툴바 타입과 애니메이션 방향 타입 전달
class ItemActivity: BaseActivity(ToolbarType.HOME, TransitionMode.HORIZON)  {

    private lateinit var binding: ActivityItemBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityItemBinding.inflate(layoutInflater)

        // BaseActivity의 contentLayout (ScrollView)에 추가
        baseBinding.contentLayout.addView(binding.root)

    }
}

결과물

이후로 좀 더 개발이 진행된 상태다.

[Project/Android] 오늘의 물가 - #3. open API 선정 및 테스트

Tue, 02 Jan 2024 06:59:36 GMT

🙄 open API 선정 후 문제점

이 프로젝트의 원래 취지는 마트나 시장의 생필품 가격 비교 및 할인 정보 등을 알려주기 위함이었다.

그래서 공공데이터에서 제공되는 open API(https://www.data.go.kr/data/3043385/openapi.do)를 사용하려고 했다.

공공데이터에서 제공하는 open API인 한국소비자원_생필품 가격 정보는 참가격정보서비스에서 수집하는 상품별 생필품 가격 관련 데이터로 상품정보 조회, 판매점 정보 조회, 생필품가격정보 조회, 생필품 가격 정보 기준 데이터 조회 기능 등을 open API로 제공해준다.

그래서 기능도 똑같기 때문에 해당 API를 사용하려고 했다.

그런데 테스트를 하면서 매우 치명적인 문제점을 찾게 되었다.

결과로 받을 수 있는 최대 메시지 사이즈가 1000KB다. 그런데 요청 메시지 명세를 보면 그 어디에도 index나 page가 없다. 보통은 시작하는 index나 page가 있어서 1번째부터 얼마까지 들고오는 식으로 하는데 이 API는 그 인자값이 없었다. 그래서 이 API는 내가 데이터를 불러오면 처음 호출할 때의 1000KB만 가지고 올 수 있다는 말이다.

그래서 우선 공공데이터에 문의를 했다.

생각보다 빠르게 답장이 왔지만, API를 뜯어고쳐야해서 그런지 즉각적인 해결 방법은 없었다.

📍 대안을 찾다.

어쩔수없이 다른 open API를 찾기로 했고, 모든 기능을 만족하지는 못하지만 대체할 API를 찾게 되었다.

서울열린데이터광장(https://data.seoul.go.kr/)에서 제공하는 서울시 생필품 농수축산물 가격 정보(https://data.seoul.go.kr/dataList/OA-1170/S/1/datasetView.do)다.

제공하는 데이터는 서울시에 있는 전통시장의 생필품 가격이다. 기존에는 대형마트도 제공이 되었는데 2023년 3월 27일부터 제외되었다고 한다.

✨ API 테스트

그럼 API 테스트를 해보자!

API 테스트 툴은 Postman으로 했다. open API 제공하는 페이지의 설명대로 요청을 보냈고, 정상적으로 처리되었다.

[Project/Android] 오늘의 물가 - #2. 기획 및 디자인

Tue, 02 Jan 2024 05:38:23 GMT

데이터베이스를 통합하는 동안 미루었던 글을 작성하려고 한다.

우선 기존에 생각했던 디자인 및 기획이다. 디자인 툴은 Figma를 사용했고, 처음 기획하고 디자인할 때는 매우 기본적인거만 하고 나중에 개발하면서 수정하려고 간단하게 만들었다.

화면도 홈, 카테고리 상세 화면, 상품 상세 화면, 즐겨찾기 화면만 만들어두었던 이유가 그것이다.

하지만 가져다쓰는 API를 변경하면서 앱의 기능 및 용도도 살짝 변경이 되어 개발 후에 결과물은 계획대로 나오지 않을거같다.

[Project/Android] 오늘의 물가 - #0. 프로젝트 기록 관리

Mon, 06 Nov 2023 14:25:08 GMT

프로젝트 시 세부적인 하루에 한 일을 기록하기 위한 페이지다.

프로젝트 1주차 (11월 둘째주)

날짜	완료	진행 중	기타
2023.11.06	[디자인] 홈 화면 [디자인] 카테고리 화면	[디자인] 상품 상세 화면	- 공공 데이터 open API 활용 신청 완료
2023.11.07	[환경설정] IDE 버전 업그레이드 [환경설정] Firebase 프로젝트 생성 및 연동	[개발] 홈 화면 (툴바)	-
2023.11.08	[개발] BaseActivity 생성 [개발] 홈 화면(툴바)	-	-
2023.11.09	[개발] 카테고리 화면 생성	[개발] API 연동 준비	-

프로젝트 2, 3, 4주차 (12월)

날짜	완료	진행 중	기타
2023.12.12	-	-	[개발] open API의 제공처를 공공데이터 > 서울열린데이터광장으로 변경
2023.12.13 ~ 15	[개발] MVVM 패턴 적용 [개발] open API 테스트	-	-
2023.12.18 ~ 22	[개발] 개별 항목 상세 화면 [개발] 시장 리스트 화면	-	-
2023.12.26 ~ 29	-	[개발] Firebase Functions 사용해서 oepn API에서 받아온 데이터를 Firestore에 저장	-

프로젝트 5주차 (1월 첫째주)

날짜	완료	진행 중	기타
2023.01.02	[개발] 2023년도 데이터베이스 업로드	-	-
2023.01.03	-	[개발] 데이터베이스 업로드 배포 함수	-
2023.01.10	[개발] 데이터베이스 배포 함수 스케쥴 작업 [개발] Market, Item 레포지토리 및 뷰모델 작업	-	-

[Project/Android] 오늘의 물가 - #1. 계획 수립 단계

Mon, 06 Nov 2023 14:20:14 GMT

새로운 프로젝트를 시작하려고 한다. 생필품 물가를 확인하고 할인이나, 1+1 이벤트를 확인할 수 있는 앱을 만들거다. 굳 아이디어인거 같다. (사슴이 눈이 좋으면? 굳아이디어)

아래 글은 프로젝트를 시작하고자 한 계기, 어떻게 만들고자 하는지 적고자 한다. 결론은 이 글 자체가 프로젝트 시작 전 프롤로그인 셈이다.

이 앱을 만들고자 한 이유

요즘 마트가서 우유나 시리얼같은 생필품 사는데 가격이 비싸다. 그리고 자주 할인하는 제품이라 정가격에 사면 뭔가 좀 속이 쓰리다.

이런 일이 종종 생길때 생각했다. 할인 정보나 마트별 가격 정보를 제공하는 게 있으면 좋겠다고.

물론 웹과 앱이 있다. 참가격(https://www.price.go.kr/tprice/portal/main/main.do)이라는 웹 사이트가 있다. 그리고 앱으로도 비슷한 기능을 하는 앱이 있다.

그런데 왜 또 만들려고 하는지 궁금할 수 있다. 그 이유는 심플하다. 보기 쉬운 UI와 좀 더 추가된 핵심기능이 필요하기 때문이다.

앱을 만들 때 실생활에 유용한 것을 만들려고 늘 생각한다. 그 부분이 충족되면 사람들도 많이 쓸것이고 나의 생활에도 도움이 될거라고 생각하기 때문이다.

프로젝트 계획

프로젝트 계획은 별거없다.

앱 기획 및 디자인 (Figma)
open API를 하나의 데이터베이스에 통합 (Firebase Firestore)
스케쥴러나 배치 프로그램으로 open API의 데이터를 주기적으로 내 데이터베이스에 insert (Schedule functions)
앱 개발

😶프로젝트 인원

1명, 오로지 나 혼자다.

나 혼자 기획하고 디자인하고 개발하면 된다. 혼자 프로젝트를 진행할 때 장점은 의견 교환 및 방향 결정을 혼자 정하면 된다는 점이다. 매우 빠르게 진행할 수 있다. 단점은 의견 교환할 사람이 없다는 점이다.

언젠가는 사이드프로젝트 구해서 여러명이서 해보고 싶다.

📢개발 타임라인

앱 기능

최소 기능으로만 개발하고 출시할 예정이다. 추후 업데이트로 또 다른 기능을 추가할것이다.

생필품 가격 조회
상품 판매점 조회
최근 6개월 or 1주일 가격 비교 (최근 6개월: 1개월의 평균 가격 / 최근 1주일: 하루 가격 제공)
할인 정보, 1+1 정보 제공
판매점 위치 제공 (맵 api는 넣을지 말지 고민중)
즐겨찾기 기능

기대하는 결과

출시 후 다운로드 1000돌파
추후 애드몹을 통한 수익 실현
개발 능력 향상

onCreateOptionsMenu() 호출이 안될때

Mon, 24 Jul 2023 02:08:23 GMT

앱 화면에 메뉴바를 만들때 사용하는 방법 중 하나가 Android Resource Directory/menu에 관련 xml을 만들고 그것을 Activity의 onCreateOptionsMenu()에서 inflate하는 방법이다.

코드는 이런식일 것이다.

res/menu/options_menu.xml

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater).apply {
            setContentView(root)
            view = this@MainActivity
        }
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {

        menuInflater.inflate(R.menu.options_menu, menu)

        (menu.findItem(R.id.search).actionView as SearchView).apply {
            setOnQueryTextListener(object : SearchView.OnQueryTextListener {
                override fun onQueryTextSubmit(query: String): Boolean {
                    return false
                }

                override fun onQueryTextChange(newText: String): Boolean {
                    return false
                }

            })
        }

        return true
    }
}

근데 실행했을때 메뉴바가 안나오는 경우가 있다. 보통은 이 onCreateOptionsMenu()가 호출이 안되서인데 이유는 themes.xml을 보면 알 수 있다.

res/themes/themes.xml


    
    

    
    





4. /app/java/패키지/MainActivity.kt에서 ModalBottomSheet에 관련된 코드를 넣는다.

**MainActivity.kt**
```kotlin
    class MainActivity : AppCompatActivity() {
        ...

        override fun onCreate(savedInstanceState: Bundle?) {
            ...
        }

        override fun onResume() {
            ...
        }

        override fun onDestroy() {
            ...
        }

        // Persistent BottomSheet 초기화
        private fun initializePersistentBottomSheet() {
            ...
        }

        // PersistentBottomSheet 내부 버튼 click event
        private fun persistentBottomSheetEvent() {
            ...
            bottomSheetShowModalButton.setOnClickListener {
                // Modal BottomSheet 띄우기
                showModalBottomSheet()
            }
        }

        // Modal BottomSheet 띄우기
        private fun showModalBottomSheet() {

            val dialog: Dialog = Dialog(this)
            dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)
            dialog.setContentView(R.layout.modal_bottom_sheet)

            // modal_bottom_sheet.xml의 dismiss_button로 변수 초기화
            val dismissButton: Button = dialog.findViewById(R.id.dismiss_button)

            // dismiss_button 클릭 시 Modal BottomSheet 닫기
            dismissButton.setOnClickListener {
                dialog.dismiss()
            }

            // Modal BottomSheet 크기
            dialog.window?.setLayout(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
            )

            // Modal BottomSheet의 background를 제외한 부분은 투명
            dialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
            dialog.window?.attributes?.windowAnimations = R.style.DialogAnimation
            dialog.window?.setGravity(Gravity.BOTTOM)

            // Modal BottomSheet 보여주기
            dialog.show()
        }
    }

마치며

google에 bottomsheet를 검색하면 다양한 응용법들이 있다. 사람들이 어떤 방식으로 사용하는지 보고 적용하면 좋을듯하다.

[Kotlin] RecyclerView에서 데이터 변화 시 이미지 깜박임 제거

Wed, 09 Nov 2022 02:27:29 GMT

RecyclerView를 사용할 때 데이터가 변하면 그것을 adapter에 반영해줘야한다. 그 과정에서 RecyclerView의 아이템 자체가 깜박거리는 것은 animator를 false로 설정하면 되지만 Glide로 로드한 이미지는 여전히 깜박거린다.

아래 그것에 대해 내가 찾은 방법을 적는다.

RecyclerView 아이템 깜박임 제거

우선 RecyclerView의 아이템 자체가 깜박거리는 것은 RecyclerView에 아래 코드를 추가하면 된다. 애니메이션을 끄는 코드다.

recyclerView.apply {
        ...
        itemAnimator = null
}

Glide 이미지 깜박임 제거

RecyclerView 아이템의 이미지에 Glide로 로드했다. 그리고 diffUtil이나 NotifyDataSetChanged()등으로 데이터가 변경되면 adapter에 변경사항을 알리고 adapter는 변경 내용을 반영한다.

아래 이미지에서는 이미지나 제목의 변화는 없지만 클릭 시 가지고 있는 데이터의 isPlaying이라는 필드에서 변화가 생겨서 그것을 adapter가 반영해준다. 그리고 반영 때 image가 Glide를 통해 다시 로드되며 깜박이는 것을 볼 수 있다.

심히 거슬린다.

아래 코드는 솔루션 적용 전 코드다. ViewHolder 클래스 내의 함수 bind를 통해 각 아이템에 맞는 제목과 이미지를 넣는다. Glide를 통해 이미지를 로드하고 있다.

inner class ViewHolder(view: View): RecyclerView.ViewHolder(view) {

    fun bind(sound: Sound) {
        val trackTextView =itemView.findViewById(R.id.item_track_text_view)
        val categoryTextView =itemView.findViewById(R.id.item_category_text_view)
        val coverImageView =itemView.findViewById(R.id.item_cover_image_view)

        trackTextView.text = "제목 "
        categoryTextView.text = "부제목 "

        Glide.with(context)
            .load(sound.imgUrl)
            .override(100, 100)
            .skipMemoryCache(true)
            .dontAnimate()
            .into(coverImageView)

    }

}

이미지 깜박거림 제거를 위해서는 Glide 옵션에 thumnail을 추가하는 것이다.

Glide.with(context)
    .load(sound.imgUrl)
    .thumbnail(Glide.with(context).load(sound.imgUrl).override(100, 100))
    .override(100, 100)
    .skipMemoryCache(true)
    .dontAnimate()
    .into(coverImageView)

코드를 적용하고 나면 아래처럼 깜박거림이 사라진다.

또 다른 방법

나는 사용하지 않았지만, Adapter 클래스 내에서 getItemViewType(), getItemId()를 오버라이딩받아서 아이템마다 아이디를 부여하는 방법도 있다.

Adapter

class PlayListAdapter(
    private val context: Context
    ) : RecyclerView.Adapter()  {

    inner class ViewHolder(view: View): RecyclerView.ViewHolder(view) {

        fun bind(sound: Sound) {
            val trackTextView =itemView.findViewById(R.id.item_track_text_view)
            val categoryTextView =itemView.findViewById(R.id.item_category_text_view)
            val coverImageView =itemView.findViewById(R.id.item_cover_image_view)

             trackTextView.text = "제목"
             categoryTextView.text = "부제목"

            Glide.with(context)
                .asBitmap()
                .load(sound.imgUrl)
                .override(100, 100)
                .skipMemoryCache(true)
                .dontAnimate()
                .into(object : CustomTarget() {
                    override fun onResourceReady(
                        resource: Bitmap,
                        transition: Transition?
                    ) {
                        coverImageView.setImageBitmap(resource)
                    }

                    override fun onLoadCleared(placeholder: Drawable?) {
                    }

                })

        }

    }

  ...

    override fun getItemViewType(position: Int): Int {
        return position
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

}

adapter를 초기화할때 초기화 후 꼭 setHasStableIds(true)를 넣어줘야한다. RecyclerView에 adapter를 붙이고 나서 setHasStableIds()를 선언하면 에러나니까 붙이기 전에 넣어준다.

Activity

val playListAdapter = PlayListAdapter(requireContext())
playListAdapter.setHasStableIds(true)

마치며...

getViewType()을 사용하면 RecyclerView를 drag&drop할때 이상하게 되는 현상이 발생한다. 이 부분은 나중에 한번 알아봐야겠다.

[Mac] brew 설치, 환경 변수 설정, 명령어

Wed, 19 Oct 2022 02:36:33 GMT

Mac을 쓰면서 편하다고 느낀 HomeBrew를 설치하는 방법을 소개한다.

HomeBrew? 그게 뭔데?

HomeBrew는 패키지 관리자(Package Manager)이고, 우리가 필요한 프로그램을 손쉽게 설치하는 프로그램이다.

OS 별 패키지 관리자

Linux : yum , apt
Mac : homebrew

설치하기

Mac에서 터미널을 열고 homebrew 설치 명령어 실행

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

homebrew를 환경 변수로 등록

 echo 'export PATH="/opt/homebrew/bin:$PATH"' >> ~/.zshrc

환경 변수 반영
```
 source ~/.zshrc
```
설치 확인
```
 brew config
```

HomeBrew 설치가 끝났다!

이제 우리는 더 편하게 프로그램을 설치하고 관리할 수 있다.

HomeBrew 명령어

프로그램 설치

brew install "프로그램"

명령어는 앞으로도 사용한 것은 정리해서 기록할 생각이다.

[Kotlin] 반복문 (while, do-while, for)

Mon, 10 Oct 2022 08:26:49 GMT

코틀린에서는 같은 명령 시퀀스를 주어진 데이터에 대해 수행하거나 주어진 조건이 만족될 때까지 수행하는 세 가지 제어 구조를 제공한다. whlie, do-while, for 문이다.

while 문

기본 구조

while (조건문) {
  조건문이 참일 때 실행되는 코드
}

예시 : 실행 시 생성된 랜덤한 수(num)와 입력받은 수가 일치하면 반복문 종료 후 마지막 println("Right: it's $num") 실행
```
import kotlin.random.*
```

fun main() { val num = Random.nextInt(1, 101) var guess = 0

while (guess != num) {
    guess = readLine()!!.toInt()
    if (guess < num) println("Too small")
    else if (guess > num) println("Too big")
}

println("Right: it's $num")

}









# do-while 문

- 기본 구조
```kotlin
do {
    실행 코드
} while (조건문)

do-while 루프는 아래 순서로 실행된다.
1. do와 while 키워드 사이에 있는 루프 몸통(실행 코드) 실행
2. while 조건문을 평가 후 이 값이 참이면 1번 단계로 되돌아가고, 이 값이 거짓이면 루프 문 다음에 있는 코드 실행

do-while에서는 루프 몸통(실행 코드)를 실행한 다음에 조건을 검사하므로 루프 몸통이 최소 한 번은 실행된다.

예시 : 입력한 숫자의 합을 구하고 0이 입력된다면 반복문이 끝나고 println으로 입력되었던 수의 합을 출력

fun main() {
  var sum = 0
  var num: Int

  do {
      num = readLine()!!.toInt()
      sum += num
  } while (num != 0)

  println("sum: $sum")
}

for 문

기본 구조

for (변수 in 배열) {
  실행 코드
}

예시 : 배열 a의 배열 원소의 합

fun main() {
    val a = IntArray(10) { it*it } // index가 0이면 0*0, 1이면 1*1, 2이면 2*2
    var sum = 0

    for (x in a) {
        sum += x
    }

    println("sum: $sum")
}

참고

코틀린 완벽 가이드 by 알렉세이 세두노프

[Kotlin] 조건문 (if 문, when 문)

Mon, 10 Oct 2022 07:28:15 GMT

조건문을 사용하면 어떤 조건의 값에 따라 둘 이상의 동작 중 하나를 수행할 수 있다. 코틀린에서는 if, when이 있다.

if 문

기본 구조

  if (조건문) {
      조건문이 참일 때 실행되는 코드
  }
  else {
      조건문이 거짓일 때 실행되는 코드
  }

if문의 조건문의 결과에 따라 실행되는 코드가 한 줄이면 {} 생략가능

  if (조건문) 조건문이 참일 때 실행되는 코드
  else 조건문이 거짓일 때 실행되는 코드

if문을 사용하면 불(boolean)식의 결과에 따라 두가지 대안 중 하나를 선택할 수 있다.

fun main() {
    println(max(1,3))
}

fun max(a: Int, b: Int): Int {
    if (a > b) return a
    else return b
}

max() 함수를 아래처럼 바꿀 수 있다.

fun max(a: Int, b: Int): Int {
    return if(a > b) {
        a
    }
    else {
        b
    }
}

또한, kotlin은 if을 식으로 사용할 수 있다.

fun max(a: Int, b: Int) = if(a > b) a else b

when 문

여러 대안 중 하나를 선택하여 해당하는 코드를 실행할 수 있다.

기본구조

  when(키워드) {
      조건1 -> {실행코드}
      조건2 -> {실행코드}
      else -> {실행코드}
  }

실행되는 코드가 한 줄이면 {} 생략가능

when 문을 사용하여 해당하는 숫자 출력

fun main() {
    selectNumner(2)
}

fun selectNumner(a: Int) {
    when(a) {
        1 -> println("숫자 1이 입력됐습니다.")
        2 -> println("숫자 2가 입력됐습니다.")
        3 -> println("숫자 3이 입력됐습니다.")
        4 -> println("숫자 4가 입력됐습니다.")
        else -> println("설정하지 않은 숫자입니다.")
    }
}

when 문을 식으로 사용하기

fun selectNumner(a: Int) =  when(a) {
    1 -> println("숫자 1이 입력됐습니다.")
    2 -> println("숫자 2가 입력됐습니다.")
    3 -> println("숫자 3이 입력됐습니다.")
    4 -> println("숫자 4가 입력됐습니다.")
    else -> println("그 밖에 숫자입니다.")
}

when 문에서 조건문 사용하기

fun selectNumner(a: Int) =  when {
    a == 1 -> println("숫자 1이 입력됐습니다.")
    a == 2 -> println("숫자 2가 입력됐습니다.")
    a == 3 -> println("숫자 3이 입력됐습니다.")
    a == 4 -> println("숫자 4가 입력됐습니다.")
    else -> println("그 밖에 숫자입니다.")
}

참고

코틀린 완벽 가이드 by 알렉세이 세두노프

[Kotlin] RecyclerView의 모든것 (기본 사용법, Diffutil로 데이터 변화 시 UI 반영,Drag&Drop으로 아이템 순서 변경, Swipe 후 아이템 삭제)

Tue, 13 Sep 2022 13:44:36 GMT

RecyclerView는 이름처럼 리소스를 재활용한다. ListView의 확장판으로 성능 개선과 기능을 추가한것이다. ReCylerView는 ListView의 getView 함수 대신 ViewHolder를 의무적으로 사용해야하는 점이 다르다. 좀 더 자세한 개념은 구글링하면 많이 나온다.

RecyclerView의 기능을 쓸때마다 구글링하면서 찾는게 귀찮아서 이 포스팅을 작성한다. 미래의 나는 이걸 보고 쉽게 했으면 좋겠다.

우선 간단한 앱을 만들면서 RecyclerView의 기능을 써볼것이다. 아래는 내가 생각한 UI와 기능이다.

아이템 추가 시 RecyclerView UI에 반영
아이템 좌우로 드래그 가능
아이템 스와이프로 위치 변경
아이템 삭제 기능

해당 글에서 나는 에러 및 오류 해결 방법

RecyclerView에서 Index 0번 아이템을 Drag할 때 순서 뒤바뀜과 스크롤이 빠르게 넘어가는 현상, 또는 Item을 빠르게 Drag할 때 순서가 뒤바뀌는 현상 (업데이트 날짜 : 2023년 01월 30일 11:09 pm)

RecyclerView 기본 사용법

리스트를 RecyclerView로 띄우기 && RecyclerView에 넣을 data class 생성

결과 화면

구현 방법

build.gradle(:app)에 recyclerview 의존성 추가

 dependencies {
     ...
     implementation 'androidx.recyclerview:recyclerview:1.2.1'
 }

레이아웃에 RecyclerView 추가

app/res/layout/activity_main.xml

RecyclerView의 아이템이 될 Data Class 생성

app/java/패키지/datas/User.kt
```
 data class User(
     val id: Int,
     val name: String) {
 }
```

리스트에 그려줄 아이템 레이아웃 파일 추가

app/res/layout/user_list_item.xml.xml
```
 
 

     

     

 
```

Adapter 클래스 생성 app/java/패키지/adapters/UserAdapter

 class UserAdapter(
     private val mContext: Context,
     private val mList: MutableList
 ): RecyclerView.Adapter() {

     inner class ViewHolder(view: View): RecyclerView.ViewHolder(view) {

         private val userImage: ImageView =     itemView.findViewById(R.id.user_image)
         private val userNameText: TextView = itemView.findViewById(R.id.user_name_text)

         fun bind(user: User) {

             userNameText.text = user.name

         }
     }

     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
         val view = LayoutInflater.from(mContext).inflate(R.layout.user_list_item, parent, false)
         return ViewHolder(view)
     }

     override fun onBindViewHolder(holder: ViewHolder, position: Int) {
         val user = mList[position]
         holder.bind(user)
     }

     override fun getItemCount() = mList.size

 }

코틀린단에서 RecyclerView에 어댑터 연결 app/java/패키지/MainActivity


 class MainActivity : AppCompatActivity() {
     private lateinit var binding: ActivityMainBinding
     private lateinit var adapter: UserAdapter
     private var userList = mutableListOf()

     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

         // RecyclerView에 사용할 데이터 리스트 초기화
         for (i in 1 until 11) {
             val mUser = User(i, "user$i")
             userList.add(mUser)
         }
     }

     override fun onResume() {
         super.onResume()

         // RecyclerView에 리스트 추가 및 어댑터 연결
         adapter = UserAdapter(this, userList)
         binding.recyclerview.layoutManager = LinearLayoutManager(this)
         binding.recyclerview.adapter = adapter

     }
 }

아이템 추가 후 RecyclerView UI 반영

diffUtil을 이용한 RecyclerView UI 반영

DiffUtil은 RecyclerView의 데이터가 변할 때 UI 반영을 효율적으로 해주는 것이다. 기존에 변한 데이터를 UI에 반영할때는 notifyDataSetChanged(), notifyItemChanged()...등등을 사용했을 것이다.

notifyDataSetChanged()는 전체 항목을 변경시켜 RecyclerView에 아이템이 많을수록 효율성이 떨어진다. 그 밖에 단일 항목 변경(notifyItemChanged(), notifyItemInserted(), notifyItemRemoved(), notifyItemMoved())과 범위 변경(notifyItemRangeChanged(), notifyItemRangeInserted(), notifyItemRangeRemoved())이 있다.

DiffUtil은 정말 똑똑하게도 리스트를 하나씩 비교해서 Boolean값을 반환한다. 반환값이 true이면 두 리스트의 동일한 포지션에는 같은 아이템이 존재하는 것이고, false이면 두 리스트의 동일한 포지션에 다른 아이템이거나, 같은 아이템이지만 내용물이 변경된것이다.

이 클래스를 사용하여 효율적인 UI 반영을 처리해보자.

결과 화면

추가된 아이템이 잘 반영되는 걸 볼 수 있다.

구현 방법

RecyclerViewAdpater에 DiffUtil의 ItemCallback을 추가하고, onBindViewHolder에 val user = mList[position]을 val user = differ.currentList[position]으로 변경한다.

app/java/패키지/adapters/UserAdapter.kt

 class UserAdapter(
     private val mContext: Context
 ): RecyclerView.Adapter() {

     // 추가
     private val differCallback = object : DiffUtil.ItemCallback() {
         override fun areItemsTheSame(oldItem: User, newItem: User): Boolean {
         // User의 id를 비교해서 같으면 areContentsTheSame으로 이동(id 대신 data 클래스에 식별할 수 있는 변수 사용)
             return oldItem.id == newItem.id
         }

         override fun areContentsTheSame(oldItem: User, newItem: User): Boolean {
         // User의 내용을 비교해서 같으면 true -> UI 변경 없음
         // User의 내용을 비교해서 다르면 false -> UI 변경
             return oldItem == newItem
         }
     }

     // 리스트가 많으면 백그라운드에서 실행하는 게 좋은데 AsyncListDiffer은 자동으로 백그라운드에서 실행
     val differ = AsyncListDiffer(this, differCallback)

     inner class ViewHolder(view: View): RecyclerView.ViewHolder(view) {

         private val userImage: ImageView = itemView.findViewById(R.id.user_image)
         private val userNameText: TextView = itemView.findViewById(R.id.user_name_text)

         fun bind(user: User) {

             userNameText.text = user.name

         }
     }

     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
         val view = LayoutInflater.from(mContext).inflate(R.layout.user_list_item, parent, false)
     return ViewHolder(view)
     }

     override fun onBindViewHolder(holder: ViewHolder, position: Int) {
         // 수정 전
         //val user = mList[position]

         // 수정 후
         val user = differ.currentList[position]
         holder.bind(user)
     }
     // 수정 전
     // override fun getItemCount() = mList.size

     // 수정 후
     override fun getItemCount() =  differ.currentList.size

MainActivity에서 differUtil.submitList()을 사용하여 adapter에 데이터를 추가한다. 또한 아이템 추가 버튼에 클릭 이벤트를 추가하여 아이템이 추가될 때 differUtil을 이용하여 Adapter의 UI를 반영한다.

 class MainActivity : AppCompatActivity() {

     private lateinit var binding: ActivityMainBinding
     private lateinit var adapter: UserAdapter
     private var userList = mutableListOf()

     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

         // RecyclerView에 사용할 리스트 제공
         for (i in 1 until 11) {
             val mUser = User(i, "user$i")
             userList.add(mUser)
         }

     }

     override fun onResume() {
         super.onResume()

         // RecyclerView에 리스트 추가 및 어댑터 연결
         adapter = UserAdapter(this)
         binding.recyclerview.layoutManager = LinearLayoutManager(this)
         binding.recyclerview.adapter = adapter

         // DiffUtil 적용 후 데이터 추가
         adapter.differ.submitList(userList)

         // 아이템 추가 버튼 클릭 시 이벤트(userList에 아이템 추가)
         binding.addButton.setOnClickListener {

             // 추가할 데이터 생성
             val mUser = User(userList.size+1, "added user ${userList.size+1}")

             // differ의 현재 리스트를 받아와서 newList에 넣기
             val newList = adapter.differ.currentList.toMutableList()

             // newList에 생성한 유저 추가
             newList.add(mUser)

             // adapter의 differ.submitList()로 newList 제출
             // submitList()로 제출하면 기존에 있는 oldList와 새로 들어온 newList를 비교하여 UI 반영
             adapter.differ.submitList(newList)

             // userList에도 추가 (꼭 안해줘도 되지만 userList가 필요할때가 있을 수도 있다.)
             // userList = adapter.differ.currentList 이렇게 사용하면 안됨
             userList.add(mUser)

             // 추가 메시지 출력
             Toast.makeText(this, "${mUser.name}이 추가되었습니다.", Toast.LENGTH_SHORT).show()

             // 추가된 포지션으로 스크롤 이동
             binding.recyclerview.scrollToPosition(userList.indexOf(mUser))
         }
     }

 }

Drag하여 아이템 순서 바꾸기

itemTouchHelper를 사용하여 아이템 순서 바꾸기

여기서부터는 헷갈릴 수 있으니 필요한 부분은 코드를 잘라서 먼저 보여주고 전체 코드를 보여주겠다. 우리는 itemTouchHelper를 이용해서 drag and drop 기능을 추가할것이다.

결과 화면

구현 방법

ItemTouchHelper.SimpleCallback을 상속받은 클래스를 만든다. (경로는 어디든 상관없음)

app/java/패키지/ItemTouchSimpleCallback

  class ItemTouchSimpleCallback : ItemTouchHelper.SimpleCallback(
         ItemTouchHelper.UP or ItemTouchHelper.DOWN, 0) {

         interface OnItemMoveListener {
             fun onItemMove(from: Int, to: Int)
         }

         private var listener: OnItemMoveListener? = null

         fun setOnItemMoveListener(listener: OnItemMoveListener) {
             this.listener = listener
         }

         override fun onMove(
             recyclerView: RecyclerView,
             viewHolder: RecyclerView.ViewHolder,
             target: RecyclerView.ViewHolder
         ): Boolean {

             // 어댑터 획득
             val adapter = recyclerView.adapter as UserAdapter

             // 현재 포지션 획득
             val fromPosition = viewHolder.absoluteAdapterPosition

             // 옮길 포지션 획득
             val toPosition = target.absoluteAdapterPosition

             // adapter 리스트를 담기위한 변수 생성
             val list = arrayListOf()

             // adapter가 가지고 있는 현재 리스트 획득
             list.addAll(adapter.differ.currentList)

             // 리스트 순서 바꿈
             Collections.swap(list, fromPosition, toPosition)

             // adapter.notifyItemMoved(fromPosition, toPosition)와 같은 역할
             // list를 adapter.differ.submitList()로 데이터 변경 사항 알림
             adapter.differ.submitList(list)

             // 추가적인 조치가 필요할 경우 인터페이스를 통해 해결
             listener?.onItemMove(fromPosition, toPosition)

             return true
         }

         override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
         }

         // 드래그 완료 후 UI 
         override fun clearView(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder) {
             super.clearView(recyclerView, viewHolder)

             // 순서 조정 완료 후 투명도 다시 1f로 변경
             viewHolder.itemView.alpha = 1.0f
         }

         // 드래그 중 UI 변화
         override fun onSelectedChanged(viewHolder: RecyclerView.ViewHolder?, actionState: Int) {

             if (actionState == ItemTouchHelper.ACTION_STATE_DRAG) {
                 // 순서 변경 시 alpha를 0.5f
                 viewHolder?.itemView?.alpha = 0.5f
             }
             super.onSelectedChanged(viewHolder, actionState)
         }
     }

ItemTouchHelper콜백을 작성한 후 Activity에서 RecycleirView와 연결시켜준다.

app/java/MainActivity

ItemTouchHelper Callback과 ItemTouchHelper 변수 선언

  private val itemTouchSimpleCallback = ItemTouchSimpleCallback()
  private val itemTouchHelper = ItemTouchHelper(itemTouchSimpleCallback)

ItemTouchHelper와 RecyclerView 연결

          // itemTouchSimpleCallback 인터페이스로 추가 작업
      itemTouchSimpleCallback.setOnItemMoveListener(object : ItemTouchSimpleCallback.OnItemMoveListener {
          override fun onItemMove(from: Int, to: Int) {
              Log.d("MainActivity", "from Position : $from, to Position : $to")                

              // userList에도 값이 변하는 걸 원한다면 Collections.swap으로 변경
              //Collections.swap(userList, from, to)

              // userList != adapter.differ.currentList
              // adapter.differ.currentList는 계속 값을 변경했지만 userList는 변경 전 값(왜냐면 우리는 변경한적이 없다.)
              Log.d("MainActivity", "userList: $userList")
              Log.d("MainActivity", "differ currentList: ${adapter.differ.currentList}")
          }
      })

      // itemTouchHelper와 recyclerview 연결
      itemTouchHelper.attachToRecyclerView(binding.recyclerview)

MainActivity 전체 코드

class MainActivity : AppCompatActivity() {

  private lateinit var binding: ActivityMainBinding
  private lateinit var adapter: UserAdapter
  private var userList = mutableListOf()
  private val itemTouchSimpleCallback = ItemTouchSimpleCallback()
  private val itemTouchHelper = ItemTouchHelper(itemTouchSimpleCallback)

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

      // RecyclerView에 사용할 리스트 제공
      for (i in 1 until 11) {
          val mUser = User(i, "user$i")
          userList.add(mUser)
      }

  }

  override fun onResume() {
      super.onResume()

      // RecyclerView에 리스트 추가 및 어댑터 연결
      adapter = UserAdapter(this)
      binding.recyclerview.layoutManager = LinearLayoutManager(this)
      binding.recyclerview.adapter = adapter

      // DiffUtil 적용 후 데이터 추가
      adapter.differ.submitList(userList)

      // itemTouchSimpleCallback 인터페이스로 추가 작업
      itemTouchSimpleCallback.setOnItemMoveListener(object : ItemTouchSimpleCallback.OnItemMoveListener {
          override fun onItemMove(from: Int, to: Int) {
              Log.d("MainActivity", "from Position : $from, to Position : $to")
              //Collections.swap(userList, from, to)

              // userList != adapter.differ.currentList
              // adapter.differ.currentList는 계속 값을 변경했지만 userList는 변경 전 값(왜냐면 우리는 변경한적이 없다.)
              Log.d("MainActivity", "userList: $userList")
              Log.d("MainActivity", "differ currentList: ${adapter.differ.currentList}")
          }
      })

      // itemTouchHelper와 recyclerview 연결
      itemTouchHelper.attachToRecyclerView(binding.recyclerview)

      // 아이템 추가 버튼 클릭 시 이벤트(userList에 아이템 추가)
      binding.addButton.setOnClickListener {

          // 추가할 데이터 생성
          val mUser = User(userList.size+1, "added user ${userList.size+1}")

          // differ의 현재 리스트를 받아와서 newList에 넣기
          val newList = adapter.differ.currentList.toMutableList()

          // newList에 생성한 유저 추가
          newList.add(mUser)

          // adapter의 differ.submitList()로 newList 제출
          // submitList()로 제출하면 기존에 있는 oldList와 새로 들어온 newList를 비교하여 UI 반영
          adapter.differ.submitList(newList)

          // userList에도 추가 (꼭 안해줘도 되지만 userList가 필요할때가 있을 수도 있다.)
          // userList = adapter.differ.currentList 이렇게 사용하면 안됨
          userList.add(mUser)

          // 추가 메시지 출력
          Toast.makeText(this, "${mUser.name}이 추가되었습니다.", Toast.LENGTH_SHORT).show()

          // 추가된 포지션으로 스크롤 이동
          binding.recyclerview.scrollToPosition(userList.indexOf(mUser))
      }
  }
}

Swipe 후 View 고정 시 나타나는 Button 클릭으로 아이템 제거

Swipe 후 View를 고정하게 되면 뒤에 숨겨져있던 삭제 버튼을 눌러 아이템 제거

작업 순서는 간단하다.

swipe 되고 난 후의 삭제 버튼을 누르기 위해 필요한 view 추가 (user_list_item.xml)
삭제 버튼 클릭 시 일어날 이벤트 추가 (UserAdapter.kt)
swipe 동작 추가 (ItemTouchSimpleCallback.kt)
ItemTouchSimpleCallback의 추가 이벤트리스너를 RecyclerView와 연결 (MainActivity.kt)

쓰고보니 별로 안간단하다. 설명은 주석을 참고하면 된다!. 수정된 부분을 표시해주고 싶은데 이미 한번 작성해 놓은 글을 날려버려서 의욕이 안난다!

결과 화면

구현 방법

삭제 버튼(나는 TextView로 했음) 추가 및 전체적인 속성 변경 (app/res/layout/user_list_item.xml)

app/res/layout/user_list_item.xml
```
 
 

     

     

         

         

     
 
```

이제 우리는 삭제버튼을 눌렀을 때 일어날 이벤트를 RecyclerView의 Adapter에 써주자(app/java/패키지/adapters/UserAdapter.kt)

app/java/패키지/adapters/UserAdapter.kt

 class UserAdapter(
     private val mContext: Context)
     : RecyclerView.Adapter() {

     inner class ViewHolder(view: View): RecyclerView.ViewHolder(view) {

         private val swipeView: LinearLayout = itemView.findViewById(R.id.swipe_view)
         private val userImage: ImageView = itemView.findViewById(R.id.user_image)
         private val userNameText: TextView = itemView.findViewById(R.id.user_name_text)
         private val removeTextView: TextView = itemView.findViewById(R.id.remove_text_view)

         fun bind(user: User) {

             // 재사용 시 Swipe가 되어있다면 Swipe 원상복구
             swipeView.translationX = 0f

             userNameText.text = user.name

             removeTextView.setOnClickListener {
                 val list = arrayListOf()
                 list.addAll(differ.currentList)
                 list.remove(user)

                 // 해당 아이템 삭제 adapter에 알리기기
             differ.submitList(list)
             }

         }
     }

     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
         val view = LayoutInflater.from(mContext).inflate(R.layout.user_list_item, parent, false)
         return ViewHolder(view)
     }

     override fun onBindViewHolder(holder: ViewHolder, position: Int) {
         // 수정 전
         //val user = mList[position]

         // 수정 후
         val user = differ.currentList[position]
         holder.bind(user)
     }

     override fun getItemCount() =  differ.currentList.size

     // 추가
     private val differCallback = object : DiffUtil.ItemCallback() {
         override fun areItemsTheSame(oldItem: User, newItem: User): Boolean {
             return oldItem.id == newItem.id
         }

         override fun areContentsTheSame(oldItem: User, newItem: User): Boolean {
             return oldItem == newItem
         }
     }

     val differ = AsyncListDiffer(this, differCallback)

 }

천천히 ItemTouchSimpleCallback.kt 전반적으로 수정한다. (app/java/패키지/ItemTouchSimpleCallback.kt)

app/java/패키지/ItemTouchSimpleCallback.kt

 class ItemTouchSimpleCallback : ItemTouchHelper.SimpleCallback(
     ItemTouchHelper.UP or ItemTouchHelper.DOWN,
     ItemTouchHelper.RIGHT or ItemTouchHelper.LEFT
 ) {

     private var currentPosition: Int? = null
     private var previousPosition: Int? = null
     private var currentDx = 0f

     // 삭제 버튼 width를 넣을 값
     private var clamp = 0f

     interface OnItemMoveListener {
         fun onItemMove(from: Int, to: Int)
     }

     private var listener: OnItemMoveListener? = null

     fun setOnItemMoveListener(listener: OnItemMoveListener) {
         this.listener = listener
     }

     override fun onMove(
         recyclerView: RecyclerView,
         viewHolder: RecyclerView.ViewHolder,
         target: RecyclerView.ViewHolder
     ): Boolean {

         // 어댑터 획득
         val adapter = recyclerView.adapter as UserAdapter

         // 현재 포지션 획득
         val fromPosition = viewHolder.absoluteAdapterPosition

         // 옮길 포지션 획득
         val toPosition = target.absoluteAdapterPosition

         // adapter가 가지고 있는 현재 리스트 획득
         val list = arrayListOf()
         list.addAll(adapter.differ.currentList)

         // 리스트 순서 바꿈
         Collections.swap(list, fromPosition, toPosition)

         // adapter.notifyItemMoved(fromPosition, toPosition)
         adapter.differ.submitList(list)

         // 추가적인 조치가 필요할 경우 인터페이스를 통해 해결
         listener?.onItemMove(fromPosition, toPosition)

         return true
     }

     override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
     }

     override fun clearView(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder) {
         super.clearView(recyclerView, viewHolder)

         // 순서 조정 완료 후 투명도 다시 1f로 변경
         viewHolder.itemView.alpha = 1.0f
         getDefaultUIUtil().clearView(getView(viewHolder))
         previousPosition = viewHolder.absoluteAdapterPosition
     }

     override fun onSelectedChanged(viewHolder: RecyclerView.ViewHolder?, actionState: Int) {

         if (actionState == ItemTouchHelper.ACTION_STATE_DRAG) {
             // 순서 변경 시 alpha를 0.5f
             viewHolder?.itemView?.alpha = 0.5f
         }

         if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
             viewHolder?.let {
                 // 삭제 버튼 width 획득
                 clamp = getViewWidth(viewHolder)
                 // 현재 뷰홀더
                 currentPosition = viewHolder.bindingAdapterPosition
                 getDefaultUIUtil().onSelected(getView(it))
             }
         }

         super.onSelectedChanged(viewHolder, actionState)
     }

     override fun onChildDraw(
         c: Canvas,
         recyclerView: RecyclerView,
         viewHolder: RecyclerView.ViewHolder,
         dX: Float,
         dY: Float,
         actionState: Int,
         isCurrentlyActive: Boolean
     ) {
         if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
             val view = getView(viewHolder)
             val isClamped = getTag(viewHolder)

             val x = clampViewPositionHorizontal(view, dX, isClamped, isCurrentlyActive)

             currentDx = x

             getDefaultUIUtil().onDraw(
                 c, recyclerView, view, x, dY, actionState, isCurrentlyActive
             )
         }

         if (actionState == ItemTouchHelper.ACTION_STATE_DRAG) {
             super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive)
         }
     }

     // 삭제버튼 width 구하는 함수
     private fun getViewWidth(viewHolder: RecyclerView.ViewHolder): Float{
         val viewWidth = (viewHolder as UserAdapter.ViewHolder).itemView.findViewById(R.id.remove_text_view).width
         return viewWidth.toFloat()
     }

     // swipe될 뷰 (우리가 스와이프할 시 움직일 화면)
     private fun getView(viewHolder: RecyclerView.ViewHolder): View {
         return (viewHolder as UserAdapter.ViewHolder).itemView.findViewById(R.id.swipe_view)
     }

     // view의 tag로 스와이프 고정됐는지 안됐는지 확인 (고정 == true)
     private fun getTag(viewHolder: RecyclerView.ViewHolder): Boolean {
         return viewHolder.itemView.tag as? Boolean ?: false
     }

     // view의 tag에 스와이프 고정됐으면 true, 안됐으면 false 값 넣기
     private fun setTag(viewHolder: RecyclerView.ViewHolder, isClamped: Boolean) {
         viewHolder.itemView.tag = isClamped
     }

     // 스와이프 될 가로(수평평) 길이
 private fun clampViewPositionHorizontal(
         view: View,
         dX: Float,  //
         isClamped: Boolean,
         isCurrentlyActive: Boolean
     ): Float {
         val maxSwipe: Float = -clamp * 1.5f

         val right = 0f

         val x = if (isClamped) {
             if (isCurrentlyActive) dX - clamp else -clamp
         } else dX

         return min(
             max(maxSwipe, x),
             right
         )
     }

     // 사용자가 Swipe 동작으로 간주할 최소 속도
     override fun getSwipeEscapeVelocity(defaultValue: Float): Float {
         return defaultValue * 10
     }

     // 사용자가 스와이프한 것으로 간주할 view 이동 비율
     override fun getSwipeThreshold(viewHolder: RecyclerView.ViewHolder): Float {
         setTag(viewHolder, currentDx <= -clamp)
         return 2f
     }

     // 다른 아이템 클릭 시 기존 swipe되어있던 아이템 원상복구
     fun removePreviousClamp(recyclerView: RecyclerView) {
         if (currentPosition == previousPosition)
             return
         previousPosition?.let {
             val viewHolder = recyclerView.findViewHolderForAdapterPosition(it) ?: return
             getView(viewHolder).translationX = 0f
             setTag(viewHolder, false)
             previousPosition = null
         }
     }

 }

removePreviousClamp를 적용하기 위해 MainActivity.kt를 수정한다. (app/java/패키지/MainActivity.kt)

app/java/패키지/MainActivity.kt)

 class MainActivity : AppCompatActivity() {

     private lateinit var binding: ActivityMainBinding
     private lateinit var adapter: UserAdapter
     private var userList = mutableListOf()
     private val itemTouchSimpleCallback = ItemTouchSimpleCallback()
     private val itemTouchHelper = ItemTouchHelper(itemTouchSimpleCallback)

     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

         // RecyclerView에 사용할 리스트 제공
         for (i in 1 until 11) {
             val mUser = User(i, "user$i")
             userList.add(mUser)
         }

     }

     override fun onResume() {
         super.onResume()

         // RecyclerView에 리스트 추가 및 어댑터 연결
         adapter = UserAdapter(this)
         binding.recyclerview.layoutManager = LinearLayoutManager(this)
         binding.recyclerview.adapter = adapter

         // DiffUtil 적용 후 데이터 추가
         adapter.differ.submitList(userList)

         // itemTouchSimpleCallback 인터페이스로 추가 작업
         itemTouchSimpleCallback.setOnItemMoveListener(object : ItemTouchSimpleCallback.OnItemMoveListener {
             override fun onItemMove(from: Int, to: Int) {
                 Log.d("MainActivity", "from Position : $from, to Position : $to")
                 //Collections.swap(userList, from, to)

                 // userList != adapter.differ.currentList
                 // adapter.differ.currentList는 계속 값을 변경했지만 userList는 변경 전 값(왜냐면 우리는 변경한적이 없다.)
                 Log.d("MainActivity", "userList: $userList")
                 Log.d("MainActivity", "differ currentList: ${adapter.differ.currentList}")
             }
         })

         // itemTouchHelper와 recyclerview 연결
         itemTouchHelper.attachToRecyclerView(binding.recyclerview)

         // RecyclerView의 다른 곳을 터치하거나 Swipe 시 기존에 Swipe된 것은 제자리로 변경
         // 아래 코드가 경고 표시를 주는데 이것은 Annotation @SuppressLint("ClickableViewAccessibility")을 함수에 추가하면 됨
         // 또는, performClick 사용
         binding.recyclerview.setOnTouchListener { _, _ ->
             itemTouchSimpleCallback.removePreviousClamp(binding.recyclerview)
             false
         }

         // 아이템 추가 버튼 클릭 시 이벤트(userList에 아이템 추가)
         binding.addButton.setOnClickListener {

             // 추가할 데이터 생성
             val mUser = User(userList.size+1, "added user ${userList.size+1}")

             // differ의 현재 리스트를 받아와서 newList에 넣기
             val newList = adapter.differ.currentList.toMutableList()

             // newList에 생성한 유저 추가
             newList.add(mUser)

             // adapter의 differ.submitList()로 newList 제출
             // submitList()로 제출하면 기존에 있는 oldList와 새로 들어온 newList를 비교하여 UI 반영
             adapter.differ.submitList(newList)

             // userList에도 추가 (꼭 안해줘도 되지만 userList가 필요할때가 있을 수도 있다.)
             // userList = adapter.differ.currentList 이렇게 사용하면 안됨
             userList.add(mUser)

             // 추가 메시지 출력
             Toast.makeText(this, "${mUser.name}이 추가되었습니다.", Toast.LENGTH_SHORT).show()

             // 추가된 포지션으로 스크롤 이동
             binding.recyclerview.scrollToPosition(userList.indexOf(mUser))
         }
     }

 }

MainActivity 코드 정리

지저분한 MainActivity의 소스코드를 좀 정리해보자

onResume()에 있던걸 용도별 함수에 나누어서 onResume()에서는 함수호출로 정리했다.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var adapter: UserAdapter
    private var userList = mutableListOf()
    private val itemTouchSimpleCallback = ItemTouchSimpleCallback()
    private val itemTouchHelper = ItemTouchHelper(itemTouchSimpleCallback)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        // RecyclerView에 사용할 리스트 제공
        for (i in 1 until 11) {
            val mUser = User(i, "user$i")
            userList.add(mUser)
        }

    }

    override fun onResume() {
        super.onResume()

        initRecyclerView()
        setupEvents()

    }

    private fun initRecyclerView() {
        // RecyclerView에 리스트 추가 및 어댑터 연결
        adapter = UserAdapter(this)
        binding.recyclerview.layoutManager = LinearLayoutManager(this)
        binding.recyclerview.adapter = adapter

        // DiffUtil 적용 후 데이터 추가
        adapter.differ.submitList(userList)

        // itemTouchSimpleCallback 인터페이스로 추가 작업
        itemTouchSimpleCallback.setOnItemMoveListener(object : ItemTouchSimpleCallback.OnItemMoveListener {
            override fun onItemMove(from: Int, to: Int) {
                // Collections.swap(userList, from, to) 처럼 from, to가 필요하다면 사용
                Log.d("MainActivity", "from Position : $from, to Position : $to")
            }
        })

        // itemTouchHelper와 recyclerview 연결
        itemTouchHelper.attachToRecyclerView(binding.recyclerview)

        // RecyclerView의 다른 곳을 터치하거나 Swipe 시 기존에 Swipe된 것은 제자리로 변경
        binding.recyclerview.setOnTouchListener { _, _ ->
            itemTouchSimpleCallback.removePreviousClamp(binding.recyclerview)
            false
        }
    }

    private fun setupEvents() {
        // 아이템 추가 버튼 클릭 시 이벤트(userList에 아이템 추가)
        binding.addButton.setOnClickListener {

            // 추가할 데이터 생성
            val mUser = User(userList.size+1, "added user ${userList.size+1}")

            // differ의 현재 리스트를 받아와서 newList에 넣기
            val newList = adapter.differ.currentList.toMutableList()

            // newList에 생성한 유저 추가
            newList.add(mUser)

            // adapter의 differ.submitList()로 newList 제출
            // submitList()로 제출하면 기존에 있는 oldList와 새로 들어온 newList를 비교하여 UI 반영
            adapter.differ.submitList(newList)

            // userList에도 추가 (꼭 안해줘도 되지만 userList가 필요할때가 있을 수도 있다.)
            // userList = adapter.differ.currentList 이렇게 사용하면 안됨
            userList.add(mUser)

            // 추가 메시지 출력
            Toast.makeText(this, "${mUser.name}이 추가되었습니다.", Toast.LENGTH_SHORT).show()

            // 추가된 포지션으로 스크롤 이동
            binding.recyclerview.scrollToPosition(newList.indexOf(mUser))
        }
    }


}

DiffUtil 사용 시 UI 반영이 안되는 경우

혹시 DiffUtil.submitList()를 사용했는 데 UI에 업데이트가 안된다면 이 글이 유용할 것이다.

DiffUtil.submitList()는 입력받은 리스트를 참조하는 것이지 그 리스트를 따로 가지고 있는 것이 아니다. 이게 무슨 말이냐면 처음에 DiffUtil.submitList()에 listA를 넣는다. 그렇다면 현재 Diffutil은 listA를 바라보고 있다.

우리는 이제 Item을 추가하기 위해 listA에 add.(아이템)을 하고 그것을 DiffUtil.submitList()에 넣을 가능성이 크다(내가 그랬다!나는 멍청했다). 그렇다면 DiffUtil의 areItemsTheSame()과 areContentsTheSame()은 반환값을 true로 준다. 반환값이 true면 이전 리스트와 새로운 리스트의 동일한 포지션에 있는 아이템이 같다는 의미로 adapter에 UI 반영을 해주지않는다.

왜 그럴까?

바로 DifferUtil이 참조하고 있는 listA와 새로 들어온 listA는 같은 것이기 때문이다!

DifferUtil은 submitList()로 데이터가 들어오면 참조하고 있던 oldList와 비교하는데 이 oldList는 listA다. 하지만 listA는 이미 우리가 listA.add(아이템)으로 변경해주었기 때문에 oldList와 newList가 같은 상황인것이다.

해결방법은 새로운 변수에 differ.currentList()를 넣어서 데이터를 추가하고 submitList()에 넣는것이다.

나중에 이것과 관련된 내용을 자세히 공부하는 포스팅을 하게되면 링크를 추가하겠다!

참고

마치며

위의 단계별 내용을 Github에 commit했다. 혹시 필요하다면 아래 주소로 가면 된다.

https://github.com/park-chris/RecyclerView

[Kotlin] 부모 View와 자식 View의 TouchEvent 중첩

Thu, 01 Sep 2022 12:45:23 GMT

부모 View와 자식 View의 eventListener 중첩은 앱을 개발하는 사람들은 한번쯤은 겪어볼만한 일이다. 한번은 무슨... 꽤 자주 겪는다. 그때마다 구글링하기가 귀찮아서 기록한다.

TouchEvent 동작 원리

아래 해결방법을 적용하기 위해서 이 동작 원리를 알아야한다.

사진 출처 - https://suragch.medium.com/how-touch-events-are-delivered-in-android-eee3b607b038

왼쪽 사진을 먼저 보면 Activity안에 ViewGroup A, ViewGroup A 안에 ViewGroup B, ViewGroup B안에 View가 있다. 이럴 경우 TouchEvent는 Activity -> ViewGroup A -> ViewGroup B -> View 순으로 event가 발생함을 알리고, 다시 거꾸로 View -> ViewGroup B -> ViewGroup A -> Activity 순으로 event가 동작하게 된다.

위의 사진으로 알 수 있듯이, TouchEvent가 발생하면 바로 동작이 되는게 아니고 TouchEvent가 발생하였다고 알리는 dispatchTouchEvent() 메소드가 먼저 작동한다. event가 발생했다는 것을 ViewGroup은 onInterceptTouchEvent()로 이 event를 하위 View(자식 뷰)에게 전달할지, 아닐지를 결정할 수 있다. onInterceptTouchEvent()의 반환값이 true면 ViewGroup은 이 event를 intercept(채가다)해간다. 이 말은 하위 View(자식 View)에게 event를 전달하지 않고 바로 event를 동작한다는 의미다.

이 내용을 이해했다면 아래 해결방법에서의 예시가 이해간다.

해결방법

부모 View(ViewGroup)에 onInterceptTouchEvent()를 오버라이딩하여, 어떤 특정 이벤트가 발생 시 자식 View에게 이 이벤트를 전달할 지 안할지 결정한다. 반환값이 false면 자식 View에게 이벤트를 전달하는 것을 의미한다.

아래 코드는 Android Developer에서 onInterceptTouchEvent의 예시를 보여준다.

onInterceptTouchEvent()

    class MyViewGroup @JvmOverloads constructor(
            context: Context,
            private val mTouchSlop: Int = ViewConfiguration.get(context).scaledTouchSlop
    ) : ViewGroup(context) {

        ...

        override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
            /*
             * This method JUST determines whether we want to intercept the motion.
             * If we return true, onTouchEvent will be called and we do the actual
             * scrolling there.
             */
            return when (ev.actionMasked) {
                // Always handle the case of the touch gesture being complete.
                MotionEvent.ACTION_CANCEL, MotionEvent.ACTION_UP -> {
                    // Release the scroll.
                    mIsScrolling = false
                    false // Do not intercept touch event, let the child handle it
                }
                MotionEvent.ACTION_MOVE -> {
                    if (mIsScrolling) {
                        // We're currently scrolling, so yes, intercept the
                        // touch event!
                        true
                    } else {

                        // If the user has dragged her finger horizontally more than
                        // the touch slop, start the scroll

                        // left as an exercise for the reader
                        val xDiff: Int = calculateDistanceX(ev)

                        // Touch slop should be calculated using ViewConfiguration
                        // constants.
                        if (xDiff > mTouchSlop) {
                            // Start scrolling!
                            mIsScrolling = true
                            true
                        } else {
                            false
                        }
                    }
                }
                ...
                else -> {
                    // In general, we don't want to intercept touch events. They should be
                    // handled by the child view.
                    false
                }
            }
        }

        override fun onTouchEvent(event: MotionEvent): Boolean {
            // Here we actually handle the touch event (e.g. if the action is ACTION_MOVE,
            // scroll this container).
            // This method will only be called if the touch event was intercepted in
            // onInterceptTouchEvent
            ...
        }
    }

위의 예시를 난 아래처럼 적용했다.

모든 코드를 볼 필요는 없다. 수정 전,후로 onInterceptTouchEvent()에 추가된 when 구절이 해결방법이다.

CustomMotionLayout.kt(수정 전)

package com.dn.digitalnutrition.customs

import android.content.Context
import android.graphics.Rect
import android.util.AttributeSet
import android.view.GestureDetector
import android.view.MotionEvent
import android.view.View
import androidx.constraintlayout.motion.widget.MotionLayout
import com.dn.digitalnutrition.R

class CustomMotionLayout(context: Context, attributes: AttributeSet? = null):
MotionLayout(context, attributes){


    private var motionTouchStarted = false // 정확한 위치에서만 true
    private val itemContainerView by lazy {
        findViewById(R.id.item_container)
    }

    private val hitRect = Rect()

    init {
        setTransitionListener(object : TransitionListener {
            override fun onTransitionStarted(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int
            ) {}

            override fun onTransitionChange(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int,
                progress: Float
            ) {}

            override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
                motionTouchStarted = false
            }

            override fun onTransitionTrigger(
                motionLayout: MotionLayout?,
                triggerId: Int,
                positive: Boolean,
                progress: Float
            ) {}
        })
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.actionMasked) {
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                motionTouchStarted = false
                return super.onTouchEvent(event)
            }
        }

        if (!motionTouchStarted) {
            itemContainerView.getHitRect(hitRect)
            motionTouchStarted = hitRect.contains(event.x.toInt(), event.y.toInt())
        }

        return super.onTouchEvent(event) && motionTouchStarted
    }

    private val gestureListener by lazy {
        object : GestureDetector.SimpleOnGestureListener() {
            override fun onScroll(
                e1: MotionEvent,
                e2: MotionEvent,
                distanceX: Float,
                distanceY: Float
            ): Boolean {
                itemContainerView.getHitRect(hitRect)
                return hitRect.contains(e1.x.toInt(), e1.y.toInt())
            }
        }
    }

    private val gestureDetector by lazy {
        GestureDetector(context, gestureListener)
    }

    override fun onInterceptTouchEvent(event: MotionEvent?): Boolean {
        return gestureDetector.onTouchEvent(event)
    }

}

CustomMotionLayout.kt(수정 후)

package com.dn.digitalnutrition.customs

import android.content.Context
import android.graphics.Rect
import android.util.AttributeSet
import android.view.GestureDetector
import android.view.MotionEvent
import android.view.View
import androidx.constraintlayout.motion.widget.MotionLayout
import com.dn.digitalnutrition.R

class CustomMotionLayout(context: Context, attributes: AttributeSet? = null):
MotionLayout(context, attributes){


    private var motionTouchStarted = false // 정확한 위치에서만 true
    private val itemContainerView by lazy {
        findViewById(R.id.item_container)
    }

    private val hitRect = Rect()

    init {
        setTransitionListener(object : TransitionListener {
            override fun onTransitionStarted(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int
            ) {}

            override fun onTransitionChange(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int,
                progress: Float
            ) {}

            override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
                motionTouchStarted = false
            }

            override fun onTransitionTrigger(
                motionLayout: MotionLayout?,
                triggerId: Int,
                positive: Boolean,
                progress: Float
            ) {}
        })
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {

        when (event.actionMasked) {
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL, -> {
                motionTouchStarted = false
                return super.onTouchEvent(event)
            }
        }

        if (!motionTouchStarted) {
            itemContainerView.getHitRect(hitRect)
            motionTouchStarted = hitRect.contains(event.x.toInt(), event.y.toInt())
        }

        return super.onTouchEvent(event) && motionTouchStarted
    }

    private val gestureListener by lazy {
        object : GestureDetector.SimpleOnGestureListener() {
            override fun onScroll(
                e1: MotionEvent,
                e2: MotionEvent,
                distanceX: Float,
                distanceY: Float
            ): Boolean {
                itemContainerView.getHitRect(hitRect)
                return hitRect.contains(e1.x.toInt(), e1.y.toInt())
            }
        }
    }

    private val gestureDetector by lazy {
        GestureDetector(context, gestureListener)
    }

    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {

        when (event.action) {
            MotionEvent.ACTION_MOVE, MotionEvent.ACTION_SCROLL->
            return false
        }
        return gestureDetector.onTouchEvent(event)
    }

}

참고

Android Developers https://developer.android.com/training/gestures/viewgroup?hl=ko#delegate

[Android] MotionLayout.setTransitionListener 이벤트 후 UI 작동안하는 에러

Thu, 01 Sep 2022 00:40:05 GMT

에러

MotionLayout의 setTransitionListener를 사용한 후 UI가 안보이는 에러가 발생했다. UI가 안보일뿐만 아니라 해당 UI의 기능들도 작동하지않았다.

구현하고자 했던 기능은 Fragment에서 MotionLayout의 이벤트가 발생할때 MainActivity의 MotionLayout의 이벤트도 일어나게 하는 것이었다.

아래 코드가 setTransitionListener를 사용했을 때 에러가 났던 코드다.

Fragment.kt


        binding.motionLayout.setTransitionListener(object : MotionLayout.TransitionListener {
            override fun onTransitionStarted(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int
            ) {
            }

            override fun onTransitionChange(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int,
                progress: Float
            ) {
                // MainActivity 모션 레이아웃에 값을 전달
                binding.let {
                    (activity as MainActivity).also { mainActivity ->
                        mainActivity.findViewById(mainBinding.mainMotionLayout.id).progress = abs(progress)
                    }
                }
            }

            override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {

            }

            override fun onTransitionTrigger(
                motionLayout: MotionLayout?,
                triggerId: Int,
                positive: Boolean,
                progress: Float
            ) {
            }

        })

원인

fragment에서 일어난 transition은 완료가 되었지만, fragment에서 호출한 MainActivity에서의 transition이 완료가 안되었기에 발생한 에러다.

확인하기 위해서 각 motionLayout에 setTransitionListener를 달아주고 로그로 transition이 제대로 종료되는지 확인해본다.

아래 코드는 데이터바인딩된 MainActivity에 쓴 코드다.

MainActivity.kt

      binding.mainMotionLayout.setTransitionListener(object : MotionLayout.TransitionListener {
            override fun onTransitionStarted(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int
            ) {
                Log.d("MainActivity", "onTransitionStarted")
            }

            override fun onTransitionChange(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int,
                progress: Float
            ) {
                Log.d("MainActivity", "onTransitionChange")

            }

            override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
                Log.d("MainActivity", "onTransitionCompleted")

            }

            override fun onTransitionTrigger(
                motionLayout: MotionLayout?,
                triggerId: Int,
                positive: Boolean,
                progress: Float
            ) {
                Log.d("MainActivity", "onTransitionTrigger")

            }

        })

해결

해결하는 방법은 MainActivity의 MotionLayout transition을 호출하는 Fragment의 MotionLayout setTransitionListener에서 호출한 MAinActivity의 transition을 임의로 종료해주는 것이다.

다양한 방법이 있겠지만, 나는 Fragment의 setTransitionListener에서 상속받은 onTransitionCompleted()에서 transition의 process를 동일하게 해주었다.

아래 코드가 위 내용으로 해결한 부분이다.

이렇게 한 이유는 MainActivity와 Framgnet의 transition의 start와 end의 같아야했기 때문이다. 이런게 필요없다면 transitionToStart()나 transitionToEnd()를 onTransitionCompleted에 넣어줘도 된다.

Fragment.kt


        binding.motionLayout.setTransitionListener(object : MotionLayout.TransitionListener {
            override fun onTransitionStarted(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int
            ) {
                Log.d(TAG, "onTransitionStarted")
            }

            override fun onTransitionChange(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int,
                progress: Float
            ) {
                // MainActivity 모션 레이아웃에 값을 전달
                binding.let {
                    // Fragment 는 자기 단독으로 존재할 수 없기 때문에 activity가 존재할 수밖에 없고
                    // Activity를 가져오면 해당 Fragment가 attacj 되어있는 액티비티를 가져온다.
                    (activity as MainActivity).also { mainActivity ->
                        mainActivity.findViewById(R.id.main_motion_layout).progress = abs(progress)
                    }
                }
                Log.d(TAG, "onTransitionChange")

            }

            override fun onTransitionCompleted(motionLayout: MotionLayout, currentId: Int) {
                (activity as MainActivity).also { mainActivity ->
                    mainActivity.findViewById(mainBinding.mainMotionLayout.id).progress = motionLayout.progress
                }
                Log.d(TAG, "SoundPlayerFragment : ${binding.motionLayout.currentState}," +
                        "MainActivity : ${(activity as MainActivity).also { mainActivity -> mainActivity.findViewById(mainBinding.mainMotionLayout.id).currentState }}")
            }

            override fun onTransitionTrigger(
                motionLayout: MotionLayout?,
                triggerId: Int,
                positive: Boolean,
                progress: Float
            ) {
                Log.d(TAG, "onTransitionTrigger")
            }

        })

[Kotlin] 스크롤 시 배경 이미지 점점 사라지게 하기

Fri, 19 Aug 2022 08:01:19 GMT

오늘은 화면 스크롤 시 배경이미지를 점점 투명하게 만드는 것을 해볼것이다. 이번에 앱을 만들때 필요했는데 Kotlin 자료가 많이 없어서 Java로 작성된 블로그를 참고했다. 우선 애니메이션으로 할 수 있겠지만 여기서는 스크롤이벤트를 이용할 것이다.

결과물

구현 방법

나는 ScrollView를 커스텀할것이다. 우선 아래 레이아웃을 보면 위에 사라지게 만들 top_image가 있고 그 아래에 "안녕하세요."를 입력받은 TextView가 있다. TextView 아래에는 스크롤을 하기위해 높이가 있는 것으로 채운것이므로 신경쓰지않아도 된다.

자, 그럼 이제 구현해보자!

CustomScrollView.kt

우선, 제일 중요한 ScrollView를 커스텀해보자. 스크롤이 변경될때 이벤트 리스너를 추가하여 Activity나 Fragment단에서 처리할 수 있게 했다.

package com.crystal.customs

import android.content.Context
import android.util.AttributeSet
import android.util.Log
import android.widget.ScrollView

class CustomScrollView: ScrollView {

    var SCROLL_UP = 0
    var SCROLL_DOWN = 1

    private var onScrollListener: OnScrollListener? = null

    constructor(context: Context) : this(context, null, 0)
    constructor(context: Context, attr: AttributeSet?) : this(context, attr, 0)
    constructor(context: Context, attr: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attr,
        defStyleAttr
    )

    override fun onScrollChanged(l: Int, t: Int, oldl: Int, oldt: Int) {
        super.onScrollChanged(l, t, oldl, oldt)

        val direction = if (oldt > t) SCROLL_DOWN else SCROLL_UP

        onScrollListener?.onScroll(direction, t.toFloat())

    }

    fun setOnScrollListener(listener: OnScrollListener) {
        onScrollListener = listener
    }


    interface OnScrollListener {
        fun onScroll(direction: Int, scrollY: Float)
    }


}

fragment_home.xml

fragment의 layout이다. 보면 layout 바로 아래의 ConstraintLayout의 ImageView가 우리의 배경화면이다.그리고 배경화면과 우리가 만든 스크롤뷰의 부분이 겹치게 둔다. 이건 취향껏 하자.

HomeFragment.kt

package com.crystal.fragments

import android.os.Bundle
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.databinding.DataBindingUtil
import androidx.fragment.app.Fragment
import androidx.lifecycle.ViewModelProvider
import com.crystal.R
import com.crystal.customs.CustomScrollView
import com.crystal.databinding.FragmentHomeBinding

private const val TAG = "HomeFragment"
class HomeFragment : Fragment() {

    private lateinit var binding: FragmentHomeBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_home, container, false)

        return binding.root

    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        setupEvents()
        scrollEvent()
    }

    private fun setupEvents() {

    }

    private fun scrollEvent() {

        binding.scrollView.overScrollMode = View.OVER_SCROLL_NEVER

        // ScrollView에서 받는 이벤트 처리
        // 1: 완전 불투명
        // 스크롤 위치에 따라 alpha 값이 변경되므로, 방향은 상관이 없다.
        binding.scrollView.setOnScrollListener(object : CustomScrollView.OnScrollListener {
            override fun onScroll(direction: Int, scrollY: Float) {

            // statusBar 높이 구하기
            var statusBarHeight = 0
            val resId = resources.getIdentifier("status_bar_height", "dimen", "android")
            if (resId > 0) {
                statusBarHeight = resources.getDimensionPixelSize(resId)
            }

            // top_image 높이 구하기, 나는 끝까지 안올리고 100% 불투명도 만들기위해 statusbar 높이를 뺐다.
            val backgroundImgHeight = binding.topImage.height - statusBarHeight

            val alpha = ((backgroundImgHeight - scrollY) / backgroundImgHeight)

            binding.topImage.alpha = alpha


            }

        })
    }

}

난 위에 일부분을 배경이미지로 뒀지만 화면 전체를 배경이미지로 두고 전체 스크롤 시 최상단에서 최하단까지 투명도를 원하는 사람도 있을거라 생각한다. 그럼 내가 참고한 아래 링크로 가면 된다. 나도 저기 링크를 커스텀했다!

https://bbulog.tistory.com/29

참고

https://bbulog.tistory.com/29

chris_park.log

[Project/Android] 오늘의 물가 - #4. Activity 화면 기본 UI 만들기

구현 기능

UI 그리기

기본 Activity 만들기

상속받는 Activity 만들기

결과물

[Project/Android] 오늘의 물가 - #3. open API 선정 및 테스트

🙄 open API 선정 후 문제점

📍 대안을 찾다.

✨ API 테스트

[Project/Android] 오늘의 물가 - #2. 기획 및 디자인

[Project/Android] 오늘의 물가 - #0. 프로젝트 기록 관리

[Project/Android] 오늘의 물가 - #1. 계획 수립 단계

이 앱을 만들고자 한 이유

프로젝트 계획

😶프로젝트 인원

📢개발 타임라인

앱 기능

기대하는 결과

onCreateOptionsMenu() 호출이 안될때

Modal BottomSheet 구현 결과

마치며

[Kotlin] RecyclerView에서 데이터 변화 시 이미지 깜박임 제거

RecyclerView 아이템 깜박임 제거

Glide 이미지 깜박임 제거

또 다른 방법

마치며...

[Mac] brew 설치, 환경 변수 설정, 명령어

HomeBrew? 그게 뭔데?

설치하기

HomeBrew 명령어

프로그램 설치

[Kotlin] 반복문 (while, do-while, for)

while 문

for 문

참고

[Kotlin] 조건문 (if 문, when 문)

if 문

when 문

참고

[Kotlin] RecyclerView의 모든것 (기본 사용법, Diffutil로 데이터 변화 시 UI 반영,Drag&Drop으로 아이템 순서 변경, Swipe 후 아이템 삭제)

해당 글에서 나는 에러 및 오류 해결 방법

RecyclerView 기본 사용법

결과 화면

구현 방법

아이템 추가 후 RecyclerView UI 반영

결과 화면

구현 방법

Drag하여 아이템 순서 바꾸기

결과 화면

구현 방법

Swipe 후 View 고정 시 나타나는 Button 클릭으로 아이템 제거

결과 화면

구현 방법

MainActivity 코드 정리

DiffUtil 사용 시 UI 반영이 안되는 경우

참고

마치며

[Kotlin] 부모 View와 자식 View의 TouchEvent 중첩

TouchEvent 동작 원리

해결방법

참고

[Android] MotionLayout.setTransitionListener 이벤트 후 UI 작동안하는 에러

에러

원인

해결

[Kotlin] 스크롤 시 배경 이미지 점점 사라지게 하기

결과물

구현 방법

CustomScrollView.kt

fragment_home.xml

HomeFragment.kt

참고