[안드로이드 코틀린] 간단한 할 일 목록(ToDo List) 쉽게 만드는 방법

이번 시간에는 ListView를 이용해서 간단한 할 일(todo list) 목록 만드는 방법에 대하여 알아보겠습니다.

---

목차

1. 실행 화면
2. 아이템 화면 list_item.xml
3. 메인 화면 activity_main.xml
4. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

2. 아이템 화면 list_item.xml

- 설명 -

  ListView에 보이는 할 일 목록 화면

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="20dp"
    android:textAppearance="@style/TextAppearance.AppCompat.Large"
    android:textStyle="bold">
</TextView>

3. 메인 화면 activity_main.xml

- 설명 -

1. 할일 입력 EditText

2. 할일 등록 Button

3. 할일 목록 ListView

<RelativeLayout 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">

    <LinearLayout
        android:id="@+id/bottom_section"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:padding="10dp">

        <EditText
            android:id="@+id/todo_edit"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/add_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="추가"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottom_section"
        android:background="#eee">

        <ListView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
</RelativeLayout>

 

 

4. 메인 코드 MainActivity.kt

- 설명 -

1. ArrayAdapter(this, R.layout.list_item, todoList)

  데이터와 화면을 연결해주는 Adapter

2. listView.setOnItemClickListener

  아이템 클릭 이벤트

3. textView.paintFlags

  취소선 설정

4. adapter.notifyDataSetChanged()

  데이터 변경 적용

class MainActivity : AppCompatActivity(){

    private lateinit var todoList: ArrayList<String>
    private lateinit var adapter: ArrayAdapter<String>
    private lateinit var todoEdit: EditText

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

        //ArrayList 초기화
        todoList = ArrayList()

        //ArrayAdapter 초기화(context, layout, list)
        adapter = ArrayAdapter(this, R.layout.list_item, todoList)

        //UI객체 생성
        val listView: ListView = findViewById(R.id.list_view)
        val addBtn: Button = findViewById(R.id.add_btn)
        todoEdit = findViewById(R.id.todo_edit)

        //Adapter 적용
        listView.adapter = adapter

        //버튼 이벤트
        addBtn.setOnClickListener {
            //할일 추가
            addItem()
        }

        //리스트 아이템 클릭 이벤트
        listView.setOnItemClickListener { adapterView, view, i, l ->

            val textView: TextView = view as TextView

            //취소선 넣기
            textView.paintFlags = textView.paintFlags or Paint.STRIKE_THRU_TEXT_FLAG
        }

    }//onCreate

    private fun addItem(){

        //입력값 변수에 담기
        val todo: String = todoEdit.text.toString()

        //값이 비워있지 않다면
        if(todo.isNotEmpty()){
            //할일 추가
            todoList.add(todo)

            //적용
            adapter.notifyDataSetChanged()
        }else{
            Toast.makeText(this, "할 일을 적어주세요", Toast.LENGTH_SHORT).show()
        }
    }
}

2022.08.05 - [안드로이드] - [안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 회전 표시 쉽게 만드는 방법

[안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 회전 표시 쉽게 만드는 방법

2022.08.04 - [안드로이드] - [안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 카드 플립(CardFlip) 쉽게 만드는 방

[안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 카드플립(CardFlip) 쉽게 만드는 방

2022.08.03 - [안드로이드] - [안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드는 방법

[안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드