[My Note] 마이노트 UI 구현하기

비밀번호를 설정하여 글을 작성할 수 있는 노트 앱 만들기 프로젝트입니다.

 

안드로이드에서 프로젝트 생성 후, UI 제작을 위해 main_activity.xml 파일에서 작업을 진행합니다.

 

아래와 같이 레이아웃은 Constraint Layout을 사용할 계획입니다.

<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:background="@color/purple_200"
    tools:context=".MainActivity">
</androidx.constraintlayout.widget.ConstraintLayout>

이후로 레이아웃 안에, 텍스트뷰와 버튼 2개, NumberPicker를 활용할 것입니다.

 

텍스트뷰 코드는 다음과 같습니다. 텍스트뷰에서 폰트를 바꿀 경우, 원하는 폰트 파일(.ttf)을 다운받으시고, 리소스 폴더에 폰트 폴더 생성 후, 해당 폴더에 파일을 넣어주시면 됩니다.

폰트를 사용하려면, android:fontFamily="@font/new_font" 라인처럼, fontFamily로 원하는 폰트를 불러오면 됩니다.

  <TextView
        app:layout_constraintBottom_toTopOf="@id/passwordLayout"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:text="My Note"
        android:fontFamily="@font/new_font"
        android:textSize="30sp"
        android:textStyle="bold"
        android:layout_marginBottom="50dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

NumberPicker, Button 등의 객체를 포함하는 비밀번호 박스는 다시 Constraint Layout으로 한번 더 감싸줍니다.

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/passwordLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#837474"
        android:padding="15dp"
        app:layout_constraintVertical_bias="0.45"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
</androidx.constraintlayout.widget.ConstraintLayout>

안에는 오픈버튼과 비밀번호 변경 버튼, 비밀번호 뷰를 각각 구현해줍니다.

특히 비밀번호 뷰를 구현하기 위해 NumberPicker를 사용하였습니다. 

<NumberPicker
            android:id="@+id/numberPicker1"
            android:layout_width="30dp"
            android:layout_height="120dp"
            android:background="#ACA3A3"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/numberPicker2"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@id/openButton"
            app:layout_constraintTop_toTopOf="parent" />
            
... 이하 중략

레이아웃 제작 시 중요한 포인트는 각 뷰들을 서로 접목시킬 때 위치를 설정하는 부분입니다.

app:layout_constraintBottom_toBottomOf="parent" 또는 app:layout_constraintEnd_toStartOf="@id/numberPicker" 식처럼, 원하는 뷰를 어떤 뷰의 상단, 하단, 왼쪽, 오른쪽으로 배치시킬 수 있습니다.

예를 들어, 어떤 텍스트뷰를 버튼 객체 위에 비치고 싶은 경우,  app:layout_constraintBottom_toTopOf="Button"으로 이해할 수 있습니다. 텍스트뷰의 Bottom이 버튼 객체의 Top에 오도록 하는 것입니다.

 

아래 사진은 완성된 UI입니다.

추가적으로, 앱 실행 시 상단의 액션 바를 삭제하고 싶다면, 리소스 폴더의 테마 파일에서 해당 작업을 수행하실 수 있습니다. 아래의 그림처럼, themes.xml 파일 내에서 NoActionBar 속성이 추가된 새로운 스타일 태그를 넣어주면 됩니다.

반응형

<style name="ITKnowledgeShare.NoActionBar"
       parent="Theme.MaterialComponents.DayNight.NoActionBar"/>