애드뷰 Addview

뷰를 반복적으로 나타내기 위한 여러 가지 방법들이 존재합니다.

 

보통 다음의 세 가지 방법으로 뷰를 반복적으로 나타낼 수 있습니다.

1. AddView

2. ListView

3. RecycleView

 

이 중에서 애드뷰는 실제로 잘 사용되는 방법은 아니라고 합니다. 그러나 애드뷰를 기본적으로 알아야 나중에 리스트뷰와 리사이클뷰를 이해하는 데에 도움이 될 것입니다.

 

리스트뷰는 이전에 많이 사용되었던 방법이고, 최근에는 효용성 때문에 리사이클뷰를 사용한다고 합니다.

 

애드뷰 AddView를 제작하는 순서는 다음으로 요약할 수 있습니다.

1. 아이템을 담게 될 XML 파일을 만듭니다.

2. XML에 텍스트나 이미지뷰 등으로 내용을 채워줍니다.

3. 컨테이너 뷰에 이를 더해줍니다.

4. 반복시킵니다.

 

실제로 애드뷰를 사용해서 리스트뷰를 만들어 보도록 하겠습니다.

 

우선 각각의 아이템을 담게 될 XML 파일입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/textView_color"
    android:padding="10dp">
   
    //LinearLayout으로 아이템 한 줄을 수평으로 감싼다
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
    
    //아이템은 gravity="center"로 두어 중간에 오도록 합니다.
    <TextView
        android:id="@+id/guest_name"
        android:gravity="center"
        android:textSize="50dp"
        android:padding="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    
    // 텍스트 사이에 1dp 폭의 흰 선이 생기도록 합니다.
    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/white" />

    <TextView
        android:id="@+id/waiting"
        android:gravity="center"
        android:textSize="50dp"
        android:padding="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    </LinearLayout>
   
   //아이템 마다 흰 선이 생기도록 합니다.
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#ffffff"/>

</LinearLayout>

반응형

이후에는 컨테이너 역할을 하는 XML 파일을 만들게 됩니다. ID가 addview_container인 뷰를 하나 그려주고, 이를 스크롤 뷰로 감싸줍니다. 스크롤뷰에서 fillViewport를 'true'로 해주셔야 합니다.

<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=".Addview">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <LinearLayout
            android:id="@+id/addview_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"/>

    </ScrollView>

</LinearLayout>

 

다음은 액티비티 파일입니다.

class Addview : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.practice_addview)
        
        val waitingList = ArrayList<WaitForList>()
        for (i in 0 until 10){
            waitingList.add(WaitForList("" + i + "번째 손님", "" + i + "번째 대기번호"))

        }

        val container = findViewById<LinearLayout>(R.id.addview_container)

        val inflater = this@Addview.layoutInflater

        for (i in 0 until waitingList.size){

            val itemView = inflater.inflate(R.layout.item_view, null)

            val guestNameView = itemView.findViewById<TextView>(R.id.guest_name)
            val waitingView = itemView.findViewById<TextView>(R.id.waiting)

            guestNameView.setText(waitingList.get(i).guest_number)
            waitingView.setText(waitingList.get(i).waiting_number)

            container.addView(itemView)
        }



    }
}

class WaitForList(val guest_number: String, val waiting_number: String){

}

액티비티 파일을 보면 먼저 아이템을 리스트로 보여줄 수 있도록 준비합니다.

val waitingList = ArrayList<WaitForList>()

for (i in 0 until 10){

     waitingList.add(WaitForList("" + i + "번째 손님", "" + i + "번째 대기번호"))

}

practice_addview.xml 파일의 컨테이너뷰를 ID를 통해서 가져오는 코드입니다. 이 컨테이너 뷰에 아이템 하나가 들어가게 됩니다.

val container = findViewById<LinearLayout>(R.id.addview_container)

이제 컨테이너에 뷰를 더해주는 작업이 필요합니다. 뷰를 더해주기 위해서는 컨테이너에 inflater를 사용해서 뷰를 붙여주는 작업을 해줘야 합니다. inflate는 아이템 뷰를 지니고, 이 아이템을 붙여줄 컨테이너를 가리키게 됩니다. 아래의 코드처럼 말이죠. inflater의 inflate 메소드가 item_view를 찾은 다음에, container로 붙여준다고 이해하시면 됩니다.

val itemView = inflater.inflate(R.layout.item_view, container)

 이렇게 하나의 itemView가 완성되었으면, item_view.xml 파일에서 ID값으로 실제 텍스트뷰들을 찾아줘야 합니다.

val guestNameView = itemView.findViewById<TextView>(R.id.guest_name)
val waitingView = itemView.findViewById<TextView>(R.id.waiting)

이제 이러한 텍스트뷰 들이 별도로 만든 클래스인 WaitForList의 인수로 들어갈 수 있도록 코딩해줍니다.

guestNameView.setText(waitingList.get(i).guest_number)
waitingView.setText(waitingList.get(i).waiting_number)

마지막으로 컨테이너에 addView 메소드를 통해 itemView를 더해주면 됩니다.

container.addView(itemView)

아이템 뷰를 변수로 선언한 곳부터, 컨테이너에 뷰를 더해주는 부분까지 반복문으로 감싸 리스트로 나올 수 있도록 합니다. 이는 다음과 같습니다. waitingList는 손님 번호와 대기 번호를 인자로 받는 클래스인 WaitForList를 ArrayList 형태로 받아서 0~10번까지 보여주는데, 이를 waitingList.size, 즉 해당 변수의 크기만큼 다시 반복시켜서 보여주는 액티비티입니다.

 for (i in 0 until waitingList.size){

            val itemView = inflater.inflate(R.layout.item_view, null)

            val guestNameView = itemView.findViewById<TextView>(R.id.guest_name)
            val waitingView = itemView.findViewById<TextView>(R.id.waiting)

            guestNameView.setText(waitingList.get(i).guest_number)
            waitingView.setText(waitingList.get(i).waiting_number)

            container.addView(itemView)
}

최종 결과는 다음과 같습니다.