1. Create Project Sunshine

android>Developing Android Apps

Android ?

Android

안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다. 안드로이드는 개발자들이 자바 언어로 응용 프로그램을 작성할 수 있게 하였으며, 컴파일된 바이트코드를 구동할 수 있는 런타임 라이브러리를 제공한다. 또한 안드로이드 소프트웨어 개발 키트(SDK)를 통해 응용 프로그램을 개발하기 위해 필요한 각종 도구들과 API를 제공한다.

안드로이드는 리눅스 커널 위에서 동작하며, 다양한 안드로이드 시스템 구성 요소에서 사용되는 C/C++ 라이브러리들을 포함하고 있다. 안드로이드는 기존의 자바 가상 머신과는 다른 가상 머신인 달빅 가상 머신을 통해 자바로 작성된 응용 프로그램을 별도의 프로세스에서 실행하는 구조로 되어 있다.

2005년에 안드로이드 사를 구글에서 인수한 후 2007년 11월에 안드로이드 플랫폼을 휴대용 장치 운영 체제로서 무료 공개한다고 발표한 후 48개의 하드웨어, 소프트웨어, 통신 회사가 모여 만든 오픈 핸드셋 얼라이언스(Open Handset Aliance, OHA)에서 공개 표준을 위해 개발하고 있다. 구글은 안드로이드의 모든 소스 코드를 오픈 소스 라이선스인 아파치 v2 라이선스로 배포하고 있어 기업이나 사용자는 각자 안드로이드 프로그램을 독자적으로 개발을 해서 탑재할 수 있다. 또한 응용 프로그램을 사고 팔 수 있는 구글 플레이를 제공하고 있으며, 이와 동시에 각 제조사 혹은 통신사별 응용 프로그램 마켓이 함께 운영되고 있다. 구글 플레이에서는 유료 및 무료 응용 프로그램이 제공되고 있다.
– Wikipedia

목표

우리는 이런 앱을 만들어 보자!!
어렵지만 하나하나 시작해 봅시다

설치

  1. JAVA
    http://www.oracle.com/technetwork/java/javase/downloads/index.html
    OS에 맞게 JAVA를 설치 하고 환경 변수를 세팅 한다
  2. Android Studio
    https://developer.android.com/sdk/index.html
    다운로드 받고 설치를 하고 실행을 합니다

설치가 완료 되었으면 이제 프로젝트를 만들고 본격적으로 Android App 만들기 시작합니다

Start a new Android Studio Project 버튼을 클릭합니다

Android Version

Android 전체 기기의 버전을 확인해 봅니다
아직 대다수의 기기에서는 Jelly Bean(API 16) 이상을 많이 사용하고 있습니다

  • Min SDK Version : 우리가 지원할 최소 버전입니다. 최소 버전이 많이 내려가면 좋지만, 사용자에게 UI/UX 적으로 제공하기 힘듭니다. 개인적인 생각으로는 Min SDK Version은 API16을 추천해 드립니다
  • Target SDK Version : 우리가 중점적으로 생각해야 할 버전입니다. Android Application 개발자라면 최신 버전을 이용해서 최대한 지원하는 걸 추천합니다. 항상 최신 버전에서 실행이 가능하도록 준비해 주세요

Android Page

여러 가지 다양한 화면 선택이 존재합니다. 우리는 여기서 다양한 서비스 형태에 따라서 선택을 하고 진행을 하면 됩니다.

우선 Basic Activity를 선택하고 진행합니다

나중에 Android Page Layout에 관해서 이야기 하겠습니다

Android Page Name

  • Activity Name : 기본적으로 앱을 키고 활동을 할 수 있는 페이지를 MainActivity라고 합니다. 처음 Android App을 만든다면 그냥 진행합니다
  • Layout Name : Activity에서도 화면을 구성하지만 생각보다 어렵습니다. 그러므로 XML을 이용해서 쉽게 화면을 구성합니다. Activity 이름과 같이 진행합니다
  • Title : 현재 Activity에서 표시할 이름을 정합니다
  • Menu Resource Name : Activity마다 Menu를 추가할 수 있습니다. Menu마다 이름을 정하여서 구분하도록 합니다.
  • Use a Fragment : Fragment를 사용하도록 합니다

각 항목에 알맞은 내용을 넣고 Finish를 누르고 진행을 합니다.

Android Studio

기본적으로 다 처리하고 나면 안드로이드 스튜디오 상에서 Gradle를 이용해서 빌드 하기 때문에 대기를 해야 합니다

