15天快速入門安卓開發（三）布局知識-有解無憂

文章目錄

- 三布局知識
- - 3.1 布局理論
  - 3.2 線性布局LinearLayout
  - 3.3 幀布局FrameLayout
  - 3.4 相對布局 RelativeLayout
  - 3.5 表格布局TableLayout
  - 3.6 網格布局GridLayout
  - 3.7 百分比布局（PercentRelativeLayout、PercentFrameLayout）
  - 3.8 常用的控制元件
  - 3.9 主題切換
  - 3.10 Android中的單位
  - 3.11 綜合練習

三布局知識

關于布局有多樣式，同一個uI布局可能有多方式來實作，因此我們關注的是功能的實作，而不是布局的使用，適合自己是最好的，不必糾結，

UI組件：https://qmuiteam.com/android

圖示網站：https://www.iconfont.cn/

圖片網站：https://www.logosc.cn/so/s%E5%9B%A2%E9%98%9F

3.1 布局理論

在這里插入圖片描述

View

View在Android中可以理解為視圖，它占據螢屏上的一塊矩形區域，負責提供組件繪制和事件處理的方法，
View類是所有的widgets組件的基類，
View類位于android.view包中；View類的子類一般都位于android.widget包中，

viewGroup

ViewGroup在Android中可以理解為容器，
ViewGroup類繼承自View類，它是View類的擴展，是用來容納其他組件的容器；
ViewGroup是一個抽象類，在實際應用中使用ViewGroup的子類來作為容器的，
ViewGroup.MarginLayoutParams類 ViewGroup.LayoutParams類
ViewGroup是一個抽象類,也是其他容器類的基類，它的一些實作類有： LinearLayout(線性布局)，RelativeLayout(相對布局)，TableLayout(表格布局) FrameLayout(幀布局)，AbsoluteLayout(絕對布局)，GridLayout(網格布局)

Padding和Margins

Padding：在View的頂部、底部、左側和右側的填充像素，也稱為內邊距，它設定的是內容與View邊緣的距離，Padding將占據View的寬度和高度，設定指定的內邊距后，視圖內容將偏離View邊緣指定的距離，
Margins：組件的頂部、底部、左側和右側的空白區域，稱為外邊距，它設定的是組件與其父容器的距離，Margins不占據組件的寬度和高度，為組件設定外邊距后，該組件將遠離父容器指定的距離，如果還有相鄰組件，那么也將遠離其相鄰組件指定距離

3.2 線性布局LinearLayout

常用屬性

在這里插入圖片描述

android:gravity：是對view控制元件本身來說的，是用來設定view本身的內容應該顯示在view的什么位置,默認值是左側

android:layout_gravity：是相對于包含該元素的父元素來說的，設定該元素在父元素的什么位置

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/app_edit"
        android:layout_weight="1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_button"
        android:onClick="go"
         />
</LinearLayout>

權重用來等比例劃分（weight）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:orientation="horizontal">    
    <LinearLayout    
        android:layout_width="0dp"    
        android:layout_height="fill_parent"    
        android:background="#ADFF2F"     
        android:layout_weight="1"/>    

    <LinearLayout    
        android:layout_width="0dp"    
        android:layout_height="fill_parent"    
        android:background="#DA70D6"     
        android:layout_weight="2"/>    

</LinearLayout>

3.3 幀布局FrameLayout

FrameLayout(幀布局)可以說是六大布局中最為簡單的一個布局,這個布局直接在螢屏上開辟出一塊空白的區域,當我們往里面添加控制元件的時候,會默認把他們放到這塊區域的左上角，

android:foreground:設定改幀布局容器的前景影像
android:foregroundGravity:設定前景影像顯示的位置
ScrollView和HorizontalScrollView，分別支持視圖的垂直滾動和水平滾動，

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/FrameLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:foreground="@drawable/logo"
    android:foregroundGravity="right|bottom">

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#FF6143" />
    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#7BFE00" />
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FFFF00" />

</FrameLayout>

3.4 相對布局 RelativeLayout

通過指定界面元素與其他元素的相對位置關系，確定界面中所有元素的布局位置
特點：靈活，最大程度保證在各種螢屏型別的手機上正確顯示
在眾多布局中，推薦使用相對布局

父容器布局

在這里插入圖片描述

