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

2018. 1. 31. 21:45ㆍ안드로이드

반응형

#10 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : ConstraintLayout

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

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

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

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





위와 같이 페이스북 메신저 인트로(Facebook messenget intro) 화면을 만들어보자. 그냥 레이아웃만 만드는건 좀 그러니까 약간의 요구사항을 추가하도록해보자. 요구사항은 다음의 3가지다.


■ 사용자 인터페이스

레이아웃 XML 파일을 이용하여 작성하며, 이미지, 타이틀 문자열, 콘텐츠 문자열, 버튼, 설정 문자열을 출력한다. 버튼을 클릭하면 "OK Button Click !!!!"라는 문자열을 토스트(Toast)로 출력한다.


■ 세로모드, 가로모드 화면 방향 전환에 따른 대응

세로 방향은 모든 내용을 출력하며, 가로 방향에서는 이미지를 출력하지 않는다. 세로 방향과 가로 방향을 위한 각각의 레이아웃 XML 파일을 작서하여 대응한다.


■ 국제화에 대응

한글 버전과 영어 버전에 대응한다.



위 화면을 만들기 위해 필요한 기술로는 다음처럼 몇가지가 있다. 아주 기본적인 것이다

■ 레이아웃 구성

■ 화면 회전에 따른 UI 교체

■ 문자열 리소스 국제화

■ 버튼 클릭 이벤트

■ 토스트 출력







그럼 만들어 보자.

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



Step 1_ 모듈 생성

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



Step 2_ ActionBar 제거

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.facebook_messenger">
 
    <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>
cs




Step 3_ 국제화 대응에 따른 문자열

res/values 폴더를 마우스 오른쪽으로 클릭해서 [New - Values resource file] 메뉴를 선택한다.



File name를 "strings.xml"로 지정하고  Locale 선택 후 ">>"를 누른다.



그리고 Language를 "ko:Korean"으로 선택하고 Specific Region Only를 "KR: South Korea"로 선택한다.




그럼 이렇게 'strings.xml(ko-rKR)' 파일이 만들어져 있을것이다. 그럼 각각에 맞게 아래 처럼 작성하자.


■ strings.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<resources>
    <string name="app_name">Facebook_messenger</string>
    <string name="title">
        Send and receive SMS from Messenger
    </string>
    <string name="content">
        Manage all of your conversations in one place and use stickers and shat heads. SMS conversations are displayed separately in Messenger and are only available via a mobile phone. Standard text message charges will be charged.
    </string>
    <string name="button">
        OK
    </string>
    <string name="setting">
        Setting
    </string>
</resources>
 
cs


■ strings.xml (ko-rKR)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Facebook_messenger</string>
    <string name="title">
        Messenger에서 SMS를 주고 받아 보세요
    </string>
    <string name="content">
        모든 대화를 한곳에서 관리하고 스티커와 챗 헤드 기능도 사용해보세요. SMS 대화가 Messenger에 별도로 표시되며 휴대폰을 통해서만 이용할 수 있습니다. 표준문자 메시지 요금이 청구됩니다.
    </string>
    <string name="button">
        확인
    </string>
    <string name="setting">
        설정
    </string>
</resources>
 
cs



Step 4_ 이미지 파일 넣기

"icon.png" 라는 이름으로 이미지 파일을 하나 넣자.



Step 5_ 가로/세로 방향 전환 대응에 따른 레이아웃 XML 파일 작성

res/layout 폴더를 마우스 오른쪽으로 클릭후에 [New - Layout resource file] 메뉴를 선택한다.



File name을 "activity_main.xml"로 지정하고, Directory name을 "layout-land"로 지정한다 layout-land은 가로 방향 레이아웃을 위한 리소스 폴더명이다.


그럼 이렇게 'activity_main.xml(land)' 라는 레이아웃 XML 파일이 만들어 졌을 것이다. 그럼 각각에 맞게 아래 처럼 작성하자.


■ activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?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:gravity="center"
    android:padding="30dp">
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        android:layout_marginBottom="20dp"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/title"
        android:layout_marginBottom="20dp"
        android:textSize="19sp"
        android:textAlignment="center"
        android:textStyle="bold"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content"
        android:layout_marginBottom="20dp"
        android:textSize="13.5sp"
        android:textAlignment="center"/>
 
    <Button
        android:id="@+id/okBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:padding="10dp"
        android:layout_marginBottom="20dp"
        android:background="#498de1"
        android:textColor="#fff"/>
 
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/setting"/>
 
</LinearLayout>
 
cs


■ activity_main.xml(land)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?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:gravity="center"
    android:padding="30dp">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/title"
        android:layout_marginBottom="20dp"
        android:textSize="19sp"
        android:textAlignment="center"
        android:textStyle="bold"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content"
        android:layout_marginBottom="20dp"
        android:textSize="13.5sp"
        android:textAlignment="center"/>
 
    <Button
        android:id="@+id/okBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:padding="10dp"
        android:layout_marginBottom="20dp"
        android:background="#498de1"
        android:textColor="#fff"/>
 
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/setting"/>
 
</LinearLayout>
 
cs


Step 6_MainActivity.java 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package com.example.facebook_messenger;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
 
    Button okBtn;
    TextView text1;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        okBtn = (Button)findViewById(R.id.okBtn);
        text1 = (TextView)findViewById(R.id.text1);
 
 
        okBtn.setOnClickListener(this);
        text1.setOnClickListener(this);
 
    }
 
    private void showToast(String message){
        Toast toast =  Toast.makeText(this, message, Toast.LENGTH_SHORT);
        toast.show();
    }
 
    @Override
    public void onClick(View view) {
 
        if(view == okBtn){
            showToast("OK Button Click !!!!");
        }else{
            showToast("OK 버튼이 아니고 설정버튼입니다.");
        }
    }
}
 
cs


Step 7_ 완성

완성됐다. 스마트폰 로케일(locale)이 ko이면 문자열이 한국어로 출력 될 것이며, en이면 영어로 출력 될 것이다. 그리고 버튼과 'Setting' 을 클릭하면 토스트(Toast)가 출력 될 것이고, 가로/세로 방향에 따라 레이아웃도 전환 될 것이다.



반응형
저작자표시 비영리 변경금지

'안드로이드' 카테고리의 다른 글

#17 안드로이드 스튜디오로 안드로이드 앱 만들기 - 주소록 앱의 새 연락처 화면 만들어보기  (0) 2018.02.02
#16 안드로이드 스튜디오로 안드로이드 앱 만들기 - 브런치(brunch) 앱의 새 글 작성 화면 만들어보기  (0) 2018.02.01
#14 안드로이드 스튜디오로 안드로이드 앱 만들기 - 사용자 이벤트 처리 : 하이어라키 이벤트 모델(Hierarchy Event Model)  (0) 2018.01.30
#13 안드로이드 스튜디오로 안드로이드 앱 만들기 - 사용자 이벤트 처리 : 델리게이션 이벤트 모델(Delegation Event Model)  (0) 2018.01.30
#12 안드로이드 스튜디오로 안드로이드 앱 만들기 - 다양한 사용자 알림 효과 : 토스트(Toast), 다이얼로그(Dialog)  (0) 2018.01.29

관련글

티스토리툴바