Android Studio

각 폴더에 관해서 설명하겠습니다

  • App : 앱에 관련된 모든 것들이 있습니다
    • mainfests : Android 설정에 관한 파일인 manifest.xml 이 있습니다. 나올 때 마다 설명하겠습니다
    • java : 각 Activity에 대한 소스 파일들이 있습니다. 그러므로 이름을 잘 정해야 합니다. 이상하게 정하면 힘들어요
    • res : 각종 리소스 파일들이 있습니다. 리소스라고 하면 화면구성(layout), 이미지(drawable), 메뉴(menu), 특정값들(values), 정해진 이미지(mipmap)로 구성되어있습니다. 주의할 점은 모든 파일 이름은 소문자이고 공백이 없어야 합니다
  • Gradle Scripts : Gradle은 빌드 툴 입니다. 빌드 과정을 자동으로 처리 하기 위해서 해주는 거이기 때문에 건드리지 않도록 합니다. (필요한 상황이 생길 때는 지금 없어요…)
    • build.gradle(Project: ProjectName) : 라이브러리등을 추가 하기 위해서는 여기를 수정합니다
    • build.gradle(Module: App) : Android Version등과 같이 안드로이드 App을 빌드하기 위해서 하는 설정값들

한번 빌드를 시킨 후 실행합니다

Hello World가 보이면 성공입니다

Android Layout

이번 강의에서 우리가 할 모습입니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>
1
2
3
public class MainActivity extends AppCompatActivity {
	...
}

App이 시작되면 제일 먼저 MainActivity를 찾게 됩니다

1
2
3
4
5
6
7
8
9
10
11
public class MainActivityFragment extends Fragment {

    public MainActivityFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_main, container, false);
    }
}

MainActivityFragment는 프로젝트를 만들 때 사용하는 템플릿에 의해 생성됩니다

Fragment라는 것은 Activity 안의 모듈형 컨테이너입니다

1
inflater.inflate(R.layout.fragment_main, container, false);

fragment_main을 이용해서 Fragment의 Layout을 구성합니다

이제부터 화면을 구성해 봅시다
UI를 수정하기 위해서는 fragment_main.xml을 수정해야 합니다
Ctrl 키를 누르고 R.layout.fragment_main에서 fragment_main을 클릭하여도 되고
아니면 app - res - layout - fragment_main.xml파일을 클릭하여서 열면 됩니다

기본적으로 파일을 열면 xml 형식으로 수정할 수 있습니다
xml이 익숙하지 않으신 분한테는 어렵습니다
밑에 잘 보면 Design 있습니다
우리한테는 마우스가 있습니다!!!
조금 더 쉽게 할 수 있습니다

쉽게 할 수 있도록 GUI 도구로 잘 되어있습니다

한번 마우스 클릭을 이용해서 여러 가지를 해보세요

도구에 익숙해져야지 우리가 하고 싶은 걸 할 수 있습니다!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivityFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

fragment_main.xml의 소스입니다
RelativeLayout을 적용하고 padding을 적용했네요
뷰젯으로는 TextView를 이용하였네요

ListView

우리는 이런 모습을 만들어야 합니다
이런 뷰젯은 존재하지 않습니다
내가 만들어야 합니다

그림처럼 하는 것을 ListView라고 합니다

우리 천천히 해봅시다

Design에서 비교적 정교한 레이아웃을 만들 수는 있습니다

이 정도는 다들 만들 수 있잖아요??

우리한테는 마우스가 있잖아요!!

우리는 이제 ListView에 대해서 작업을 할게요

천천히 따라오세요

list_item_forecast.xml 파일을 만들었나요?

list_item_forecast.xml 파일에 사진과 동일한 레이아웃을 만들어 봅시다

손가락으로 터치했을 때 어느 정도 여유도 있어야 하고
글자도 이쁘게 가운데 정렬했으면 좋겠고
여기 보이는 TextView에 이름도 정했으면 좋겠고
하나하나씩 해봅시다

1
2
3
android:id  		-> 이름을 정합니다.
android:minHeight 	-> 최소 높이를 정합니다.
android:gravity 	-> 정렬을 합니다

이렇게 하면 각 항목에 대해서 만들수가 있습니다

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_item_forecast_textview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:minHeight="?android:attr/listPreferredItemHeight" />

Android Layout Design

