fill

目錄

* DDMS工具

* 二、線性布局

* * （一）概述

* （二）主要屬性

* （三）測試

* 三、界面練習任務-登錄界面

* * （一）分析任務

* （二）具體實施

* （三）效果展示

> 1、內容主要參考自：https://www.bilibili.com/video/BV1P7411F7G9

> 2、內容如果有不正確的，希望可以指出或者補充。

> 3、鞏固內容

# 一、DDMS工具

> 1、了解了部分DDMS的使用

解釋：全稱是Dalvik Debug Monitor Service，是安卓開發環境中的Dalvik（虛擬機）調試監控服務。

1、Android Studio4.1.1版本（我使用的版本）的打開方式：

找到“D:AndroidSDK ools”目錄下的monitor.bat文件，雙擊它即可。

1

在再打開一個模擬器后，Devices就會列出當前系統打開的設備。

2、保存虛擬設備的圖片

* Refresh：如果當前設備的頁面改變了，點擊這個按鈕就會進行刷新到該頁面截圖。

* Rotate：調整截圖方向的。

* Save：保存的。

* Copy：復制當前截圖的。

* Done：關閉。

點擊【相機圖標】?【save】?【選擇保存位置等】?【保存】，如下：

2

# 二、線性布局

## （一）概述

線性布局（LinearLayout）在實際開發中比較常用，它主要以水平和垂直方式來顯示界面中的控件。當控件水平排列時，顯示順序依次為從左到右，當控件垂直排列時，顯示順序依次為從上到下。

在線性布局中，有一個非常重要的屬性—orientation，用于控制控件的排列方向，該屬性有兩個值：vertical和horizontal（默認），其中vertical表示的是線性布局垂直顯示，horizontal表示線性布局水平顯示。

## （二）主要屬性

關于線性布局（LinearLayout）的部分屬性，整理如下。

| 屬性 | 作用 | 值 |

| --- | --- | --- |

| android:orientation | 設置線性布局管理器內部組件的排列方向 | horizontal(默認）、vertical |

| android:gravity | 指定當前控件中內容(子控件)的對齊方式 | top、bottom、left、right、center、fill、center_vertical等 |

| android:layout_gravity | 當前控件在其父控件中的對齊方式 | 同上取值 |

| android:background | 設置控件的背景顏色或背景圖片 | 類似于：@color/black（values文件夾下colors.xml中的自設顏色，可增添顏色到這里面去）、#000000（十六進制色碼）等 |

| android:id | 設置控件的Id，便于查找獲取這個組件 | 形如：@+id/自定義名稱 |

| android:layout_width | 設置組件的基本寬度 | wrap_content（和控件自身內容一樣）、match_parent（與父控件一樣） 、數值 |

| android:layout_height | 設置組件的基本高度 | 同上 |

注：match_parent和fill_parent的意義相同，但官方更推薦match_parent。（Android Studio4.1.1版本fill_parent已經顯示過時了）

## （三）測試

1、orientation屬性

① 測試android:orientation=“vertical”，效果如下。

3

② 測試 android:orientation=“horizontal”，效果如下。

4

*補充（更改默認字母全部大寫效果）：添加：android:textAllCaps=“fal”*

2、layout_weight屬性

`權重屬性（layout_weight）：用于指定剩余空閑空間的分割比例（按照給定的比例分配當前父容器的剩余空間）。在一般開發中主要用于適配多種屏幕。`

如下，兩個按鈕layout_weight屬性的值分別等于1，3：表示將界面垂直或水平平均分為三份，前者占有一份的比列，后者占有三份的比列。

注意：為了能更明顯地看出效果，將layout_Height屬性或layout_width屬性的值設置為0。

① 垂直劃分效果

5

② 水平劃分效果

6

# 三、界面練習任務-登錄界面

## （一）分析任務

1、任務效果圖

需要實現如下效果的界面。

[圖片上傳失敗...(image-b88c04-1614046639453)]

2、界面劃分

從效果圖中，可以看出它主要由`背景圖、頭部圖標、兩個輸入框以及登錄按鈕`四部分組成。

具體劃分的結構如下。

[圖片上傳失敗...(image-6ffcbe-1614046639453)]

3、文件準備

注：從效果圖可以看出它的輸入框邊框部分是圓角的，因此需要準備一個圓角的背景框。

7

> 圖片素材由截圖再經過PS（背景色覆蓋）制作而成。

> 圖片素材鏈接（百度網盤）: https://pan.baidu.com/s/1DiucQPhUcQkQfPjDD6LQnA 提取碼: 388p

## （二）具體實施

背景部分實現，也就是最外層的布局：

8

圓角邊框實現：

主要采用radius屬性。

9

1、頭部圖標部分

使用ImageView控件來編寫，具體如下。

10

補充（設置ImageView圖片的顯示比例）：[scaleType的屬性](https://blog.csdn.net/qq_34902522/article/details/76682293)

2、輸入框部分

在這部分，采用了兩個線性布局來進行包裹，里面再使用了ImageView控件、EditText控件和TextView控件。

android:inputType=“textPassword”（輸入密碼時密文顯示）。

```

<!-- 輸入框部分 -->

<LinearLayout

android:paddingLeft="10dp"

android:layout_marginTop="20dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:background="@drawable/login_shape"

>

<!--小標部分1-->

<ImageView

android:layout_gravity="center_vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@mipmap/login_tu"

/>

<EditText

android:layout_gravity="center_vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:hint="請輸入您的用戶名"

android:background="@null"

android:textSize="15dp"

/>

<TextView

android:layout_gravity="center_vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text=" | Ur name"

android:textSize="13sp"

android:textColor="#cccccc"

/>

</LinearLayout>

<LinearLayout

android:paddingLeft="10dp"

android:background="@drawable/login_shape"

android:layout_marginTop="10dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

>

<!--小標部分2-->

<ImageView

android:layout_gravity="center_vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@mipmap/login_tu2"/>

<EditText

android:layout_gravity="center_vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:hint="請輸入您的密碼"

android:background="@null"

android:textSize="15dp"

android:inputType="textPassword"

/>

<TextView

android:layout_gravity="center_vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text=" | Password"

android:textSize="13sp"

android:textColor="#cccccc"

/>

</LinearLayout>

```

3、按鈕部分

android:backgroundTint=“自定義顏色”，可以改變按鈕的背景顏色。

11

## （三）效果展示

為了與任務效果圖一樣，修改themes.xml（主題）文件的parent部分的內容，就不會顯示項目名稱。（另 有些細節需要調整，如原來的上邊距）

12

最終效果如下。

注意：在運行之前，需要設置內容給當前的activity加載一個頁面（圖中的框框部分）

13

補充（更改項目名稱后在虛擬機上顯示）：名字通常是由values文件夾中strings.xml的app_name決定的。