[2024. 01. 08] ListView, GridView

🍪 ListView

ListView는 어댑터 뷰의 대표 위젯으로서, 복수 개의 항목을 수직으로 표시한다.

1. ListView 설정 방법

1. 메인화면 레이아웃에 ListView 위젯 정의(XML 코드)

• 메인 화면 레이아웃 (예,activity_main.xml)에 ListView 위젯 추가
• XML 레이아웃 파일에 정의된 ListView 위젯을 Java코드에서 참조하기 위하여 id속성을 정의

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

    <ListView
        android:id="@+id/ListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

2. 어댑터 객체 생성(Kotlin 코드)

• 데이터 원본이 배열인 경우에 ArrayAdapter객체 사용

• ArrayAdapter 생성자

• ArrayAdapter(Context context, int resource, int textViewResourceId, T[] objects)
  - context: 현재 컨텍스트
  - resource: 항목으로 표시될 텍스트 뷰의 리소스 ID(새로 만들지 않고 안드로이드에서 제공하는 아래의 ID로 사용)
  
  objects: 어댑터로 공급될 데이터 원본으로 단순 배열

• String 배열을 이용한 ArrayAdapter 객체 생성 예제

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 데이터 원본 준비
        val items = arrayOf<String?>("item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item5", "item6", "item7", "item8", "item5", "item6", "item7", "item8", "item5", "item6",  "item7", "item8")

        // 어댑터 준비 (배열 객체 이용, simple_list_item_1 리소스 사용)
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, items)    // ArrayAdapter를 쓸 것이고, 한 줄만 나오는 뷰 형식을 쓰고, 거기에 데이터 원본 items를 넣어줌.
    }
}

3. ListView 객체에 어댑터 연결(Kotlin 코드)

• 현재 화면 레이아웃(activity_main.xml)에 정의 된 뷰 중에서 id가 listView인 ListView 객체를 ViewBinding을 통해서 얻어온다.
• 얻어온 ListView객체에 생성된 어댑터 객체(예,ArrayAdapter객체-adapter)를 연결한다

...

// 데이터 원본 준비
        val items = arrayOf<String?>("item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item5", "item6", "item7", "item8", "item5", "item6", "item7", "item8", "item5", "item6",  "item7", "item8")

        // 어댑터 준비 (배열 객체 이용, simple_list_item_1 리소스 사용)
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, items)    // ArrayAdapter를 쓸 것이고, 한 줄만 나오는 뷰 형식을 쓰고, 거기에 데이터 원본 items를 넣어줌.

        binding.ListView.adapter = adapter    // 위 adapter 변수를 ListView 어댑터에 연결해 줌.
    }
}

🍪 GridView

GridView는 2차원 스크롤 가능한 그리드에 항목을 표시한다.

1. GridView 설정 방법

1. 메인화면 레이아웃에 GridView위젯 정의 (XML코드)

• 메인화면 레이아웃(예,activity_main.xml)에 GridView위젯을 추가한다.
• XML레이아웃 파일에 정의된 GridView위젯을 Kotlin 코드에서 참조하기 위하여 id 속성을 정의한다.
• ListView와 거의 동일하지만, 옵션 값들이 있다.
  • android:columnWidth=“100dp” : 그리드 항목 하나의 폭(간격)을 100dp로 설정
  • android:numColumns=“auto_fit”: 열의 폭과 화면 폭을 바탕으로 (꽉 차게)자동 계산
  • android:verticalSpacing: 항목 간의 간격 설정
  • android:stretchMode=“columnWidth”: 열 내부의 여백을 폭에 맞게 채움

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:padding="10dp"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="100dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:stretchMode="columnWidth"
        android:gravity="center"/>
</androidx.constraintlayout.widget.ConstraintLayout>

2. ArrayAdapter객체를 생성하고 GridView객체에 연결 (Kotlin 코드)

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 데이터 원본 준비
        val items = arrayOf<String?>("item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item5", "item6", "item7", "item8", "item5", "item6", "item7", "item8", "item5", "item6",  "item7", "item8")

        // 어댑터 준비(배열 객체 이용, simple_list_item_1 리소스 사용)
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, items)

        // 어댑터를 GridView 객체에 연결
        binding.gridview.adapter = adapter
    }
}

3. 이미지 그리드 뷰 만들어보기

• a. 메인화면 레이아웃에 GridView위젯 정의(XML코드)
  • 메인화면 레이아웃(예,activity_main.xml)에 GridView위젯을 추가
  • XML레이아웃 파일에 정의된 GridView위젯을 Java코드에서 참조하기 위하여 id속성을정의한다.

  <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="100dp"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp" />

