[Android] Sunflower 클론코딩 (22.06.12)

Garden Fragment에 내가 추가한 식물들을 관리하는 화면을 구성하자.

// fragment_garden.xml

<layout>
	<FrameLayout>
    
    	</RecyclerView>
    
    	<LinearLayout>
        	</TextView>
            </Button>
        </LinearLayout>
    </FrameLayout>
</layout>

RecyclerView와 비어있을 때 표현할 TextView와 Button의 부모인 LinearLayout을 선언한다. 뷰를 겹쳐야하기 때문에 FrameLayout을 사용했다.

Empty Garden

<com.google.android.material.button.MaterialButton
    android:id="@+id/add_plant"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/add_plant"
    android:textColor="?attr/colorPrimary"
    app:backgroundTint="?attr/colorOnPrimary"
    app:shapeAppearance="@style/ShapeAppearance.Sunflower.Button.Add"/>

MaterialButton으로 식물을 추가할 수 있는 버튼을 구성했다. 따로 추가를 할 수 있는 버튼은 아니고 그냥 PlantListFragment로 이동한다.
color를 theme.xml 에 선언되어 있는 colorPrimary 와 colorOnPrimary 로 색상을 입혀줬다.

// shape.xml

<style name="ShapeAppearance.Sunflower.Button.Add" parent="ShapeAppearance.MaterialComponents">
    <item name="cornerFamily">rounded</item>

    <item name="cornerSizeTopLeft">0dp</item>
    <item name="cornerSizeTopRight">@dimen/button_corner_radius</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">@dimen/button_corner_radius</item>
</style>

<!-- Add plant button -->
<dimen name="button_corner_radius">12dp</dimen>

Button의 style을 정의해준다.
두 모서리가 둥근 형태로 정의된 버튼이다.

RecyclerView

PlantListFragment에 있는 item과 GardenFragment에 있는 item의 layout이 다르기 때문에 새로운 list item layout을 생성한다.

<com.jaemin.sunflower_clone.views.MaskedCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/card_side_margin"
    android:layout_marginEnd="@dimen/card_side_margin"
    android:layout_marginBottom="@dimen/card_bottom_margin"
    app:cardElevation="@dimen/card_elevation"
    app:cardPreventCornerOverlap="false"
    app:shapeAppearanceOverlay="@style/ShapeAppearance.Sunflower.Card">

app:cardPreventCornerOverlap="false" : 카드 뷰 내용과 모서리가 겹치지 않도록 설정