Android布局、圖案解鎖

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

1.LinearLayout:

-線性布局,兩種排法:
?水平
android:orientation=”horizontal”
?垂直
android:orientation=”vertical

左邊距
layout_marginLeft
layout_marginStart
右邊距
layout_marginRight
layout_marginEnd
上邊距
layout_marginTop
下邊距
layout_marginBottom
權(quán)重按?例分配
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>

我們?cè)O(shè)置的是垂直布局,高度有和父容器相同,所以我們一個(gè)看到一個(gè),有一個(gè)由于越界了,所以我們當(dāng)然就看不到了,orientation設(shè)置的是它的子控件的布局方法:
一句話就是,水平布局時(shí)一行,垂直布局時(shí)一列:不管當(dāng)前的容器能不能裝下,

  <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>

分析:我們?cè)O(shè)置的是垂直布局,高度有和父容器相同,所以我們一個(gè)看到一個(gè),有一個(gè)由于越界了,所以我們當(dāng)然就看不到了,orientation設(shè)置的是它的子控件的布局方法,一句話就是,水平布局時(shí)一行,垂直布局時(shí)一列:不管當(dāng)前的容器能不能裝下

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

  2. 當(dāng) android:orientation="vertical" 時(shí), 只有水平方向的設(shè)置才起作用,垂直方向的設(shè)置不起作用。 即:left,right,center_horizontal 是生效的。 當(dāng) android:orientation="horizontal" 時(shí), 只有垂直方向的設(shè)置才起作用,水平方向的設(shè)置不起作用。 即:top,bottom,center_vertical 是生效的
    設(shè)置權(quán)重的問題

容器為水平方向的布局只能設(shè)置水平方向的權(quán)重,設(shè)置步驟為:
1.分別將子控件2的水平方向的寬度設(shè)置為0dp,
2.設(shè)置權(quán)重的值 即比例數(shù)值例如:

<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>

如果這里我試圖設(shè)置垂直方向上的權(quán)重,把高設(shè)置為0,將會(huì)報(bào)錯(cuò)。同理,如果父容器時(shí)垂直方向上的布局方式,那就只能設(shè)置垂直方向上的權(quán)重,試圖設(shè)置 水平方向上的也會(huì)報(bào)錯(cuò)

2.RelativeLayout

RelativeLayout是一種相對(duì)布局,控件的位置是按照相對(duì)位置來計(jì)算的,后一個(gè)控件在什么位置依賴于前一個(gè)控件的基本位置,是布局最常用,也是最靈活的一種布局。

這里將這些屬性分成組,便于理解和記憶。

a)、第一類:屬性值為true或false
  android:layout_centerHrizontal 水平居中
  android:layout_centerVertical 垂直居中
  android:layout_centerInparent 相對(duì)于父元素完全居中
  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 本元素的上邊緣和某元素的的上邊緣對(duì)齊
  android:layout_alignLeft 本元素的左邊緣和某元素的的左邊緣對(duì)齊
  android:layout_alignBottom 本元素的下邊緣和某元素的的下邊緣對(duì)齊
  android:layout_alignRight 本元素的右邊緣和某元素的的右邊緣對(duì)齊

c)、第三類:屬性值為具體的像素值,如30dip,40px
  android:layout_marginBottom 離某元素底邊緣的距離
  android:layout_marginLeft 離某元素左邊緣的距離
  android:layout_marginRight 離某元素右邊緣的距離
  android:layout_marginTop 離某元素上邊緣的距離

可以通過組合這些屬性來實(shí)現(xiàn)各種各樣的布局。

3.ConstraintLayout

約束布局的意思其實(shí)很簡單,就是通過一系列的限制,讓某個(gè)控件的位置實(shí)現(xiàn)唯一確定,這就是約束布局的核心思想。這樣做的一個(gè)好處就是,避免了控件的無限制嵌套,減少過度繪制問題。看下面一個(gè)形象的例子:

?#####3.1當(dāng) android:orientation="vertical" 時(shí), 只有水平方向的

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
這些屬性會(huì)引用另一個(gè)控件的id或者parent(這會(huì)引用父容器,即ConstraintLayout)
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toLeftOf="parent" />

3.2ConstraintLayout中有3中方式來設(shè)置子View的寬高尺寸:

?Xdp,X為具體數(shù)值
?WARP_CONTENT
?0dp,0dp代表MATCH_CONSTRAINT,ConstraintLayout不推薦使用MATCH_PARENT
設(shè)置才起作用,垂直方向的設(shè)置不起作用。 即:left,right,center_horizontal 是生效的。 當(dāng) android:orientation="horizontal" 時(shí), 只有垂直方向的設(shè)ConstrainLayout提供了ratio屬性,用來限制View的寬高比例。
使用Ratio屬性,寬高兩個(gè)尺寸中至少要一個(gè)是MATCH_CONSTRAINT(0dp)
默認(rèn)情況下,1:2,表示寬:高,寬為1,高為2
寬高都為MATCH_CONSTRAINT時(shí),可以在比例前加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 相關(guān)屬性:

