🍞 대외활동/Univ Makeus Challenge
[UMC] Android 2주차 워크북 (Layout) - 당근마켓
박빵이
2022. 10. 1. 23:14
📌 구상 과정
첫 번째로 생각한 앱 화면은 당근 마켓이다!
빨간색 ImageView, 파란색 TextView, 초록색은 Button, 중간에 있는 회색 구분선은 View를 사용하여 구현하고자 한다!
📌 직접 구현하기
📌 Layout 설명
- Header - Constraint Layout 안에 Linear Layout 중첩
- Body - Constraint Layout
- Footer - Linear Layout
📌 새롭게 알게 된 점
1. View를 사용하여 구분선을 그릴 수 있다.
2. drawable 폴더에 shape_button.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">
<!-- Header -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="40dp"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/title"
android:textColor="@color/black"
android:textSize="20dp"
android:textStyle="bold" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:src="@drawable/arrow" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/search" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/list"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/bell"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/lightgray"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/header"
app:layout_constraintBottom_toTopOf="@+id/content1"/>
<!-- Body -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_marginTop="25dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/header">
<ImageView
android:id="@+id/img1"
android:layout_width="90dp"
android:layout_height="90dp"
android:src="@drawable/img1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/text1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/text1"
android:textSize="18dp"
android:textColor="@color/black"
android:layout_marginLeft="12dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@+id/img1"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="당근마켓"
android:textColor="@color/gray"
android:textSize="12dp"
android:layout_marginLeft="12dp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@+id/text1"
app:layout_constraintStart_toEndOf="@+id/img1" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/lightgray"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/content1"
app:layout_constraintBottom_toTopOf="@+id/content2"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_marginTop="25dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/content1">
<ImageView
android:id="@+id/img2"
android:layout_width="90dp"
android:layout_height="90dp"
android:src="@drawable/img2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/text2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/text2"
android:textSize="18dp"
android:textColor="@color/black"
android:layout_marginLeft="12dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@+id/img2"/>
<TextView
android:id="@+id/subtext2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="원미동 1초 전"
android:textColor="@color/gray"
android:textSize="12dp"
android:layout_marginLeft="12dp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@+id/text2"
app:layout_constraintStart_toEndOf="@+id/img2" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="5,000원"
android:textColor="@color/black"
android:textStyle="bold"
android:layout_marginLeft="12dp"
android:layout_marginTop="7dp"
app:layout_constraintTop_toBottomOf="@+id/subtext2"
app:layout_constraintStart_toEndOf="@+id/img2" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/lightgray"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/content2"
app:layout_constraintBottom_toTopOf="@+id/content3"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_marginTop="25dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/content2">
<ImageView
android:id="@+id/img3"
android:layout_width="90dp"
android:layout_height="90dp"
android:src="@drawable/img3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/text3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/text3"
android:textSize="18dp"
android:textColor="@color/black"
android:layout_marginLeft="12dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@+id/img3"/>
<TextView
android:id="@+id/subtext3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="괴안동 끌오로 10초 전"
android:textColor="@color/gray"
android:textSize="12dp"
android:layout_marginLeft="12dp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@+id/text3"
app:layout_constraintStart_toEndOf="@+id/img3" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="60,000원"
android:textColor="@color/black"
android:textStyle="bold"
android:layout_marginLeft="12dp"
android:layout_marginTop="7dp"
app:layout_constraintTop_toBottomOf="@+id/subtext3"
app:layout_constraintStart_toEndOf="@+id/img3" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/lightgray"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/content3"
app:layout_constraintBottom_toTopOf="@+id/content4"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_marginTop="25dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/content3">
<ImageView
android:id="@+id/img4"
android:layout_width="90dp"
android:layout_height="90dp"
android:src="@drawable/img4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/text4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/text4"
android:textSize="18dp"
android:textColor="@color/black"
android:layout_marginLeft="12dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@+id/img4"/>
<TextView
android:id="@+id/subtext4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="구로구 오류제1동 52초 전"
android:textColor="@color/gray"
android:textSize="12dp"
android:layout_marginLeft="12dp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@+id/text4"
app:layout_constraintStart_toEndOf="@+id/img4" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="490,000원"
android:textColor="@color/black"
android:textStyle="bold"
android:layout_marginLeft="12dp"
android:layout_marginTop="7dp"
app:layout_constraintTop_toBottomOf="@+id/subtext4"
app:layout_constraintStart_toEndOf="@+id/img4" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/lightgray"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/content4"
app:layout_constraintBottom_toTopOf="@+id/content5"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/content5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_marginTop="25dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/content4">
<ImageView
android:id="@+id/img5"
android:layout_width="90dp"
android:layout_height="90dp"
android:src="@drawable/img5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/text5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/text5"
android:textSize="18dp"
android:textColor="@color/black"
android:layout_marginLeft="12dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@+id/img5"/>
<TextView
android:id="@+id/subtext5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="중동 광고"
android:textColor="@color/gray"
android:textSize="12dp"
android:layout_marginLeft="12dp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@+id/text5"
app:layout_constraintStart_toEndOf="@+id/img5" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="월급 2,900,000원"
android:textColor="@color/black"
android:textStyle="bold"
android:layout_marginLeft="12dp"
android:layout_marginTop="7dp"
app:layout_constraintTop_toBottomOf="@+id/subtext5"
app:layout_constraintStart_toEndOf="@+id/img5" />
<androidx.appcompat.widget.AppCompatButton
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/shape_button"
android:text="+"
android:textSize="30sp"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/lightgray"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:layout_constraintTop_toBottomOf="@+id/content5"
app:layout_constraintBottom_toTopOf="@+id/footer"/>
<!-- Footer -->
<LinearLayout
android:id="@+id/footer"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="25dp"
android:gravity="center_horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/home" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/article" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/pin" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/chat" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/man" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>