kotlin basic3(간단한 앱 만들기)

페이지 전환 fragment

navigation 이용

 

하나의 activity

그리고 그 안에 여러개의 fragment로 구성

 

 

navigation 추가

1. navigation 의존성 추가

 

gradle.build > dependencies

def nav_version = "2.3.5"
// Kotlin
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

네비게이션 docs

https://developer.android.com/guide/navigation/navigation-getting-started

탐색 구성요소 시작하기  |  Android 개발자  |  Android Developers

 

2. res 폴더에 navigation 폴더 추가 > 그 안에 new_graph.xml 파일추가

3. activity_main.xml에 코드 추가

<?xml version="1.0" encoding="utf-8"?>
<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"
    >

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />


</androidx.constraintlayout.widget.ConstraintLayout>

4. com.example.lovetest에 프래그먼트 디렉토리 추가 (page 분기작업)

- 그안에 fragment 파일추가

- Selection, Result, Question / Fragment 파일 각각 추가

5. string 소스 들은

drawble > values 파일안에 string에서 관리

<resources>
    <string name="app_name">LoveTest</string>
    <string name="main_title">Let's find out\nyour love type!</string>
</resources>

컬러도 마찬가지

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

 

fragment_main.xml

 

아래처럼 ConstraintLayout 사이에 View를 넣는다.

위치는 desing에서 마우스 드래그로

각 속성 src들은 아래를 참고해서 설정!

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="@drawable/background"
    tools:context=".fragment.MainFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/main_title"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.108"
        android:fontFamily="sans-serif-black"
        android:textSize="32dp"
        />

    <ImageView
        android:layout_width="260dp"
        android:layout_height="400dp"
        android:src="@drawable/main_img"
        tools:layout_editor_absoluteX="66dp"
        tools:layout_editor_absoluteY="240dp" />

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/next"
        tools:layout_editor_absoluteX="155dp"
        tools:layout_editor_absoluteY="608dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

6. 4개의 화면을 다 만들었다면

 

new_graph에서 화면 연결

 

MainActivity에서 nav를 id로 불러오지 못할때

 

build.gradle를 아래처럼 변경

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

android {
    compileSdk 32

 

 

anko 

https://github.com/Kotlin/anko