HyWAI is an HTML5 based Hybrid Web Application platform that allows you to author native applications with web technologies and get access to APIs and app stores.
HyWAI leverages web technologies developers already know best... HTML and JavaScript.
HyWAI is an HTML5 based Hybrid Web Application platform that allows you to author native applications with web technologies and get access to APIs and app stores.
HyWAI leverages web technologies developers already know best... HTML and JavaScript.
1. [Live Coding] (1/23 토)
Fast Campus 안드로이드 앱 개발 입문 4기
Live Coding - Camp_WebBrowser
작성자: 하동욱 (https://fb.com/mindwing)
이 강의노트는 https://goo.gl/rxb2JF 에서 보실 수 있습니다.
목차
0) 들어가기에 앞서
1) Android Studio 기동해서 새 프로젝트 만들기
2) 실행해보기
3) Action Bar 숨기기
4) 기본 UI 만들고 이벤트 핸들링 코딩해보기
5) WebView 를 써보자
6) Back, Forward 버튼 붙이기
7) Design Support Library 를 이용하여 Snackbar 써보기
8) github 에서 프로젝트를 clone 하기
● 0) 들어가기에 앞서
○ Live Coding 은 처음부터 앱의 완성까지 직접 코드를 손수 짜보는 과정입니다.
○ Android SDK 는 23 버전을 사용하므로, 반드시 버전을 확인하시기 바랍니다.
3. ● 1) Android Studio 기동해서 새 프로젝트 만들기
○ 다음과 같이 Android 초기메뉴에서 새 프로젝트를 만들기 메뉴를 선택합니다.
■ 혹은, 이미 Android Studio 를 기동중이라면 File > New > New
Project... 메뉴를 선택합니다.
○ 다음과 같이 Application 에 WebBrowser 를 입력하고, Company Name 에는
여러분들의 적절한 도메인을 적어주면 됩니다.
■ 저는 mindwing.kr 로 적었습니다. 도메인 이름과 Application 이름은
합쳐져서 Package name 으로 표현되는데, 이 이름은 Google Play
스토어내에서 이 앱을 유일하게 구별하는 이름표 역할을 하므로,
스토어에 올릴 앱을 만들 때에는 신중하게 결정해야 합니다.
11. ○ 2) 실행해보기
○ Android Studio 가 마련해준 프로젝트 형상을 그대로 실행해봅니다.
■ 초록색 화살표 아이콘을 누르면 앱이 실행됩니다.
○ 이 문서에서는 에뮬레이터에서 개발해보겠지만, 개발하려는 앱의 덩치가
크거나, 단말이 존재하지 않는 특정 API level 을 테스트해야 하거나, 램이
넉넉하지 않은 개발환경에서는 에뮬레이터를 쓰는 것이 무척 힘든 일이므로,
직접 단말기를 연결해서 개발하는 것을 권장합니다.
■ i7 쿼드코어에 램 8GB 라면 도전해보세요.
14. ○ 3) Action Bar 숨기기
○ Android Studio 가 기본으로 만들어준 UI 에는 ActionBar 가 포함되어
있습니다.
○ 이 예제에서는 ActionBar 를 쓰지 않을 것이므로, 이를 숨기겠습니다.
■ ActionBar 는 테마에 속하는 부분이므로 테마를 수정해야 합니다.
○ 다음 이미지처럼 app > res > values > styles.xml 파일을 엽니다.
○ 위 이미지처럼 4번째 줄에 "Theme.AppCompat.Light.” 이라고 되어 있는 부분
뒤에 있는 “DarkActionBar” 를 지우고 점이 있는 부분에 커서를 위치시킨 다음
ctrl space 키를 누릅니다.
■ "Theme.AppCompat.Light.NoActionBar" 를 선택합니다.
● NoActionBar 테마를 이용하도록 수정하는 것입니다.
[res/values/styles.xml]
<resources>
<! Base application theme. >
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<! Customize your theme here. >
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
17.
○ 참고로, 테마를 바꾸지 않고 직접 코드상에서 Action Bar 를 없앨 수도
있습니다.
■ 다음처럼 hideActionBar() 메서드를 작성합니다.
■ onCreate() 메서드에서 hideActionBar() 메서드를 호출해서 앱이
기동되자마자 ActionBar 를 숨길 수 있도록 합니다.
○ 이 예제는 SDK 23 버전을 사용하므로, 이전 버전으로 작성하면
hideActionBar() 메서드에 문제가 발생할 수 있습니다.
[MainActivity.java]
...
import android.support.v7.app.ActionBar;
...
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
hideActionBar();
}
private void hideActionBar() {
ActionBar actionBar = getSupportActionBar();
actionBar.hide();
}
}
○ 이번 강의에서는 코드에서 변경하는 방법 대신 테마를 변경하는 방법을
이용하니, 이 방법은 참고로만 알아두세요.
18. ○ 4) 기본 UI 만들고 이벤트 핸들링 코딩해보기
○ 웹브라우저에는 기본적으로 URL 을 입력받는 창과 웹화면이 보이는 부분이
있습니다.
■ URL 을 입력받기 위해서는 EditText 컴포넌트를 이용하며, 웹화면을
보여주기 위해 WebView 컴포넌트를 이용합니다.
■ 웹페이지의 실질적인 처리는 모두 WebView 컴포넌트가 담당하므로,
웹브라우저 앱을 만들기 위해서는 WebView 컴포넌트만 잘 다룰 수
있으면 됩니다.
○ 아래 코드는 MainActivity 에서 사용하는 UI 레이아웃입니다.
■ <RelativeLayout> 으로 전체를 레이아웃합니다.
■ 그 내부에 <EditText> 와 <WebView> 가 포함됩니다.
■ 각각의 ID는 text_url 과 webview 이며, 이는 Java 코드에서 사용할
이름이 됩니다.
[res/layout/activity_main.xml]
<?xml version="1.0" encoding="utf8"?>
<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="kr.mindwing.webbrowser.MainActivity">
<EditText
android:id="@+id/text_url"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true" />
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/text_url" />
</RelativeLayout>
○ 이제 URL 을 입력받아서 Toast 로 띄워보는 Java 코드를 짜보겠습니다.
■ 기본적인 이벤트 핸들링을 하는 방법을 통해서 Toast 를 띄웁니다.
28. ○ 이것은 WebView 가 Facebook 의 redirect 를 처리할 능력이 없어서, 대신 다른
웹브라우저앱을 띄웠기 때문입니다.
■ 이 문제를 해결하기 위해서는 WebView 가 기본적인 기능을 처리할 수
있도록 WebViewClient 객체를 만들어 지정하면 됩니다.
■ WebViewClient 는 개발자가 추가코드를 적용하여 기능을 확장해서 쓸
수 있도록 해주기 위한 장치입니다.
[MainActivity.java]
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
...
private void setupUI() {
textUrl = (EditText) findViewById(R.id.text_url);
textUrl.setOnKeyListener(listener);
textUrl.setText("http://facebook.com");
webView = (WebView) findViewById(R.id.webview);
webView.setWebViewClient(new WebViewClient());
}
...
○ 다시 앱을 실행해보겠습니다.
■ 이제는 로그인 화면이 WebView 내에서 잘 나오는 것을 볼 수
있습니다.
29.
30. ○ 6) Back, Forward 버튼 붙이기
○ 이제 기본적인 동작은 하는 것 같은데, 일반적인 웹브라우저와 비교하면 뒤로
가기와 앞으로 가기 버튼이 없는 것이 눈에 띕니다.
■ 버튼 2개를 만들고, 이에 대한 이벤트 처리 코드를 작성해보겠습니다.
[activity_main.xml]
<?xml version="1.0" encoding="utf8"?>
<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="kr.mindwing.webbrowser.MainActivity">
<LinearLayout
android:id="@+id/upper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="1dp">
<EditText
android:id="@+id/text_url"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="6"
android:singleLine="true" />
<Button
android:id="@+id/back"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="뒤로" />
<Button
android:id="@+id/forward"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:onClick="goForward"
41. ○ 7) Design Support Library 를 이용하여 Snackbar
써보기
○ Android 는 API level 에 따라 추가기능을 제공하고 있습니다.
■ LolliPop (API 21, 22) 보다 Marshmallow (API 23) 가 더 많은 기능을
제공합니다.
■ 따라서, API 23 에서 추가된 기능은 API 21 만 제공하는 안드로이드
단말에서는 제공되지 않습니다.
■ 단말제조사가 Marshmallow 업그레이드 서비스를 제공해주어야
추가기능을 써볼 수 있습니다.
○ 이러한 불편함을 해소하기 위해 API level 이 낮더라도 기존 기능만을 이용하여
새로운 기능을 추가 구현하고, 이를 라이브러리형태로 배포해줍니다. 이런
추가라이브러리를 support library 라고 합니다.
■ 라이브러리 이름은 다음과 같이 생겼습니다.
● com.android.support:appcompatv7
● com.android.support:design
■ v7 이라고 버전숫자가 붙은 라이브러리는 최소한 API level 7 이상의
단말이면 쓸 수 있다는 뜻입니다.
■ 버전숫자가 없는 라이브러리는 특별히 제한되는 API level 은 없지만,
Design Support Library 는 com.android.support:appcompatv7
라이브러리에 의존적이기 때문에 결론적으로 최소한 API level 7
이어야 합니다.
○ 이 강의에서도 이미 AppCompat Support Library 를 사용하고 있는데, Main
Activity 가 상속하고 있는 AppCompatActivity 가 바로 그것입니다.
■ 전체 이름은 android.support.v7.app.AppCompatActivity 입니다.
import android.support.v7.app.AppCompatActivity;
.....
public class MainActivity extends AppCompatActivity {
○ 이렇게 Support Library 를 사용하고자 한다면 다음과 같이 build.gradle 파일에
내용이 추가되어야 합니다.
■ 빌드시스템에게 어떤 라이브러리를 쓸 것인지 알려주는 것입니다.
[Gradle Scripts/build.gradle (Module: app)]
apply plugin: 'com.android.application'
46. ○ 8) github 에서 프로젝트를 clone 하기
○ 지금 작성된 코드는 다음 URL 에서 볼 수 있습니다.
■ https://github.com/mindwing/Camp_WebBrowser
○ Android Studio 에서 바로 clone 해서 빌드 후 안드로이드폰에 올려볼 수
있습니다.
○ Android Studio 2.0 을 쓰지 않는다면 clone 이후 에러가 발생할 수 있습니다.
문제가 발생하신 분은 제가 직접 빌드환경을 수정해드리겠습니다.
수고하셨습니다~
복습 꼭 하시고요.
내용 분석해보시다가 궁금하신
내용은 언제든지 Slack 에
질문올려주세요.