控制元件布局

在這里插入圖片描述

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="這是已知控制元件"
        android:textColor="#E30808"
        />
    <EditText
        android:id="@+id/text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="這是文本編輯框"
        android:layout_below="@+id/text"
        />
    
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登錄"
        android:layout_below="@+id/text2"
        />

</RelativeLayout>

3.5 表格布局TableLayout

TableLayout的用法還是很簡單的,無非就是確定表格的行數,以及使用那三個屬性來設定每一行中的第某列的元素隱藏,拉伸,或者收縮即可！

android:collapseColumns:設定需要被隱藏的列的序號
android:shrinkColumns:設定允許被收縮的列的列序號
android:stretchColumns:設定運行被拉伸的列的列序號
以上這三個屬性的列號都是從0開始算的,比如shrinkColunmns = “2”,對應的是第三列！

<TableLayout    
    android:id="@+id/TableLayout2"    
    android:layout_width="fill_parent"    
    android:layout_height="wrap_content"    
    android:stretchColumns="1"
             
             >    

    <TableRow>    

        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="one" />    

        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="two" />    

        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="three" />    

        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="four" />                 
    </TableRow>    
</TableLayout>

3.6 網格布局GridLayout

網格布局（GridLayout）與表格布局相似，用一組無限細的直線將界面分割成行、列、單元，然后，指定控制元件顯示的區域和控制元件在該區域的顯示方式，網格布局實作了控制元件的交錯顯示，避免使用布局嵌套，更有利于自由編輯布局的開發，

可以自己設定布局中組件的排列方式
可以自定義網格布局有多少行,多少列
可以直接設定組件位于某行某列
可以設定組件橫跨幾行或者幾列

在這里插入圖片描述

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6" >

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#FFCCCC"
        android:text="0"
        android:textSize="50sp" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="回退" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清空" />

    <Button android:text="+" />

    <Button android:text="1" />

    <Button android:text="2" />

    <Button android:text="3" />

    <Button android:text="-" />

    <Button android:text="4" />

    <Button android:text="5" />

    <Button android:text="6" />

    <Button android:text="*" />

    <Button android:text="7" />

    <Button android:text="8" />

    <Button android:text="9" />

    <Button android:text="/" />

    <Button
        android:layout_width="wrap_content"
        android:text="." />

    <Button android:text="0" />

    <Button android:text="=" />

</GridLayout>

3.7 百分比布局（PercentRelativeLayout、PercentFrameLayout）

Android引入了一種全新的布局方式來解決此問題——百分比布局，在這種布局中，我們可以不再使用wrap_content、match_parent等方式來指定控制元件的大小，而是允許直接指定控制元件在布局中所占的百分比，這樣的話就可以輕松實作平分布局甚至是任意比例分割布局的效果了，

添加依賴

 implementation 'com.android.support:percent:24.4.0'

撰寫xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%">
    </Button>
    <Button
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%">
    </Button>
    <Button
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%">
    </Button>
    <Button
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_gravity="right|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%">
    </Button>
</androidx.percentlayout.widget.PercentFrameLayout>

3.8 常用的控制元件

TextView 顯示文字，ImageView 顯示圖片，EditText 輸入框，Button 按鈕，CheckBox 復選框，RadioButton 單選按鈕（和 RadioGroup 配合使用）

ListView(簡單用法)

ListView絕對可以稱得上是Android中最常用的控制元件之一，幾乎所有的應用程式都會用到它(相當于展示資料的表格)
Android中提供了很多配接器的實作類，其中我認為最好用的就是ArrayAdapter，

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</androidx.appcompat.widget.LinearLayoutCompat>

package com.shu;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ThirdActivity extends AppCompatActivity {


    private String[] data={"01","02","03","04","05","06","07","08",
                           "09","10","11","12","13","14","15","16"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_third);
        ArrayAdapter<String> adapter =new ArrayAdapter<String>(ThirdActivity.this,android.R.layout.simple_list_item_1,data);
        ListView listView = (ListView) findViewById(R.id.listview);
        listView.setAdapter(adapter);
    }
}

當然我們也可以自定義頁面的呈現效果，和為每一個選項提供監聽事件，更多請參考網路

RecyclerView(更加強大)

詳細用法參考：https://www.jianshu.com/p/4f9591291365

