스팀 앱 - 개발 완료: 프로필 화면 구성 1차 완료

dorian-mobileapp (64)in PIRCOIN · 해적 코인 • 6 months ago

개발 완료: 프로필 화면 구성 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)

#kr #krsuccess #kr-dev #android #steemit #ecblog

6 months ago in PIRCOIN · 해적 코인 by dorian-mobileapp (64)

$0.49

Sort:

Trending

[-]

kr-dev.cu1 (48) 6 months ago

[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.

$0.00

[-]

ayogom (78) 6 months ago

안녕하세요.
SteemitKorea팀에서 제공하는 'steemit-enhancer'를 사용해 주셔서 감사합니다. 개선 사항이 있으면 언제나 저에게 연락을 주시면 되고, 관심이 있으신 분들은 https://cafe.naver.com/steemitkorea/425 에서 받아보실 수 있습니다. 사용시 @응원해 가 포함이 되며, 악용시에는 모든 서비스에서 제외될 수 있음을 알려드립니다.

$0.00

[-]

steemit.kor (59) 6 months ago

안녕하세요.
이 글은 SteemitKorea팀(@ayogom)님께서 저자이신 @dorian-mobileapp님을 응원하는 글입니다.
소정의 보팅을 해드렸습니다 ^^ 항상 좋은글 부탁드립니다
SteemitKorea팀에서는 보다 즐거운 steemit 생활을 위해 노력하고 있습니다.
이 글은 다음날 다시 한번 포스팅을 통해 소개 될 예정입니다. 감사합니다!

$0.00

[-]

steem.history (77) 6 months ago

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.