Day2 android UI實作+activity介紹!!

uuko in 超簡單!七天學會做出屬於你的TodoList App

第二天:

目標:刻出漂亮的畫面 + 理解第一個四大元件Activity

我的畫面設計圖

Android 主要有四大元件分別是activity、service、content provider、broadcast receiver
這七天我分別都會介紹這四大元件
但今天會先用到activity所以我就先介紹他

一.介紹Activity

Activity你可以理解成他是一個單獨的窗口，也是APP與使用者互動畫面的基礎元件，其中每個窗口間要互相通信就是用傳intent(事件)的方式，當你傳遞intent的時候原有的activity就會被壓入底部的thread，由新的activity替換上來，而UI畫面是在主線程如果你要執行耗時操作時，請記得多開一個線程不然就會有錯誤(ANR)
ANR的介紹>>https://developer.android.com/topic/performance/vitals/anr

activity的生命週期

生命週期是一個蠻重要的東西，開發的時候也很常用到，介紹主要的幾個function

啟動activit> onCreate(初始化部件)
onStart(部件顯示螢幕上)>onResume(開始操作使用)
退出activity
onPause(暫停，但還是部份可見的狀態EX 對話框(只占螢幕一部分)，會釋放部分資源/停止動畫讓CPU或電量資源釋放)
onStop(徹底不可見，並銷毀activity)
onDestroy(清除有可能內存洩漏的部分，確保線程停止)

然後我們再新開一個專案，命名為你喜歡的名稱
這時候應該有個MainActivy跟一個簡單的layout (res>layout>activity_main.xml)
我們先檢查一下mainfest.xml (這是用來記錄app的重要資料)

將他點開來會發現有activity的部分，這代表你創建activity有註冊，如果沒註冊的話可能不能使用，如果你是自己new一個class出來的話記得要去這裡註冊，如果你是按new activity的話編譯器會幫你自動註冊

二。介紹UI元件


2.1 新建你的Activity
然後我們右鍵-->new folder -->取名為home -->new Activity 名稱取名叫做HomeActivity
這代表你有個資料夾，下面有HomeActivity
再來點開manifest.xml 在activiy標籤中加上intent-filter這是代表你啟動開啟的主畫面
ps:記得要把MainActivity的intent-filter移除! 因為我們是要從HomeActivity開啟

<activity android:name=".home.HomeActivity" />
 <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>


2.2 ConstraintLayout

點開activity_home.xml會看到有個標籤<androidx.constraintlayout.widget.ConstraintLayout>
這是代表你的主layout是constraint就是主要用拖拉的方式

其他還有幾種不同的layout
1.linearlayout(線性布局)
2.relativelayout(相對位置)>可以用元件id決定相對位置
3.ConstraintLayout

首先我們先把他變成databinding的方式，你也可以選擇不用

Databinding主要是運用架構時比較方便 不用一個一個findViewById

先在gradlescripts>build.gradle(Module.app)的地方打開來然後在android裡面加上

 android {
    dataBinding {
        enabled = true
    }
}

加完後選擇 constaintlayout的地方 按alt+enter
他會跳出可以convert to databinding layout的地方就可以按了
四個白色點代表他的位置 你必須拉三個他才不會報錯
把最左邊那個點拉到左邊 拉完的點會顯示藍色
再來拉一個recycleview 按確定他會自動幫你在gradle添加要用的library
Gradle可以幫你將程式碼Buid成Apk，加套件與library相關也是在那邊進行

看圖



<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".home.HomeActivity">

        <Button
            android:id="@+id/button"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            android:background="@drawable/add_bar"
            android:text="+"
            android:textColor="#FFFFFF"
            android:textSize="40sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerview"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editText" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            app:layout_constraintBottom_toBottomOf="@+id/editText"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/editText"
            app:layout_constraintTop_toTopOf="@+id/editText" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="52dp"
            android:layout_marginLeft="52dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:hint="請輸入要查詢的東西"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.058" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

然後我們要來幫物件取id這樣才可以正確拿到他的id

/小雷點 如果你要改id請在design的地方改 這樣他才可以全部都吃到id/
Layout_width/layout_height分別代表物件的寬度與高度
可以設成你要多少dp 或是match_parent(代表與他的父物件一樣寬/高)
Wrap_parent(代表他內容EX:text內容有多少他就會包覆多寬/高)

然後介紹物件

editText代表你可以輸入 請把他的text刪掉 改成android:hint=”請輸入你要查詢的東西”
recycleview代表這個view裡面還可以塞一些小東西 然後他是可以無限延伸的(就是可以滑動功能)
Button代表按鈕

2.3自定義按鈕

我們在res>drawable資料夾多新增一個xml取名為add_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#FFBB00"/>
    <corners
        android:radius="200dp"/>
</shape>

裡面外層是shape標籤 內層是solid代表裡面填充的是甚麼顏色
Corners則代表你外框的形式 我設成radius=”200dp”代表他會變成圓形

2.4 LinearLayout

首先我們先new一個activity出來 步驟java>new>activity>empty activity
將他取名為AddActivity
接下來打開activity_add.xml

先將ConstraintLayout的地方改成Linearlayout
並加上android:orientation="vertical"

這代表他排序的順序是垂直排序
接著在加上最外面那一塊 再加一個LinearLayout他的layout_width/height都是matchparent 然後我們要讓他距離左右都是15dp跟距離最上面是30dp
所以加上android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="30dp"
接著做第一個標題的最外面部分 因為我們設計是淺綠色的 所以先加上一個自定義的drawable item.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#DDFF77"/>
    <corners
        android:radius="20dp"/>
