[Android/Kotlin] Image Slider 구현하기 / 이미지 슬라이더 / 이미지 전환

오픈소스를 이용한 ImageSlider를 구현하기

 

안드로이드 스튜디오 Arctic Fox 버전을 기준으로 작성

버전 확인 [Android Studio - Help - About]

 

 

라이브러리 깃 허브

denzcoskun/ImageSlideshow: Android image slider. (github.com)

GitHub - denzcoskun/ImageSlideshow: Android image slider.

 

사용법 유튜브

Image Slider in Android Studio | Kotlin | Android Studio - YouTube

 

위에 영상과 깃허브를 참고해서 작성, 유튜브 영상은 Android Studio 버전이 달라서 import 방법이 다름

 

1. jitpack.io import

settings.gradle로 이동

 

maven { url 'https://jitpack.io' }

위 내용을 입력

내용이 변화가 생기면 상단 알림 메시지가 나온다. Sync Now를 클릭

에러가 없다면 성공 메시지가 뜬다. 아니면 에러 메시지

 

2. build.gradle import

build.gradle로 이동

 

implementation 'com.github.denzcoskun:ImageSlideshow:0.1.0'

dependencies에 위 내용 입력

 

Sync Now 클릭

 

3. XML 입력

추가하는 위치 activity에서 이미지 슬라이더를 다음과 같이 생성

<com.denzcoskun.imageslider.ImageSlider
        android:id="@+id/ImageSlider"
        android:layout_width="0dp"
        android:layout_height="94dp"
        app:iss_auto_cycle="true"
        app:iss_delay="0"
        app:iss_error_image="@color/purple_200"
        app:iss_placeholder="@color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

위 내용을 바탕으로 수정해가면 됨 옵션은 상단 깃 허브 주소에서 더 확인 가능

 

 

4. Kotlin 입력

// 첫 번째 : 이미지를 담을 리스트를 생성한다.
val imageList = ArrayList<SlideModel>()

// 두 번째 : 리스트에 이미지를 추가한다. 로컬 및 온라인 둘다 가능 사진 크기 옵션은 깃 허브
// 로컬일 사진일 때 
imageList.add(SlideModel(R.drawable.sliderimage_1, ScaleTypes.CENTER_CROP))
imageList.add(SlideModel(R.drawable.sliderimage_2, ScaleTypes.CENTER_CROP))
imageList.add(SlideModel(R.drawable.sliderimage_3, ScaleTypes.CENTER_CROP))
// 온라인 사진일 떄
imageList.add(SlideModel("https://exampleimage1.jpg", ScaleTypes.CENTER_CROP))
imageList.add(SlideModel("https://exampleimage2.jpg", ScaleTypes.CENTER_CROP))
imageList.add(SlideModel("https://exampleimage3.jpg", ScaleTypes.CENTER_CROP))

// XMl과 Kotlin를 연결
val imageSlider = findViewById<ImageSlider>(R.id.ImageSlider)

// 연결한 Slider에 이미지 리스트를 추가
imageSlider.setImageList(imageList)

 

5. 결과

간단한 라이브러리 하나로 사진 슬라이드를 만들 수 있었다. 어플 상단에 추가하면 간단한 어플도 그럴듯하게 보인다.