Android 布局筆記

像海浪撞過了山丘以后還能撐多久
他可能只為你贊美一句后往回流
那嬌艷的花盛開后等你來能撐多久
還是被詩人折斷了傷心了
換歌詞一首
那鴛鴦走散了一只在拼命的往南走
被混沌的城市用鋼筋捂住了出口
仿佛悲傷的人們
能靠著霧霾遮住傷口
還羨慕著期待藍天的少年總抬頭
.....

前言

通過 L1-1B 的課程學(xué)習(xí)，我 get 到了 ViewGroup 和兩種基本布局 LinearLayout（線性布局）、RelativeLayout（相對布局） 的知識，那么現(xiàn)在我們來一一了解這些東西吧。

1. ViewGroup
  • 什么是 ViewGroup ? 運用官放文檔的原話

A ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers. This class also defines the ViewGroup.LayoutParams
class which serves as the base class for layouts parameters.

簡單的翻譯一些就是：ViewGroup 是一個可以包含其他視圖（稱為子對象）的特殊視圖。視圖組是布局和視圖容器的基類。 這個類還定義了 ViewGroup.LayoutParams 類，用作布局參數(shù)的基類。（渣渣英語勿噴）
根據(jù)字面上的解釋應(yīng)該很好了解了，如果還想深入了解請移步到 官網(wǎng)。

2. LinearLayout（線性布局）

A Layout that arranges its children in a single column or a single row. The direction of the row can be set by calling setOrientation(). You can also specify gravity, which specifies the alignment of all the child elements by calling setGravity() or specify that specific children grow to fill up any remaining space in the layout by setting the weight member of LinearLayout.LayoutParams. The default orientation is horizontal.

渣渣英語又來翻譯了：將其子元素排列在單列或單行中的布局。 可以通過調(diào)用 setOrientation() 設(shè)置行的方向。 您還可以通過調(diào)用 setGravity() 來指定所有子元素的對齊方式，或指定特定子項通過設(shè)置 LinearLayout.LayoutParams 的 weight 成員來填充布局中的任何剩余空間。 默認方向為 水平。

  • 現(xiàn)在我們來看 LinearLayout 的簡單用法
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小一"
        android:textColor="@color/colorPrimary"
        android:textSize="24sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小二"
        android:textColor="#1d953f"
        android:textSize="24sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小三"
        android:textColor="#f15b6c"
        android:textSize="24sp"/>
</LinearLayout>

我在 **LinearLayout **中添加了 3 個 TextView ,每個 TextView 的長和寬都是 wrap_content ,并指定排序方式為 vertical ，然后它就會如下圖顯示一樣：

Linear1.png

現(xiàn)在我們來看 LinearLayout 的屬性

** android:orientation="vertical" ** ：LinearLayout 的排序方式，有 vertical（垂直方向）和 horizontal（水平方向）

現(xiàn)在我們將 android:orientation 的屬性改為 horizontal

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

</LinearLayout>

修改代碼后 LinearLayout 中的控件會在水平方向上依次排列，如下圖

linear2.png

根據(jù)官方原話說：可以通過調(diào)用 setGravity() 來指定所有子元素的對齊方式 ，那么現(xiàn)在我們在來看 android:layout_gravity 屬性
二話不說，先上代碼：

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小一"
        android:textColor="@color/colorPrimary"
        android:textSize="24sp"
        android:layout_gravity="top"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小二"
        android:textColor="#1d953f"
        android:textSize="24sp"
        android:layout_gravity="center_vertical"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是小三"
        android:textColor="#f15b6c"
        android:textSize="24sp"
        android:layout_gravity="bottom"/>
    
</LinearLayout>

我將第一個 TextView 的對其方式指定為 top，第二個 TextView 的對其方式指定為 center_vertical，第三個 TextView 的對其方式指定為 bottom，因為當(dāng)前 LinearLayout 的排列方式為 horizontal，所以當(dāng)前的效果如下圖顯示：

linear3.png

