viewpager2의 Fragment LayoutTab와 연동

소정·2023년 3월 30일
0

Kotlin

목록 보기
11/27

1. 메인 UI

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".login.FindUserActivity">
    
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <include layout="@layout/toolbar_layout"/>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_userfind"
            app:tabTextColor="@color/bnv_item_color"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </com.google.android.material.appbar.AppBarLayout>


    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager_userfind"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>



2. 연동할 페이지들 UI와 Fragment.kt 만들어주기

뷰 페이저에 보여줄 두 화면 UI

아이디 찾기 UI

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_helper"
        android:text="가입당시 사용하셨던"
        android:textColor="@color/black"
        android:textSize="16sp"
        android:layout_alignLeft="@+id/tv_phon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/gmarketsansttfmedium"/>

    <LinearLayout
        android:id="@+id/helper_warp"
        android:layout_marginBottom="18dp"
        android:layout_below="@+id/tv_helper"
        android:layout_alignLeft="@+id/tv_phon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:text="'닉네임'"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gmarketsansttfbold"/>

        <TextView
            android:text="와 "
            android:textColor="@color/black"
            android:textSize="16sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gmarketsansttfmedium"/>

        <TextView
            android:text="'비밀 번호'"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gmarketsansttfbold"/>

        <TextView
            android:text="를 입력해주세요."
            android:textColor="@color/black"
            android:textSize="16sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gmarketsansttfmedium"/>

    </LinearLayout>

    <TextView
        android:id="@+id/tv_phon"
        android:text="@string/nicname"
        android:textColor="@color/black"
        android:layout_below="@+id/helper_warp"
        android:textSize="18sp"
        android:fontFamily="@font/gmarketsansttfbold"
        android:layout_alignLeft="@+id/et_phon"
        android:layout_marginTop="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/et_phon"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_phon"
        android:layout_marginStart="8dp"
        android:layout_marginTop="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:hint="010-1234-1234">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/input_phon"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.textfield.TextInputLayout>

    <TextView
        android:id="@+id/tv_passwd"
        android:text="@string/passwd"
        android:fontFamily="@font/gmarketsansttfbold"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:layout_alignLeft="@+id/et_phon"
        android:layout_below="@+id/et_phon"
        android:layout_marginTop="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/et_passwd"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_passwd"
        android:layout_marginStart="8dp"
        android:layout_marginTop="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:hint="@string/passwd_hint">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/input_passwd"
            android:inputType="textPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>

    <Button
        android:text="@string/find_id"
        android:fontFamily="@font/gmarketsansttfmedium"
        android:layout_alignLeft="@+id/et_passwd"
        android:layout_alignRight="@+id/et_passwd"
        android:layout_marginTop="10dp"
        android:backgroundTint="@color/black"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

아이디 찾기 .kt

package com.jscompany.neerbyto.login

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.jscompany.neerbyto.R
import androidx.fragment.app.Fragment

class FindUserIdFragment : Fragment(){

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

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
    }

}

비밀번호 찾기 UI

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_helper"
        android:text="가입당시 사용하셨던"
        android:textColor="@color/black"
        android:textSize="16sp"
        android:layout_alignLeft="@+id/et_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/gmarketsansttfmedium"/>

    <LinearLayout
        android:id="@+id/helper_warp"
        android:layout_marginBottom="18dp"
        android:layout_below="@+id/tv_helper"
        android:layout_alignLeft="@+id/et_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:text="'핸드폰 번호'"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gmarketsansttfbold"/>

        <TextView
            android:text="를 입력해주세요."
            android:textColor="@color/black"
            android:textSize="16sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/gmarketsansttfmedium"/>

    </LinearLayout>

    <TextView
        android:id="@+id/tv_phon"
        android:text="@string/phon"
        android:fontFamily="@font/gmarketsansttfmedium"
        android:textColor="@color/black"
        android:layout_below="@+id/helper_warp"
        android:textSize="18sp"
        android:layout_alignLeft="@+id/et_id"
        android:layout_marginTop="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/et_id"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_phon"
        android:layout_marginStart="8dp"
        android:layout_marginTop="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:hint="@string/id_hint">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/input_id"
            android:inputType="textEmailAddress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.textfield.TextInputLayout>


    <Button
        android:text="@string/find_passwd"
        android:fontFamily="@font/gmarketsansttfmedium"
        android:layout_marginTop="10dp"
        android:layout_alignLeft="@+id/et_id"
        android:layout_alignRight="@+id/et_id"
        android:backgroundTint="@color/black"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

