안드로이드 커스텀 뷰(View) 동적 할당(코드로 뷰 추가하기)

 안드로이드 커스텀 뷰(View) 동적 할당

회사에서 프로젝트 추가개발에 들어갔다.

옛날에 만들어진 네이티브 프로젝트였는데 게시판 기능이 필요했다.

회사에서 일한지 1년이 지났는데 게시판을 구현하는 것은 처음이였다.

여러가지로 나에게는 도전이였다.

게시판 기능에 댓글 기능이 존재하였는데 게시글마다 댓글의 개수가 다르다.

그래서 댓글을 보여주는 View를 xml이 아니라 코드로 동적 할당을 해주어야했다.

구현하면서 찾아보고 배운 것들을 정리해보려한다.

1. 커스텀 뷰 레이아웃 정의하기

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/tv_emoji_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:text="\uD83D\uDE23"/>

    <TextView
        android:id="@+id/tv_title_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="추워요"
        android:layout_marginBottom="4dp"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/tv_count_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"/>

</LinearLayout>

</layout>

2. 커스텀 뷰 클래스 정의하기

class EmojiButton(context: Context, attrs: AttributeSet? = null) : FrameLayout(context, attrs) {
    private lateinit var binding : EmojibuttonLayoutBinding

    init {
        binding = EmojibuttonLayoutBinding.inflate(LayoutInflater.from(context), this, true)

        //attrs.xml에서 View의 속성 목록을 가져온다.
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.EmojiButton)

        val emoji = typedArray.getString(R.styleable.EmojiButton_emoji)
        binding.tvEmojiButton.text = emoji

        val title = typedArray.getString(R.styleable.EmojiButton_title)
        binding.tvTitleButton.text = title

        val count = typedArray.getInt(R.styleable.EmojiButton_count, 0)
        binding.tvCountButton.text = count.toString()

        typedArray.recycle()
    }

    fun setEmojiData(emoji: String, title: String, count: Int) {
        binding.tvEmojiButton.text = emoji
        binding.tvTitleButton.text = title
        binding.tvCountButton.text = count.toString()
    }
}

1 => 커스텀 뷰를 inflate한다.

2 => 커스텀 뷰의 속성을 가져오는 것인데 여기서는 주된 내용이 아니므로 설명은 생략

자세한 내용을 알고싶은 분은 아래 링크를 참고하길 바란다.

https://antwhale94.blogspot.com/2022/10/AndroidCustomViewEx.html

3. activity_main.xml 정의하기

<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:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

</LinearLayout>

위 LinearLayout(vertical)에 커스텀 뷰를 동적으로 추가할 것이다.

4. 코드로 커스텀뷰 동적 할당

class MainActivity : AppCompatActivity() {

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

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        val customView = EmojiButton(baseContext)
        customView.setEmojiData("\uD83D\uDE00", "testTitle", 3)
        binding.linearLayout.addView(customView)
    }
}

1) 위에서 만들어준 커스텀뷰(EmojiButton) 객체를 만들어준다.

2) LinearLayout에 커스텀뷰를 추가해준다.

Share: