[ Android Studio ] #17. ToDoList 어플을 만들어보자 - UI편

ma.caron_g·2022년 2월 2일
0
post-thumbnail

[ 참고 링크 ]

[ UI 만들어보기 ]

[ 1. 프로젝트 생성 ]

안드로이드 스튜디오를 실행시켜 새 프로젝트를 생성해줍니다.

Empty Activity로 설정해주고 작성자는 프로젝트명을 "ToDoList"로 지정하였습니다.

[ 2. activity_main.xml]

리니어 레이아웃(vertical)을 배치하고 또 그 안에 리니어 레이아웃(horizontal)을 배치하여
수평적 리니어 레이아웃에 EditText와 Button을 배치해주었습니다.

그 외의 속성은 아래를 참고해주세요.

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

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

        <EditText
            android:id="@+id/inputText"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:ems="10"
            android:gravity="start|top"
            android:inputType="textMultiLine"
            android:hint="할 일을 입력하세요." />

        <Button
            android:id="@+id/addButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:backgroundTint="#ffffbb33"
            android:text="일정 추가" />

    </LinearLayout>

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

</LinearLayout>

[ 3. fragment_main.xml ]

일정을 추가했을 때, 리스트 아이템들을 표시할 뷰를 만들어줍니다.

리니어 레이아웃을 수직으로 배치해주고 그 안에 리싸이클러뷰를 넣어줍니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recylcerView"
        android:layout_width="409dp"
        android:layout_height="729dp"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp" />
</LinearLayout>

[ 4. todo_item.xml ]

뷰에 추가될 아이템을 디자인 할 xml파일을 만들어줍니다.

CardView를 추가하고 그 안에 LinearLayouthorizontal 값을 지정하여 CheckBoxButton값을 넣어줍니다.

설정은 아래 코드에 적어놓았습니다.

[ Code ]

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="4dp"
    android:paddingLeft="4dp"
    android:paddingTop="8dp"
    android:paddingRight="4dp"
    android:paddingBottom="4dp"
    app:cardBackgroundColor="@color/white"
    app:cardCornerRadius="10dp"
    app:cardElevation="5dp">

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

        <CheckBox
            android:id="@+id/chkToDo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_weight="7"/>
        <Button
            android:id="@+id/btnRemove"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginRight="10dp"
            android:backgroundTint="#ffffbb33"
            android:text="제거"
             />

    </LinearLayout>
</androidx.cardview.widget.CardView>
profile
다른 사람이 만든 것을 소비하는 활동보다, 내가 생산적인 활동을 하는 시간이 더 많도록 생활화 하자.

0개의 댓글