[안드로이드 앱 만들기 레이아웃 예제] 2. SNS 화면 만들기

안드로이드 스튜디오 앱 만들기 SNS 화면 레이아웃 예제

Layout을 활용하여 만든 간단한 레이아웃 UI입니다. 구현하려는 앱에 참고해보시기 바랍니다.
레이아웃을 사용 할 줄 안다면 누구나 쉽게 구현 할 수 있습니다.

 

1. 기획

게시물 화면

이번에도 그림판으로 간단하게 SNS 화면의 기획안을 만들었습니다. SNS에서 아이디 검색창과 설정버튼, 사진과 글을 담을 수 있는곳과 하트 표시와 댓글버튼과 댓글 쓰는 공간까지 만들어 보겠습니다.
제대로 된 기획에 대해 배우고 싶다면 이 글을 참고하세요.
[앱 비지니스] 기획의 개요 및 기획서 작성 방법

[앱 비지니스] 기획의 개요 및 기획서 작성 방법

 

2. 구조 분석

어떻게 구현 할 것인지 구조적으로 먼저 생각하고 코드를 짜면 작업시간이 훨씬 빨라집니다.
렐러티브레이아웃과 리니어레이아웃을 섞어서 구현해보겠습니다.

 

3. 프로그래밍

구조 분석을 토대로 적당한 레이아웃을 선택해 뷰를 담아줍니다. 렐러티브레이아웃으로 뷰의 위치를 지정하여 줍니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
        <ImageView
            android:id="@+id/logo"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/logo1"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:hint="친구를 찾아보세요."
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@id/logo"
            android:layout_toLeftOf="@id/setting"
            />
        <ImageButton
            android:id="@+id/setting"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#00000000"
            android:scaleType="fitCenter"
            android:src="@drawable/gear"
            android:layout_alignParentRight="true"
            />
    <ImageView
        android:id="@+id/mainimage"
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:src="@drawable/logo1"
        android:layout_below="@id/logo"
        android:layout_centerHorizontal="true"
        />
    <LinearLayout
        android:id="@+id/function_nav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/mainimage"
        android:orientation="horizontal">
        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#00000000"
            android:scaleType="fitCenter"
            android:src="@drawable/heart"/>
        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#00000000"
            android:scaleType="fitCenter"
            android:src="@drawable/talk"/>
    </LinearLayout>
    <TextView
        android:id="@+id/snsmain"
        android:layout_below="@id/function_nav"
        android:text="오늘은 레이아웃으로 SNS 화면을 만들어보았습니다."
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="#CCCCCC"
        />
    <LinearLayout
        android:layout_below="@+id/snsmain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/logo1"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Codenet"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" : "
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="수고하셨습니다.^^"/>
    </LinearLayout>
</RelativeLayout>

4. 디자인

뷰의 속성에 margin과 gravity를 주어 깔끔하게 디자인을 마무리 해줍니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
        <ImageView
            android:id="@+id/logo"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/logo1"
            android:layout_marginLeft="5dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:hint="친구를 찾아보세요."
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@id/logo"
            android:layout_toLeftOf="@id/setting"
            />
        <ImageButton
            android:id="@+id/setting"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#00000000"
            android:scaleType="fitCenter"
            android:src="@drawable/gear"
            android:layout_alignParentRight="true"
            />
    <ImageView
        android:id="@+id/mainimage"
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:src="@drawable/logo1"
        android:layout_below="@id/logo"
        android:layout_centerHorizontal="true"
        />
    <LinearLayout
        android:id="@+id/function_nav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/mainimage"
        android:orientation="horizontal">
        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#00000000"
            android:scaleType="fitCenter"
            android:src="@drawable/heart"
            android:layout_marginLeft="5dp"/>
        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#00000000"
            android:scaleType="fitCenter"
            android:src="@drawable/talk"/>
    </LinearLayout>
    <TextView
        android:id="@+id/snsmain"
        android:layout_below="@id/function_nav"
        android:text="오늘은 레이아웃으로 SNS 화면을 만들어보았습니다."
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="15dp"
        android:background="#CCCCCC"
        />
    <LinearLayout
        android:layout_below="@+id/snsmain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/logo1"
            android:layout_marginLeft="5dp"
            />
        <TextView
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Codenet"
            />
        <TextView
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" : "
            />
        <TextView
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="수고하셨습니다.^^"/>
    </LinearLayout>
</RelativeLayout>

렐러티브 레이아웃과 리니어 레이아웃으로 SNS화면을 구현해보았습니다. 실제로 SNS를 제작 할 시 자주 바뀌는 이미지나 글들은 리사이클러뷰로 구현을 많이합니다. 게시물 화면 뿐 아니라 개인 프로필화면, 설정화면 등 더 많은 UI를 구현하여 액티비티에서 프로그래밍하여 연결 해주어야 합니다. 이번 게시물은 레이아웃으로 활용을 어떻게 하는지 예시로 참고해주세요.