평소 요즘 트렌드인 두 가지의 아키텍처를 동료들과 적용해보고 싶었던 저였지만, 이를 곧 바로 상용 서비스에 도입하기에는 리스크가 크다고 판단되어 엄두를 내지 못하고 있었습니다.

이러한 와중에 서버/ios 팀과 함께 하나의 사내 프로젝트를 만드는 TF팀이 결성되어, Android 앱의 Clean Architecture 앱 구조 설계를 진행하게 되었습니다.

이때 설계를 진행하며 느꼈던 바를 간단히 공유하고자 합니다.✍️

그대들, Clean Architecture 를 왜 쓰는가?

💡 왜 Clean Architecture 를 적용했나요?

안드로이드 앱 아키텍처와 비교 했을때 제일 중요한 차이점은 Domain 레이어의 여부입니다. 클린 아키텍처는 비즈니스 로직을 구현한 Domain 레이어가 필수입니다. 안드로이드 앱 아키텍처는 이 Domain 레이어가 선택 사항이고, 비즈니스 로직이 복잡하지 않아 data 레이어 만으로 충분하다면 구현하지 않아도 됩니다.

이 두 가지의 아키텍처는 각각의 특징이 있습니다.

안드로이드 앱 아키텍처의 경우

• Domain 레이어가 선택 사항인 안드로이드 앱 아키텍처는 상대적으로 구현이 간편할 수 있다.

클린 아키텍처의 경우

• Domain 가 필수이므로 비즈니스 로직의 용이한 재사용
• Domain 은 의존성이 없는 독립적 레이어이므로 손쉬운 테스트 코드 작성
• 간단한 데이터 호출도 UseCase 등을 추가해야 하므로 의미없는 복잡성이 증가할 수 있다.

결국 두 아키텍처 모두 관심사 분리를 통한 쉬운 테스트가 그 기본 목적이기 때문에 좀 더 필요에 맞는 아키텍처를 적용하는게 옳아 보입니다.

🚿 UseCase 에서 Flow 를 노출시키던데..?

GitHub 의 샘플 프로젝트들은 아래와 같이 Flow 를 반환하도록 하는 코드가 많습니다.

단순히 One-shot 형태로 데이터를 요청하는데, 비동기적 스트림 형태로 값을 방출하는 Flow 를 사용하는 이유가 있을까요? 이를 위해 많은 샘플 코드를 비교 및 의논하며 직접 구현해본 결과, 아래와 같은 깨달음을 얻었습니다.

🎯 채팅 메시지 또는 지속적 위치 조회와 같이 비동기적 응답이 필요한 경우에만 UseCase, Repository 등에서 반환 값으로 노출하는게 좋다.

User 단 하나를 반환해야하는 UseCase 는 아래와 같이 Flow 를 반환하지 않고 User Domain Model 또는 Result 와 같은 랩핑된 타입만 반환시키는게 여러 비동기적 결과들의 값들을 통합하는데 있어 더 유리하다고 생각합니다.

(작성하고 보니 아키텍처랑은 관계가 없어보이네요..)

😱 에러 처리는 어떻게 했어요??

우리는 어떤 기능이 서버를 통해 이루어진다면, 미리 정의된 에러 코드를 판별하여 예외 상황을 처리해야함을 알고있습니다.

이번 프로젝트의 경우 서버팀의 API 응답 규격에 따라 미리 정의된 에러가 String 형태로 응답되는 형식이였고, 이때 "로그인 실패" 에러 String 을 응답받는다면 이를 'Presentation 레이어 까지 String 의 형태로 전달해야하는지' 에 대한 고민이 있었습니다.

단순 String 으로 에러를 전달한다면 아래와 같은 이점이 있습니다.

• Presentation, domain, data 각 레이어에 별도 에러 타입을 구현하지 않아도 되어 구현이 편하다.

별도 에러 타입을 정의하여 전달한다면 아래와 같은 이점이 있습니다.

• 서버 API 호출 에러 코드 뿐 아니라 DB 등 여러 데이터 처리 중 발생하는 예외 상황을 가르키는 에러 타입을 만들 수 있어 확장성에 용이하다.

우리는 이 중 확장성 에 초점을 맞춰, 별도의 에러 타입을 정의하기로 결정하였습니다.

