(Kotlin) Flip View(플립뷰)로 플래시카드 만들기

"어릴 적 카드 앞 면에 문제, 뒷면에 정답이 있는 카드로 공부한 기억 나시나요?"

특히, 영단어를 외우거나 퀴즈를 풀 때 정말 효율적인 방법이었죠.

 

이제 이 플래시카드를 어플로 만들어 보겠습니다.

 

저어어어엉말 쉬우니 긴장하지 마시고 GOGO!

1. dependencies 추가

우선 build.gradle의 dependencies에 아래 코드를 추가해줍니다.

dependencies {
  implementation 'com.wajahatkarim3.EasyFlipView:EasyFlipView:2.1.2'
}

2. Layout 생성

1) study_flip.xml

여기서 핵심은 EasyFlipView입니다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		xmlns:tools="http://schemas.android.com/tools"
		tools:context=".StudyActivity"
		android:orientation="vertical">


	<com.wajahatkarim3.easyflipview.EasyFlipView
			android:layout_width="match_parent"
			android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"
			app:flipOnTouch="true"
			app:flipEnabled="true"
			app:flipDuration="400"
			app:flipFrom="right"
			app:flipType="horizontal"
			app:autoFlipBack="false"
			xmlns:android="http://schemas.android.com/apk/res/android">

		<!-- Back Layout Goes Here -->
		<include layout="@layout/study_flip_back"/>

		<!-- Front Layout Goes Here -->
		<include layout="@layout/study_flip_front"/>

	</com.wajahatkarim3.easyflipview.EasyFlipView>

</LinearLayout>

flipType(뒤집는 방법)은 horizontal(가로로 뒤집기)과 vertical(세로로 뒤집기) 두가지가 있습니다.

그리고 아래의

		<!-- Back Layout Goes Here -->
		<include layout="@layout/study_flip_back"/>

		<!-- Front Layout Goes Here -->
		<include layout="@layout/study_flip_front"/>

이 코드에서 앞면과 뒷면의 레이아웃을 꾸며줄겁니다.

 

2) study_flip_back.xml

파일명에서도 알 수 있듯이, 뒷면의 레이아웃입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:background="@color/white"
		android:orientation="vertical">
	<TextView
			android:layout_width="match_parent"
			android:layout_height="match_parent"
			android:gravity="center"
			android:hint="뒷면, 해설 나오는 부분"/>
</LinearLayout>

3) study_flip_front.xml

역시나, 알 수 있죠? 앞면입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:background="@color/white"
		android:orientation="vertical">
	<TextView
			android:layout_width="match_parent"
			android:layout_height="match_parent"
			android:gravity="center"
			android:hint="여기에 텍스트가 나옵니다. 센터에 앞면!"/>
</LinearLayout>

3. Kotlin 만들기

코틀린 부분에서는 아직은 아무것도 할 것이 없죠...

 

class Study_Flip : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.study_flip)

    }
}

4. 결과물

 

참 쉽죠? ㅎㅎㅎ

 

이제 엑셀에서 데이터를 불러와서 뿌려주는 것은 이전 포스팅이랑 별 차이가 없을거에요.

자 이제 원하시는 플래시카드를 만들기를 바랍니다!!

 

<참고링크>

https://github.com/wajahatkarim3/EasyFlipView

wajahatkarim3/EasyFlipView