4. 홈화면 UI 구성하기2

이어서 일간/주간 날씨를 표시하는 레이아웃을 구성하려고 한다.

 

• 복잡한 요소는 우선 생략, RecyclerView와 LinearLayout을 활용할 예정
• 모든 레이아웃을 하나의 xml에 작성하는 건 가독성이 떨어지지만 추후에 분리할 예정

 

1. 일간/주간 날씨 레이아웃 추가 (activity_main.xml)

앞서 만든 상단 CardView 레이아웃 아래에 xml을 추가한다.

 <!-- 일간 날씨 (가로 스크롤) -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView_daily"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@id/card_weather"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:orientation="horizontal"
        tools:listitem="@layout/item_daily_weather" /> //아이템 xml 추가 예정

    <!-- 주간 날씨 (수직 리스트) -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView_weekly"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@id/recyclerView_daily"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        tools:listitem="@layout/item_weekly_weather" /> //아이템 xml 추가 예정

리스트가 추가된 모습

 

2. 일간/주간 날씨 item 추가

리스트 요소로 들어갈 item xml을 만든다.

• 일간 아이템 (item_daily_weather.xml): 일간 날씨 xml은 수직 LinearLayout으로 구성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="8dp">

    <!-- 시간 표시 -->
    <TextView
        android:id="@+id/textView_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12 AM"
        android:textSize="14sp"
        android:gravity="center" />

    <!-- 날씨 아이콘 -->
    <View
        android:id="@+id/view_weather_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/sunny"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp" />

    <!-- 온도 표시 -->
    <TextView
        android:id="@+id/textView_temp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="25℃"
        android:textSize="16sp"
        android:textStyle="bold"
        android:gravity="center" />
</LinearLayout>

일간 날씨 아이템 Design

 

• 주간 아이템 (item_weekly_weather.xml): 주간 날씨 xml은 ConstraintLayout으로 구성

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:layout_marginBottom="4dp">

    <!-- 요일 표시 -->
    <TextView
        android:id="@+id/textView_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="월"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <!-- 날씨 아이콘  -->
    <View
        android:id="@+id/view_weather_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="@drawable/sunny"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- 최고 온도 -->
    <TextView
        android:id="@+id/textView_temp_max"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="30℃"
        android:textSize="14sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textView_temp_min"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginEnd="8dp" />

    <!-- 최저 온도 -->
    <TextView
        android:id="@+id/textView_temp_min"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="20℃"
        android:textSize="14sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

주간 날씨 아이템 design

---

3. 적용된 디자인 확인

item이 추가된 모습을 미리 볼 수 있다.

일간 날씨 item은 추후 코드를 작성하여 가로로 배치하도록 수정이 필요하다.