Kotlin

[android : kotlin] 코틀린 ViewFlipper 사용방법 및 예제

ViewFlipper를 사용하는 방법에 대해 알아봅니다. ViewFlipper는 ViewAnimator 클래스의 확장 버전의 위젯 뷰입니다.

화면 전환시 애니메이션 효과를 적용하기 위해 사용합니다. ViewFlipper는 startFlipping() 및 stopFlipping() 및 showPrevious() 및 showNext() 등 4개의 메서드를 제공합니다 . ViewFlipper를 사용하여 비디오나 이미지를 탐색할 수 있습니다. 이미지를 지정한 초 단위로 자동 보여주는 기능을 구현할 때 유용합니다. 혹은 광고성 텍스트에 애니메이션 효과를 주어 텍스트를 계속 변경하는 방법으로도 사용할 수 있습니다. flipInterval 메서드는 뷰 전환 간격 시간을 지정합니다. 기본값은 3초입니다.

 

ViewFlipper는 화면의 꺼짐유무를 확인하는 BroadcastReceiver를 가지고 있습니다. 화면이 꺼지면 뷰 전환이 자동으로 멈춥니다. 화면이 켜지면 다시 뷰 전환이 시작됩니다.

 

[activity_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="ViewFlipper 사용 예제"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1" />

    <ViewFlipper
        android:id="@+id/viewFlipper1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inAnimation="@android:anim/slide_in_left"
        android:outAnimation="@android:anim/slide_out_right"
        android:layout_below="@+id/textView1"
        android:layout_above="@+id/bottom_layout">
    </ViewFlipper>
    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:text="자동 슬라이딩 켜기"/>

    <LinearLayout
        android:id="@+id/bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/previous_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="이전" />

        <Button
            android:id="@+id/next_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="다음" />
    </LinearLayout>

</RelativeLayout>

 

[MainActivity.kt]

package edu.kotlin.study

import android.os.Bundle
import android.view.Gravity
import android.view.ViewGroup
import android.view.animation.AnimationUtils
import android.widget.*
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    //var position = 0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val titleArr = arrayOf("광고 타이틀1", "광고 타이틀2", "광고 타이틀3", "광고 타이틀4")
        var imageList = intArrayOf(
            android.R.drawable.ic_dialog_map,
            android.R.drawable.ic_dialog_email,
            android.R.drawable.ic_delete,
            android.R.drawable.ic_btn_speak_now
        )

        //var viewFlipper1: ViewFlipper = findViewById(R.id.viewFlipper1)
        viewFlipper1.inAnimation = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left)
        viewFlipper1.outAnimation =
            AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right)


        //동적으로 이미지뷰를 추가합니다.
        for (image in imageList) {
            //var intNum = 1
            val imageView = ImageView(this)
            val layoutParams = FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
            )
            layoutParams.setMargins(30, 30, 30, 30)
            layoutParams.gravity = Gravity.CENTER
            imageView.layoutParams = layoutParams
            imageView.setImageResource(image)
            //imageView.tag = "IMG$intNum"
            viewFlipper1.addView(imageView)
           // intNum++
        }


        // 뷰플리퍼에 텍스트뷰 4개 동적으로 추가
//        for (String in titleArr) {
//            var tempText: TextView = TextView(this)
//            tempText.gravity = Gravity.CENTER_HORIZONTAL
//            tempText.text = String
//            viewFlipper1.addView(tempText)
//        }


        previous_btn.setOnClickListener {
            viewFlipper1.setInAnimation(this, android.R.anim.slide_in_left)
            viewFlipper1.setOutAnimation(this, android.R.anim.slide_out_right)
            viewFlipper1.showPrevious()
 
        }

        next_btn.setOnClickListener {
            viewFlipper1.setInAnimation(this, android.R.anim.slide_in_left)
            viewFlipper1.setOutAnimation(this, android.R.anim.slide_out_right)
            viewFlipper1.showNext()
 
//            textView1.text =
//                viewFlipper1.getChildAt(0).tag as CharSequence?
        }


        //자동으로 이미지 전환 방법1
        //viewFlipper1.isAutoStart = true
        
        //자동으로 이미지 전환 방법2
        //viewFlipper1.flipInterval = 2000  //간격 2초
        //viewFlipper1.startFlipping()


//        switch1.setOnCheckedChangeListener { _, isChecked ->
//            if (isChecked) {
//                viewFlipper1.flipInterval = 2000
//                viewFlipper1.startFlipping()
//            } else {
//                viewFlipper1.stopFlipping()
//            }
//        }

    }

}

 

[build.gradle(Module:app)]

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 29

    defaultConfig {
        applicationId "edu.kotlin.study"
        minSdkVersion 22
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.1'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

}

[build.gradle(Project)]

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = "1.3.72"
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.0.1"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

 

[연관 자료]

ViewFlipper 안드로이드 개발자 가이드 문서

 

Leave a Reply

error: Content is protected !!