이 에러 타입은 domain 레이어에 정의되어, data 레이어에서 에러 String 또는 여러 데이터를 판단하여 변환시키고, 이를 presentation 레이어까지 전달할 수 있도록 구현되었습니다.

DomainError 로 정의된 인터페이스를 각 서버 또는 기능별로 사용할 수 있도록 구현합니다. (TokenServerError 는 토큰 발급, 갱신 중 발생하는 에러입니다.)

이를 Domain 레이어 상 공통된 규격으로 사용 할 수 있도록 Repository 가 반환해야하는 타입으로 DomainResult 라는 클래스로 랩핑하였습니다. (성공 결과 처리는 덤입니다)

에러 타입 변환을 쉽게 할 수 있도록 별도의 Mapping 클래스를 만들어 사용합니다.

이를 통해 구현된 Repository 모습입니다.

이렇게 구현해본 감상으로는.. 에러 타입을 잘 작성한다면 좋은 방식이 될 듯 합니다. 다만, Repository 나 기능별로 에러 타입과 Mapping 클래스를 추가해야 할 수 있다는 점에서는 손이 많이 가는 방식이지 않나 싶습니다.

결론적으로, 어떻게 에러 처리를 구현해야할지 좀 더 고민해보는 숙제가 된 듯 합니다.🥲

끝으로..

클린 아키텍처를 적용하며 겪었던 시행착오는 수없이 많았습니다. 대부분이 아키텍처에 대한 이해도 부족으로 인한 것이였지만..

이 외에도 앱 구성요소 (서비스, 브로드캐스트 등) 을 통한 처리는 어떻게 이루어져야 할까요? 고민이 깊어지는 밤입니다..🌠🌠🌠

앞으로도 공유하고 싶은 글이 있으면 언제든지 작성하도록 하겠습니다! 여러분 모두 하시는 일, 원하시는 꿈 모두 잘되길 바랍니다.🔥

여기어때 메인 화면.gif

우리는 UX 요구사항에 맞춰 위와 같은 ViewPager 를 개발할 필요가 있습니다.😱 과연 어떻게 만들까요?

📋결론 요약

Q. 양 옆이 미리보이는 ViewPager 는 어떻게 만들 수 있을까요?

• View Pager2 에 몇가지 설정을 추가해서 만들 수 있습니다.

Q. 어떤 설정이요?

• ItemDecoration 과 ViewPager2 의 setPageTransformer 를 이용하면 됩니다.

Q. 더 간단한 방법 없나요?

• 이 라이브러리를 쓰세요!

💻구현

먼저, Item이 3개가 있는 ViewPager 를 생각해봅시다. ViewPager 는 Item View 의 높이 너비가 Match_parent 가 되어야 합니다. 따라서, ViewPager의 너비를 모두 채우는 Item 이 될 수 밖에 없습니다.

그렇다면 어떻게 해야할까요?

Item View 에 padding 을 정의하거나, ItemDecoration 으로 아이템 사이의 Margin 을 지정합니다. 우리는 ItemDecoration 을 통해 아이템 너비를 지정하겠습니다.

우선, Item 의 왼쪽 오른쪽 마진을 지정할 ItemDecoration 을 정의합니다.

    private class PageDecoration(private val margin: Int): RecyclerView.ItemDecoration() {

        override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
            outRect.left = margin
            outRect.right = margin
        }
    }

이를 ViewPager 에 설정해줍니다.

private fun initViewPager(itemMargin: Int) {
        val decoration = PageDecoration(itemMargin)
        binding.viewPager.addItemDecoration(decoration)
}

이렇게 적용을 하면 left, right 마진이 설정된 ViewPager 를 볼 수 있습니다.

이제 1st 와 3rd 가 화면에 보이도록 2nd 에 가깝게 붙이고 싶습니다. 어떻게 할까요?

바로, ViewPager2 의 setPageTransformer 를 사용하면 됩니다.

    private fun initViewPager(itemMargin: Int) {
        // ..
        viewPager.setPageTransformer { page, position ->
            // ..
        }
    }

setPageTransformer 메서드는 PageTransFormer 인터페이스를 인자로 전달받는 메서드입니다.

    public interface PageTransformer {
        void transformPage(@NonNull View page, float position);
    }

PageTransformer 의 transformPage 메서드는 ViewPager 가 스크롤되어 각 아이템의 위치가 변경될 때 마다 호출되는 콜백 메서드입니다.

