Upgrade to Pro — share decks privately, control downloads, hide ads and more …

談談 Android constraint layout

談談 Android constraint layout

談談 Android layout 系統與 ConstraintLayout

8a6e58b272b266faf22d8a3b2927624f?s=128

Johnny Sung

July 01, 2019
Tweet

Transcript

  1. ႇႇ$POTUSBJOU-BZPVU Johnny Sung

  2. +0)//:46/( Mobile Device developer https://fb.com/j796160836 https://blog.jks.coffee/ https://www.slideshare.net/j796160836 https://github.com/j796160836

  3. -":065 • LinearLayout • FrameLayout • RelativeLayout • ConstraintLayout

  4. -*/&"3-":065 線性布局 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <View android:layout_width="match_parent" android:layout_height="wrap_content"/> <View

    android:layout_width="match_parent" android:layout_height="wrap_content"/> <View android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout>
  5. <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="150sp" android:text="T"/> <TextView android:layout_width="wrap_content"

    android:layout_height="wrap_content" android:textSize="200sp" android:text="A"/> </FrameLayout> '3".&-":065 框架布局
  6. 3&-"5*7&-":065 相對布局 http://fiend1120.pixnet.net/blog/post/191809863 android:layout_above 將此元件置於"指定元件"(使⽤用元件id指定)上⽅方. android:layout_below 將此元件置於"指定元件"(使⽤用元件id指定)下⽅方. android:layout_toLeftOf 將此元件置於"指定元件"(使⽤用元件id指定)左⽅方. android:layout_toRightOf

    將此元件置於"指定元件"(使⽤用元件id指定)右⽅方.
  7. 3&-"5*7&-":065 相對布局 http://fiend1120.pixnet.net/blog/post/191809863 android:layout_alignParentTop 將此元件對⿑齊於佈局畫⾯面上邊線 android:layout_alignParentRight 將此元件對⿑齊於佈局畫⾯面右邊線 android:layout_alignParentLeft 將此元件對⿑齊於佈局畫⾯面左邊線 android:layout_alignParentBottom

    將此元件對⿑齊於佈局畫⾯面底線 android:layout_centerHorizontal 將該元件⽔水平居中於整個布局畫⾯面 android:layout_centerVertical 將該元件垂直居中於整個布局畫⾯面 android:layout_centerInParent 將該元件⽔水平及垂直均居中於整個布局畫⾯面
  8. 3&-"5*7&-":065 相對布局 <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/view1" android:layout_width="match_parent" android:layout_height="wrap_content"/> <View

    android:id="@+id/view2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/view1"/> <View android:id="@+id/view3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/view2"/> </RelativeLayout>
  9. A ConstraintLayout is a ViewGroup which allows you to position

    and size widgets in a flexible way.
  10. */45"--"5*0/ dependencies { // ... implementation 'com.android.support.constraint:constraint-layout:1.1.3' } Add constraint-layout

    to gradle 安裝
  11. -":0651"3".4 佈局參參數 • app:layout_constraintLeft_toLeftOf • app:layout_constraintStart_toStartOf • app:layout_constraintRight_toRightOf • app:layout_constraintEnd_toEndOf

    • app:layout_constraintTop_toTopOf • app:layout_constraintBottom_toBottomOf • ...
  12. • layout_constraintLeft_toLeftOf • layout_constraintLeft_toRightOf • layout_constraintRight_toLeftOf • layout_constraintRight_toRightOf • layout_constraintTop_toTopOf

    • layout_constraintTop_toBottomOf • layout_constraintBottom_toTopOf -":0651"3".4 佈局參參數 • layout_constraintBottom_toBottomOf • layout_constraintBaseline_toBaselineOf • layout_constraintStart_toEndOf • layout_constraintStart_toStartOf • layout_constraintEnd_toStartOf • layout_constraintEnd_toEndOf
  13. 語法格式 (⾃自⼰己) 的 (⽅方位) 在 (⽬目標) 的 (⽅方位)

  14. (⾃自⼰己) 的上⽅方在⽗父親的上⽅方 語法格式 app:layout_constraintTop_toTopOf="parent" 靠上

  15. -":0651"3".4 佈局參參數 android:layout_alignParentLeft="true" android:layout_alignParentStart="true" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintEnd_toEndOf="parent" android:layout_alignParentRight="true" android:layout_alignParentEnd="true"

    3&-"5*7&-":065 $0/453"*/5-":065
  16. -":0651"3".4 佈局參參數 android:layout_alignParentTop="true" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_alignParentBottom="true" 3&-"5*7&-":065 $0/453"*/5-":065

  17. -":0651"3".4 佈局參參數 android:layout_centerVertical="true" android:layout_width="wrap_content" app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintBottom_toBottomOf="parent" android:layout_height="wrap_content"
 app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintRight_toRightOf="parent"

    app:layout_constraintEnd_toEndOf="parent" android:layout_centerHorizontal="true" 3&-"5*7&-":065 $0/453"*/5-":065
  18. -":0651"3".4 佈局參參數 android:layout_toLeftOf="@id/viewA" android:layout_toStartOf="@+id/viewA" app:layout_constraintRight_toLeftOf="@id/viewA" app:layout_constraintEnd_toStartOf="@id/viewA" app:layout_constraintLeft_toRightOf="@id/viewA" app:layout_constraintStart_toEndOf="@id/viewA" android:layout_toRightOf="@id/viewA" android:layout_toEndOf="@id/viewA"

    3&-"5*7&-":065 $0/453"*/5-":065 A A (在...的左邊) (在...的右邊) (在...的左邊) (在...的右邊) A A
  19. -":0651"3".4 佈局參參數 android:layout_below="@+id/viewA" app:layout_constraintTop_toBottomOf="@id/view" app:layout_constraintBottom_toTopOf="@id/viewA" android:layout_above="@id/viewA" 3&-"5*7&-":065 $0/453"*/5-":065 A A

    A A (在...的下⽅方) (在...的上⽅方) (在...的下⽅方) (在...的上⽅方)
  20. • android:layout_marginStart • android:layout_marginEnd • android:layout_marginLeft • android:layout_marginTop • android:layout_marginRight

    • android:layout_marginBottom • layout_goneMarginStart • layout_goneMarginEnd • layout_goneMarginLeft • layout_goneMarginTop • layout_goneMarginRight • layout_goneMarginBottom ."3(*/4 間距參參數
  21. • MATCH_PARENT ❌ • Specific dimension 指定數字(例例如: 25dp ) •

    WRAP_CONTENT • 0dp (MATCH_CONSTRAINT)
  22. $)*"/*/(

  23. None
  24. None
  25. • layout_constraintHorizontal_bias • layout_constraintVertical_bias #*"4 偏移度

  26. <android.support.constraint.Guideline android:id="@+id/guideline_hoz_center" android:layout_width="0dp" android:layout_height="0dp" android:orientation="vertical" app:layout_constraintGuide_percent="0.3" /> (6*%&-*/& 參參考線

  27. %&.0

  28. https://developer.android.com/reference/android/support/constraint/ConstraintLayout https://blog.csdn.net/guolin_blog/article/details/53122387 https://medium.com/verybuy-dev/android- %E8%A3%A1%E7%9A%84%E7%B4%84%E6%9D%9F%E6%80%96%E5%B1%80- constraintlayout-6225227945ab https://constraintlayout.com/ 3&'&3&/$&4 參參考資料 http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/1019/8618.html

  29. 26&45*0/4