3.9 主題切換

在這里插入圖片描述

3.10 Android中的單位

px(像素):螢屏上的點,pixels(像素)不同設備顯示效果相同
in(英寸):長度單位
mm(毫米):長度單位
pt(磅):1/72英寸
dp(與密度無關的像素):一種基于螢屏密度的抽象單位，在每英寸160點的顯示幕上，1dp = 1px
dip:與dp相同, device independent pixels(設備獨立像素). 不同設備有不同的顯示效果,多用于 Google示例中，
sp(與刻度無關的像素):與dp類似,但是可以根據用戶的字體大小首選項進行縮放.scaled pixels(放大像素). 主要用于字體顯示best for textsize，
盡量使用dp作為空間大小單位,sp作為和文字相關大小單

3.11 綜合練習

效果圖（只關注布局效果，不關注邏輯代碼）

在這里插入圖片描述

代碼如下

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <RadioGroup
        android:id="@+id/group"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginBottom="10dp"
        >

        <RadioButton
            android:id="@+id/mess"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:text="訊息"
            android:textColor="@drawable/qq"
            android:drawableTop="@drawable/mess"
            android:gravity="center"
            />

        <RadioButton
            android:id="@+id/person"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:text="聯系人"
            android:textColor="@drawable/qq"
            android:drawableTop="@drawable/person"
            android:gravity="center"
            />

        <RadioButton
            android:id="@+id/look"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:text="看點"
            android:textColor="@drawable/qq"
            android:drawableTop="@drawable/look"
            android:gravity="center"
            />

        <RadioButton
            android:id="@+id/star"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:text="動態"
            android:textColor="@drawable/qq"
            android:drawableTop="@drawable/star"
            android:gravity="center"
            />

    </RadioGroup>

<!--    <View-->
<!--        android:layout_width="match_parent"-->
<!--        android:layout_height="1dp"-->
<!--        android:background="#000"-->
<!--        android:layout_above="@+id/group"-->
<!--        />-->


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/group"
        android:layout_marginBottom="3dp"
        android:background="#E6E4E4">

        <RelativeLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:id="@+id/top"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#2196F3">

                <ImageView
                    android:id="@+id/logo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="2dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginBottom="5dp"
                    android:src="@mipmap/logo" />

                <TextView
                    android:id="@+id/main"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:text="首頁"
                    android:textColor="#ffffff"
                    android:textSize="24dp" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_marginTop="5dp"
                    android:layout_marginRight="2dp"
                    android:layout_marginBottom="5dp"
                    android:src="@mipmap/add" />
            </RelativeLayout>


            <LinearLayout
                android:id="@+id/mains"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/top"
                android:layout_marginTop="10dp">

                <EditText
                    android:id="@+id/search"
                    android:layout_width="match_parent"
                    android:layout_height="35dp"
                    android:background="@drawable/bg"
                    android:gravity="center"
                    android:text="搜索"
                    android:cursorVisible="false"
                    android:onClick="search"
                    android:maxLines="1"
                    >
                </EditText>
            </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/mains"
                >

                <ListView
                    android:id="@+id/list"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
            </LinearLayout>

        </RelativeLayout>

    </FrameLayout>

</RelativeLayout>

顏色選擇器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#FB0404"/>
    <item android:state_checked="false" android:color="#0E0E0E"/>
    <item android:color="#0B0A0A"/>
</selector>

形狀編輯器

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="40dp"/>
    <solid android:color="#F4F2F2"/>
    <stroke android:color="#F8F5F5" android:width="1dp"/>
</shape>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/290473.html

標籤：其他

上一篇：Delphi10.4.2關于Android設備除錯

下一篇：Android系統 linux內核按鍵驅動開發

15天快速入門安卓開發（三） 布局知識

文章目錄

三 布局知識

3.1 布局理論

3.2 線性布局LinearLayout

3.3 幀布局FrameLayout

3.4 相對布局 RelativeLayout

3.5 表格布局TableLayout

3.6 網格布局GridLayout

3.7 百分比布局（PercentRelativeLayout、PercentFrameLayout）

3.8 常用的控制元件

3.9 主題切換

3.10 Android中的單位

3.11 綜合練習

15天快速入門安卓開發（三）布局知識

三布局知識