[안드로이드 스튜디오 코틀린] 코틀린으로 Swipe & Slide View 만들기

 

 

아이폰에서 사용하는 밀어서 잠금 해제를 안드로이드에서 구현하고 싶었습니다.

 

안드로이드는 Swipe 기능 예제가 다양하지 않더라고요 ㅠ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

그래서 오픈 소스 라이브러리를 찾아보았는데 제가 원하는 기능을 수행할 수 있는 라이브러리가 없었습니다.

구현되어 있는 라이브러리의 백그라운드 컬러, 스와이프 버튼을 커스텀하는 것이 쉽지 않더라고요

 

 

 

 

 

중간에 gesturedetector를 사용해서 모션 이벤트를 주는 방법을 사용했는데

x, y축을 고려해야 하고 반응 속도와 이런 것들이 생각과는 너무 다르고 사용법이 어려워 정확한 구현을 할 수 없었습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

그러던 도중, 좋은 Slide 라이브러리를 발견했습니다!!!!!!!!!

 

 

https://github.com/cortinico/slidetoact

GitHub - cortinico/slidetoact: A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄

 

 

 

 

 

 

 

 

 

 

 

 

위의 주소를 이용해 아래와 같은 슬라이드 버튼을 만들어봅시다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 라이브러리 implementation을 추가해 줍니다.(뷰바인딩도 같이 추가해 주세요)

 

// Slide Button
implementation 'com.ncorti:slidetoact:0.10.0'

 

 

 

buildFeatures {
    viewBinding = true
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. background로 설정할 색상 추가

 

 

https://mimisongsong.tistory.com/11

[안드로이드 스튜디오] 헥스 색상 표

 

위 글에 있는 색상을 보고

 

 

 

 

 

res -> values -> colors.xml에 아래 두 가지 색상을 추가해 줍니다.

 

 

<color name="limeGreen">#FF32CD32</color>
<color name="orangeRed">#FFFF4500</color>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. layout을 구성합니다.

 

 

 

 

위에 추가한 색상을 이용해 background color만 변경해 줍니다.

 

 

- outer_color : 전체적인 배경 색상

- slider_icon_color : 슬라이더 아이콘의 화살표 색상

 

 

여기서 설정하지는 않았지만 아이콘 배경 색상도 줄 수 있습니다 -> inner_color : 슬라이더 아이콘의 배경 색상

 

 

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.ncorti.slidetoact.SlideToActView
        android:id="@+id/slideView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:outer_color="@color/limeGreen"
        app:slider_icon_color="@color/limeGreen" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

배경 색상만 설정한 기본 디폴트 슬라이드 화면입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

여기서 원하는 설정을 더 추가해 줍니다.

 

 

 

 

 

 

 

 

벡터와 text를 추가해 봅니다

 

 

 

 

 

 

 

 

 

 

 

xml을 아래와 같이 추가하면 됩니다.

- icon_margin은 안 넣으면 화살표가 되게 작게 들어가는데 1dp: 큰 크기, 10dp: 작은 크기 이런 기준으로 margin이 먹습니다.

<com.ncorti.slidetoact.SlideToActView
    android:id="@+id/slideView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:icon_margin="3dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:outer_color="@color/limeGreen"
    app:slider_icon="@drawable/round_navigate"
    app:slider_icon_color="@color/limeGreen"
    app:text="잠금"
    app:text_size="25sp"
    app:text_style="bold" />

 

 

 

 

시작화면  / 완료 화면

 

 

화면을 밀면 완료가 되고, 완료 화면이 동그랗게 뜨는걸 볼 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

제가 원하는 기능은 잠금이 해제될 때 아이콘 모양과 슬라이더 배경 화면 색상이 변하도록 하는 것 입니다.

이것은 이벤트 리스너를 추가하여 완료 후 기능을 코드로 추가해줘야 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

해제될 때도 긴 슬라이더 화면이 유지될 수 있게 설정하기 위해 (동그란 완료 화면이 필요 없을 때)

 

 

app:animate_completion="false"

 

완료 화면을 false로 설정해주었습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

그리고 슬라이드 전, 후 다른 아이콘 화면을 구현하기 위해서는 

 

app:rotate_icon="false"

 

icon이 rotate되면 안되기 때문에 false로 설정하였습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. MainActivity.kt

 

 

 

 

onCreate에서 onSlideCompleteListener을 구현해주어야 슬라이더 완료 후 이벤트 처리를 할 수 있습니다.

 

 

 

 

 

아래처럼 리스너를 구현해줍니다.

 

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import androidx.core.content.ContextCompat
import com.example.slideexam.databinding.ActivityMainBinding
import com.ncorti.slidetoact.SlideToActView

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)


        binding.slideView.onSlideCompleteListener = object : SlideToActView.OnSlideCompleteListener {
            override fun onSlideComplete(view: SlideToActView) {
                view.outerColor = ContextCompat.getColor(applicationContext, R.color.orangeRed)
                view.sliderIcon = R.drawable.round_navigate_end
                view.iconColor = ContextCompat.getColor(applicationContext, R.color.orangeRed)
            }

        }
    }
}

 

 

 

슬라이드 완료 후, outer color, icon color를 설정해줄 수 있습니다.

 

완료 후에는 orangeRed 색상으로 바뀌게 만들어줍니다.

 

또 슬라이더 아이콘도 변경해줍니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이처럼 설정하면

 

 

완료 후 화면이 잘 먹은 것을 볼 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

근데 저는 완료 후 슬라이드 해제된 text도 추가하고 싶었는데 !!!!!!!!

 

view.text = "잠금 해제 완료" 

라고 하면 text가 변경이 되지 않더라구요.. 흠

 

혹시 방법을 찾으신 분은 댓글로 남겨주세요 !

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

그래서 !!!!

 

눈 속임 방법을 생각했습니다.

textview를 xml에 visibility를 gone으로 추가해주고 완료 후 리스너에 View.VISIBLE 해주는 것입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이렇게 아래처럼 text가 겹치게 textView를 생성하고 

 

android:visibility="gone"

visibility를 gone으로 줍니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

        binding.slideView.onSlideCompleteListener = object : SlideToActView.OnSlideCompleteListener {
            override fun onSlideComplete(view: SlideToActView) {
                view.outerColor = ContextCompat.getColor(applicationContext, R.color.orangeRed)
                view.sliderIcon = R.drawable.round_navigate_end
                view.iconColor = ContextCompat.getColor(applicationContext, R.color.orangeRed)
                binding.doneTV.visibility = View.VISIBLE
            }

        }

완료 후 text를 View.VISIBLE을 해준다면

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

맨 위에서 보신 화면을 보실 수 있습니다 !!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

또, 완료 후 1초 뒤 페이지 이동을 하게 해주는 핸들러까지 추가해주면 

 

 

 

 

 

 

 

 

완성!!!!!!!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

총 코드

 

https://github.com/songmik/SlideExam

GitHub - songmik/SlideExam