투폭네

※세줄요약※

그냥 그렇다. 막좋지도않고 막 안좋지도않고그런느낌

맛도 그냥 평 ㅡ 범한 수준. 가격대도 뭐 평범하니까

굳이 찾아가서 먹을필요는? 없어보인다.

재방문율 20%

출처:http://www.edwith.org/boostcourse-android/project/5/content/4#summary

첫 번째 단계에서 만들 영화상세 화면이에요.

위쪽에 작은 영화 포스터가 보이고

오른쪽에 영화명, 관람등급 개봉일, 장르, 상영시간이 보이죠.

좋아요, 싫어요 아이콘과

좋아요 숫자, 싫어요 숫자도 보이네요.

그 아래에 보이는 것이 예매율, 평점 누적 관객 수에 대한 정보인데요.

가로방향으로 공간 분할을 하고 있죠.

가운데에는 평점을 보여주고 있는데

레이팅바라고 하는 것을 이용해서 보여주고 있어요.

그리고 평점 오른쪽에 숫자가 있고요.

화면을 아래쪽으로 좀 더 내려보면 줄거리, 감독, 배우에 대한 설명이 나와요.

제목 글자는 진하게 Bold 체로 보여주고 있네요.

가장 아래쪽에는 한줄평을 위해서 공간을 띄어놓으셔야 해요.

이 공간에는 두 번째 단계에서 한줄평 목록을 추가할 거예요.

지금은 공간만 띄어 놓으시면 돼요.

한줄평 작성하기와 모두 보기를 위한 버튼도 보이죠.

마지막 줄에는 SNS 아이콘 그리고 예매 버튼 같은 것들을 보실 수 있어요.

단일 레이아웃

1) 영화 상세 정보를 표시하기 위한 화면 레이아웃을 만듭니다.

• 화면 레이아웃 구성은 아래 그림을 참조하세요.

2) 화면을 구성하기 위해서는 레이아웃과 위젯을 사용합니다. 종류는 아래와 같습니다.

• 제약 레이아웃(ConstraintLayout), 리니어 레이아웃(LinearLayout), 상대 레이아웃(RelativeLayout) 등의 레이아웃
• 이미지뷰(ImageView), 텍스트뷰(TextView) 등의 위젯
• 평점에 사용되는 별의 경우 RatingBar 위젯 사용 (RatingBar 사용방법 : https://developer.android.com/reference/android/widget/RatingBar.html) 

3) 화면에 표시될 내용은 다음과 같습니다.

• 영화 이미지와 영화 간단 정보(관람등급, 이름, 개봉일, 장르, 시간 등)
• 좋아요/싫어요 아이콘과 예매율, 평점, 관객 수
• 줄거리와 감독/출연 배우
• 페이스북 등으로의 링크 이미지, 예매하기 버튼 표시

4) 한 줄 평을 표시할 공간을 만들어둡니다. (한 줄 평 데이터는 표시하지 않습니다.)

출처 : http://www.edwith.org/boostcourse-android/lecture/20421/

쉐이프 드로어블

쉐이프 드로어블은 XML로 도형을 그릴 수 있도록 합니다.

/res/drawable 폴더 안에 XML 파일을 만들고 최상위 태그를 <shape>로 바꾸면 도형 하나를 정의할 수 있습니다.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:width="200dp" android:height="120dp"/>
    <stroke android:width="1dp" android:color="#0000ff"/>
    <solid android:color="#aaddff" />
    <padding android:bottom="1dp" />

</shape>

<shape> 태그에는 shape 속성이 들어갈 수 있으며 rectangle로 설정하면 직사각형, oval로 설정하면 타원, line으로 설정하면 선, ring으로 설정하면 고리 모양으로 그릴 수 있습니다.

도형의 테두리 선에 대해 굵기나 색상을 지정할 수도 있고 도형을 채우는 색상을 지정할 수도 있습니다.

<stroke> 태그는 <shape> 태그 안에 넣어서 테두리 선의 속성을 지정할 수 있으며 width는 선의 굵기, color는 선의 색상을 설정할 때 사용하죠. <solid> 태그는 도형의 안쪽을 채울 때 사용합니다.

배경색으로 그러데이션을 줄 때는 <gradient> 태그를 사용할 수 있습니다.

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:startColor="#7288DB"
        android:centerColor="#3250B4"
        android:endColor="#254095"
        android:angle="90"
        android:centerY="0.5"
        />

    <corners android:radius="2dp" />

</shape>

<shape> 태그 안에 <gradient> 태그를 넣으면 그러데이션이 만들어지게 됩니다.

startColor에는 시작 부분의 색상, centerColor에는 가운데 부분의 색상, endColor에는 끝 부분의 색상을 지정할 수 있습니다.

위쪽에서부터 아래쪽으로 내려오면서 색상이 바뀌는 모양이 되는 거죠.

테두리만 있는 버튼 배경

<layer-list> 태그를 사용하면 여러 그래픽을 하나의 XML 파일에 넣을 수 있습니다.

<layout-list> 태그 안에는 <item> 태그가 여러 개 들어갈 수 있으며 <item> 태그 안에는 <shape> 태그가 들어갈 수 있어 각각을 도형으로 정의할 수 있습니다.

만약 버튼의 테두리만 보이게 하는 드로어블을 만들고 싶다면 도형 안쪽을 투명하게 채우고 테두리 선만 색상을 주면 됩니다. 그런데 이것을 두 개의 그래픽으로 정의할 수도 있습니다.

하나의 그래픽으로 정의할 것인지 아니면 여러 개의 그래픽으로 정의할 것인지는 선택의 문제이지만 여러 개의 그래픽으로 나누면 그래픽을 중첩시켜서 좀 더 예쁜 배경을 만들 수 있습니다.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#00000000" />
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp" 
android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#00000000" />
        </shape>
    </item>

</layer-list>

생각해보기

1. 버튼의 테두리를 쉐이프 드로어블로 만들어 사용하면 포토샵으로 디자인한 버튼 배경 이미지를 사용하는 것에 비해어떤 장점이 생길까요?
   - 당연히 첫번째로는 포토샵에서 만든이미지를 따로 불러와서 쓸 필요가 없다는 것이고, 해상도가 딱맞아서 깨질일이 없다.
2. 여러 종류의 쉐이프 드로어블을 만들고 그 중 하나를 화면에 들어있는 버튼들의 배경으로 설정할 수 있습니다. 이 상태에서 사용자가 여러 종류 중 하나를 선택하면 화면에 있는 모든 버튼의  배경을 바꾸도록 만들 수 있을까요? 이렇게 하면 버튼의 배경 스타일을 한꺼번에 바꾸는 효과가 있을까요?
   - ID로 일일히 찾아서 바꿔주면되는데 좀더 효과적인 방법이있을것같다.