본 캠프 34일 차

개인 과제 시작

UI만들기 (액티비티 디자인 하기)

• 더미데이터들 집어넣기
• recycler viewer로 리스트 화면 만들기
• 상품 이미지 모서리를 라운드(둥글게) 처리
• 상품 이름은 최대 두줄, 그 이후는 ...으로 처리
• 하나의 리스트 마다 구분 선 집어 넣기

메인 xml에서는 리사이클러뷰 하나만 넣어두고, 다시 따로 리사이클러 xml을 만들어서 우선 계속 재사용 할 칸을 만들어 줬다. 

이미지 모서리를 둥글게 처리하는건 카드뷰라는 뷰 안에 이미지뷰를 꽉 차게 넣어주고  카드뷰에 레디우스를 줘서 모서리를 깎았다.

 

문제 발생

분명 xml로 만들 때는 넘겨서 만들지도 않았는데 에뮬레이터에는 글씨가 에뮬레이터 바깥으로 뚫고 나가서 무슨 내용이 있는지 알 수 없는 상황이 되어 버렸다.

그래서 이것을 해결 하고자 오른쪽 마진(marginend)을 10dp정도 줘서 끝에서 좀 떨어지게 하려고 했지만 그래도 결과는 같았다. uniform 이라는 걸 써봤는데 이것도 요지부동...padding을 바탕인 레이아웃에 줘서 안쪽으로 들이밀게 하려 했지만 그래도 실패...

 

해결

width에 0dp를 주고 app:layout_constraintEnd_toEndOf="parent" 이렇게 오른쪽 끝으로 붙이는 코드를 넣으니 그대로 쭉 늘어나서 위 사진과 같이 텍스트 넓이가 넓어졌다.

이렇게 하고 실행을 시켜보니 이제 정상적으로 글씨가 짤리지 않고 에뮬레이터 안에 모두 들어왔다.

이제 좀 편안하다.

이제 디테일 페이지도 만들어보았다.

글씨 자체에 밑줄이 나오게 쓰는 기능은 파렛트에서 못 찾았다. 내가 못찾은걸 수도 있지만 일단 찾아보니 그냥 스트링 넣는 곳에 <u> 내용 </u> 이렇게 감싸주면 되는 거였다.

이제 또 만난 난관은 리스트 사이에 넣는 가로 구분선과, 현재 사진에 못 넣은 세로 구분선이다.

일단 가로로 넣는 구분선은 테마에 style로 

<style name="Divider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1dp</item>
    <item name="android:background">?android:attr/listDivider</item>
</style>

이렇게 Divider 라는 걸 만들어 주고 

<View
    android:id="@+id/view_line"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="1dp"
    app:layout_constraintTop_toBottomOf="@id/recycler_main"
    style="@style/Divider"/>

xml에 그냥 뷰를 만들어서 넣어야 할 곳 바로 밑에 넣었다. 이제 이렇게 가로 선은 들어갔는데 세로선...이게 문제다...

일단 오늘은 여기까지 하고 내일 세로 구분선과 다이얼로그, 알림까지 최소한 만들어 봐야겠다.