今天要講的布局就是線性布局、相對布局和約束布局
1.LinearLayout:
-線性布局,兩種排法:
?水平
android:orientation=”horizontal”
?垂直
android:orientation=”vertical
左邊距
layout_marginLeft
layout_marginStart
右邊距
layout_marginRight
layout_marginEnd
上邊距
layout_marginTop
下邊距
layout_marginBottom
權重按?例分配
layout_weight
?例子如下:
<?xml version="1.0" encoding="utf-8"?>
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/colorPrimary"
android:orientation="vertical"></LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="horizontal"></LinearLayout>

<LinearLayout
android:layout_width="200dp"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:orientation="horizontal"></LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="horizontal"></LinearLayout>

我們設置的是垂直布局,高度有和父容器相同,所以我們一個看到一個,有一個由于越界了,所以我們當然就看不到了,orientation設置的是它的子控件的布局方法:
一句話就是,水平布局時一行,垂直布局時一列:不管當前的容器能不能裝下,
<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">
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@color/colorPrimary"
android:orientation="vertical">
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher"/>
</LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@color/colorAccent"
android:orientation="horizontal">
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher"/>
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@mipmap/ic_launcher"/>
</LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@android:color/background_dark"></LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@android:color/holo_blue_bright"></LinearLayout>
</LinearLayout>

分析:我們設置的是垂直布局,高度有和父容器相同,所以我們一個看到一個,有一個由于越界了,所以我們當然就看不到了,orientation設置的是它的子控件的布局方法,一句話就是,水平布局時一行,垂直布局時一列:不管當前的容器能不能裝下
LinearLayout是線性布局控件,它包含的子控件將以橫向或豎向的方式排列,按照相對位置來排列所有的widgets或者其他的containers,超過邊界時,某些控件將缺失或消失。因此一個垂直列表的每一行只會有一個widget或者是container,而不管他們有多寬,而一個水平列表將會只有一個行高(高度為最高子控件的高度加上邊框高度)。LinearLayout保持其所包含的widget或者是container之間的間隔以及互相對齊(相對一個控件的右對齊、中間對齊或者左對齊)。
當 android:orientation="vertical" 時, 只有水平方向的設置才起作用,垂直方向的設置不起作用。 即:left,right,center_horizontal 是生效的。 當 android:orientation="horizontal" 時, 只有垂直方向的設置才起作用,水平方向的設置不起作用。 即:top,bottom,center_vertical 是生效的
設置權重的問題
容器為水平方向的布局只能設置水平方向的權重,設置步驟為:
1.分別將子控件2的水平方向的寬度設置為0dp,
2.設置權重的值 即比例數值例如:
<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">
<LinearLayout
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_weight="1"
android:background="@color/colorPrimary"
android:orientation="vertical"></LinearLayout>
<LinearLayout
android:layout_weight="4"
android:layout_width="0dp"
android:layout_height="120dp"
android:background="@color/colorAccent"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
如果這里我試圖設置垂直方向上的權重,把高設置為0,將會報錯。同理,如果父容器時垂直方向上的布局方式,那就只能設置垂直方向上的權重,試圖設置 水平方向上的也會報錯
2.RelativeLayout
RelativeLayout是一種相對布局,控件的位置是按照相對位置來計算的,后一個控件在什么位置依賴于前一個控件的基本位置,是布局最常用,也是最靈活的一種布局。
這里將這些屬性分成組,便于理解和記憶。
a)、第一類:屬性值為true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相對于父元素完全居中
android:layout_alignParentBottom 貼緊父元素的下邊緣
android:layout_alignParentLeft 貼緊父元素的左邊緣
android:layout_alignParentRight 貼緊父元素的右邊緣
android:layout_alignParentTop 貼緊父元素的上邊緣
b)、第二類:屬性值必須為id的引用名“@id/id-name”
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左邊
android:layout_toRightOf 在某元素的右邊
android:layout_alignTop 本元素的上邊緣和某元素的的上邊緣對齊
android:layout_alignLeft 本元素的左邊緣和某元素的的左邊緣對齊
android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對齊
android:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對齊
c)、第三類:屬性值為具體的像素值,如30dip,40px
android:layout_marginBottom 離某元素底邊緣的距離
android:layout_marginLeft 離某元素左邊緣的距離
android:layout_marginRight 離某元素右邊緣的距離
android:layout_marginTop 離某元素上邊緣的距離
可以通過組合這些屬性來實現(xiàn)各種各樣的布局。
3.ConstraintLayout
約束布局的意思其實很簡單,就是通過一系列的限制,讓某個控件的位置實現(xiàn)唯一確定,這就是約束布局的核心思想。這樣做的一個好處就是,避免了控件的無限制嵌套,減少過度繪制問題??聪旅嬉粋€形象的例子:
?#####3.1當 android:orientation="vertical" 時, 只有水平方向的
layout_constraintLeft_toLeftOf
?layout_constraintLeft_toRightOf
?layout_constraintRight_toLeftOf
?layout_constraintRight_toRightOf
?layout_constraintTop_toTopOf
?layout_constraintTop_toBottomOf
?layout_constraintBottom_toTopOf
?layout_constraintBottom_toBottomOf
?layout_constraintBaseline_toBaselineOf
?layout_constraintStart_toEndOf
?layout_constraintStart_toStartOf
?layout_constraintEnd_toStartOf
?layout_constraintEnd_toEndOf
這些屬性會引用另一個控件的id或者parent(這會引用父容器,即ConstraintLayout)
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toLeftOf="parent" />
3.2ConstraintLayout中有3中方式來設置子View的寬高尺寸:
?Xdp,X為具體數值
?WARP_CONTENT
?0dp,0dp代表MATCH_CONSTRAINT,ConstraintLayout不推薦使用MATCH_PARENT
設置才起作用,垂直方向的設置不起作用。 即:left,right,center_horizontal 是生效的。 當 android:orientation="horizontal" 時, 只有垂直方向的設ConstrainLayout提供了ratio屬性,用來限制View的寬高比例。
使用Ratio屬性,寬高兩個尺寸中至少要一個是MATCH_CONSTRAINT(0dp)
默認情況下,1:2,表示寬:高,寬為1,高為2
寬高都為MATCH_CONSTRAINT時,可以在比例前加W或者H:
W,1:2:表示寬=2,高=1,即H:W = 1:2
H,1:2:表示高=2,寬=1,即W:H = 1:2
<view
android:id="@+id/vi"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="20dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="20dp"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintEnd_toStartOf="@id/v2"
/>
<view
android:id="@+id/v2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="@id/vi"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/vi"
app:layout_constraintTop_toTopOf="@id/vi"
app:layout_constraintHorizontal_weight="1"
android:layout_marginEnd="20dp"
/>