transformPage 의 position 은 현재 포커스된 가운데 아이템은 0f, 이를 기준으로 왼쪽 아이템은 음수값, 우측 아이템은 0보다 큰 양수값이 전달됩니다.

이를 이용해, 인자로 넘어오는 Page 의 position 를 계산하여 View 의 위치를 변경 할 수 있습니다.

최종 적용된 코드는 아래와 같습니다.

    // 인자 `previewWidth` 는 미리 보여야 하는 양옆 아이템의 너비입니다.
    private fun initViewPager(previewWidth: Int, itemMargin: Int) {
        val decoMargin = previewWidth + itemMargin
        val pageTransX = decoMargin + previewWidth
        val decoration = PageDecoration(decoMargin)

        binding.viewPager.also {
            it.offscreenPageLimit = 1
            it.addItemDecoration(decoration)
            it.setPageTransformer { page, position ->
                page.translationX = position * - pageTransX
            }
        }
    }

initViewPager 메서드를 설명하자면,

• ItemDecoration 으로 설정하는 마진 값 decoMargin 은 적용할 아이템 사이 마진 값과 미리 보여야 하는 아이템 너비를 더하여 적용합니다.

• View.translationX 메서드를 통해 Item View 들의 위치를 변경합니다.
• View 의 위치는 position 와 음수값 pageTransX 를 곱하여 적용합니다. (position 이 양수인 경우 왼쪽으로 옮기기 위해서 음수 값, 음수인 경우 오른쪽으로 옮기기 위해 양수 값이 필요하므로 음수값 pageTransX 를 곱해줍니다.)
• pageTransX 는 각 아이템이 decoMargin * 2 만큼 떨어져 있으므로, decoMargin 과 itemMargin 을 더하여 itemMargin 만큼만 보이도록 설정합니다.

📚라이브러리

위 구현 방식이 귀찮거나, 여러 화면에서 쓰여 Custom View 로써 사용해야하는 사람이 있을겁니다. 이런 분들을 위해 라이브러리를 배포했습니다!!👏

🔗GitHub 링크

유용하셨다면 🌠STAR 를 꾹.. 눌러주세요. 큰 힘이 됩니다!🔥

DI 에 대한 세번째 포스팅입니다.

의존성 주입

테스트 코드

우리는 이전 포스팅 까지 의존성 주입이 필요한 이유에 대해 알아보았습니다. 결국, 궁극적으로 Testable 한 코드 작성이 그 이유였는데요, 이제 실제 테스트 코드는 어떻게 해야 작성 할 수 있는지 예제를 통해 알아보겠습니다!

이번 예제에서 테스트 코드는 Junit4, Mockito, Mockito-kotlin2, Hamcrest 를 통해 구현합니다.

예제는 여기

🔗 https://github.com/jeonjungin/DIExample (포스팅의 코드 조각은 예제보다 더 간소화되었습니다.)

앱 요구사항

1. 포켓몬 ID 를 입력하여 포켓몬을 검색할 수 있다.
2. 포켓몬 ID 는 TextField(EditText) 에 입력하여 검색한다.
3. 검색된 포켓몬 이미지와 ID, 이름, HP 를 표시한다.
4. 검색 중 검색 실패, 네트워크 에러 등의 사유 발생시 Empty 상태로 표시한다.

예제 화면

테스트 내용

우리는 이번 예제에서 ViewModel 을 테스트할 것 입니다.

ViewModel 을 테스트하기 위해서는 어떤것이 필요할까요? 먼저 보통 앱들의 구조를 보겠습니다.

우리는 줄 곧 MVVM 형식의 앱을 개발하고 있습니다. 위 그림에서 보듯, ViewModel 은 UI 표시 및 상호작용을 위한 View 에 상태 를 나타내어 화면을 표시합니다. 또한, Model 에 데이터를 요청하고, 이를 정제하는 역할 또한 하고 있습니다.

ViewModel 이 가지는 의존성 측면에서 보자면,

1. ViewModel 은 Flow 등을 통한 Observe 패턴으로 인해 View 에 대한 의존성을 가지고 있지 않습니다.
2. ViewModel 은 Model 에 대한 의존성이 있습니다.

따라서, ViewModel 를 테스트하기 위해 중요한것은 Model 에 대한 의존성을 줄이는 것에 있습니다.

