#16 안드로이드 스튜디오로 안드로이드 앱 만들기 - 브런치(brunch) 앱의 새 글 작성 화면 만들어보기

#11 안드로이드 스튜디오로 안드로이드 앱 만들기 - 다양한 사용자 알림 효과 : 진동과 소리

#12 안드로이드 스튜디오로 안드로이드 앱 만들기 - 다양한 사용자 알림 효과 : 토스트(Toast), 다이얼로그(Dialog)

#13 안드로이드 스튜디오로 안드로이드 앱 만들기 - 사용자 이벤트 처리 : 델리게이션 이벤트 모델(Delegation Event Model)

#14 안드로이드 스튜디오로 안드로이드 앱 만들기 - 사용자 이벤트 처리 : 하이어라키 이벤트 모델(Hierarchy Event Model)

#15 안드로이드 스튜디오로 안드로이드 앱 만들기 - 페이스북 메신저 인트로(Facebook messenget intro) 화면 만들어보기

위와 같은 브런치(brunch)에서 새글을 작성하는 화면을 만들어보자. 페이스북 인트로 화면 만들때와 같이 역시나 그냥 만들면 심심하니까 요구사항을 조금 추가 해보자. 요구사항은 다음의 4가지다.

■ 사용자 인터페이스

레이아웃 XML 파일을 이요하여 작성하며, 상단에 닫기(close) 아이콘, 체크(check) 아이콘을 제공하고, 하단에 이미지 3개를 제공한다. 중간에는 제목, 소제목, 내용을 입력받기 위한 화면을 제공한다.

■ 화면 하단에 3개의 버튼 구성

키보드가 화면에 올라오든 안 안올라오든 하단에 이미지 3개가 보이게 한다.

■ 한 줄, 여러 줄 입력제어

제목과 소제목은 한 줄만 입력 허용해야 하며, 내용은 여러 줄 입력이 가능하게 제공해야 한다.

■ 뒤로가지 버튼 제어

사용자가 안드로이드 기기의 뒤로가기 버튼을 누르면 기본 액티비티를 벗어나는데, 뒤로가기 버튼을 누르면 확인 다이얼로그를 띄운다. 그리고 다이얼로그에서 취소를 누르면 다이얼로그만 닫고, 확인을 누르면 액티비티를 닫게 처리한다.

위 화면을 만들기 위해 필요기술은 다음과 같다. 역시나 기본적인 것들이다

■ 레이아웃 구성

■ EditText의 입력 줄 수 제어

■ 키보드와 상관없이 특정 뷰를 화면 하단에 고정

■ 뒤로가기 버튼 제어

그럼 이제 만들어보자.

최종적으로 우리가 만들 파일들은 위 화면과 같다.

Step 1_ 모듈 생성

"brunch" 라는 이름으로 모듈을 하나 만들자.

Step 2_ ActionBar 제거

AndroidManifest.xml 파일에 아주 간단한 옵션하나 추가로 ActionBar를 제거 할 수 있다. android:theme="@style/Theme.AppCompat.Light.NoActionBar" 추가해보자.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.brunch">
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity" android:theme="@style/Theme.AppCompat.Light.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Step 3_ 이미지 리소스(Image resource) 준비

위와 같이 이미지 리소스를 준비한다.

Step 4_ strings.xml 작성

<resources>
    <string name="app_name">brunch</string>
    <string name="activityName">글쓰기</string>
    <string name="title">제목</string>
    <string name="subtitle">소제목</string>
    <string name="content">내용을 입력하세요</string>
</resources>
 

activity_main.xml 파일 작성을 위해 strings.xml 리소스를 준비한다.

Step 5_ activity_main.xml 작성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="15dp">
 
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
 
            <RelativeLayout
                android:id="@+id/re1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
 
                <ImageView
                    android:id="@+id/close"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:maxWidth="30dp"
                    android:maxHeight="30dp"
                    android:adjustViewBounds="true"
                    android:src="@drawable/icon_close"
                    android:layout_alignParentLeft="true"/>
 
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/activityName"
                    android:layout_centerInParent="true"
                    android:textSize="20sp"/>
 
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:maxWidth="30dp"
                    android:maxHeight="30dp"
                    android:adjustViewBounds="true"
                    android:src="@drawable/icon_ok"
                    android:layout_alignParentRight="true"/>
 
            </RelativeLayout>
 
            <View
                android:id="@+id/bodyline1"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginTop="8dp"
                android:background="#d3d0d0"/>
 
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1">
                <EditText
                    android:id="@+id/title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/title"
                    android:inputType="text"
                    android:background="@android:color/transparent"
                    android:layout_marginTop="8dp"/>
 
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:maxWidth="30dp"
                    android:maxHeight="30dp"
                    android:src="@drawable/icon_layer"
                    android:layout_marginTop="8dp"
                    android:layout_alignParentRight="true"/>
 
                <View
                    android:id="@+id/bodyline2"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="8dp"
                    android:background="#d3d0d0"
                    android:layout_below="@+id/title"/>
 
                <EditText
                    android:id="@+id/subtitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/subtitle"
                    android:inputType="text"
                    android:background="@android:color/transparent"
                    android:layout_marginTop="8dp"
                    android:layout_below="@+id/bodyline2"/>
 
                <View
                    android:id="@+id/bodyline3"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="8dp"
                    android:background="#d3d0d0"
                    android:layout_below="@+id/subtitle"/>
 
                <EditText
                    android:id="@+id/content"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="top"
                    android:inputType="textMultiLine"
                    android:hint="@string/content"
                    android:background="@android:color/transparent"
                    android:layout_marginTop="8dp"
                    android:layout_below="@id/bodyline3"/>
 
 
            </RelativeLayout>
 
        </LinearLayout>
 
    </ScrollView>
 
 
 
    <View
        android:id="@+id/line1"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="8dp"
        android:background="#d3d0d0"/>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal">
 
        <ImageView
            android:id="@+id/photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:maxWidth="30dp"
            android:maxHeight="30dp"
            android:src="@drawable/icon_photo"/>
 
        <ImageView
            android:id="@+id/color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:maxWidth="30dp"
            android:maxHeight="30dp"
            android:src="@drawable/icon_color"
            android:layout_marginLeft="16dp"/>
 
        <ImageView
            android:id="@+id/align"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:maxWidth="30dp"
            android:maxHeight="30dp"
            android:src="@drawable/icon_align"
            android:layout_marginLeft="16dp"/>
 
    </LinearLayout>
 
</LinearLayout>
 

Step 6_ MainActivity.java 작성

package com.example.brunch;
 
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    AlertDialog alertDialog;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
 
    @Override
    public void onBackPressed() {
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("작성중인 내용을 저장하지 않고 나가시겠습니까?");
        builder.setPositiveButton("확인", dialogListener);
        builder.setNegativeButton("취소", null);
        alertDialog = builder.create();
        alertDialog.show();
    }
 
    DialogInterface.OnClickListener dialogListener = new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            finish();
        }
    };
 
}

Step 7_ 완성