[Android 기초] 11. 어댑터뷰 - 리스트뷰(ListView), 그리드뷰(GridView)

 

 

 

---

 

ListView

 

 

 

1. 리스트뷰(ListView)

 

 

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

 

 

 

 

2. 리스트뷰 설정 절차

1. 사용할 레이아웃에 ListView 위젯 정의 (XML코드)
2. 어댑터 객체 생성 (Kotlin 코드)
3. ListView 객체에 어댑터 연결 (Kotlin 코드)

 

 

2-1. 사용할 레이아웃에 ListView위젯 정의

• 사용할 레이아웃 XML에 ListView위젯을 추가
• XML레이아웃 파일에 정의된 ListView 위젯을 코틀린 코드에서 참조하기 위하여 id속성을 정의함

~.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView // 리스트뷰 추가
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />
       
</LinearLayout>

    

2-2. 어댑터 객체 생성

• 데이터 원본이 배열(Array)인 경우에 ArrayAdapter객체 사용
• ArrayAdapter 생성자
  ArrayAdapter(Context context, int textViewResourceId, T[] objects)
  • context: 현재 컨텍스트
  • resource: 항목으로 표시될 텍스트 뷰의 리소스 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)

   }
}

 

 

2-3. 리스트뷰 객체에 어댑터 연결

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

 

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)

        // 어댑터를 ListView 객체에 연결
        binding.listView.adapter = adapter

    }
}

 

 

 

 

 

 

---

 

GridView

 

 

 

1. 그리드뷰 (GridView)

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

 

 

 

 

2. 그리드뷰 설정 절차

1. 사용할 레이아웃에 GridView위젯 정의 (XML코드)
2. ArrayAdapter객체를 생성
3. GridView객체에 연결 (Kotlin 코드)

 

2-1. 사용할 레이아웃에 GridView위젯 정의

• 사용할 레이아웃(예: activity_main.xml)에 GridView위젯을 추가
• XML레이아웃 파일에 정의된 GridView 위젯을 Kotlin코드에서 참조하기 위하여 id속성을 정의

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    />

• android:columnWidth="100dp" : 그리드 항목 하나의 폭을 100dp로 설정
• android:numColumns="auto_fit”: 열의 폭과 화면 폭을 바탕으로 자동 계산
• android:verticalSpacing: 항목 간의 간격 설정
• android:stretchMode="columnWidth": 열 내부의 여백을 폭에 맞게 채움

 

2-2/3. ArrayAdapter객체를 생성하고 GridView객체에 연결

• ArrayAdapter 객체를 생성
• id를 바탕으로 메인화면 레이아웃(activity_main.xml)에 정의된 GridView 객체 로딩
• 생성된 ArrayAdapter 객체를 GridView 객체에 연결
• 리스트뷰 만들었던 방법과 똑같음!

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. 이미지 그리드 뷰 설정 절차

• 방식은 일반 그리드 뷰와 똑같음 (레이아웃 XML코드 작성, 어댑터 정의, 어댑터 연결)
• 하지만 어댑터 정의가 다름

XML 파일 : 기존 그리드뷰 생성과 동일

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    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" />

어댑터 정의 : 기존 그리드뷰와 다름

class ImageAdapter : BaseAdapter() {
    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))
        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
    )
}

• 그리드 뷰의 항목으로 간단한 텍스트가 아닌 이미지를 사용하고자 하는 경우에는
  그리드뷰의 항목으로 이미지를 공급하는 ImageAdapter를 BaseAdapter로부터 파생하여 정의
• app>res>drawable 하위에 이름이 sample_0에서 sample_7까지인 8개의 이미지 파일을 추가
• 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 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()


    }
}

 

 

 

4. 항목 클릭 이벤트 처리

• 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()

        // 항목 클릭 이벤트 처리
        binding.gridview.setOnItemClickListener{ parent, view, position, id ->
            Toast.makeText(this@MainActivity,"" + (position + 1) + "번째 선택",           
                Toast.LENGTH_SHORT).show()
        }
    }
}