이제, 예제를 통해 Model 에 대한 의존성을 줄이는 방법에 대해 알아보겠습니다.

예제

MainViewModel.kt

@HiltViewModel
class MainViewModel @Inject constructor(
    private val repo: PokemonRepository
): ViewModel() {

    private val _uiState = MutableStateFlow(CardUiState.Empty)
    val uiState = _uiState.asStateFlow()

    fun updateUi(id: String) {
        viewModelScope.launch {
            val pokemon = repo.fetchPokemon(id)
            _uiState.emit(CardUiState.Valid(pokemon))
        }
       }
    // ... 생략
}

이 클래스는 포켓몬을 검색하고, 이를 UI 에 표시하기 위한 데이터를 가지는 역할을 수행합니다. 따라서, '포켓몬 검색 기능' 을 위한 의존성이 필요한데, 이를 생성자의 인자인 repository 를 통해 주입받고 있습니다. PokemonRepository 인터페이스는 Model 을 추상화한 클래스입니다. Model 이 구체화된 Class 가 아닌, 추상화된 Class 를 주입받으므로, Model 에 대한 의존성이 느슨하다고 할 수 있습니다.

PokemonRepository.kt

interface PokemonRepository {

    suspend fun fetchPokemon(id: String): RepoResult<Pokemon>
}

요구 사항 중 1번 '포켓몬 ID 를 통한 검색' 기능을 추상화한 인터페이스 및 구현체 클래스입니다. (Model 의 추상화) 해당 클래스를 통해 Model 에 관한 로직을 구현하거나, 테스트를 위한 모의 클래스를 구현할 수 있습니다.

이렇게 정의된 코드를 가지고 MainViewModel 에 대한 간단한 Unit Test 코드를 작성해보겠습니다.

Unit Test

class MainViewModelTest {

    private lateinit var viewModel: MainViewModel
    private val repository = mock<PokemonRepository>()

    @Before
    fun setup() {
        viewModel = MainViewModel(repository)
    }
    // ... 생략
}

PokemonRepository 는 테스트용 클래스를 직접 정의할 수 있지만, 귀찮으니 Mockito 를 통해 모의 객체를 할당해주었습니다. 할당한 모의 객체를 MainViewModel 에 주입하여 객체를 생성합니다. 이렇게 테스트 코드 작성을 위한 준비가 모두 끝났습니다.

이제, 실제 테스트 로직을 작성해보겠습니다.

    @Test
    fun `정상 값 설정 테스트`() = runTest {
        // given
        val mockResult = RepoResult.Success(
            value = Pokemon(
                id = "1",
                name = "JungIn",
                type = "Fire",
                hp = 100
            )
        )
        whenever(repository.fetchPokemon("1")).thenReturn(mockResult)

        // when
        viewmodel.updateUi("1")

        // then
        val cardState = viewModel.uiState.first()
        assertThat(cardState, IsInstanceOf(CardUiState.Valid::class.java))
    }

Mocktito-kotlin2 의 whenever 메서드를 이용해 repository.fetchPokemon() 메서드의 반환 값을 지정해줍니다. (given) viewModel.updateUi() 를 통해 MainViewModel 의 '포켓몬 검색 기능' 을 수행하도록 트리거합니다. (when) assertThat() 메서드를 통해 viewModel.uiState 의 상태를 확인하고 테스트를 종료합니다. (then)

이렇게 테스트가 통과되고, 이렇게 검증된 MainViewModel 을 View 에 활용할 수 있게 됩니다.

어떻나요? 참 쉽죠?😄

만약, Model 에 대한 의존성을 ViewModel 이 가지고 있었다면 테스트가 가능했을까요?

@HiltViewModel
class MainViewModel @Inject constructor(
): ViewModel() {

    private val repo = PokemonRepository(...)

    private val _uiState = MutableStateFlow(CardUiState.Empty)
    val uiState = _uiState.asStateFlow()
    // ... 생략
}

위 코드에서 보시다 싶이 프로퍼티 repo 를 조작할 방법이 없습니다. 따라서.. Model 의 반환 값을 가정한 여러 테스트가 불가능합니다.

끝으로

