15.[Android] Fragment로 대소문자 변환기 만들어보기

Fragment란 영문적 의미로는 조각, 파편이라는 뜻입니다.

따라서 안드로이드에서 Fragment란 화면의 조각이라고 생각하시면 됩니다.

한 화면을 여러 화면으로 나눌 때 많이 사용합니다.

Activity 하나에 두 개의 Fragment를 만들어서 위에 문장을 입력하고 대문자, 소문자 버튼을 눌러주면

아래의 Fragment에 변환된 문장이 나타나게 만들어 보겠습니다.

 

1. activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <FrameLayout
        android:id="@+id/fl_first"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <FrameLayout
        android:id="@+id/fl_second"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>


</LinearLayout>

 

2.fragment_first

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

    <EditText
        android:id="@+id/et_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/bt_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="대문자" />

        <Button
            android:id="@+id/bt_down"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="소문자" />
    </LinearLayout>
</LinearLayout>

 

3.fragment_second

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

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

 

 

activity_main에서는 fragment가 들어갈 FrameLayout 두 개를 만들어 주었습니다.

fragment_first에서는 문장을 입력받을 EditText와 대문자 소문자 어느 걸 변환할지 클릭할 Button 두 개를 만들고 아래 fragment와 구분하기 위해 배경은 검은색으로 만들었습니다.

fragment_second에서는 변환된 문장을 받아올 TextView를 만들었습니다.

 

4.MainActivity

package com.cnm.fragmentcaseconverter

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

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

        val firstFragment = FirstFragment()
        val secondFragment = SecondFragment()

        supportFragmentManager.beginTransaction().apply {
            replace(R.id.fl_first, firstFragment)
            replace(R.id.fl_second, secondFragment, "second")
        }.commit()
    }

    fun submit(text: String) {
        val fragment = supportFragmentManager.findFragmentByTag("second") as SecondFragment
        fragment.submit(text)
    }
}

supportFragmentManager는 Fragment를 관리해줍니다.

beginTransaction()는 관리를 시작하여 Fragment를 편집합니다.

replace()를 사용하여 Fragment를 넣을 곳의 id를 넣어주고 넣을 Fragment를 작성해줍니다.

submit 함수는 firstFragment에서 문장을 받아와서 secondFragment에 전달해주는 역할을 해줄 것입니다.

 

5.FirstFragment

package com.cnm.fragmentcaseconverter

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.main.fragment_first.*

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_first, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {

        bt_up.setOnClickListener {
            val text = et_text.text.toString()
            val uptext = text.toUpperCase()
            (activity as? MainActivity)?.submit(uptext)
        }
        bt_down.setOnClickListener {
            val text = et_text.text.toString()
            val downtext = text.toLowerCase()
            (activity as? MainActivity)?.submit(downtext)
        }
        super.onActivityCreated(savedInstanceState)
    }
}

https://developer.android.com/guide/components/fragments

onCreateView()는 activity에서 onCreate()와 비슷한 역할을 합니다.

return값으로 View를 받기 때문에 inflater를 사용하여 해당되는 fragment 레이아웃을 넘겨줍니다.

onActivityCreated()에서 대소문자를 변환해준 값을 MainActivity의 submit에 넘겨줍니다.

 

6.SecondFragment

package com.cnm.fragmentcaseconverter

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.main.fragment_second.*

class SecondFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_second, container, false)
    }

    fun submit(text: String) {
        tv_result.text = text
    }
}