[코틀린]안드로이드 스튜디오 탭메뉴 만들기

[코틀린]안드로이드 스튜디오 탭메뉴 만들기

 

[코틀린]안드로이드 스튜디오 탭메뉴 만들기

 

코틀린 언어를 이용한 안드로이드 스튜디오에서 탭메뉴 만들기

 

- 탭메뉴 만들기 : 상단에 있는 탭메뉴를 클릭시 탭메뉴 슬라이딩, 해당 Fragment 호출

 

1. build.gradle 에 데이터 바인딩 추가

2. activity_main.xml에 레이아웃 작성

3. app > res > drawable 에 탭메뉴 관련 xml 작성 

-> round_back_white10_100.xml ( 전체메뉴 배경 xml )

-> round_back_white_100.xml (선택메뉴 xml )

4. MainActivity.kt 있는 폴더에 Fragment 작성 

-> Fragment 생성시 app > res > layout 폴더에 xml이 자동으로 생김

 

@ build.gradle 에 데이터 바인딩 추가

 

    buildFeatures{
        dataBinding = true
    }

@ activity_main.xml에 레이아웃 작성

- 기본 layout을 작성하고 탭메뉴는 LinearLayout > RelativeLayout > LinearLayout > TextView 으로 작성.

- RelativeLayout 아래에 Fragment 배치

<?xml version="1.0" encoding="utf-8"?>
<layout 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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_blue_dark">
            <!-- 탭 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:background="@drawable/round_back_white10_100"
                android:orientation="horizontal"
                android:weightSum="3">
                <TextView
                    android:id="@+id/tabItem1"
                    android:layout_width="0dp"
                    android:layout_height="50dp"
                    android:layout_weight="1"
                    android:background="@drawable/round_back_white_100"
                    android:gravity="center"
                    android:text="Tab1"
                    android:textColor="#000000"
                    android:textStyle="bold"/>
                <TextView
                    android:id="@+id/tabItem2"
                    android:layout_width="0dp"
                    android:layout_height="50dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Tab2"
                    android:textColor="#80FFFFFF"
                    android:textStyle="bold"/>
                <TextView
                    android:id="@+id/tabItem3"
                    android:layout_width="0dp"
                    android:layout_height="50dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Tab3"
                    android:textColor="#80FFFFFF"
                    android:textStyle="bold"/>
            </LinearLayout>
        </RelativeLayout>
        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/fragmemtContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>
</layout>

 

@ round_back_white10_100.xml 작성

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#1AFFFFFF"/>
    <corners android:radius="100dp"/>

</shape>

 

@ round_back_white_100.xml 작성

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="100dp"/>

</shape>

 

@ 비어있는 Fragment 파일(Blank Fragment) 생성 후 내용 수정, 이름은 각각 OneFragment, TwoFragment, ThreeFragment 로 만들어줌

 

- OneFragment, TwoFragment, ThreeFragment 모두 생성후 아래 내용으로 작성. 클래스명만 다름(One, Two, Three)

package com.xxxxxx.tapviewexam

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class OneFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false)
    }

}

 

 @ fragment.xml 내용 : 내용은 동일하고 일단 text만 따로 작성함

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="FragmentOne"
        android:gravity="center"
        android:textSize="30sp"/>

</FrameLayout>

 

@MainActivity.kt

package com.xxxxxx.tapviewexam

import android.graphics.Color
import android.graphics.Typeface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.animation.Animation
import android.view.animation.TranslateAnimation
import android.widget.TextView
import androidx.core.content.ContextCompat
import androidx.databinding.DataBindingUtil
import androidx.fragment.app.Fragment
import com.xxxxxx.tapviewexam.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    // 현재 탭 위치
    private var selectedTabNumber = 1

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

        //binding 초기화
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        //디폴트 설정(1번탭)
        selectTab(1)

        //1번탭 클릭 이벤트
        binding.tabItem1.setOnClickListener{
            selectTab(1)
        }

        //2번탭 클릭 이벤트
        binding.tabItem2.setOnClickListener{
            selectTab(2)
        }

        //3번탭 클릭 이벤트
        binding.tabItem3.setOnClickListener{
            selectTab(3)
        }
    }

    // 탭 선택 이벤트
    private fun selectTab(tabNumber: Int){
        var selectedTextView: TextView // 선택 탭
        var nonSelectedTextView1: TextView // 비선택 탭
        var nonSelectedTextView2: TextView // 비선택 탭

        var selectedFragment: Fragment // 선택 프래그먼트

        if(tabNumber == 1){
            selectedTextView = binding.tabItem1
            nonSelectedTextView1 = binding.tabItem2
            nonSelectedTextView2 = binding.tabItem3

            selectedFragment = OneFragment()

        } else if(tabNumber == 2){

            selectedTextView = binding.tabItem2
            nonSelectedTextView1 = binding.tabItem1
            nonSelectedTextView2 = binding.tabItem3

            selectedFragment = TwoFragment()

        } else {

            selectedTextView = binding.tabItem3
            nonSelectedTextView1 = binding.tabItem1
            nonSelectedTextView2 = binding.tabItem2

            selectedFragment = ThreeFragment()

        }

        // 프래그먼트 설정
        supportFragmentManager.beginTransaction()
            .setReorderingAllowed(true)
            .replace(R.id.fragmemtContainer, selectedFragment, null)
            .commit()

        // 슬라이드 이동 위치 = (선택탭 번호 - 현재 이치번호) * 텍스튜뷰 넓이값
        var slideTo: Float = ((tabNumber - selectedTabNumber) * selectedTextView.width).toFloat()

        var translateAnimation = TranslateAnimation(0F, slideTo, 0F, 0F)

        // 구현시간(1000 = 1초)
        translateAnimation.duration = 300

        // 선태 번호에 따른 애니메이션 적용
        when(selectedTabNumber){

            1 -> binding.tabItem1.startAnimation(translateAnimation)
            2 -> binding.tabItem2.startAnimation(translateAnimation)
            3 -> binding.tabItem3.startAnimation(translateAnimation)
        }

        //애니메이션 이벤트
        translateAnimation.setAnimationListener(object: Animation.AnimationListener{
            override fun onAnimationEnd(p0: Animation?) {
                //애니메이션 끝나면 실행
                //선택 탭 설정
                selectedTextView.setBackgroundResource(R.drawable.round_back_white_100)
                selectedTextView.setTypeface(null, Typeface.BOLD)
                selectedTextView.setTextColor(Color.BLACK)

                //비선택 탭 설정
                nonSelectedTextView1.setBackgroundColor(ContextCompat.getColor(applicationContext,
                    android.R.color.transparent))
                nonSelectedTextView1.setTypeface(null, Typeface.NORMAL)
                nonSelectedTextView1.setTextColor(Color.parseColor("#80FFFFFF"))

                nonSelectedTextView2.setBackgroundColor(ContextCompat.getColor(applicationContext,
                    android.R.color.transparent))
                nonSelectedTextView2.setTypeface(null, Typeface.NORMAL)
                nonSelectedTextView2.setTextColor(Color.parseColor("#80FFFFFF"))


            }

            override fun onAnimationStart(p0: Animation?) {}
            override fun onAnimationRepeat(p0: Animation?) {}
        })

        // 탭 번호 선택탭 변수에 담기
        selectedTabNumber = tabNumber


    }
}

 

- 유튜브 강좌 만들면서 배워가는 프로그래머(youtobe.com/c/만들면서배워가는프로그래머)를 보고 작성한 안드로이드 앱