在學(xué)習(xí) LinearLayout 過程中我還學(xué)到了一個重要的屬性
android:layout_weight （權(quán)重） ，現(xiàn)在我們來看它的用法：

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

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/colorPrimary"
        android:text="我是小一"
        android:textSize="24sp"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#1d953f"
        android:text="我是小二"
        android:textSize="24sp"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#f15b6c"
        android:text="我是小三"
        android:textSize="24sp"/>

</LinearLayout>

根據(jù)代碼顯示，當(dāng)前 LinearLayout 的排列方式為 horizontal，我把 3 個 TextView 的 android:layout_width 屬性設(shè)為 ''0dp''，然后在每個 TextView 中加入了 android:layout_weight="1" 屬性，然后它的效果就會如下圖顯示：

linear4.png

根據(jù)上圖分析可以得到，我加入了 android:layout_weight="1" 屬性之后，3 個 TextVeiw 就平分了整個屏幕，每個 TextVeiw 各占一份，從而得到 權(quán)重 是與 屏幕比例相關(guān)的

注意: 當(dāng)我們在水平方向上使用 weight 屬性的時候，控件所占屏幕比和控件的高度本身沒有任何關(guān)系，只是和高度的值有關(guān)系。反之一樣

  • 到現(xiàn)在為止關(guān)于 LinearLayou 的屬性就介紹到這里了，如果想深入了解，請查閱官方文檔。
3. RelativeLayout（相對布局）

關(guān)于 RelativeLayout 我就不想過多的做解釋了，在這里主要放出官方文檔的原意和基本屬性。

A Layout where the positions of the children can be described in relation to each other or to the parent. 點擊跳轉(zhuǎn)到官方
上面的意思就是：可以相對于彼此或相對于父母描述子元素的位置的布局。

  • 基本屬性：
    • android:layout_alignParentTop="true"：將部件的頂部與容器的頂部對齊
  • android:layout_alignParentBottom="true"：將部件的底部與容器的底部對齊
  • android:layout_alignParentStart="true"：將部件的左側(cè)與容器的左側(cè)對齊
  • android:layout_alignParentEnd="true"：將部件的右側(cè)與容器的右側(cè)對齊
  • android:layout_centerInParent="true""：部件在容器中水平垂直居中
  • android:layout_centerHorizontal="true""：部件在容器中垂直居中
  • android:layout_centerVertical="true""：部件在容器中水平居中
  • android:layout_below="@+id/控件名字"：該控件在某控件的下方
  • android:layout_above="@+id/控件名字"：該控件在某控件的上方
  • android:layout_toStartOf="@+id/控件名字"：該控件在某控件的左方
  • android:layout_toEndOf="@+id/控件名字"：該控件在某控件的右方
4. 總結(jié)

好了，就到這里了，其實關(guān)于布局不止有 LinearLayout（線性布局）、RelativeLayout（相對布局），在 Android 中還有 FrameLayout（幀布局）、AbsoluteLayout（絕對布局），TableLayout（表格布局）、GridLayout（網(wǎng)格布局）、PercentLayout（百分比布局）、ConstraintLayout（約束布局）等等。以上就是我通過 L1-1B 的課程學(xué)習(xí)到的知識點，雖然很簡單，但做任何是都是由簡單到復(fù)雜的！

                 混子性打野，等我混起來之時，就是我 carry 之日
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,872評論 25贊 709
  • afinalAfinal是一個android的ioc，orm框架 https://github.com/yangf...
    passiontim閱讀 15,842評論 2贊 45
  • ￥開啟￥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程，因...
    小菜c閱讀 7,311評論 0贊 17
  • 早晨下雨的時候，吹好的頭發(fā)不小心淋了點雨，變得慘不忍睹，在公司尬了一天。 下班回家路上，不時用手抓頭發(fā)，然后...
    CalmEsae閱讀 207評論 1贊 0
  • 三草兩木卸妝霜 2.卸妝泡沫：清潔能力比較強，帶有硅膠刷頭，適合油性或混合性偏油 干性以及...
    LL莉子閱讀 205評論 0贊 0

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