비밀번호 찾기 .kt

package com.jscompany.neerbyto.login

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.jscompany.neerbyto.R
import androidx.fragment.app.Fragment

class FindUserPasswdFragment : Fragment(){

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

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
    }

}



3. 연동을 도와주는 adapter 만들어주기!!

package com.jscompany.neerbyto.login

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

//FragmentStateAdapter 상속받은 플래그먼트는 FragmentActivity를 멤버변수로 받아야함
class FindUserAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {

    var fragments : ArrayList<Fragment> = ArrayList()
    override fun getItemCount(): Int {
        return fragments.size
    }

    override fun createFragment(position: Int): Fragment {
        return fragments[position]
    }

    fun addFragment(fragment: Fragment) { //플래그 먼트 등록
        fragments.add(fragment)
        notifyItemInserted(fragments.size-1)
    }
}



4. 뷰페이저와 탭레이아웃이 있는 메인 .kt

  1. 아답터 불러오기

  2. 아답터에 addFragment() 메소드를 이용하여 보여줄 화면(플래그먼트)들 add

  3. 뷰 페이저에 아답터 연결

  4. add 한 프래그먼트 페이지 붙이기

  5. TabLayoutMediator 를 이용하여 탭 레이아웃 이름 등록

package com.jscompany.neerbyto.login

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import androidx.viewpager2.widget.ViewPager2
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator
import com.jscompany.neerbyto.R
import com.jscompany.neerbyto.databinding.ActivityFindUserBinding

class FindUserActivity : AppCompatActivity() {

    val binding:ActivityFindUserBinding by lazy { ActivityFindUserBinding.inflate(layoutInflater) }

    private val tabUserfind:TabLayout by lazy { binding.tabUserfind }

    private val pager:ViewPager2 by lazy { binding.pagerUserfind }

    var tabTitle = arrayOf("아이디 찾기","비밀번호 찾기") //탭 제목

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        //앱바 설정
        setSupportActionBar(findViewById(R.id.toolbar)) //include 한 레이아웃은 바인딩 안됨
        supportActionBar!!.setDisplayHomeAsUpEnabled(true) //왼쪽 뒤로가기 버튼
        supportActionBar!!.setTitle(R.string.find_user) // 타이틀 재설정

        //뷰페이저 연동
        //1. 아답터 불러오기
        val findUserAdapter = FindUserAdapter(this) // 아답터 불러오기

        //2. 아답터에 addFragment() 메소드를 이용하여 보여줄 화면(플래그먼트)들 add
        findUserAdapter.addFragment(FindUserIdFragment())  
        findUserAdapter.addFragment(FindUserPasswdFragment()) //플래그먼트들 추가

        //3. 뷰 페이저에 아답터 연결
        pager.adapter = findUserAdapter

        //4. add 한 프래그먼트 페이지 붙이기
        pager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback(){
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
            }
        })

        // 5. TabLayoutMediator 를 이용하여 탭 레이아웃 이름 등록
        TabLayoutMediator(tabUserfind, pager){ tab, position ->
            tab.text = tabTitle.get(position).toString()
        }.attach()

    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {

        when (item.itemId) {
            android.R.id.home -> { //뒤로가기 버튼 활성화
                finish()
                return true
            }

        }

        return super.onOptionsItemSelected(item)
    }
}
profile
소정
보조기억장치
이전 포스트

Activity에서 커스텀 AppBar 적용

다음 포스트

바텀 네비게이션과 Fragment 화면 연동

0개의 댓글