[Android] IntelliJ #6 ListView, ScrollView, GridView

현지·2022년 2월 8일
IntelliJScrollViewandroidgridviewkotlinlistview
0

시큐어 코딩을 적용한 앱 개발 과정

목록 보기
20/22

ListView

  • list를 만들고 스크롤을 한다.
  • 누르면 해당 정보를 textView에 출력한다.

✅ res > layout > item_spinner.xml추가

  • listView에 추가할 layout을 구성한다.
    (리스트 한 줄에 들어갈 부분)
<?xml version="1.0" encoding="utf-8"?>

<TextView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/listItem"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:paddingTop="10dp"
        android:paddingStart="30dp"
        android:textColor="@android:color/white"
        android:textSize="15sp"
        android:paddingLeft="30dp"/>

✅ activity_main.xml

  • listView를 추가한다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:textSize="20sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.027"
            android:id="@+id/textView"/>
    <ListView
            android:id="@+id/listView"
            android:layout_width="598dp"
            android:layout_height="913dp"
            tools:layout_editor_absoluteX="16dp"
            tools:ignore="MissingConstraints" app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="52dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

✅ MainActivity

  • listView의 adapter에 리스트를 넣어준다.
package com.example.sample17

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.AdapterView
import android.widget.ArrayAdapter
import android.widget.ListView
import android.widget.TextView
import androidx.annotation.Dimension

class MainActivity : AppCompatActivity(), AdapterView.OnItemClickListener {

    var items = arrayOf(
        "서울", "부산", "대구", "광주", "대전", "울산", "전주", "목포",
        "제주", "강원", "태백", "인천", "서울", "부산", "대구", "광주",
        "대전", "울산", "전주", "목포", "제주", "강원", "태백", "인천",
        "서울", "부산", "대구", "광주", "대전", "울산", "전주", "목포",
        "제주", "강원", "태백", "인천", "서울", "부산", "대구", "광주",
        "대전", "울산", "전주", "목포", "제주", "강원", "태백", "인천"
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //<>내부에 View로 적어도 됨
        val listView = findViewById<View>(R.id.listView) as ListView
        val textView = findViewById<TextView>(R.id.textView)
        textView.setTextSize(Dimension.SP, 28.0f)

        //Adapter를 만들어서 넣어준다.
        //<Any?> 어떤 자료형이든 상관없다
        val adapter:ArrayAdapter<*> = ArrayAdapter<Any?>(this, R.layout.item_spinner, items)
        listView.adapter = adapter
        listView.onItemClickListener = this
    }

    //listView에서 하나를 선택해서 클릭하면 textView에 출력
   override fun onItemClick(p0: AdapterView<*>?, p1: View?, idx: Int, p3: Long) {
        val textView = findViewById<TextView>(R.id.textView)
        textView.text = items[idx]
    }
}

ScrollView

  • 위아래로 스크롤해 정보를 보여준다.

✅ activity_main.xml

  • 스크롤 되는것만 확인한다.
  • MainActivity는 그대로 두고 실행한다.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <TableRow>
            <TextView android:text="국어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="영어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="수학" android:textSize="50dp" android:paddingBottom="100dp"/>
        </TableRow>
        <TableRow>
            <TextView android:text="국어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="영어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="수학" android:textSize="50dp" android:paddingBottom="100dp"/>
        </TableRow>
        <TableRow>
            <TextView android:text="국어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="영어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="수학" android:textSize="50dp" android:paddingBottom="100dp"/>
        </TableRow>
        <TableRow>
            <TextView android:text="국어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="영어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="수학" android:textSize="50dp" android:paddingBottom="100dp"/>
        </TableRow>
        <TableRow>
            <TextView android:text="국어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="영어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="수학" android:textSize="50dp" android:paddingBottom="100dp"/>
        </TableRow>
        <TableRow>
            <TextView android:text="국어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="영어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="수학" android:textSize="50dp" android:paddingBottom="100dp"/>
        </TableRow>
        <TableRow>
            <TextView android:text="국어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="영어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="수학" android:textSize="50dp" android:paddingBottom="100dp"/>
        </TableRow>
        <TableRow>
            <TextView android:text="국어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="영어" android:textSize="50dp" android:paddingBottom="100dp"/>
            <TextView android:text="수학" android:textSize="50dp" android:paddingBottom="100dp"/>
        </TableRow>
    </TableLayout>
</ScrollView>

GridView

  • GridView의 내용을 채우고 클릭하면 textView에 출력한다.

✅ res > layout > item_spinner.xml추가

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

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tvItemSpinner"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:paddingTop="10dp"
    android:paddingStart="30dp"
    android:textColor="@android:color/white"
    android:textSize="15sp"
    android:paddingLeft="30dp"/>

✅ activity_main.xml

  • GridView를 추가한 후, android:columnWidth="100dp"를 이용해서 column의 width를 정해준다.
  • android:numColumns="auto_fit" : 크기에 맞춰서 나눠진다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.049"
            android:id="@+id/textView"/>
    <GridView
            android:id="@+id/grid"
            android:numColumns="auto_fit"
            android:columnWidth="100dp"
            android:layout_width="544dp"
            android:layout_height="630dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView"
            app:layout_constraintVertical_bias="0.581"/>

</androidx.constraintlayout.widget.ConstraintLayout>

✅ MainActivity

package com.example.sample20

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.ArrayAdapter
import android.widget.GridView
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    var items = arrayOf(
        "서울", "부산", "대구", "광주", "인천", "목포", "여수", "태백",
        "서울", "부산", "대구", "광주", "인천", "목포", "여수", "태백",
        "서울", "부산", "대구", "광주", "인천", "목포", "여수", "태백",
        "서울", "부산", "대구", "광주", "인천", "목포", "여수", "태백"
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textview = findViewById<View>(R.id.textView) as TextView
        val grid = findViewById<View>(R.id.grid) as GridView

        //grid의 adapter를 items로 채워준다.
        grid.setAdapter(
            ArrayAdapter(this, R.layout.item_spinner, items)
        )

        //아이템을 클릭했을 때, textView에 출력한다.
        grid.setOnItemClickListener{ parent, view, idx, id ->
            textview.text = items[idx]
        }
    }
}
profile
현지
이전 포스트

[Android] IntelliJ #5 Spinner, DatePicker, TimePicker

다음 포스트

[Android] IntelliJ #7 backImg, VideoView, WebView

0개의 댓글