一:相對(duì)位置屬性如下:

? layout_constraintLeft_toLeftOf : 當(dāng)前View的右側(cè)和另一個(gè)View的右側(cè)位置對(duì)齊,與RelativeLayout的alignLeft屬性相似
?***layout_constraintLeft_toRightOf ***: 當(dāng)前view的左側(cè)會(huì)在另一個(gè)View的右側(cè)位置 與RelativeLayout的toRightOf屬性相似
? layout_constraintRight_toLeftOf : 當(dāng)前view的右側(cè)會(huì)在另一個(gè)View的左側(cè)位置 與RelativeLayout的toLeftOf屬性相似
? layout_constraintRight_toRightOf : 當(dāng)前View的右側(cè)和另一個(gè)View的右側(cè)位置對(duì)其,與RelativeLayout的alignRight屬性相似
? layout_constraintTop_toTopOf : 頭部對(duì)齊,與alignTop相似
? layout_constraintTop_toBottomOf :當(dāng)前View在另一個(gè)View的下側(cè) 與below相似
? layout_constraintBottom_toTopOf :當(dāng)前View在另一個(gè)View的上方 與above相似
? layout_constraintBottom_toBottomOf :底部對(duì)齊,與alignBottom屬性相似
? layout_constraintBaseline_toBaselineOf :文字底部對(duì)齊,與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
當(dāng)前View與另一個(gè)View綁定后,另一個(gè)View的屬性設(shè)置為了Gone,則以下屬性會(huì)生效
?layout_goneMarginStart
?layout_goneMarginEnd
?layout_goneMarginLeft
?layout_goneMarginTop
?layout_goneMarginRight
?layout_goneMarginBottom

四:Ratio比例大小屬性

當(dāng)你的父控件為ConstraintLayout,可以利用這個(gè)屬性來控制當(dāng)前View的寬高比。在利用這個(gè)屬性時(shí),你必須指明一個(gè)方向上的大小為0dp,另一個(gè)方向可指定為明確的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" 屬性來指定控件寬高的比,默認(rèn)為寬:高

指紋解鎖:

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)建一個(gè)試圖用于顯示線
                ImageView LineView = new ImageView(this);
                //設(shè)置圖片
                LineView.setBackgroundResource(R.drawable.normal_highlight1);
                //創(chuàng)建尺寸
                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                //設(shè)置坐標(biāo)
                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)建一個(gè)試圖用于顯示線
                ImageView LineView = new ImageView(this);
                //設(shè)置圖片
                LineView.setBackgroundResource(R.drawable.normal_highlight2);
                //創(chuàng)建尺寸
                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                //設(shè)置坐標(biāo)
                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)建一個(gè)試圖用于顯示線
                ImageView rLineView = new ImageView(this);
                //設(shè)置圖片
               rLineView.setBackgroundResource(R.drawable.normal_highlight3);
                //創(chuàng)建尺寸
                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                //設(shè)置坐標(biāo)
                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)建一個(gè)試圖用于顯示線
                ImageView lLineView = new ImageView(this);
                //設(shè)置圖片
               lLineView.setBackgroundResource(R.drawable.normal_highlight4);
                //創(chuàng)建尺寸
                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                //設(shè)置坐標(biāo)
                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++) {

                //獲取容器,因?yàn)樵趚ml中定義了容器

                //背景視圖的獲取

                //創(chuàng)建用于顯示點(diǎn)的視圖
                ImageView dotView = new ImageView(this);
                //隱藏視圖
               // dotView.setVisibility(View.INVISIBLE);
                //顯示對(duì)應(yīng)的圖片
                dotView.setBackgroundResource(R.drawable.selected_dot);
                //創(chuàng)建控件的尺寸
                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                //不同分辨率的手機(jī)的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);

  }
 }

效果圖:



這里為了看到效果,所以都沒有隱藏控件,如果隱藏只需要在每個(gè)添加的線里面也就是一個(gè)的for 循環(huán)里面分別增加:

dotView.setVisibility(View.INVISIBLE)

LineView.setVisibility(View.INVISIBLE)
rLineView.setVisibility(View.INVISIBLE);
lLineView.setVisibility(View.INVISIBLE);
就可以了,
效果圖就如下:


今天就講到這里,明天再為大家解答解鎖功能的具體實(shí)現(xiàn)思路,晚安各位!~~~~

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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容