談談 Android constraint layout

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