第二次,本牛崽十分從容,今天咱們來講講Android Q之布局,我遇到的問題與自己學到的,大牛不要嘲笑哈,有錯誤可以指出來,本牛崽看到就改了。
今天我的學長跟我們開始了布局,布局看資料說好像有5種,又不止五種,但是嘞,基本上后面的都不用了,主要是線性布局和幀布局。
首先咱們來講講線性布局,本牛崽說說自己理解的哈,如果有質疑,大牛們可以提。
我了解到的概念哈,線性布局是相當於把每塊區域用一根線穿起來,有水平和垂直兩種重要的布局規格。
縱向:android:orientation="vertical",也叫垂直方向布局一般都是相當於數學作業本那種樣式,一般每行一個區域。
橫向:android:orientation="horizontal"就是把數學本橫擺着嘛,嘿嘿。
還有一種就是不寫這個屬性,就是一般的,自動定義區域的
下面圖中的LinerLayout就是線性布局,這個新牛崽值得擁有,哈哈,本牛崽就喜歡拖,拖下去代碼就出來了
用垂直方向布局的話一般得嵌套線性布局哈
效果就這樣:
是不是很像數學作業本啊,你們高數怕了嗎?
這就是簡單的線性布局啦,
然后就是幀布局,幀布局,學長講解的,我大概可以理解成是貼在最外面的,所以寫代碼的時候一般都是把你最想放在最外面的東西寫到最后,它就會顯示在最外面。
FrameLayout:這邊直接嵌套線性布局來用了,看下面,記住特點,最下面寫的布局是最外面這層,然后所有布局會堆起來,下面測試的顏色應該看得出來吧,綠色和紅色。
我們顯示出的是紅色,懂吧,它在下面,它最大。然后布局都堆在一起了。這不算線性布局和幀布局嵌套哈,只是幀布局包着線性布局罷了
現在就拿出我學到的鎮店之寶吧。。。
就是一個布局嵌套:
一開始我也覺得挺難的,后來發現還不錯,代碼貼上:
其實我當時寫的時候就分出來了,看着很長,知道思路就簡單,記住,幀布局的東西,最下面的最大。
我的思路是,先放個垂直的線性布局,再放兩個空線性布局,然后分別放入兩個幀布局就把它分成兩部分了
但是要注意的是,如果想做出這種情況,就得讓兩個線性布局堆疊,大的放最下面,就是白色塊,藍色塊在中間,最上面放圖片,貼在白色塊的底部,就形成了居中分離,下面再放信息,信息也是這種鋪地毯的方法。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="190dp"
android:background="#fff"
android:layout_gravity="bottom"
>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="@color/colorPrimary"
android:gravity="bottom">
</LinearLayout>
//記住不要把圖片用上面的線性布局包起來了,用幀布局包着才行,
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:layout_marginTop="50dp"
android:background="@drawable/pgpg" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="110dp"
android:gravity="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="104dp"
android:layout_marginRight="20dp"
android:text="200\n粉絲" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:text="54\n關注" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:text="4\n動態" />
</LinearLayout>
</LinearLayout>
//記住,千萬別包裹住下面的了,這樣他就不能獨立的貼在最上面了
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginLeft="165dp"
android:text="失去的青春">
</TextView>
</FrameLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="29dp"
android:layout_weight="2"
android:background="#baa">
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
做到這個地步就是本牛崽作業的成果啦!
是不是覺得很長很可怕,我剛開始也這么覺得,插入圖片,應該都知道,把圖片放到下面圖中的drawable中,改個名字就好,然后用背景圖片、圖片視圖、圖片按鈕都可以插入。
補充完了,線性布局和幀布局學會了嗎?我剛開始也是雲里霧里的,一番研究加上自己寫隨筆的總結,我已經學懂了。很提倡大家花半個小時左右來總結。這樣就像講課一樣,能修養自己也能幫助別人,這就是傳說中的雙贏,但是會比較累。加油,牛崽向大牛進發。