Android 布局筆記

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

前言

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

1. ViewGroup
  • 什么是 ViewGroup ? 運(yùn)用官放文檔的原話

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.

簡(jiǎn)單的翻譯一些就是:ViewGroup 是一個(gè)可以包含其他視圖(稱為子對(duì)象)的特殊視圖。視圖組是布局和視圖容器的基類。 這個(gè)類還定義了 ViewGroup.LayoutParams 類,用作布局參數(shù)的基類。(渣渣英語(yǔ)勿噴)
根據(jù)字面上的解釋應(yīng)該很好了解了,如果還想深入了解請(qǐ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.

渣渣英語(yǔ)又來(lái)翻譯了:將其子元素排列在單列或單行中的布局。 可以通過(guò)調(diào)用 setOrientation() 設(shè)置行的方向。 您還可以通過(guò)調(diào)用 setGravity() 來(lái)指定所有子元素的對(duì)齊方式,或指定特定子項(xiàng)通過(guò)設(shè)置 LinearLayout.LayoutParamsweight 成員來(lái)填充布局中的任何剩余空間。 默認(rèn)方向?yàn)?水平。

  • 現(xiàn)在我們來(lái)看 LinearLayout 的簡(jiǎ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="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 個(gè) TextView ,每個(gè) TextView 的長(zhǎng)和寬都是 wrap_content ,并指定排序方式為 vertical ,然后它就會(huì)如下圖顯示一樣:

Linear1.png

現(xiàn)在我們來(lái)看 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 中的控件會(huì)在水平方向上依次排列,如下圖

linear2.png

根據(jù)官方原話說(shuō):可以通過(guò)調(diào)用 setGravity() 來(lái)指定所有子元素的對(duì)齊方式 ,那么現(xiàn)在我們?cè)趤?lái)看 android:layout_gravity 屬性
二話不說(shuō),先上代碼:

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

我將第一個(gè) TextView 的對(duì)其方式指定為 top,第二個(gè) TextView 的對(duì)其方式指定為 center_vertical,第三個(gè) TextView 的對(duì)其方式指定為 bottom,因?yàn)楫?dāng)前 LinearLayout 的排列方式為 horizontal,所以當(dāng)前的效果如下圖顯示:

linear3.png

在學(xué)習(xí) LinearLayout 過(guò)程中我還學(xué)到了一個(gè)重要的屬性
android:layout_weight (權(quán)重) ,現(xiàn)在我們來(lái)看它的用法:

<?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 個(gè) TextViewandroid:layout_width 屬性設(shè)為 ''0dp'',然后在每個(gè) TextView 中加入了 android:layout_weight="1" 屬性,然后它的效果就會(huì)如下圖顯示:

linear4.png

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

注意: 當(dāng)我們?cè)谒椒较蛏鲜褂?weight 屬性的時(shí)候,控件所占屏幕比和控件的高度本身沒有任何關(guān)系,只是和高度的值有關(guān)系。反之一樣

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

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

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

  • 基本屬性:
    • android:layout_alignParentTop="true":將部件的頂部與容器的頂部對(duì)齊
  • android:layout_alignParentBottom="true":將部件的底部與容器的底部對(duì)齊
  • android:layout_alignParentStart="true":將部件的左側(cè)與容器的左側(cè)對(duì)齊
  • android:layout_alignParentEnd="true":將部件的右側(cè)與容器的右側(cè)對(duì)齊
  • 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é)

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

                 混子性打野,等我混起來(lái)之時(shí),就是我 carry 之日
最后編輯于
?著作權(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),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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

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