Android 介面實作
-
Upload
richard-chang -
Category
Engineering
-
view
274 -
download
0
Transcript of Android 介面實作
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