如何在Android Studio設計並套用自己的Theme

如何在Android Studio設計並套用自己的Theme

過去寫Android APP時,想要更改配色、字體,就像寫桌機程式一樣,無論是畫面底色、字體顏色、每個元件須單獨更改。Android 3.0 (僅適用於平板) 推出了Holo主題,在那之前,Android畫面並無主題式設計,Android 4.0以後,手機與平板共用同一套Android作業系統,延用主題式設計,為了向下相容,開發Android APP時須加入 Android Support Library 套件,會在安裝APP時自己夾帶需要的類別庫過去,讓Android 1.x、 2.x 作業系統的手機也能正常安裝執行新開發的APP。到了Android 5.0,採用 Material Design 實感設計後,為了讓4.x也能正常使用,同樣的,欲安裝到5.0以下的裝置,APP也須自行夾帶符合Material Design規格的類別庫。

在一般網頁,更改畫面配置、顏色、字體不外乎CSS、Style,在Android內可大不相同,開始講前,我們先看一張表:

mag_login_00

Android 5.0以後,New Activity時會自動繼承 AppCompactActivity,主題式設計的特色在於每個元件都有相對應配色,例如下圖:

ThemeColors
圖片取自官網

那麼,我們該如何自己設計自己的主題(Theme),進而替換預設 Theme呢?有人會問:我沒學過設計,要從頭到尾調出一整套的配色和樣式,萬一配出來的顏色、樣式、字體不好看怎麼辦?關於這點,Google開發人員非常貼心的都為各位想到了,當我們新增自己的Theme時,有個Parent選項,代表Parent身上的所有內容都可使用,連帶的,Parent的Parent (如果有的話)身上所有內容一並延用。

以下我們就來看看如何設計自己的Theme,範例接續上一篇「 為你的APP設計漂亮的登入畫面」。

設計Theme

截至目前為止,畫面雖然配置好了,但尚稱不上美觀,現在要為它加上底色。開啟 res/values/styles.xml,點選右上角[Open editor],開啟色彩配置頁。
mag_md_login_16

styles.xml和編輯模式對應關係如下:
mag_login_03

點選 [Create New Theme] mag_md_login_17

輸入自己的主題名稱,Parent theme 預設即可,按[OK]。
mag_theme_03

按下[OK]後回到此畫面,Theme 新增完成,AppTheme.MaterialLitotom已具有父主題AppTheme身上所有的特性,左邊區塊為不同元件顯示的樣式。

mag_theme_01

res/values/styles.xml多了一個style

<style name="AppTheme.MaterialLitotom" parent="AppTheme" />

現在準備更改登入頁面的背景顏色,找到android:colorBackground,點選左邊色塊。
mag_theme_02

點選 [New color Value] mag_theme_07

直接點選顏色或輸入色碼,下方預設resource name 為 backgound_material_light,因為我們本來就只是要更改背景顏色,所以不須更改,確定後點選[OK]。
mag_theme_05

新增色彩後,/res/values/values.xml會多出一個tag

<color name="background_material_light">#9E7A7A</color>

圖型編輯畫面隨即改變顯示樣式,所見即所得。
mag_theme_06

依此方式,依序微調畫面色彩。

套用Theme

套用主題有兩種方式,一種是整個APP套用,一種是單一畫面套用,整個APP套用可維持整個應用程式的整體性,我們這裡只要套用在登入畫面上。開啟AndroidManifast.xml,加入LoginActivity的主題如下:

        <activity android:name=".LoginActivity"
                 android:theme="@style/AppTheme.MaterialLitotom">
        </activity>

最後完成的activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<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:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:weightSum="1"
    tools:context="com.litotom.mdexample.LoginActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="263dp"
        android:layout_height="42dp"
        android:layout_margin="20pt"
        android:layout_weight="0.02"
        android:src="@drawable/litotom" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/input_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Account ID / Email" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/input_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password" />
    </android.support.design.widget.TextInputLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_login"
            android:layout_width="112dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:text="LOGIN"
            android:background="@color/button_pay_attention"
            android:textColor="@android:color/primary_text_dark"
            android:layout_marginRight="5dp" />

        <android.support.v7.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/view2"
            android:layout_weight="0"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:text="CANCEL"
            android:layout_marginLeft="5dp" />
    </LinearLayout>

</LinearLayout>

最後完成畫面如下:
mag_theme_08

這樣就完成有自己Logo,且可隨意變更色調的登入頁了。

版權聲明

本文章版權為郭香宜所有,授權範圍僅限綠豆湯網站使用,除Facebook之類社群等未更改本文章出處之分享行為不在此限,其他個人或公司未經作者同意,不得任意將本文章內容轉載至其他網站,或以任何形式重製,為以免觸犯著作權法,請尊重作者之智慧財產權。

相關文章:

發佈留言

×
×

Cart