安卓布局詳解

今天要講的布局就是線性布局、相對布局和約束布局

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設置的是它的子控件的布局方法,一句話就是,水平布局時一行,垂直布局時一列:不管當前的容器能不能裝下

  1. LinearLayout是線性布局控件,它包含的子控件將以橫向或豎向的方式排列,按照相對位置來排列所有的widgets或者其他的containers,超過邊界時,某些控件將缺失或消失。因此一個垂直列表的每一行只會有一個widget或者是container,而不管他們有多寬,而一個水平列表將會只有一個行高(高度為最高子控件的高度加上邊框高度)。LinearLayout保持其所包含的widget或者是container之間的間隔以及互相對齊(相對一個控件的右對齊、中間對齊或者左對齊)。

  2. 當 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)。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 今天要講的布局就是線性布局、相對布局和約束布局 1.LinearLayout: -線性布局,兩種排法:?水平and...
    古拉啦啦閱讀 439評論 0 0
  • 布局【android:layout_centerHrizontal】Hrizontal表示水平【android:l...
    lfpwhy閱讀 1,528評論 0 5
  • 第一類:屬性值為true或false android:layout_centerHrizontal 水平居中 an...
    殘月雨紛紛閱讀 1,289評論 0 5
  • Android功能強大,界面華麗,但是眾多的布局屬性就害苦了開發(fā)者,下面這篇文章結合了網上不少資料.第一類:屬性值...
    HangChen閱讀 5,187評論 0 24
  • 前言 在進行Android開發(fā)中,常常需要用到各種布局來進行UI的繪制,今天我們就來講下Android開發(fā)中最常用...
    殘月雨紛紛閱讀 700評論 0 6

友情鏈接更多精彩內容