• b. 어댑터 정의(Kotlin코드)
  • 그리드 뷰의 항목으로 간단한 텍스트가 아닌 이미지를 사용하고자 하는 경우에는 그리드뷰의 항목으로 이미지를 공급하는 ImageAdapter를 BaseAdapter로부터 파생하여 정의한다.
  • ImageAdapter가 관리하는 데이터는 편의상 직접 ImageAdapter 내부에 Image 리소스 ID의 배열로 설정
  • BaseAdapter의 getCount(), getItem(), getItemId(), getView() 메소드를 재정의함
    • getCount()는 항목의 총 개수를 반환하기 위해 mThumbIds 배열의 크기를 반환
    • getItem()는 특정 위치의 항목을 반환하기 위해 mThumbIds 배열의 지정된 위치의 항목을 반환
    • getItemId()는 특정 위치의 항목 아이디를 반환하는 것인데, 여기서는 배열의 위치(순서)를 항목의 아이디로 간주함
    • getView()는 첫번째 파라미터로 주어진 위치의 항목 뷰를 반환하는 것이므로, mThumbIds 배열의 position 위치에 있는 이미지 리소스를 ImageView의 이미지로 설정하고, 이 설정된 ImageView 객체를 그리드 뷰의 항목뷰로 반환한다.
      • getView() 메소드의 두번째 파라미터인 convertView는 이전에 생성된 항목뷰 (여기서는 ImageView)를 의미한다. 만약 해당 위치의 항목뷰가 처음 만들어지는 경우라면, 새로운 이미지뷰 객체를 만들고 크기와 스케일타입, 패팅을 설정한다. 만약 이전에 이미 만들어진 것이라면, 이를 재사용한다.
      • 이미지뷰의 scaleType은 원본 이미지를 이미지 뷰에 맞게 확대 및 축소시킬 때, 어떻게 처리할 지를 지정하는 것인데, 여기서 CENTER_CROP은 종횡비를 유지하여 스케일링하며 뷰의 크기 이상으로 채우게 됨을 의미한다. 따라서 이미지 일부가 잘릴 수 있다.

  class ImageAdapter :
    BaseAdapter() {        // BaseAdapter()를 부르면 에러 뜨면서 implement members 하라고 뜬다. 클릭하면 override fun들이 자동 생성된다.
    override fun getCount(): Int {
        return mThumbIds.size
    }

    override fun getItem(position: Int): Any {
        return mThumbIds[position]
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        val imageView: ImageView
        if (convertView == null) {
            imageView = ImageView(parent!!.context)
            imageView.layoutParams = AbsListView.LayoutParams(200,200)
            imageView.scaleType = ImageView.ScaleType.CENTER_CROP
            imageView.setPadding(8, 8, 8, 8)
        } else {
            imageView = convertView as ImageView
        }

        imageView.setImageResource(mThumbIds.get(position))    // mThumbIds에 있는 해당 포지션의 사진을 넣는다.
        return imageView
    }

    private val mThumbIds = arrayOf<Int>(
        R.drawable.sample_2, R.drawable.sample_3,
        R.drawable.sample_4, R.drawable.sample_5,
        R.drawable.sample_6, R.drawable.sample_7,
        R.drawable.sample_0, R.drawable.sample_1,
        R.drawable.sample_2, R.drawable.sample_3,
        R.drawable.sample_4, R.drawable.sample_5,
        R.drawable.sample_6, R.drawable.sample_7,
        R.drawable.sample_0, R.drawable.sample_1,
        R.drawable.sample_2, R.drawable.sample_3,
        R.drawable.sample_4, R.drawable.sample_5,
        R.drawable.sample_6, R.drawable.sample_7
    )
}

• c. 어댑터를 생성하고 GridView객체에 연결(Kotlin코드)

  • 그리드 뷰 설정의 마지막 단계는 ImageAdapter객체를 생성하고, 이를 GridView객체에 연결 하는 것이다.

  class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
  
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
  
        // ImageAdapter 객체를 생성하고 GridView 객체에 연결
        binding.gridview.adapter = ImageAdapter()
    }
  }

• d. 항목 클릭 이벤트 처리

  • AdapterView의 항목이 클릭 될 때, 호출되는 callbackmethod의 인터페이스
    

  • 항목 클릭 이벤트 처리 코드 추가

    class MainActivity : AppCompatActivity() {
       private lateinit var binding: ActivityMainBinding
    
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
    
           binding = ActivityMainBinding.inflate(layoutInflater)
           setContentView(binding.root)
    
           // ImageAdapter 객체를 생성하고 GridView 객체에 연결
           binding.gridview.adapter = ImageAdapter()
    
           // 항목 클릭 이벤트 처리 코드 추가(클릭되면서 콜백 값으로 parent, view, position, id가 넘어온다. 여기선 position만 썼지만, view를 쓴다면 내가 선택한 view를 가져올 수 있다.)
           binding.gridview.setOnItemClickListener { parent, view, position, id ->
               Toast.makeText(this@MainActivity,"" + (position + 1) + "번째 선택", Toast.LENGTH_SHORT).show()
           }
       }
    }

• 실행 결과