이렇게 보니 의존성 주입도, 테스트 코드 작성도 참 간단합니다. 다만 우리는 시간에 쫓겨.. 귀찮음으로 인해.. 의존성 주입을 위한 구조 설계나, 더 나아가 테스트 코드 작성을 외면하곤 합니다.

그렇지만, 잘 설계된 구조와 테스트 코드는 앞으로의 코딩 생활에 있어 많은 시간을 단축시켜줄 것이므로🔥 🔥의존성 주입 패턴과 테스트 코드 작성을 생활화 합시다🔥

DI 에 대한 두번째 포스팅입니다.

첫번째 게시글은 아래를 링크로! https://velog.io/@king-jungin/Dependency-Injection-%EA%B0%80-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80%EC%9A%94..-1

의존성 주입

예시

Testable

이전 포스팅에서 의존성 주입은 Tesable 한 코드를 작성할 수 있다고 했습니다. 과연 Testable 한 코드는 무엇일까요?

아래에 요구사항에 따른 코드가 있습니다.

요구사항

1. 랜덤한 숫자를 가진 랜덤박스가 있습니다.
2. 이 랜덤박스는 랜덤한 숫자가 90 이상인 경우에만 상품이 들어있습니다.

코드

object Goods

class RandomBox {
    private val score = Random(System.currentTimeMillis()).nextInt(100)

    fun unBoxing() = if (score >= 90) {
        Goods
    } else {
        null
    }
}

자! 이제 우리는 이 코드가 잘 동작하는지 확인하고 싶습니다. 그 중에 실제로 랜덤한 숫자 score 가 90 이상이면 Goods 를 반환해 주는지 테스트하고 싶은데요.

여기서 문제가 있습니다.

score 가 90 이상인 상황을 테스트하기 위해서는

1. 디버깅을 통해 90 이상이 나올때까지 돌려본다😱

바람직하지 않습니다. 언제 나올줄 알고 돌려보나요...

2. Random 로직을 주석 처리하고 score 에 정수 90을 넣어 재빌드한다.🤮

이 또한 바람직하지 않습니다. 물론 현재로선 간단하겠지만, 로직이 복잡해지면 주석 처리할 곳이 많아져 테스트가 심히 어려워집니다.

그렇다면 어떻게 해야할까요??

의존성 주입으로 해결이 가능합니다.

RandomInt.kt

interface RandomInt {
    operator fun invoke(): Int
}

class RandomIntImpl: RandomInt {
    override fun invoke() = Random(System.currentTimeMillis()).nextInt(100)
}

RandomBox2.kt

class RandomBox2(
    random: RandomInt
) {
    private val score = random()

    fun unBoxing() = if (score >= 90) {
        Goods
    } else {
        null
    }
}

Main.kt

fun main(args: Any) {
    val goods = RandomBox2(RandomIntImpl()).unBoxing()
    // ...
}

위 코드는 의존성 주입으로 구현된 코드입니다.

• RandomInt 는 랜덤 정수를 반환하는 로직을 추상화한 interface 입니다.
• 기존 랜덤 로직은 RandomIntImpl 에서 구현합니다.
• RandomBox2 는 추상화된 RandomInt interface 를 주입받아 score 에 값을 할당합니다.

즉, 랜덤 정수를 추출하는 로직을 추상화하여 주입하고 있으므로 다양한 알고리즘의 랜덤 로직을 주입하여 사용할 수 있고, 테스트용 랜덤 로직을 작성하여 주입할 수도 있게 되었습니다.

아래는 score 가 90 이상인 Case 테스트의 예시입니다.

RandomIntTestImpl

class RandomIntTestImpl: RandomInt {
    override fun invoke() = 90
}

main.kt

fun main(args: Any) {
    val goods = RandomBox2(RandomIntTestImpl()).unBoxing()
    // ...
}

RandomIntTestImpl 클래스가 정수 90 만을 반환도록 구현되어 있으므로, 이를 주입하여 Goods 가 반환되는지에 대한 테스트가 가능하게 되었습니다.

이를 응용하여 Junit 및 Mockito 등을 활용한 Unit Test 가 가능합니다.

--> 다음 포스팅에 계속..

개요

본 포스팅은 아래의 목적을 가집니다.

• DI (Dependency Injection) 이 무엇인지 이해한다.
• DI 의 목적을 이해한다.
• DI 의 활용법을 알아본다. (with Hilt for Android)

의존성 주입

