TIL 47일차 (앱개발 숙련 개인 과제 - 레이아웃 구현)

앱개발 숙련 개인 과제

 

레이아웃 구현

 

구현 사항

// 메인 페이지 구현 사항
- RecyclerViewer를 이용해 리스트 화면을 만들어주세요.
- 상단 툴바를 제거하고 풀스크린 화면으로 세팅해주세요. (상태바(시간/배터리 표시하는 최상단바)는 남기고)
- 상품 이미지는 모서리를 라운드 처리해주세요.
- 상품 이름은 최대 두 줄이고, 그래도 넘어가면 뒷 부분에 …으로 처리해주세요.
- 상품 아이템들 사이에 회색 라인을 추가해서 구분해주세요.

// 상세 페이지 구현 사항
하단 가격표시 레이아웃을 제외하고 전체화면은 스크롤이 되어야합니다.

 

상단 툴바 제거

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.AppleMarket" parent="Theme.MaterialComponents.DayNight.NoActionBar"/>
</resources>

res/values/themes/themes.xml에서 앱의 테마를 NoActionBar로 설정한다.

 

<application
    ...
    android:theme="@style/Theme.AppleMarket">

매니패스트 파일에서 앱의 테마를 정의한 테마로 설정한다.

 

 

메인 페이지 레이아웃

 

앱바는 ConstraintLayout으로 구현하고 위쪽으로 8dp 여백을 준다.

앱바 바로 밑에 RecyclerView를 추가해 아이템들을 출력하도록 한다.

 

 

아이템 레이아웃

 

리싸이클러뷰에서 출력될 항목의 양식에 해당하는 레이아웃이다.

 

좌측 ImageView는 CardView로 감싸서 모서리를 둥글게 만들어준다.

상품 이름은 maxLines를 2로 설정하여 최대 두 줄까지 보이게 한다. 

 

우측 하단 뷰들은 LinearLayout으로 감싸준 뒤 배치하였다.

맨 밑에 View를 추가하고 높이는 1dp 색상은 회색으로 설정해 구분선을 추가한다.

 

 

상세 페이지 레이아웃

 

콘텐츠 영역과 유저 정보바 및 하단바는 ConstraintLayout으로 만든다.

 

하단바를 영역을 제외한 나머지 영역을 스크롤 뷰로 감싸 판매상품 내용이

화면을 초과할 경우 스크롤이 가능하도록 만든다.

 

뒤로가기 버튼은 스크롤이 되지 않도록 스크롤 뷰 밖에다 배치시킨다.