還在用Android正經布局來寫頁面嗎?

2021-02-24 秦子帥

點擊上方藍字關注 👆👆

來源:24K純帥

https://github.com/24Kshign/ConstraintLayoutTest

ConstraintLayout布局出來已經很久了,剛出來那會兒就想嘗試一下的,結果半天都沒適應,前兩天看到一篇ConstraintLayout實戰的文章,看完之後發現這布局賊雞兒好用啊,日常開發中的大多數布局使用它都可以完成,而且也不需要嵌套。

介紹

ConstraintLayout又稱約束布局,是谷歌在2016年開發者大會上推出的,之後在Android Studio上成為了默認布局,該布局能減少布局的層級嵌套,我們都知道,View嵌套的越多,在加載的過程中解析起來就越費時間,該布局幾乎能做到LinearLayout和RelativeLayout嵌套完成的任何布局,下面跟著一波小demo來深入了解谷歌推薦的ConstraintLayout。

用法簡介1、xxx_toyyyOf屬性

xxx是當前的控制項,yyy是指定控制項,這個指定控制項也可以是容器本身(parent)

ConstraintLayout中有以下多種這樣的屬性:

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

參照上圖給出的解釋,以上屬性都可以這樣用,有點類似RelativeLayout中的toLeftOf,toRightOf,上面的屬性中還有一個關於Baseline的,我們通過另外一張圖來了解一下:

Baseline是控制項中文字的基準線,這裡可以理解為參照某個控制項中的文字底部對齊,來看看樣式:

如果不加基準線對齊的話,那麼ButtonA的位置就在容器的左上角。

2、設置margin邊距

邊距,和傳統的布局是一樣的用法,但是這裡要注意的是,必須要設置自己的相對位置(先要指定自己在容器中的位置,可以是相對容器的,也可以是相對某個控制項的),如果不設置的話,那麼設置margin是無效的,大家可以試試,在一個ConstraintLayout布局中放一個按鈕,除了邊距之外什麼都不設置,這樣是沒有效果的,因為你沒有在布局中給它設置相對位置。

3、隱藏空間設置邊距

ConstraintLayout中有以下多種這樣的屬性:

layout_goneMarginStart

layout_goneMarginEnd

layout_goneMarginLeft

layout_goneMarginTop

layout_goneMarginRight

layout_goneMarginBottom

平常我們在開發過程中會遇到這樣一個問題,當一個控制項被設置成gone之後,與之關聯的控制項的位置常常也會發生改變,來看看樣式:

平常我們寫標題欄的時候應該都遇到過右邊放兩個按鈕的情況,而且是可以控制顯示隱藏的,當最右邊的按鈕隱藏之後,左邊的按鈕也要距離右邊有一個邊距,這種情況下我們就可以使用上面這些屬性來配置布局。

4、居中和偏移

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"


這個很好理解,設置與容器的左邊和右邊分別對齊,這樣的話就能讓控制項水平居中了,同理垂直居中和中心對齊也是這樣。可能有人會吐槽了,寫這麼多還不如我用LinearLayout和RelativeLayout寫一句代碼來的快呢?老鐵還真是個急性子,接著往下看。

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"


下面來實現一個這樣的功能,讓一個控制項在距離左邊和距離右邊的比例是1:3,來看看正經寫法:

<LinearLayout>

    <View
       android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <Button
        android:layout_width="100dp"
       android:layout_height="match_parent" />

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="3" />

</LinearLayout>


相信大多數老鐵都會這麼寫,那麼我們現在來看看不正經的寫法:

<android.support.constraint.ConstraintLayout>

    <Button
        android:id="@+id/button"
        app:layout_constraintHorizontal_bias="0.33"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

看到這個是不是驚呆了,一行代碼就搞定了,簡直不要太簡潔。

5、CircleRadius角度定位(在版本1.1中加入)

官網給出的解釋是,你可以以角度和距離約束窗口小部件中心相對於另一個窗口小部件中心。可能有些人看不太懂,我也沒看懂(哈哈,LZ你是來搞笑的嗎),但是看官網給出的圖我大概明白是什麼意思了,簡單來說就是可以根據兩個控制項的中心來形成約束關係,然後可以通過設置角度來控制這個約束關係(還看不懂的話那就來實踐一把)