DI 는 무엇일까요?🧐 문자 그대로 의존성(종속성) 주입을 뜻합니다.

그럼 여기서 의존성은 무엇일까요? 의존의 사전적 정의는 아래와 같습니다.

사람에 빗대자면, 사람이 살아가기 위해서는 심장이 필요하다. 사람은 심장이 없으면 살 수 없으므로 '사람은 심장에 의존한다' 로 표현할 수 있습니다.

그렇다면, 의존성 주입이란 무엇일까요? 위에서 말한 심장 을 인공심장등으로 교체하는 행위를 뜻합니다.

(엣지러너의 산데비스탄 처럼??)

예시

의존성

아래와 같은 요구사항이 있다고 가정합니다.

1. 정인이는 일할때 카페라떼를 마십니다.

이를 코드로 표현하자면 아래와 같습니다.

class JungIn {
    val latte = CafeLatte()

    fun work() {
        latte.drink()
        // ...
    }
}

위 코드에서 JungIn 은 work 를 수행하기 위해 CafeLatte.drink()를 실행해야 합니다. 이는 '클래스 JungIn 은 클래스 CafeLatte 에 의존성이 있다.' 로 표현할 수 있습니다.

주입

이때 기획팀 의견으로 요구사항이 아래와 같이 변경되었습니다.

1. 정인이는 일할때 카페라떼를 마십니다.
2. 쿨라임 피지오도 마십니다.

이를 코드로 표현하면 CafeLatte 와 CoolLimePizzo 클래스에 의존성이 있는 JungIn 클래스가 정의됩니다.

interface Beverage {
    fun drink()
}

class CafeLatte: Beverage {
    override fun drink() {
        print("yammy")
    }
}

class CoolLimePizzo: Beverage {
    override fun drink() {
        print("soooooo good")
    }
}

class JungIn {
    val latte = CafeLatte()
    val pizzo = CoolLimePizzo()

    fun work() {
        latte.drink()
        pizzo.drink()
        // ...
    }
}

이때 우리는 아래와 같은 생각을 하게 됩니다.

'정인이가 다른 음료수를 마실수도 있겠구나!'😡 '음료수가 계속 추가되면 계속 수정해야겠네..'😇

그렇게 바뀐 코드는 아래와 같습니다.

class JungIn(private val beverages: List<Beverage>) {

    fun work() {
        beverages.forEach { 
            it.drink()
        }
        // ...
    }
}

프로퍼티 CafeLatte 와 CoolLimePizzo 는 제거되고 음료수는 생성자를 통해 Beverage interface 리스트로 넘겨받도록 변경되었습니다.

즉, CafeLatte CoolLimePizzo 와의 강한 결합은 제거되고 Beverage 와의 느슨한 결합이 생성되었습니다.

이 느슨한 결합은 개발자가 매번 새로운 음료수를 프로퍼티로 작성할 필요도, 음료수의 생성자가 변경되어도 대응할 필요가 없는 유연한 코드 작성이 가능케 합니다.

이와같이 인스턴스를 클래스 내에서 생성하지 않고, 생성자 등으로 주입 받는 행위를 의존성 주입 이라고 합니다.

우리는 의존성 주입을 통해 유연하고 Testable 한 코드를 작성할 수 있습니다.

Testable

그럼.. 의존성 주입으로 유연한 코드 작성이 가능해지는 건 알겠는데, Testable 한 코드는 뭘까요??

--> 다음 포스팅에서 이어집니다..

긴~글을 줄여서 '더보기' 버튼과 함께 표시해야 한다구요? TextView 두개를 겹쳐서 구현하기엔 너무 짜치다구요~~?

🔥🔥🔥 소개합니다! ReadMoreView 🔥🔥🔥

ReadMoreView 는 TextView 를 상속받아 만들었어요! 사용법도 무척 간단하답니다~

백문이 불여일견.. 먼저 보시죠

ReadMoreView 의 요구사항은 아래와 같습니다.

• '닫힘' 상태 글의 maxLines 를 지정하여 글의 끝에 말줄임(ellipsize) 표시
• 글 끝에 '닫힘', '열림' 상태 변경 버튼 추가

구현 초기

처음에는 아래와 같은 xml 레이아웃을 inflate 하는 간단한 Custom View 를 구상했습니다.