</shape>

再加上一個linearlayout 這時候我們將他的orientaiton改成horizonal因為裡面標題的TextView是橫的
layout weight加上改成0.5 跟layout_height改成0 這代表他會佔據整個版面垂直高度的0.5比例(他這個比例是看你所有的layout_weight加起來有多少) 而為甚麼是垂直的呢 ?因為你在他上一層的orientation是vertical所以他會佔據的是垂直排序

然後這個裡面要包覆一個標題的EditText讓使用者輸入 正常來說EditText下面會有一條線 但是為了讓他不要有 所以我們加上android:background="@null"

其他幾個的設計邏輯都差不多 我們再來講radiobutton的部分
先用一個FramLayout包在外面然後用radioGroup將他包住 weightSum是因為要讓他平均分配

<FrameLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center"
        android:weightSum="3">

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:textColor="@android:color/primary_text_light"
            android:id="@+id/buttonP1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FFCCCC"
            android:text="high"
            android:layout_weight="1"
            android:onClick="onPrioritySelected" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:textColor="@android:color/primary_text_light"
            android:id="@+id/buttonP2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#FFEE99"
            android:text="medium"
            android:layout_weight="1"
            android:onClick="onPrioritySelected" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:textColor="@android:color/primary_text_light"
            android:id="@+id/buttonP3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#AAFFEE"
            android:text="low"
            android:layout_weight="1"
            android:onClick="onPrioritySelected" />

    </LinearLayout>

    <!-- RadioGroup for visible selection of a priority -->
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center"
        android:weightSum="3">

        <RadioButton
            android:id="@+id/radButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <RadioButton
            android:id="@+id/radButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <RadioButton
            android:id="@+id/radButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

    </RadioGroup>

</FrameLayout>

完整的code

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">



    <data>


    </data>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="add.AddActivity"
            android:orientation="vertical"
            android:background="#00AD00">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="30dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0px"
                    android:layout_weight="0.5"
                    android:background="@drawable/item"
                    android:orientation="horizontal"
                    android:layout_marginBottom="20dp">
                    <EditText
                        android:id="@+id/title"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:hint="標題"
                        android:background="@null"
                        android:layout_marginLeft="10dp"
                        android:layout_weight="2" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0px"
                    android:layout_weight="3"
                    android:background="@drawable/item"
                    android:orientation="horizontal"
                    android:layout_marginBottom="20dp">
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="3"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        android:background="@drawable/item"
                        android:orientation="horizontal">
                        <EditText
                            android:id="@+id/discription"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:background="@null"
                            android:hint="內文"
                            android:gravity="left|top"
                            android:layout_weight="2" />
                    </LinearLayout>

                </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.5"
                android:layout_marginBottom="20dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/date_picker"
                    android:layout_width="0px"
                    android:layout_height="match_parent"
                    android:hint="日期"
                    android:background="@drawable/item"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="8dp"
                    android:gravity="center"
                    android:layout_weight="1" />

                <TextView
                    android:id="@+id/time_picker"
                    android:layout_width="0px"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="8dp"
                    android:layout_weight="1"
                    android:background="@drawable/item"
                    android:gravity="center"
                    android:hint="時間"
                    />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="0.35"
                android:orientation="horizontal"
                android:layout_marginBottom="20dp"
                android:background="@drawable/item"
                android:gravity="center">
                <Button
                    android:id="@+id/test"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="是否設置定時提醒"/>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.5"
                android:orientation="horizontal"
                android:layout_marginBottom="20dp">

                <FrameLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:layout_gravity="center"
                        android:weightSum="3">

                        <Button
                            style="?android:attr/buttonBarButtonStyle"
                            android:textColor="@android:color/primary_text_light"
                            android:id="@+id/buttonP1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="#FFCCCC"
                            android:text="high"
                            android:layout_weight="1"
                            android:onClick="onPrioritySelected" />

                        <Button
                            style="?android:attr/buttonBarButtonStyle"
                            android:textColor="@android:color/primary_text_light"
                            android:id="@+id/buttonP2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="#FFEE99"
                            android:text="medium"
                            android:layout_weight="1"
                            android:onClick="onPrioritySelected" />

                        <Button
                            style="?android:attr/buttonBarButtonStyle"
                            android:textColor="@android:color/primary_text_light"
                            android:id="@+id/buttonP3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:background="#AAFFEE"
                            android:text="low"
                            android:layout_weight="1"
                            android:onClick="onPrioritySelected" />

                    </LinearLayout>

                    <!-- RadioGroup for visible selection of a priority -->
                    <RadioGroup
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:layout_gravity="center"
                        android:weightSum="3">

                        <RadioButton
                            android:id="@+id/radButton1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1" />

                        <RadioButton
                            android:id="@+id/radButton2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1" />

                        <RadioButton
                            android:id="@+id/radButton3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1" />

                    </RadioGroup>

                </FrameLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginBottom="20dp">
                <Button
                    android:id="@+id/save"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Create"
                    android:textColor="#FAFAFA"
                    android:textSize="22sp" />
            </LinearLayout>
        </LinearLayout>


    </LinearLayout>
</layout>
#Android



uuko
學生

你可能感興趣的文章

用 D3.js v4 看 Pokemon 屬性表

用 D3.js v4 看 Pokemon 屬性表

 ArvinH
Scroll 相關運用 - 募資網站

Scroll 相關運用 - 募資網站

 hoyi-23
剛進 Lab 的碩 0

剛進 Lab 的碩 0

 偉大的蕭同學



留言討論