안드로이드는 다양한 화면 다양한 기기에서 제공합니다
어떤 기기든 어떤 화면이든 같은 앱을 보여주는 것은 중요합니다
이것을 Responsive Design이라 합니다
한국어로 쉽게 설명하면 반응형 디자인으로 불립니다
우리 네이버를 컴퓨터에서 들어가나 핸드폰으로 들어가나 태블릿으로 들어가나 똑같은 네이버잖아요??
그걸 의미합니다!!

안드로이드는 많은 Layout을 제공합니다

  • FrameLayout
  • LinearLayout
  • TableLayout
  • GridLayout
  • RelativeLayout

대표적으로 사용되는 것들입니다.
최근 버전에는 ConstraintLayout 도 있습니다.

FrameLayout

FrameLayout

FrameLayout은 언제 사용할까요?

우리가 보려는 항목이 하나만 있으면 사용하는 가장 단순한 레이아웃입니다
전체 영역을 채우는 ListView와 같은 경우 해당합니다

LinearLayout

LinearLayout

LinearLayout은 언제 사용할까요?

View들을 수평 또는 수직으로 차례로 쌓을 때 적합합니다
또한, 화면을 비율로 나누는 방법이다

RelativeLayout

RelativeLayout

RelativeLayout은 언제 사용할까요?

앞에 설명한 2개보다 복잡합니다. 하지만 효과적입니다
정말 많은 View를 각각의 상위 항목을 정하고 상대적 레이아웃 또는 수많은 형제의 View를 잡고 위치를 정할 수 있습니다
정말 복잡하고 어려운 Layout 구성을 할 때 유용합니다

해상도

  • dpi (Dot Per Inch)
    • 1인치당 픽셀 수. 물리적 단위인 1 inch (=2.54cm)에 몇 픽셀이 들어가는가를 나타내는 단위다
      • Low density (120dpi) : ldpi
      • Medium density (160dpi) : mdpi
      • High density (240dpi) : hdpi
      • Extra High density (320dpi) : xdpi
  • px
    • 스크린의 실제 픽셀 단위를 사용하며, 실제 크기나 밀도와 상관이 없다. mdpi(160dip)에서 1dp = 1px 이다
      • ldpi : 1dp = 0.75px
      • mdpi : 1dp = 1px
      • hdpi : 1dp = 1.5px
      • xdpi : 1dp = 2px;
  • dp 와 dip (Density Independent Pixel)
    • 말 그대로 실제 픽셀에 독립적인 단위로 안드로이드 폰의 다양한 해상도를 지원하기 위해 만든 단위이다. 큰 화면이든 작은 화면이든 같은 크기로 나타나게 되어있다
    • 즉, 화면이 작은 핸드폰에서 10원짜리만 하게 나타난다면 화면이 큰 핸드폰에서도 10원짜리 만하게 나타나게 되어있다. dp(dip)와 px간의 변환을 하는 방법은 아래와 같다 참고
  • dp(dip)와 px간의 변환
    • px = dp * (160 / dpi) = dp * density
    • dp = px / (160 / dpi) = px / density
    • 여기서 density는 density = dpi / 160 계산 한다
      • ldpi : density = 0.75
      • mdpi : density = 1
      • hdpi : density = 1.5
      • xdpi : density = 2
  • sp
    • dp와 비슷하지만, 사용자가 선택한 글꼴 크기에 의해 크기가 조절된다

Q. 만약 우리한테 총 데이터가 50개가 있다고 가정했을 때
화면에 10개를 보여줄 수 있다고 하면
우리는 몇 개의 View를 만들어서 보여줘야 할까요?

A. 12개입니다. 10개를 보여줄 수 있다고 했을 때 앞뒤로 한 개씩 추가로 예비로 보여줄 준비를 하고 있어야 끊김이 없고 메모리 낭비도 없습니다

![](/img/adnroid-developing/1/listview recycle.png)

그림과 같이 우리는 View 를 재사용하면서 List 항목을 보여줘야 메모리 사용도 적고 부드럽게 동작할 수 있습니다.

이런 재활용 작업은 AdapterView의 하위 클래스인 ListView, GridView에서도 같습니다.

ListView를 적용해보도록 하겠습니다

어떤 파일을 열어야 할까요?

fragment_main.xml 입니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivityFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

기존의 소스입니다. 불필요한 내용이 너무 많아요
우리는 수정해서 우리가 원하는 형태로 바꾸겠습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivityFragment">

    <ListView
        android:id="@+id/listview_forecast"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

이 정도면 우리가 이번 강의에서 하려는 UI는 어느 정도 완성되었습니다

그러나!!!!!

데이터는??

