目的
- 了解Android布局防症，學習如何使用他們赌结，明白其布局方式
- 使用所學布局知識吃环，完成圖像解鎖demo
Android布局
概念
布局就是主要把界面中的控件按照某種規(guī)律擺放在指定的位置羹饰；主要是為了解決應用程序在不同手機中的顯示問題
布局種類
- AbsoluteLayout（絕對布局）
- FrameLayout（框架布局/幀布局）
- LinearLayout（線性布局）
- RelativeLayout（相對布局）
- TableLayout（表格布局）
- ConstraintLayout（約束布局）
今天所講解的是FrameLayout（框架布局/幀布局）伊滋、LinearLayout（線性布局）、RelativeLayout（相對布局）以及ConstraintLayout（約束布局）
幀布局 FrameLayout
幀布局是將所有的子元素放在整個界面的左上角队秩，后面的子元素直接覆蓋前面的子元素新啼，所以用的比較少
屬性
- android:foreground: 設(shè)置改幀布局容器的前景圖像
- android:foregroundGravity: 設(shè)置前景圖像顯示的位置
使用方法
<FrameLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="horizontal">
<View
android:layout_width="300dp"
android:layout_height="300dp"
android:background="@color/colorAccent"
/>
<View
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@color/colorPrimary"
/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimaryDark"/>
</FrameLayout>
效果如下：
image.png
線性布局 LinearLayout
線性布局是按照水平或垂直的順序?qū)⒆釉?可以是控件或布局)依次按照順序排列，每一個元素都位于前面一個元素之后
方向 Orientation
線性布局分為兩種——水平方向和垂直方向的布局
系統(tǒng)默認采用橫向布局
- Vertical（豎向）
從左到右
android:orientation=”horizontal”
代碼實例：
<LinearLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"/>
</LinearLayout>
效果如下：
image.png
- Horizontal（橫向）
從上到下
android:orientation=”vertical”
代碼實例：
<LinearLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="horizontal">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"/>
</LinearLayout>
效果如下：
image.png
對齊方式
線性布局里有兩種設(shè)置邊距的方式刹碾，分別是Margin和Padding
Margin：控件邊緣和其他控件的間距燥撞，即外間距
Padding：控件內(nèi)部內(nèi)容和控件自己邊緣的間距，即內(nèi)間距
<LinearLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="horizontal">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"
/>
<View
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@color/colorPrimary"
android:layout_marginLeft="100dp"
android:layout_marginTop="100dp"/>
</LinearLayout>
image.png
紅色的箭頭表示的是Margin,而黑色的箭頭表示的是Padding迷帜；在線性布局中物舒，各個控件不會重疊，因為它們依照順序排布
權(quán)重 layout_weight
LinearLayout 支持使用 android:layout_weight 屬性為各個子視圖分配權(quán)重戏锹。此屬性根據(jù)視圖應在屏幕上占據(jù)的空間量向視圖分配“重要性”值冠胯。 權(quán)重值更大的視圖可以填充父視圖中任何剩余的空間。子視圖可以指定權(quán)重值锦针，然后系統(tǒng)會按照子視圖聲明的權(quán)重值的比例荠察，將視圖組中的任何剩余空間分配給子視圖。
默認權(quán)重為零奈搜。
android:layout_weight 表示子元素占據(jù)的空間大小的比例悉盆。分配權(quán)重值，其值越小馋吗，權(quán)重越大焕盟。
其計算方法大致如圖：
QQ圖片20190826211041.png
使用方法
<LinearLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="horizontal">
<View
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="@color/colorAccent"
android:layout_weight="1"/>
<View
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="@color/colorPrimary"
android:layout_weight="2"/>
</LinearLayout>
效果如下：
image.png
相對布局 RelativeLayout
相對布局是在頁面內(nèi)，以控件之間相對位置或相對父容器位置進行排列宏粤。同時脚翘，必須確定控件的x和y坐標以及長和寬
注意：在引用其他子元素之前灼卢，引用的ID必須已經(jīng)存在，否則將出現(xiàn)異常来农。
屬性
image.png
image.png
使用方法
<RelativeLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<View
android:id="@+id/iv_1"
android:layout_width="300dp"
android:layout_height="200dp"
android:background="@color/colorAccent"
/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:layout_alignBottom="@id/iv_1"
android:layout_alignEnd="@id/iv_1"
/>
</RelativeLayout>
效果如下：
image.png
約束布局 ConstraintLayout
約束布局ConstraintLayout 是一個ViewGroup鞋真，可以在Api9以上的Android系統(tǒng)使用它，它的出現(xiàn)主要是為了
解決布局嵌套過多的問題沃于，以靈活的方式定位和調(diào)整小部件
屬性
image.png
使用方法
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
效果如下：
image.png
不太確定控件的寬和高的時候涩咖，寫作0dp
寬高比例
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="w,1:2"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
效果如下：
image.png
在app:layout_constraintDimensionRatio="a,1:2"中，如果a為w揽涮，就是高寬比；如果a為h饿肺，就是寬高比
平分寬度
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<View
android:id="@+id/v1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/v2"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
app:layout_constraintHorizontal_weight="1"
/>
<View
android:id="@+id/v2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorPrimary"
app:layout_constraintTop_toTopOf="@id/v1"
app:layout_constraintBottom_toBottomOf="@id/v1"
app:layout_constraintStart_toEndOf="@id/v1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
android:layout_marginRight="20dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
效果如下：
image.png
心得體會
總算是把四個布局搞得比較清楚蒋困，也算會使用一些，但還是會有問題敬辣，繼續(xù)克服