<layout
    xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <import type="android.view.View"/>
        <variable
            name="text"
            type="String" />
        <variable
            name="expand"
            type="Boolean" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tvCollapse"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="@{expand ? View.GONE : View.VISIBLE}"
            android:ellipsize="end"
            android:maxLines="3"
            android:text="@{text}" />

        <TextView
            android:id="@+id/tvExpand"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="@{expand ? View.VISIBLE : View.GONE}"
            android:text="@{text}" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

• '닫힘', '열림' 상태는 각각의 TextView 를 통해 표시하고, visibility 를 변경하여 구현
• '닫힘', '열림' 버튼은 Spannable 을 통해 구현

그러나 이 방법은 TextView 를 상속받아 구현한게 아니므로 textSize 등의 속성을 직접 정의하고 각 View 에 연결해줘야 하는 번거로움이 있었고..🥲 직접 구현을 해보고 싶은 열정이 더 컸으므로.. 직접 View 를 상속받아 만들게 되었습니다!🔥

구현

ReadMoreView 는 상속받을 수 없는 TextView 를 대신해 AppCompatTextView 를 상속받아 구현되었습니다. 따라서, FontFamily 등의 TextView 속성을 그대로 사용할 수 있습니다. (간편하죠? 😄) '닫힘', '열림' 버튼의 색상등 속성도 변경할 수 있구요..

ReadMoreView 의 동작 단계는 아래와 같습니다.

1. View.onMeausre 에서 Text 가 입력될 너비 구하기

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val givenWidth = MeasureSpec.getSize(widthMeasureSpec)
        val textWidth = givenWidth - compoundPaddingStart - compoundPaddingEnd
        if (textWidth == oldTextWidth) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec)
            return
        }
   
        updateDisplayText(textWidth)
   
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }
   

`MeasureSpec.getSize()` 로 너비를 가져와, Padding 을 제외한 영역의 너비를 `updateDisplayText` 에 전달하여 다음 단계를 진행합니다.