3.3 相關屬性:
一:相對位置屬性如下:
? layout_constraintLeft_toLeftOf : 當前View的右側和另一個View的右側位置對齊,與RelativeLayout的alignLeft屬性相似
?***layout_constraintLeft_toRightOf ***: 當前view的左側會在另一個View的右側位置 與RelativeLayout的toRightOf屬性相似
? layout_constraintRight_toLeftOf : 當前view的右側會在另一個View的左側位置 與RelativeLayout的toLeftOf屬性相似
? layout_constraintRight_toRightOf : 當前View的右側和另一個View的右側位置對其,與RelativeLayout的alignRight屬性相似
? layout_constraintTop_toTopOf : 頭部對齊,與alignTop相似
? layout_constraintTop_toBottomOf :當前View在另一個View的下側 與below相似
? layout_constraintBottom_toTopOf :當前View在另一個View的上方 與above相似
? layout_constraintBottom_toBottomOf :底部對齊,與alignBottom屬性相似
? layout_constraintBaseline_toBaselineOf :文字底部對齊,與alignBaseLine屬性相似
? layout_constraintStart_toEndOf :同left_toRightOf
? layout_constraintStart_toStartOf :同left_toLeftOf
? layout_constraintEnd_toStartOf :同right_toLeftOf
? layout_constraintEnd_toEndOf :同right_toRightOf
二、Margins屬性:同RelativeLayout屬性
?android:layout_marginStart
?android:layout_marginEnd
?android:layout_marginLeft
?android:layout_marginTop
?android:layout_marginRight
?android:layout_marginBottom
三、Margins when connected to a Gone widget
當前View與另一個View綁定后,另一個View的屬性設置為了Gone,則以下屬性會生效
?layout_goneMarginStart
?layout_goneMarginEnd
?layout_goneMarginLeft
?layout_goneMarginTop
?layout_goneMarginRight
?layout_goneMarginBottom
四:Ratio比例大小屬性
當你的父控件為ConstraintLayout,可以利用這個屬性來控制當前View的寬高比。在利用這個屬性時,你必須指明一個方向上的大小為0dp,另一個方向可指定為明確的dp值也可以使用wrap_content這樣才能夠按照比例來為你擺放
<ImageView android:layout_width="100dp"
android:layout_height="0dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintDimensionRatio="1:4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
通過指定 app:layout_constraintDimensionRatio="1:1" 屬性來指定控件寬高的比,默認為寬:高
指紋解鎖:
xml 文件源代碼:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:id="@+id/root_layout">
<!--背景圖片-->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/main_bg"
android:scaleType="fitXY"
/>
<ImageView
android:id="@+id/opView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="44dp"
android:src="@drawable/op_bg" />
效果圖:
Activity源代碼如下:
public class MainActivity extends AppCompatActivity {
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
float scale = getResources().getDisplayMetrics().scaledDensity; //獲取分辨率,方便統(tǒng)一
ImageView iv = findViewById(R.id.opView);
int x = (int) iv.getX();
int y = (int) iv.getY();
RelativeLayout rl = findViewById(R.id.root_layout);
//創(chuàng)建橫線
for(int k = 0;k <2;k++){
for (int n = 0; n < 3; n++) {
//創(chuàng)建一個試圖用于顯示線
ImageView LineView = new ImageView(this);
//設置圖片
LineView.setBackgroundResource(R.drawable.normal_highlight1);
//創(chuàng)建尺寸
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//設置坐標
params.leftMargin =(int)(scale * 52 +x) +(int)(99*scale*k);
params.topMargin = (int)(scale * 225 +x)+(int)(99*scale*n);
rl.addView(LineView, params);
}
}
//創(chuàng)建豎線
for(int k = 0;k <3;k++){
for (int n = 0; n <2; n++) {
//創(chuàng)建一個試圖用于顯示線
ImageView LineView = new ImageView(this);
//設置圖片
LineView.setBackgroundResource(R.drawable.normal_highlight2);
//創(chuàng)建尺寸
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//設置坐標
params.leftMargin =(int)(scale * 52+x) +(int)(99*scale*k);
params.topMargin = (int)(scale * 225 +x)+(int)(99*scale*n);
rl.addView(LineView, params);
}
}
//創(chuàng)建斜線
for(int k = 0;k <2;k++){
for (int n = 0; n < 2; n++) {
//創(chuàng)建一個試圖用于顯示線
ImageView rLineView = new ImageView(this);
//設置圖片
rLineView.setBackgroundResource(R.drawable.normal_highlight3);
//創(chuàng)建尺寸
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//設置坐標
params.leftMargin =(int)(scale * 50 +x) +(int)(99*scale*k);
params.topMargin = (int)(scale * 210+x)+(int)(99*scale*n);
rl.addView(rLineView, params);
}
}
//左斜
for(int k = 0;k <2;k++){
for (int n = 0; n < 2; n++) {
//創(chuàng)建一個試圖用于顯示線
ImageView lLineView = new ImageView(this);
//設置圖片
lLineView.setBackgroundResource(R.drawable.normal_highlight4);
//創(chuàng)建尺寸
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//設置坐標
params.leftMargin =(int)(scale * 50 +x) +(int)(99*scale*k);
params.topMargin = (int)(scale * 210 +x)+(int)(99*scale*n);
rl.addView(lLineView, params);
}
}
for(int i = 0;i<3;i++){
for(int j = 0;j<3;j++) {
//獲取容器,因為在xml中定義了容器
//背景視圖的獲取
//創(chuàng)建用于顯示點的視圖
ImageView dotView = new ImageView(this);
//隱藏視圖
// dotView.setVisibility(View.INVISIBLE);
//顯示對應的圖片
dotView.setBackgroundResource(R.drawable.selected_dot);
//創(chuàng)建控件的尺寸
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//不同分辨率的手機的xy之不同
//params.leftMargin = x + 70 + 200 * i;
//params.topMargin = y + 330 + 200*j;
//將子控件添加到容器中、
params.leftMargin = (int)(scale * 35 +x) + (int)(99 * scale * i);
params.topMargin = (int )(scale *163 +y) +(int)(99 * scale * j);
rl.addView(dotView, params);
}
}
}
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
效果圖:

這里為了看到效果,所以都沒有隱藏控件,如果隱藏只需要在每個添加的線里面也就是一個的for 循環(huán)里面分別增加:
dotView.setVisibility(View.INVISIBLE)
LineView.setVisibility(View.INVISIBLE)
rLineView.setVisibility(View.INVISIBLE);
lLineView.setVisibility(View.INVISIBLE);
就可以了,
效果圖就如下:

今天就講到這里,明天在為大家解答解鎖功能的具體實現(xiàn)。