7주차 미션 / 안드로이드 2조 황지영 #10
Conversation
1. make fixed bottom bar 2. make fixed app bar
1. background color change - white
1. fragment_home.xml appbar 하단의 line 제거 2. 앱 바와 상품 목록 사이 알림박스 생성 id = cl_news 3. 고정된 글쓰기 버튼 생성 id = btn_write
There was a problem hiding this comment.
전체적으로 width와 height에 고정값이 많이 사용되었습니다. 아이콘이나 이미지 등을 제외하면 고정값을 사용하는것은 좋지 않은 경우가 많기 때문에 필수적인 상황이 아니라면 match_constraint와 wrap_content를 최대한 활용해서 설계하는것이 일관되고 변화에 유동적으로 대처가능한 UI를 설계하는데 도움이 됩니다!
아마 Figma를 보고 그대로 이식하느라 텍스트뷰 등에 고정값이 많이 사용된것 같습니다. Figma에서 생성해주는 코드는 정확하지 않기 때문에 아이콘 사이즈, margin이나 padding 같은 간격 위주로 주의깊게 봐주시고 레이아웃은 제가 코멘트 달아드린 고려사항 등을 생각해보면서 직접 설계하는 것이 좋습니다!
그 외에 전체적인 레이아웃 구성이나 View 사용에 대해서는 충분히 잘 하고 계신것 같습니다 😁
| <TextView | ||
| android:layout_width="54dp" | ||
| android:layout_height="13dp" | ||
| android:layout_marginLeft="13dp" | ||
| android:layout_marginTop="8dp" | ||
| android:layout_marginRight="13dp" | ||
| android:layout_marginBottom="8dp" | ||
| android:fontFamily="@font/inter_bold" | ||
| android:gravity="center" | ||
| android:text="프로필 보기" | ||
| android:textColor="@color/black" | ||
| android:textSize="11dp" /> |
There was a problem hiding this comment.
보통 TextView의 width와 Height에는 고정값을 두지 않습니다. 그 이유는 위에서 설명했던 sp와 dp의 차이 때문인데, TextSize를 sp로 설정하고 width 와 height를 고정 dp로 설정해버리면 무슨일이 생길까요?
Text의 크기는 개인 설정여부에 따라 더 커질 수 도 있습니다. 만약 고정된 dp 사이즈보다 텍스트가 더 커져버러면 제대로 글씨가 표현되지 않고 잘리게 됩니다. 또한 폰트마다 행간 자간 글자 고유 크기 등이 제각각이기 때문에 TextView의 사각형 영역을 dp로 고정해버리면 Text자체의 속성에 의해 제대로 표시되지 않을 수 있습니다.
따라서 일반적으로 TextView의 width와 height는 wrap_content로 주고 TextSize에 의해 뷰가 동적으로 늘어나거나 줄어들 수 있도록 설계하는 것이 좋습니다.
다만, TextView가 끝없이 늘어나 화면 영역을 벗어나는 것을 방지하기 위해 maxWidth, maxHeight, maxLines와 같은 속성을 활용할 수 있습니다.
| <TextView | ||
| android:layout_width="83dp" | ||
| android:layout_height="22dp" | ||
| android:layout_marginStart="11dp" | ||
| android:fontFamily="@font/inter_bold" | ||
| android:text="황졍민" | ||
| android:textColor="@color/black" | ||
| android:textSize="18dp" | ||
| app:layout_constraintBottom_toBottomOf="parent" | ||
| app:layout_constraintStart_toEndOf="@+id/iv_user_profile_image" | ||
| app:layout_constraintTop_toTopOf="parent"/> | ||
| </androidx.constraintlayout.widget.ConstraintLayout> |
There was a problem hiding this comment.
textSize를 줄 때 보통 sp단위를 사용하지만 dp역시 사용가능합니다. dp와sp의 차이를 알고 계시나요?
sp로 주면 설정에서 텍스트사이즈를 바꿨을 때 전체적으로 텍스트가 커지거나 작아져서 UI가 바뀔 수 있지만 dp를 사용하면 설정에서 텍스트사이즈 변경에 영향을 받지 않습니다.
당근마켓의 경우 실제로 sp를 사용하였기 때문에 환경설정에서 폰트사이즈를 바꾼 다음 다시 접속해보면 UI가 달라진 것을 확인하실 수 있을것입니다.
당근마켓은 중고거래 플랫폼이기에 비교적 사용자들의 나이대가 다양합니다. 따라서 폰트 사이즈가 너무 작게 고정되어버리면 노인분들께 좋지않은 사용자경험을 미칠 수 있기에 개인이 조절가능하도록 sp로 설계하는것이 좋습니다. (물론 폰트사이즈 설정으로 인해 UI가 지나치게 깨지지않도록 디자인 설계하는것이 중요하겠죠?)
반면에 디자인적 요소가 큰 어플리케이션이라서 개인의 설정에 의해 UI가 깨지는 것이 오히려 큰 단점이 될 수 있는 서비스라면 dp를 활용하는것이 더 좋을 수 도 있습니다.
이런 점을 고려하면서 sp를 선택할지, dp를 선택할지 판단해보면 더 좋은 개발자가 될 것 같습니다!
| <ImageView | ||
| android:id="@+id/cl_logo" | ||
| android:layout_width="56dp" | ||
| android:layout_height="14dp" | ||
| android:scaleType="fitXY" | ||
| android:src="@drawable/onboarding_logo" | ||
| app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" | ||
| app:layout_constraintBottom_toBottomOf="parent"/> |
There was a problem hiding this comment.
보통 디자이너님과 협업하게되면 아이콘이나 타이포그래피에 대한 규격을 정해두기 때문에 dimens.xml 파일을 활용하여 아이콘이나 텍스트에 대한 일관된 규격을 유지하는 것이 좋습니다!
string.xml, colors.xml 과 사용방법이 동일한데 이러한 리소스파일을 사용하여 문자열이나 색상값, 규격등을 관리하면 하드코딩을 방지하고 보안이나 유지보수성 증가에 도움이 됩니다.
만약에 디자인에 사용되는 메인 테마 색상을 colors에 정의해두지 않고 모든 xml 파일에 #AC452D 와 같이 하드코딩 해둔 상황에서 디자이너님이 메인 테마 색상을 파란색 계열로 바꾼다고 한다면 어떻게 될까요?
모든 파일을 찾아다니면서 다시 다 바꿔줘야 하기 때문에 매우 귀찮은 작업이 될 것이고 실수로 바꾸지 못한 부분이 생길 수 있습니다.
따라서 colors에 메인테마 색상을 정의해두고 이를 참조해서 렌더링하도록 구현해두면 colors.xml 코드만 바꾸면 모든 프로젝트에 변경사항이 적용되므로 유지보수성에 매우 좋은 방법입니다.
| <androidx.constraintlayout.widget.ConstraintLayout | ||
| android:layout_width="85dp" | ||
| android:layout_height="18dp" | ||
| app:layout_constraintTop_toTopOf="parent" | ||
| app:layout_constraintBottom_toBottomOf="parent" | ||
| app:layout_constraintStart_toStartOf="parent" | ||
| android:layout_marginStart="16dp"> | ||
|
|
||
| <ImageView | ||
| android:id="@+id/iv_like_list" | ||
| android:layout_width="21dp" | ||
| android:layout_height="18dp" | ||
| app:layout_constraintTop_toTopOf="parent" | ||
| app:layout_constraintBottom_toBottomOf="parent" | ||
| app:layout_constraintStart_toStartOf="parent" | ||
| android:src="@drawable/ic_feed_interest_outline_18"/> | ||
|
|
||
| <TextView | ||
| android:layout_width="52dp" | ||
| android:layout_height="17dp" | ||
| android:text="관심목록" | ||
| android:gravity="center" | ||
| android:textColor="@color/black" | ||
| android:fontFamily="@font/inter_semibold" | ||
| android:autoSizeTextType="uniform" | ||
| app:layout_constraintTop_toTopOf="parent" | ||
| app:layout_constraintBottom_toBottomOf="parent" | ||
| app:layout_constraintEnd_toEndOf="parent"/> | ||
| </androidx.constraintlayout.widget.ConstraintLayout> |
There was a problem hiding this comment.
가장 바깥에 감싸고 있는 Layout의 height를 18dp로 주고 내부에 있는 ImageView와 TextView의 height도 18dp, 17dp로 주었습니다.
이렇게 하면 레이아웃이 동적으로 늘어날 수 있는 여지없이 18dp에 갇혀버리게 됩니다. 위에서 말했듯이 텍스트의 크기는 바뀔 수 있는 요소인데 가장 바깥에서 감싸고 있는 레이아웃의 height가 18dp로 제한되어 있기 때문에 텍스트가 늘어나도 전체적인 레이아웃이 그에 맞춰 늘어나지 못하고 내용이 제대로 표시되지 않게 됩니다.
또한 고정텍스트 사이즈가 아닌 Auto사이즈를 사용했는데 이 속성은 제한적인 공간 내에서 텍스트를 가변사이즈로 표시해야 하는 상황에서 사용하면 좋은 옵션입니다. 즉 이 옵션을 사용하게 되면 텍스트의 사이즈가 유동적으로 바뀌기 때문에 일관된 UI를 보여주어야 하는 메뉴 형식의 마이페이지에는 적합하지 않습니다!
따라서 일관된 UI를 작성하기 위해 sp 단위의 텍스트 사이즈를 주고 sp 속성에 의해 바뀔 수 있는 레이아웃을 고려하여 유동적으로 늘어나고 줄어들 수 있도록 설계해보시면 좋을것 같습니다.
| <androidx.constraintlayout.widget.ConstraintLayout | |
| android:layout_width="85dp" | |
| android:layout_height="18dp" | |
| app:layout_constraintTop_toTopOf="parent" | |
| app:layout_constraintBottom_toBottomOf="parent" | |
| app:layout_constraintStart_toStartOf="parent" | |
| android:layout_marginStart="16dp"> | |
| <ImageView | |
| android:id="@+id/iv_like_list" | |
| android:layout_width="21dp" | |
| android:layout_height="18dp" | |
| app:layout_constraintTop_toTopOf="parent" | |
| app:layout_constraintBottom_toBottomOf="parent" | |
| app:layout_constraintStart_toStartOf="parent" | |
| android:src="@drawable/ic_feed_interest_outline_18"/> | |
| <TextView | |
| android:layout_width="52dp" | |
| android:layout_height="17dp" | |
| android:text="관심목록" | |
| android:gravity="center" | |
| android:textColor="@color/black" | |
| android:fontFamily="@font/inter_semibold" | |
| android:autoSizeTextType="uniform" | |
| app:layout_constraintTop_toTopOf="parent" | |
| app:layout_constraintBottom_toBottomOf="parent" | |
| app:layout_constraintEnd_toEndOf="parent"/> | |
| </androidx.constraintlayout.widget.ConstraintLayout> | |
| <androidx.constraintlayout.widget.ConstraintLayout | |
| android:layout_width="wrap_content" | |
| android:layout_height="wrap_content" | |
| app:layout_constraintTop_toTopOf="parent" | |
| app:layout_constraintBottom_toBottomOf="parent" | |
| app:layout_constraintStart_toStartOf="parent" | |
| android:layout_marginStart="16dp"> | |
| <ImageView | |
| android:id="@+id/iv_like_list" | |
| android:layout_width="21dp" | |
| android:layout_height="18dp" | |
| app:layout_constraintTop_toTopOf="parent" | |
| app:layout_constraintBottom_toBottomOf="parent" | |
| app:layout_constraintStart_toStartOf="parent" | |
| android:src="@drawable/ic_feed_interest_outline_18"/> | |
| <TextView | |
| android:layout_width="wrap_content" | |
| android:layout_height="wrap_content" | |
| android:text="관심목록" | |
| android:gravity="center" | |
| android:textColor="@color/black" | |
| android:fontFamily="@font/inter_semibold" | |
| android:textSize="17sp" | |
| app:layout_constraintTop_toTopOf="parent" | |
| app:layout_constraintBottom_toBottomOf="parent" | |
| app:layout_constraintEnd_toEndOf="parent"/> | |
| </androidx.constraintlayout.widget.ConstraintLayout> |
AutoSize가 적합한 경우에 대해 관련 링크 남겨드려요~
https://manorgass.tistory.com/77
|
우와 엄청 자세한 피드백 ,,,, 정말 감동 100만 개 입니닷 ... 🥹🙊 이번 주차 미션 끝나면 천천히 수정해서 올리도록 하겠습니다! 감사합니닷🙏🏻✨ |
…ime 분리하여 데이터 전달(기존에는 하나의 tv에 region과 time 정보 모두 넣었음)
|
늦게 제출해서 죄송합니다!🙏🏻 이번주에 시험이 끝나서 알림 화면에서 활동 알림, 키워드 알림 부분 레이아웃을 제대로 못 만들고 사진으로 채웠습니다. 다음 번에 수정해서 올리겠습니닷 ! |
fragment_mypage.xml 구현