Android 介面實作2015.12.14

HELLO!

I am Richard ChangAndroid Engineer in HTC, Movial and VMFive

You can find me via chiel99 AT gmail.com

Outline

▸ Android basic review▹ Activity▹ Intent

▸ Android UI review▹ Layouts and UI components

▸ Practices▹ Login page▹ Main page▹ About page

1.Android Basic Review

Let’s start to rock the world

Activity life cycle 生命週期

Intent

▸ “意圖”要幹麻▸ Implicit intent

▹ 只說我想要幹麻 (Intent.Action), 讓系統幫你找對應的程式處理

Uri webpage = Uri.parse("http://www.android.com");

Intent webIntent = new Intent(Intent.ACTION_VIEW, webpage);

▸ Explicit intent▹ 直接指定要啟動的class

Intent intent = new Intent(this, DisplayMessageActivity.class);

▸ 傳遞參數intent.putExtra(EXTRA_MESSAGE, message);

▸ 啟動另一個Activity startActivity(intent);

儲存資料的三種方法

SharedPreference

Data

SQLite

File

今天只會用到一個

SharedPreference

Data

SharedPreference

▸ Key-Value pair▸ 如何寫 (editor -> put -> commit)

SharedPreferences sharedPref = context.getSharedPreferences(

getString(R.string.preference_file_key), Context.MODE_PRIVATE);

SharedPreferences.Editor editor = sharedPref.edit();

editor.putInt(getString(R.string.saved_high_score), newHighScore);

editor.commit();

▸ 如何讀 (get)SharedPreferences sharedPref = context.getSharedPreferences(

getString(R.string.preference_file_key), Context.MODE_PRIVATE);

long default = getResources().getInteger(R.string.saved_high_score_default));

long highScore = sharedPref.getInt(getString(R.string.saved_high_score), default);

2.Android UI Review

Let’s start to make things better

Android UI 的架構

▸ ViewGroup 裡面可以放其他View▹ LinearLayout▹ RelativeLayout▹ ListView▹ GridView▹ ...

▸ View 就是最基礎的UI元件▹ Button▹ TextView▹ ImageView▹ ...

UI layout design by XML▸ 善用 Android Studio Preview 功能

▹ WYSIWYG 所見即所得

Layout XML example

<LinearLayout 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:orientation="horizontal" >

<EditText android:id="@+id/edit_msg"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</LinearLayout>

▸ EditText editText = (EditText)findViewById(R.id.edit_msg);▸ 每個 UI 元件都要有 layout_width 和 layout_height

▹ wrap_content: 跟元件的內容一樣大▹ match_parent: 跟上一層的layout一樣大

▸ layout_weight: layout剩餘空間的權重

那就來寫一點程式吧

3. Practice ALogin Page

Let’s start coding

開始一個新專案

▸ 選擇Blank Activity▹ MainActivity

▸ 支援 Android 4.0 以上版本

新增一個 LoginActivity

▸ 選擇Blank Activity▹ LoginActivity

▸ 到 AndroidManifest.xml 將 LoginActivity 設為 Launcher 預設開啟的Activity<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

Place your screenshot here

Login Page

▸ 啟動一個 LoginActivity▸ UI 使用 login_activity.xml layout▸ 點擊登入button跳轉 MainActivity▸ 使用 intent extra 將使用者的名字

帶給MainActivity

Place your screenshot here

Login Page

▸ ProgressBar when login

Place your screenshot here

Main Page

▸ UI 呈現 activity_main.xml layout▸ 將使用者的名字顯示在UI上

一切都很美好But?

每次都要先打帳號密碼?

改寫一下 LoginActivity

▸ 第一次登入 就把 username 和 password 記錄起來▹ SharedPreference 出場

▸ LoginActivity 發現有登入過的資料就直接使用來登入▸ 現實生活中要注意資安問題

4. Practice BMenu Log Out

Let’s just keep coding

Place your screenshot here

Menu Logout button

▸ 把 MainActivity 的 menu 新增一個 Log out 選項

▸ 按下後清空sharedpreference, 回到 LoginActivity

5. Practice CAbout Page

Let’s finish the work

Place your screenshot here

About Page

▸ 把 MainActivity 的 menu 新增一個 About 選項

▸ 新增一個空白的 AboutActivity

Place your screenshot here

About Page

▸ 使用可左右滑動的 ViewPager▸ 放上組員照片和名字

THANKS!

Any questions?You can find all the source code on github

https://github.com/chiel99/PuSample