스팀 앱 - 개발 완료: 프로필 화면 구성 1차 완료
개발 완료: 프로필 화면 구성 1차 완료
2024. 01. 14 (화) | Written by @dorian-mobileapp
시작하며...
프로필 화면을 만들고 추가로 수정도 했죠. 이것만 붙잡고 있을 수는 없으니 1차로 마무리를 하려 합니다.
스크린샷
화면 구성
한 화면에 모든 뷰들을 다 정의하는 것은 좋은 방법이 아니라고 생각합니다. 저는 다음과 같이 크게 두 영역으로 구성했습니다.
- 프로필 내용
- 프로필 메뉴
프로필 내용
프로필 내용에서 보여줄 사항들은 다음과 같습니다.
- 스팀잇 계정
- 이름
- 팔로우/팔로워 개수
- About
- 위치
- 웹 링크
<?xml version="1.0" encoding="utf-8"?>
(html comment removed: To show a profile of a steemit user )
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layout_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_light"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/image_profile_background"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="@id/text_web_link" />
(html comment removed: To show the profile image )
<ImageView
android:id="@+id/image_profile"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="30dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="@mipmap/ic_launcher" />
(html comment removed: To show the account )
<TextView
android:id="@+id/text_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/image_profile"
android:layout_marginLeft="20dp"
android:textColor="@color/white"
android:textSize="28sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="@id/image_profile"
app:layout_constraintTop_toTopOf="@id/image_profile"
tools:text="\@dorian-lee" />
(html comment removed: To show the name )
<TextView
android:id="@+id/text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text_account"
android:layout_marginLeft="20dp"
android:textColor="@color/white"
android:textSize="28sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="@id/image_profile"
app:layout_constraintBottom_toBottomOf="@id/image_profile"
tools:text="Dorian" />
(html comment removed: To show following and follower counts )
<LinearLayout
android:id="@+id/layout_following_followers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="@id/text_name">
<TextView
android:id="@+id/text_following"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="20sp"
tools:text="XXS Following" />
<TextView
android:id="@+id/text_followers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:textColor="@color/white"
android:textSize="20sp"
tools:text="XXS Followers" />
</LinearLayout>
(html comment removed: To show the about )
<TextView
android:id="@+id/text_about"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:gravity="center"
android:textColor="@color/white"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="@id/layout_following_followers"
tools:text="Android application developer" />
(html comment removed: To show the location )
<TextView
android:id="@+id/text_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:gravity="center"
android:textColor="@color/white"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="@id/text_about"
tools:text="📍 Seoul, Korea" />
(html comment removed: To show the web link )
<TextView
android:id="@+id/text_web_link"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/text_about"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:gravity="center"
android:autoLink="web"
android:paddingBottom="30dp"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="@id/text_location"
tools:text="🔗 www.google.com" />
</androidx.constraintlayout.widget.ConstraintLayout>
프로필 메뉴
프로필 메뉴에서는 6가지 항목들로 구성되어 있습니다. 그리고 각 메뉴 버튼은 별로 레이아웃으로 정의했습니다.
- Detais: 계정 세부 내용
- Blog: 이 계정이 작성한 글들(커뮤니티에 속하지 않음) 그리고 리스팀한 글들
- Posts: 이 계정이 작성한 글들
- Comments: 이 계정이 작성한 댓글들
- Replies: 이 계정이 받은 댓글들
- History: 계정의 활동 내역
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout_profile_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<GridLayout
android:id="@+id/grid_profile_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="3"
android:rowCount="2"
app:layout_constraintTop_toTopOf="parent">
<include
android:id="@+id/include_menu_item1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
layout="@layout/layout_profile_menu_item"
app:menuName='@{"Details"}' />
<include
layout="@layout/layout_profile_menu_item"
android:id="@+id/include_menu_item2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
app:menuName='@{"Blog"}' />
<include
layout="@layout/layout_profile_menu_item"
android:id="@+id/include_menu_item3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
app:menuName='@{"Posts"}' />
<include
android:id="@+id/include_menu_item4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
layout="@layout/layout_profile_menu_item"
app:menuName='@{"Comments"}' />
<include
layout="@layout/layout_profile_menu_item"
android:id="@+id/include_menu_item5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
app:menuName='@{"Replies"}' />
<include
layout="@layout/layout_profile_menu_item"
android:id="@+id/include_menu_item6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
app:menuName='@{"History"}' />
</GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
프로필 메뉴 버튼
지금은 텍스트만 있지만, 아이콘도 추가할 예정입니다.
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable name="menuName" type="String" />
</data>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/shape_profile_menu_item_bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:gravity="center"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold"
android:text="@{menuName}" />
</RelativeLayout>
</layout>
마치며...
다음 포스트에서는 프로필 화면을 구현한 액티비티를 코드로 보여드릴 예정입니다.
Layout provided by Steemit Enhancer hommage by ayogom
Posted through the ECblog app (https://blog.etain.club)
[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.
안녕하세요.
SteemitKorea팀에서 제공하는 'steemit-enhancer'를 사용해 주셔서 감사합니다. 개선 사항이 있으면 언제나 저에게 연락을 주시면 되고, 관심이 있으신 분들은 https://cafe.naver.com/steemitkorea/425 에서 받아보실 수 있습니다. 사용시 @응원해 가 포함이 되며, 악용시에는 모든 서비스에서 제외될 수 있음을 알려드립니다.
안녕하세요.
이 글은 SteemitKorea팀(@ayogom)님께서 저자이신 @dorian-mobileapp님을 응원하는 글입니다.
소정의 보팅을 해드렸습니다 ^^ 항상 좋은글 부탁드립니다
SteemitKorea팀에서는 보다 즐거운 steemit 생활을 위해 노력하고 있습니다.
이 글은 다음날 다시 한번 포스팅을 통해 소개 될 예정입니다. 감사합니다!
Thank you, friend!
I'm @steem.history, who is steem witness.
Thank you for witnessvoting for me.
please click it!
(Go to https://steemit.com/~witnesses and type fbslo at the bottom of the page)
The weight is reduced because of the lack of Voting Power. If you vote for me as a witness, you can get my little vote.
Upvoted! Thank you for supporting witness @jswit.
와우, 1차로 완성하신 것 축하드립니다~
갈수록 발전하는 스팀앱 기원합니다~~