2.  구한 너비와 MaxLine 및 `StaticLayout` 를 활용하여 닫힘 상태의 String 구하기
```kotlin
private fun updateDisplayText(textWidth: Int = measuredWidth - compoundPaddingStart - compoundPaddingEnd) {
        //... 생략

        val lastEllipsizeWidth = if (btnLocation is BtnLocation.NextLine) {
            0
        } else {
            getEllipsizeWidth() + getColBtnTextWidth(expandBtnText, btnSizePx)
        }

        val collapseLayout = getCollapseStaticLayout(originalText?: "", textWidth, colMaxLine, lastEllipsizeWidth)
        val collapseContentText = "${collapseLayout.text}"

        // ...생략
    }

private fun getCollapseStaticLayout(text: CharSequence, textWidth: Int, maxLine: Int, ellipsizeWidth: Int): StaticLayout {
        val ellipsizedWidth = textWidth - ellipsizeWidth
        return StaticLayout.Builder
            .obtain(text, 0, text.length, paint, textWidth.coerceAtLeast(0))
            .setEllipsize(TextUtils.TruncateAt.END)
            .setEllipsizedWidth(ellipsizedWidth)
            .setMaxLines(maxLine)
            .setLineSpacing(lineSpacingExtra, lineSpacingMultiplier)
            .build()
        // ... 생략
    }

StaticLayout 가 생소하신 분도 있으실텐데요, Canvas 에 텍스트를 그려줄때 많이 사용합니다. ReadMoreView 에서는 줄바꿈 처리와 ellipszie 처리된 String 을 얻기위해 사용했습니다!

getCollapseStaticLayout() 메서드에 원본 String 과 삽입될 너비와 MaxLine 을 전달하여 ellipsize 가 적용된 StaticLayout 을 얻고, text 프로퍼티로 String 을 얻습니다.

3. Spannable 을 활용하여 글 끝에 '닫힘', '열림' 버튼 삽입하기

   private fun getContentSpannable(content: String, btnText: String, isExpandable: Boolean): SpannableStringBuilder {
       return SpannableStringBuilder().apply {
           append(content)
   
           if (btnText.isEmpty() || !isExpandable) {
               return@apply
           }
   
           if (btnLocation is BtnLocation.NextLine) {
               append("\n")
           }
   
           append(btnText)
   
           val btnStart = this.length - btnText.length
           val btnEnd = btnStart + btnText.length
   
           setSpan(UnderlineSpan(), btnStart, btnEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
           setSpan(
               AbsoluteSizeSpan(btnSizePx),
               btnStart,
               btnEnd,
               Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
           )
           setSpan(object : ClickableSpan() {
               override fun onClick(widget: View) {
                   toggle()
               }
   
               override fun updateDrawState(ds: TextPaint) {
                   super.updateDrawState(ds)
                   ds.color = btnColor
               }
           }, btnStart, btnEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
   
       }
   }

   getContentSpannable() 메서드는 입력된 String 과 버튼 텍스트를 입력받아, 기 지정된 버튼 Text의 속성을 적용하여 SpannableString 을 반환합니다.

4. TextView.setText 메서드로 현재 상태의 String 삽입하기

    private fun updateDisplayText(textWidth: Int = measuredWidth - compoundPaddingStart - compoundPaddingEnd) {
        // ... 생략

        val collapseSpannable = getContentSpannable(ellipsizedOrNotText.toString(), expandBtnText, isExpandable)

        text = when (state) {
            MoreState.COLLAPSED -> collapseSpannable
            MoreState.EXPANDED -> expandSpannable
        }

        // ... 생략
    }

현재 '열림' 상태인 경우 expandSpannable 를, '닫힘' 상태인 경우 collapseSpannable 을 TextView.setText() 를 통해 TextView 에 삽입합니다.

어떤가요? StaticLayout 을 활용한 부분이 조금 생소할 뿐 간단한 구현 내용입니다👏👏👏

종속성 및 사용법!

ReadMoreView 종속성 설정 방법, 여러 기능과 사용법, 자세한 구현 내용이 궁금하다면 아래 github 를 참고해주세요~! 📎 ReadMoreView github 링크!!📎

유용하셨다면 Star 도...🌠

이번 8월 31일부터 스토어 정책 상 안드로이드 os 13 타겟팅이 필수 항목으로 변경됩니다. 😂 따라서 os 12 와 os 13 타겟팅을 대응하시는 분들이 많을텐데요!

MQTT 라이브러리 (org.eclipse.paho.android.service.MqttService) 를 사용하고 계신 분들! MQTT 라이브러리를 새로이 적용하시는 분들은 아래 에러 메시지를 보실 수 있습니다 😅

java.lang.IllegalArgumentException: app id: Targeting S+ (version 31 and above) requires that one of FLAG_IMMUTABLE or FLAG_MUTABLE be specified when creating a PendingIntent.
    Strongly consider using FLAG_IMMUTABLE, only use FLAG_MUTABLE if some functionality depends on the PendingIntent being mutable, e.g. if it needs to be used with inline replies or bubbles.

안드로이드 os 12 이상을 타겟팅하는 앱은 PendingIntent 의 flag 에 변경 가능 여부 flag를 뜻하는 FLAG_IMMUTABLE 나 FLAG_MUTABLE 를 추가해야합니다.

에러 메시지 내용에 따라 'PendingIntent' 의 flag 를 변경해주어야 하는데요.. 문제가 되는 부분은 MQTT 라이브러리의 아래 코드입니다.😥

AlarmPingSender.kt

    @Override
    public void start() {
        //...
        pendingIntent = PendingIntent.getBroadcast(service, 0, new Intent(
                action), PendingIntent.FLAG_UPDATE_CURRENT);

        //...
    }

네.. 원격 저장소를 통해 받은 라이브러리이므로 수정을 할 수 없으니 두가지 선택지가 있습니다.

1. github 를 방문하여 소스를 복사하고 수정한다.
2. MQTT 를 대체한다..😱

두번째 방법은 있을 수 없는 일이므로 첫번째 방법을 수행해야겠죠?

첫번째 방법을 위해 GitHub 의 어느 한 귀인께서! PendingIntent 만을 수정한 라이브러리를 배포해주셨습니다.👏👏👏

Github 주소🔥 https://github.com/hannesa2/paho.mqtt.android

심지어 StackOverFlow 의 어느 귀인께서는 마이그레이션 방법까지 친히 알려주시네요🔥 https://stackoverflow.com/a/71839305

유용하셨다면.. 개발자들의 삽질 시간을 아껴주시는 이 고마운 귀인분들께 감사 인사와 함께 GitHub Star 를 눌러봅시다🌠🌠🌠🌠