내일은개발왕

[안드로이드 스튜디오] include 태 그 조 아. 본문

프론트앤드

[안드로이드 스튜디오] include 태 그 조 아.

NDN 2024. 3. 3. 15:33

플젝하다 xml 작성할때마다 코드 길어지는게 너~~무 짜증났었다...

효율적으로 짤 수 있는 방법을 찾다가 배운게 include다. DataBinding과 함께 사용하면 더 좋으니, 한번 천천히 알아보자

이 좋은걸 왜 이제 알았을까??

 


1. include 태그란?

xml상에서 반복되는 레이아웃 부분을 재사용 할 수 있게 도와주는 태그다. 자세한 설명은 공식 홈페이지를 참고하자

더 쉽게 설명하자면 그냥 노가다를 줄여주는 기능을 하는 친구다.

https://developer.android.com/develop/ui/views/layout/improving-layouts/reusing-layouts?hl=ko

 

<include>로 레이아웃 재사용  |  Views  |  Android Developers

Android에서는 다양한 위젯을 통해 재사용 가능한 작은 상호작용 요소를 제공하지만, 특수 레이아웃이 필요한 큰 구성요소를 재사용해야 할 수도 있습니다. 전체 레이아웃을 효율적으로 재사용하

developer.android.com

 

 

2. DataBinding(데이터 바인딩)으로 include를 사용해보자

BuildGradle에서 추가하는 건 다들 알것 같긴 하지만, 그래도 혹시모르니 추가해두겠다.

  buildFeatures {
        viewBinding = true
        //noinspection DataBindingWithoutKapt
        dataBinding = true
    }

이렇게 추가해주고 반복될 레이아웃을 아래처럼 추가해준다.

우리는 버튼 4개를 추가해서 각 버튼 이름을 다르게 만들것이다. 이를 위해서 DataBinding을 사용할 것 이다.

<data> ~ <variable> 부분이 값(데이터)를 조절하는 기능을 한다. 

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <variable
            name="ttext"
            type="String" />
    </data>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btnOrigin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{ttext}"/>

</LinearLayout>
</layout>

 

이렇게 되면, 이제 재사용 할 레이아웃이 완성된거다. 이걸 사용해보자.

새로 레이아웃 하나 파고, 아래 처럼 소스코드를 작성해준다.

<include 하고 layout = "@layout/레이아웃이름">이렇게 하면, 우리가 아까 만들었던 버튼 레이아웃이 나오게 된다.

<?xml version="1.0" encoding="utf-8"?>

<layout>
<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"
    tools:context=".MainActivity">

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rowCount="2"
        android:columnCount="2">

        <include
            android:id="@+id/btn1"
            layout="@layout/include_test_btn"
            app:ttext="@{`첫번재`}"/>

        <include
            android:id="@+id/btn2"
            layout="@layout/include_test_btn"
            app:ttext="@{`두번재`}"/>

        <include
            android:id="@+id/btn3"
            layout="@layout/include_test_btn"
            app:ttext='@{"세번쩨"}'/>

        <include
            android:id="@+id/btn4"
            layout="@layout/include_test_btn"
            app:ttext="@{`네번재`}"/>



    </GridLayout>

</LinearLayout>
</layout>

각 버튼의 text 값을 다르게 하는방법은, 아까 만들었던 variable 값에 우리가 원하는 text값을 "@{`값`}" or ' @{"값"} ' 이렇게 해서 넣어주면 된다.

여기서 중요한건 <layout>코드 꼭 추가해줘야 한다. 안그럼 variable 못찾는다고 에러난다. 

위에처럼 작성하면 이런 화면이 나올텐데, 여기서 우리가 추가한 텍스트가 안보여 당황할 수 있다. 근데 그게 정상이다.

그럼 이제 실행해보자~

잘 나온다!

 

 

3. 그럼 이벤트 처리는 어떻게?

이벤트 처리는 아래와 같이 하면 된다.

package com.example.study_android

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import androidx.compose.ui.state.ToggleableState
import com.example.study_android.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root

        setContentView(view)

        binding.btn1.btnOrigin.setOnClickListener {
            Toast.makeText(this,"첫번째 버튼", Toast.LENGTH_SHORT).show()
        }

    }
}

1. 먼저 include 태그에 따로 id 속성을 준다.

2. 그리고, include할 레이아웃으로 사용되는 부분에, 이벤트가 있을것 같은 or 있어야 하는 객체에 id 속성을 준다.

3. 그다음, 메인 소스코드 화면으로 돌아와서 include id.이벤트 처리할 객체 id. 이벤트 이렇게 작성하면 된다.

잘 나온다 😊👍

 

+) 이미지를 포함하는 경우

https://www.masterqna.com/android/103214/include-%EC%95%88%EC%97%90-%EC%9E%88%EB%8A%94-%EB%B3%80%EC%88%98%EC%97%90-%EA%B0%92-%EB%84%A3%EB%8A%94-%EB%B2%95-%EC%A2%80-%EC%95%8C%EB%A0%A4%EC%A3%BC%EC%84%B8%EC%9A%94-%E3%85%A0%E3%85%A0

 

안드로이드 - include 안에 있는 변수에 값 넣는 법 좀 알려주세요 ㅠㅠ - 안드로이드 Q&A

공통으로 사용하게 될 xml을 만들었습니다. 이걸 a_xml이라고 하겠습니다. 이 a_xml을 include 를 사용해서 불러와서 사용하는데요. 문제는 a_xml안에 textview가 있고 거기에 데이터 바인딩으로 값을 대

www.masterqna.com

 


만약 잘못된 부분이 있다면 언제든지 댓글로 작성 해주세요 🧐