layout_constraintCircle表示相對某一指定控制項,上圖中表示相對ButtonA;layout_constraintCircleRadius表示該控制項的中心點到指定控制項的中心點的距離(兩點之間,直線最短);layout_constraintCircleAngle表示該控制項的中心點在指定控制項垂直方向上的角度(範圍是0-360),具體看上圖中標示的。

6、尺寸約束

在ConstraintLayout布局中,你可以設置布局的最大和最小尺寸,而且你可通過三種方式來設置控制項的大小:

注意:match_parent官方不建議在ConstraintLayout布局中使用,可以通過設置MATCH_CONSTRAINT(真實數值是0dp)配合約束來定義布局

下面我們來看一個例子:

ButtonA是固定寬度且靠左,給ButtonB設置了約束,剛開始預期的是設置ButtonB的寬度慢慢增大,超過ButtonA之後不管設置多大都像ButtonC和ButtonD一樣,但是ButtonA卻把ButtonB覆蓋了,顯然這不是我們需要的,這時候MATCH_CONSTRAINT的作用就能體現出來了,怎麼理解這個MATCH_CONSTRAINT,我們可以理解成為了配合約束布局而代替了match_parent

7、設置寬高比例

在使用百分比布局時,有兩種形式可以設置:

8、Chains(鏈)

鏈條在同一方向上(水平或者垂直)為一組互相關聯的控制項作統一管理,並且鏈由鏈頭(鏈的第一個元素)設置的屬性控制,鏈頭是水平鏈的最左側的元素,是垂直鏈的最頂部的元素。我們來看看一些鏈的樣式:

我們只需要設置layout_constraintHorizontal_chainStyle或者layout_constraintVertical_chainStyle的屬性就好了,而這個屬性有以下幾種配置:

CHAIN_SPREAD模式:元素將展開(默認樣式)

加權鏈CHAIN_SPREAD模式:如果給元素的寬或者高設置了MATCH_CONSTRAINT(0dp),它們將分割寬高方向上的可用空間

CHAIN_SPREAD_INSIDE模式:類似於SPREAD,但鏈的端點不會分散

`CHAIN_PACKED`模式:鏈條的元素將被捆綁在一起。然後,子項的水平或垂直偏差屬性將影響該鏈元素的定位

9、輔助布局Guildline

這是ConstraintLayout布局特有的功能,你可以用它來輔助你完成布局,類似於高中數學圖形學中的輔助線,只不過這條輔助線只有兩個方向,水平和垂直:

我們來看看Guildline的樣式(需要注意的是,輔助線是不可見的,只有在預覽的時候才能通過滑鼠選中可見):

Guildline有三個常用的屬性,用來控制輔助線的位置:

layout_constraintGuide_begin:指定輔助線距離左邊或者頂部的距離

layout_constraintGuide_end:指定輔助線距離右邊或者底部的距離

`layout_constraintGuide_percent`:指定在父控制項中的寬度或高度的百分比

代碼

以上demo的代碼全都上傳至

Github:
https://github.com/24Kshign/ConstraintLayoutTest

最強布局解析,有興趣的童鞋可以自行下載看看。

-END-

資源推薦

向大家推薦一個南京大學的Python數據分析公開課,由淺入深,非常適合入門,每章都配有代碼和練習題!

課程大綱

視頻及課件B站:
https://www.bilibili.com/video/BV1Y7411o7JP/

  1. 掃描下方二維碼(非本號)

  2. 回復關鍵詞:P90

(建議複製關鍵詞)

