연습장/실습

Basic 1주차_ 1. shape xml 이용 및 include 태그

아이른 2024. 3. 22. 20:48

문제 1. 과제 UI 만들기

  • 내가 생각한 구상
    • 각 버튼을 눌렀을 때, 다음 화면으로 넘어가기
    • 메인 페이지 버튼은 색다르게 써보기 

다양한 걸 써보고 싶어서 구상한게 아래와 같은 모양을 한 버튼을 만들고 싶었다

1. shape xml 이용

  •  숫자를 넣을 동그라미 형태 만들기 : drawable에 xml 형태로 넣고 ImageView로 꺼내 사용

① drawable 우클릭 > New > File > 파일명

 

② 버전 입력 및 shape 이용

<?xml version="1.0" encoding = "utf-8" ?>
//버전 직접 타이핑
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
//oval : 타원형, rectangle : 사각형, line : 선

    <solid
        android:color="@color/black"/>
    <size
        android:width="35dp"
        android:height="35dp"/>

</shape>
  • 만든 이미지를 TextView로 끌고와 EditText와 함께 LinearLayout으로 묶음

더보기

activity_main.xml

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

    <ImageView
        android:id="@+id/iv_profile"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginBottom="50dp"
        android:src="@drawable/woman"
        app:layout_constraintBottom_toTopOf="@id/tv_list"
        app:layout_constraintEnd_toEndOf="@id/tv_list"
        app:layout_constraintStart_toStartOf="@id/tv_list" />

    <TextView
        android:id="@+id/tv_list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Basic 과제 리스트"
        android:textSize="20sp"
        android:typeface="serif"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="@id/tv_list"
        app:layout_constraintStart_toStartOf="@id/tv_list"
        app:layout_constraintTop_toBottomOf="@id/tv_list"
        android:id="@+id/btn_click">

        <TextView
            android:id="@+id/btn_num1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/circle"
            android:gravity="center"
            android:text="1"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />

        <EditText
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="while문 활용 예제"
            android:typeface="serif"
            android:textSize="20sp"
            android:gravity="center"/>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

2. include 태그

 

버튼을 활용하기 위해 만든 LinearLayout 코드만 30줄이 넘어가는데, 만약 해당 버튼을 여러개 사용한다면 코드가 끝도없이 길어진다. 이처럼, 자주 재사용 되는 레이아웃은 include 태그를 활용한다.

  • include 태그는 한 번 작성한 레이아웃의 일부를 필요할 때 사용

① 새로운 xml 파일에 자주 사용되는 레이아웃 복붙

더보기

second.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/btn_num1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/circle"
            android:gravity="center"
            android:text="2"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />

        <EditText
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="2주차 과제"
            android:typeface="serif"
            android:textSize="20sp"
            android:gravity="center"/>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

② activity_main.xml에 include 태그

더보기

acitivity_main.xml

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

    <ImageView
//이미지
    <TextView
//과제 리스트
    <LinearLayout
//1주차 과제
    </LinearLayout>

    <include
        layout="@layout/second"
        android:id="@+id/btn_click2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@id/btn_click"
        app:layout_constraintEnd_toEndOf="@id/btn_click"
        app:layout_constraintTop_toBottomOf="@id/btn_click"
        android:layout_marginTop="10dp"/>


</androidx.constraintlayout.widget.ConstraintLayout>

3. 문제점

밑줄 어떻게 만들지? 싶어서 EditText로 하였는데, LinearLayout 을 버튼으로 활용하여 앱을 실행해보니 ● 부분을 선택하면 버튼 처럼 활용되고 텍스트 부분을 선택하면 키보드가 나타난다. 

  • EditText가 입력받는 역할을 최상위로 두고 있기 때문
  • EditText > Text 변경, 실선은 View로 만들어 붙이기
    <LinearLayout
        android:id="@+id/btn_click"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="@id/tv_list"
        app:layout_constraintStart_toStartOf="@id/tv_list"
        app:layout_constraintTop_toBottomOf="@id/tv_list">

        <TextView
            android:id="@+id/btn_num1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/circle"
            android:gravity="center"
            android:text="1"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="1주차 과제"
            android:textColor="@color/black"
            android:textSize="20sp"
            android:typeface="serif" />

    </LinearLayout>

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="4dp"
        android:background="@color/black"
        app:layout_constraintEnd_toEndOf="@id/btn_click"
        app:layout_constraintStart_toStartOf="@id/btn_click"
        app:layout_constraintTop_toBottomOf="@id/btn_click" />

 

<a href="https://www.flaticon.com/kr/free-icons/-" title="스케이트 보드 아이콘">스케이트 보드 아이콘  제작자: Victoruler - Flaticon</a>

 

'연습장 > 실습' 카테고리의 다른 글

4주차_ SNS 앱 1. TextWatcher 유효성 검사  (0) 2024.04.01
Basic 1주차_ 2. Random 및 코루틴 활용  (0) 2024.03.25
3주차_ 소개글 앱 5. 랜덤 이미지  (0) 2024.03.22
3주차_ 소개글 앱 4. registerForActivityResult  (0) 2024.03.21
3주차_ 소개글 앱 3. Extra  (0) 2024.03.20

'연습장/실습'의 다른글

  • 현재글Basic 1주차_ 1. shape xml 이용 및 include 태그

관련글

티스토리툴바