Kotlin - Android 앱 개발하기 (4) - 타이틀 바 추가

1. 타이틀 UI 생성

 

보편적인 안드로이드 타이틀 모양을 제작해보자

위치는 layout 폴더 안에 inc_titlebar 라는 이름의 파일을 만들것이다

inc 의 의미는 include 를 할 파일이라는 의미인데, 액티비티에 타이틀 연결할때 예제를 봐보자

 

타이틀 디자인은 왼쪽에 햄버거 버튼이 있고, 가운데에 타이틀 텍스트가 오도록 한다

 

1) 타이틀 xml 작성

<?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="wrap_content"
        android:background="@color/white">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/layout_title"
            android:layout_width="match_parent"
            android:layout_height="@dimen/title_height"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp">

            <!-- back button -->
            <ImageView
                android:id="@+id/iv_back"
                style="@style/AppTheme.Button.SmallIcon.titleBar"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical|left"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/btn_back" />

            <ImageView
                android:id="@+id/iv_menu"
                style="@style/AppTheme.Button.SmallIcon.menu"
                android:layout_width="@dimen/title_height"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ic_menu" />

            <!-- title -->
            <TextView
                android:id="@+id/tv_title"
                style="@style/AppTheme.Text.Title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="60dp"
                android:layout_marginRight="60dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="title" />

            <!-- border line -->
            <View
                android:id="@+id/vw_line"
                android:layout_width="match_parent"
                android:layout_height="8dp"
                android:layout_gravity="bottom"
                android:background="@drawable/gradient_stroke_gray"
                app:layout_constraintBottom_toBottomOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </LinearLayout>

</layout>

 

햄버거버튼부분은, 뒤로가기 이미지가 올때도 있어야 하므로 ImageView 두개를 넣어뒀다.

@Style, @drawable, @dimen 부분은 사용성을 좋게하기위해 했지만 안해도되고, 직접 속성을 설정해줘도 되므로 생략!

 

자세한 코드는 아래 깃주소 참고

https://github.com/Daseul727/mobile_sample.git

 

2) 타이틀 소스코드 작성

TitleBar.kt 파일을 만들어주자

 

아래 소스코드 중 FrameLayout 을 import 하면 기본 constructor 세개를 넣어야지 오류가 발생하지않는다.

class TitleBar : FrameLayout {

    constructor(context: Context) : super(context) {
        inflateView()
        initView()
    }

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        inflateView()
        initView()
    }

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        inflateView()
        initView()
    }

    private var binding: IncTitlebarBinding? = null

    private fun inflateView() {
        binding = IncTitlebarBinding.inflate(LayoutInflater.from(context))
        addView(binding?.root)
    }

    private fun initView() {

        //클릭이벤트

    }

    /**
     * set title (TEXT)
     */
    fun setTitle(title:String) {
        if (title.isNullOrEmpty()) {
            binding?.tvTitle?.hide()
        } else {
            binding?.tvTitle?.show()
            binding?.tvTitle?.text = title
        }
    }

    fun showMenuIcon(b: Boolean) {
        if (b) {
            binding?.ivMenu?.show()
        } else {
            binding?.ivMenu?.hide()
        }
    }
}

 

initView 쪽에는 햄버거버튼 클릭이벤트를 달아주면 좋을것같고

나머지 하단의 function 들은, 외부에서 햄버거버튼을 보여줄지? 타이틀을 숨질지 동작을 위한 메소드이다.

 

3) Activity 에 타이틀 추가

 

MainActivity 에 타이틀을 추가해보겠다.

<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">

////추가////
    <com.example.basic_mobile.ui.TitleBar
        android:id="@+id/inc_titlebar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/title_height"
        app:layout_constraintTop_toTopOf="parent"/>
////////

    <Button
        android:id="@+id/btn_recycler"
        android:text="기본 Recycler View"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/btn_epoxy"
        android:text="epoxy View"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_recycler"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

위와같은 방법으로 TitleBar 를 include 한다

 

그리고 Activity 에서 햄버거버튼 및 title 의 text 를 설정한다

 

class MainActivity : AppCompatActivity() {

    private var binding: ActivityMainBinding? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        ////추가////
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding!!.root)
        setTitleBar()
    }

    private fun setTitleBar () {
        binding?.incTitlebar?.setTitle("MAIN")
        binding?.incTitlebar?.showMenuIcon(true)
    }
}

 

이렇게하면 타이틀 추가 완료