相關焦點

  • Android 布局優化,看這 3 點就夠了!
    ,比如:有些布局的在很多頁面都用到了,而且樣式都一樣,每次用到都要複製粘貼一大段,有沒有辦法可以復用呢?解決了1中的問題之後,發現復用的布局外面總要額外套上一層布局,要知道布局嵌套是會影響性能的吶;有些布局只有用到時才會顯示,但是必須提前寫好,雖然設置了為invisible或gone,還是多多少少會佔用內存的。
  • Android 布局優化真的難,從入門到放棄
    而之所以布局加載可能會導致掉幀,正是因為它在主線程上進行了耗時操作,可能導致CPU無法按時完成數據計算。布局加載主要通過setContentView來實現,我們就不在這裡貼源碼了,一起來看看它的時序圖。
  • Android登陸頁面仿拉鉤平滑動畫過度動效
    動態效果圖中心思想就是activity根布局監聽布局變化,實現ViewTreeObserver.OnGlobalLayoutListener接口,根據根布局高度變化超過高度的1/4就是認為鍵盤彈起來了。
  • Android布局優化,看這3點就夠了!
    include的中文意思是「包含」、「包括」,當你在一個主頁面裡使用include標籤時,就表示當前的主布局包含標籤中的布局,這樣一來,就能很好地起到復用布局的效果了。在那些常用的布局比如標題欄和分割線等上面用上它可以極大地減少代碼量的。
  • 你還在寫 findViewById 嗎?
    所以配置要改成:// Android Studio 4.0android { buildFeatures { viewBinding = true }}配置完成後,視圖綁定就會為所有布局文件自動生成對應的綁定類。
  • Android 持續滑動布局 ConsecutiveScrollerLayout 的使用
    ,需要多個不同的列表或者滑動布局、甚至是WebView,組成一個完整的頁面。要實現這樣一個複雜的頁面,在以前我們可能會通過布局嵌套的方式,在一個大的ScrollView下嵌套多個RecyclerView、WebView、ScrollView來實現。但是這種嵌套的方式不僅會嚴重影響布局的性能,而且處理滑動事件的衝突也是一件頭疼的事,處理不好會嚴重影響用戶操作的體驗。
  • 還在用 android.support?谷歌強推 AndroidX 啦!
    :support-v4androidx.legacy:legacy-support-v4:1.0.0com.android.support:viewpagerandroidx.viewpager:viewpager:1.0.0com.android.support:swiperefreshlayoutandroidx.swiperefreshlayout:swiperefreshlayout:1.0.0
  • Android 約束布局(ConstraintLayout)詳解
    前言ConstraintLayout 是一個 ViewGroup,它的出現是為了解決複雜布局時,布局嵌套(布局內的布局)過多的問題(嵌套布局會增加繪製界面所需的時間)。它可以根據同級視圖和父布局的約束條件為每個視圖定義位置,類似於 RelativeLayout 所有視圖都是根據兄弟視圖和父級布局之間的關係來布局的,但是與 RelativeLayout 相比,它更加靈活,更易於使用。
  • android 官方mvp框架優化:lifecycle-mvp,像前端那樣組合式寫頁面
    因為雖然mvp框架定義很簡單:m代表model,提供數據;v即view,提供的是供presenter調用的view相關的方法;p 即presenter,提供的是頁面裡觸發動作的邏輯方法。那麼實施起來呢?並不是那麼統一,因為自由度很大。用什麼來做view?presenter的調用者都是誰?他們怎麼關聯?他們和activity又有什麼關係?所以一時之間,網上有很多自創的mvp框架。
  • Android一些你需要知道的布局優化技巧
    唯鹿的博客地址:http://blog.csdn.net/qq_17766199今天分享一些layout布局書寫中的一些技巧,希望看過之後你也一樣可以寫出性價比高的布局。我個人的目標是用最少的View寫出一樣效果的布局。因為我相信View的數量減少伴隨著的就是層級的減少。從而達到結構清晰,渲染速度快的效果。順著這個邏輯,我將優化分為重用、合併、按需載入。
  • Android新控制項學習之Snackbar-還在用 Toast的你該看看了
    官方也是推薦使用Snackbar代替Toast,你的項目中還在用Toast嗎?不妨試試炫酷的SnackBar!, "it is Toast", Toast.LENGTH_SHORT).show();Snackbar這麼寫:Snackbar.make(view, "it is Snackbar", Snackbar.LENGTH_SHORT).show();二者都有三個參數,區別就在於第一個參數,其中Toast傳入的是Context,而Snackbar傳入的是View
  • Android Studio自定義模板 寫頁面竟然可以如此輕鬆
    了解了基本的理論之後,下面我們可以通過一個實例來將上面的知識點整合。這個類更簡單,除了package是動態的,其他都寫好了,主要用於作為ViewPager的Fragment Item.看完用到的類和布局文件的ftl,大家心裡應該有個底了,這模板幾乎就和我們平時寫的Java類一樣,只是根據用戶在新建Actiivty界面所輸入的參數進行替換一些變量或者做一些簡單的操作而已。除了template.xml還有globals.xml.ftl和recipe.xml.ftl,globals.xml.ftl中基本上沒有修改任何內容就不介紹了。
  • Android使用RecyclerView實現複雜的多布局效果
    引言RecyclerView不只能進行單頁面布局,而且可以通過重寫adapter中的getItemViewType方法來進行多種
  • 這些都是Android中不規則形狀View的布局實現!
    思來想去怕是也只有閉合的Path了吧,嗯,沒錯,就是藉助於Path,並且讓子View和這個Path關聯,然後把這些信息告訴父布局,這樣父布局才知道應該如何去控制這個子View的形狀。光說理論有什麼用,來點實際的啊!好,那就來點實際的,這裡以最簡單的圓形View為例。
  • 帶你了解 Android 約束布局 ConstraintLayout
    ConstraintLayout是Android新推出的一個布局,其性能更好,連官方的hello world都用ConstraintLayout來寫了。所以極力推薦使用ConstraintLayout來編寫布局。本文主要介紹一下如何使用代碼來編寫ConstraintLayout布局。好了,開始我們的徵程。
  • Android布局優化技巧大盤點
    /  布局加載優化  /前面簡單了解了布局加載流程,性能瓶頸在於LayoutInflater.inflater過程,主要包括如下兩點:那麼很容易想到兩個解決辦法:要麼把IO和反射交由子線程來處理,要麼通過動態加載視圖把IO和反射規避掉。那麼市面上有沒有相關的成熟方案呢?
  • Android布局優化之實用技巧
    標題欄我們知道在應用的每個界面幾乎都會用到,在這裡可以作為一個很好的示例來解釋<include/>標籤的使用。android:src="@drawable/gafricalogo"/>            </FrameLayout>在應用中使用titlebar布局文件,我們通過<include/>標籤,布局文件如下:<LinearLayoutxmlns:android="http://schemas.android.com
  • 網站的頁面布局特點 - CSDN
    一、靜態布局(Static Layout)即傳統Web設計,網頁上的所有元素的尺寸一律使用px作為單位。1、布局特點:不管瀏覽器尺寸具體是多少,網頁布局始終按照最初寫代碼時的布局來顯示。(1)在viewport meta標籤上設置width=320,頁面的各個元素也採用px作為單位。通過用JS動態修改標籤的initial-scale使得頁面等比縮放,從而剛好佔滿整個屏幕。
  • Android編輯信息界面,組合控制項的封裝
    在很多APP當中,有些頁面需要填寫很多資料,比如個人中心,還有一些頁面,點擊每個Item都要跳轉頁面或者彈框選擇。這樣的組合控制項,相信大家都見過,說到這裡,可能有人不服了,不就是一個線性布局或者相對布局嗎,我分分鐘寫出來。        是的,我承認你可以搞定,因為我以前也是一個個布局嵌套寫出來的,但是我想說,這麼多相似的重複布局,你難道真的要一個個去寫嗎?複製粘貼一個個改,而且有些功能是重複的,比如輸入框那個清除輸入內容按鈕,你也去寫,你累嗎?這樣的代碼看上去可讀性高嗎?
  • Android開發中一些被冷落但卻很有用的類和方法
    http://developer.android.com/intl/zh-cn/reference/android/support/v4/widget/ViewDragHelper.htmlhttp://www.cnblogs.com/lqstayreal/p/4500219.htmlPageTransformer用於定義ViewPager頁面切換時的動畫效果