layout에서 ListView와 같은 AdapterView를 사용할 때 데이터가 없으면 아무것도 표시가 안됩니다
이제부터 보여주기 위한 데이터 Fake Data를 넣겠습니다
이거는 그냥 보여주기 위한 용입니다!!!! 실제 데이터 아닙니다

MainActivityFragment.java 파일을 열어보세요

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class MainActivityFragment extends Fragment {

    public MainActivityFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        String[] data = {
                "Mon 6/23 - Sunny - 31/17",
                "Tue 6/24 - Foggy - 21/8",
                "Wed 6/25 - Cloudy - 22/17",
                "Thurs 6/26 - Rainy - 18/11",
                "Fri 6/27 - Foggy - 21/10",
                "Sat 6/28 - TRAPPED IN WEATHERSTATION - 23/18",
                "Sun 6/29 - Sunny - 20/7"
        };
        List<String> weekForecast = new ArrayList<String>(Arrays.asList(data));

        return inflater.inflate(R.layout.fragment_main, container, false);
    }
}

다음과 같이 코드를 추가하였나요?
이제 실제로 돌아가기 위해서 코드를 추가하겠습니다

Adapter

우리가 앞으로 많이 접하게 되는 Adapters에 대해서 이야기해 봅시다

우리한테 다음 그림과 같은 데이터가 있다고 해봅시다

이 데이터를 Adapter로 만들어지는 과정을 볼게요

Raw Data는 우리가 실제로 표현할 데이터를 의미합니다
Raw Data를 실제 코드에서 저장을 해야 합니다
그리고 각각의 데이터를 표현해야 합니다
여러 개의 Layout 파일들이 필요하겠네요

만약 데이터가 100000000개이면….?
이것들에 대해서 Layout파일들을 하나하나 다 만들면…….

정말 힘든 일이 생깁니다.

그래서 우리는 Adapter를 이용해서 표현합니다
이것을 AdapterView라고 합니다

AdapaterView는 실제 동작을 볼게요

처음에 개수를 물어봅니다.
이건 총 몇 개의 데이터야?
위에서는 3개의 데이터를 가지고만 합니다

그러면 자동으로 다음을 진행합니다


그러면 최종적으로

우리는 이것을 실제 코드로 표현합니다
기본적으로 AdapterView에 표현하기 위해서 Adapter에 표현합니다

우리는 ArrayAdapter로 표현하겠습니다

4개의 매개변수를 갖고 시작을 합니다 (생성자)

  • context : App 환경에 대한 총체적 정보를 포함합니다 -> getActivity()
  • ID of list item layout : 우리가 데이터를 표현할 Layout -> R.layout.list_item_forecast
  • ID of textView : 데이터를 표현할 곳의 이름 -> R.id.list_item_forecast_textview
  • list of data : 보여줄 데이터를 의미 -> weekForecast

다음 코드를 추가 합시다

1
2
3
4
5
6
7
8
9
10
11
12
13
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

// 생략

    ArrayAdapter<String> mForecastAdapter = new ArrayAdapter<String>(
                    getActivity(),
                    R.layout.list_item_forecast,
                    R.id.list_item_forecast_textview,
                    weekForecast
    );
}

이렇게 하면 Adapter로 데이터를 표현할 준비를 한 것입니다

Layout에 있는 ListView에 우리의 데이터를 보여 달라고 요청만 하면 됩니다

ListView는 어떻게 찾을까요??

http://developer.android.com/reference/android/view/View.html#IDs

여기에서 추가 적으로 공부해보세요

이제 ListView를 찾고 ListView에 ArrayAdapter(mForecastAdapter)를 붙이세요

1
2
3
4
5
6
7
8
9
10
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
// 생략
    View rootView = inflater.inflate(R.layout.fragment_main, container, false);
    ListView listView = (ListView)rootView.findViewById(R.id.listview_forecast);
    listView.setAdapter(mForecastAdapter);

    return rootView;
}

rootView를 통해서 찾을 기점을 잡고
그 기점을 통해서 ListView를 찾고
찾은 ListView를 통해서 Adapter를 설정합니다

이제 빌드를 하고 실행을 해보세요

복습은 필수

  • Android Studio
  • SDK - Target and Minimum
  • Emulators vs. Real Devices
  • Gradle
  • Application
  • Activity
  • Fragment
  • Views and ViewGroups
  • Views and XML layouts
  • ListView
  • Adapter
udacityandroid

Related posts

Developing Android Apps
2. Connect Sunshine to the Cloud
5. Content Providers