レイアウトを使い回す 〜ConstraintLayout編〜

Fe9ce1fc26c929ec0e98d1485894761a?s=47 sussan0416
September 17, 2019

レイアウトを使い回す 〜ConstraintLayout編〜

複数の画面で、共通のレイアウトを使いたいことがあると思います。このようなときは、予め共通で使用するレイアウトリソースを定義しておき、各画面でさせると、作業の効率化・デザインの変化に強くすることができます。

今回は、ConstraintLayoutでレイアウトを使い回す方法について解説しました。使い古されたネタなので、目新しさはありませんが、改めてまとめてみました。

Fe9ce1fc26c929ec0e98d1485894761a?s=128

sussan0416

September 17, 2019
Tweet

Transcript

  1. ϨΠΞ΢τΛ࢖͍ճ͢ ʙ$POTUSBJOU-BZPVUฤʙ ླ໦޹޺ʢ!TVTTBOʣ  ͋Δ͋Δ-5ʙεϚϗΞϓϦ։ൃΤϯδχΞʙ7PM

  2. ϑϦʔϥϯεʢJ04w"OESPJEΤϯδχΞʣ ླ໦޹޺ !TVTTBO ɹגࣜձࣾΦʔϧΞό΢τ ɹגࣜձࣾωετΤοά ɹϑϦʔϥϯεʹస޲ $MBTTJɹ݄ΑΓδϣΠϯ $BGF4OBQɹձࣾһ࣌୅ΑΓܧଓ  

  3. ࠓ೔͓࿩͢Δ͜ͱ $POTUSBJOU-BZPVUʹ͓͚Δ ϨΠΞ΢τͷ࢖͍·Θ͠ํ ܁Γฦ͠࢖͏ϨΠΞ΢τ͸ɺผͷϑΝΠϧʹ੾Γग़ͯ͠ มԽʹڧ͍ϨΠΞ΢τΛ࡞Ζ͏ʂ

  4. ೥લʹɺ͜Μͳ2JJUBΛॻ͖·ͨ͠ ʢ࠷ۙ·ͨɺ͍͍Ͷ͞ΕΔΑ͏ʹͳ͖ͬͯͨʣ

  5. ͦ͏͍͑͹ʜʜ $POTUSBJOU-BZPVUͰ Ͳ͏΍Δͷ͔ॻ͍͍ͯͳ͍ʜ ஸ౓ྑ͍ػձͳͷͰɺ΍ͬͯΈ·ͨ͠ ͢Ͱʹ஌͍ͬͯΔํɺ͢Έ·ͤΜN @@ N

  6. ͬ͘͟Γखॱ w ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ w JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ w $POTUSBJOUΛద੾ʹઃఆ͢Δ ͨͬͨͷεςοϓʂ

  7. ࣮૷αϯϓϧ

  8. ࣮૷αϯϓϧ ͭͷ5FYU7JFXΛάϧʔϓԽ͠·ͨ͠

  9. ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ <?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="wrap_content" android:orientation="vertical"> <TextView

    android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Title TextView" android:textColor="@android:color/primary_text_light" android:textSize="24sp" /> <TextView android:id="@+id/subtitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Subtitle TextView" /> </LinearLayout>
  10. ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ <?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="wrap_content" android:orientation="vertical"> <TextView

    android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Title TextView" android:textColor="@android:color/primary_text_light" android:textSize="24sp" /> <TextView android:id="@+id/subtitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Subtitle TextView" /> </LinearLayout> NFSHFʹ͸ͤͣɺ7JFX(SPVQʹͨ͠ $POTUSBJOU-BZPVUͰ΋0,
  11. ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ <?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="wrap_content" android:orientation="vertical"> <TextView

    android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Title TextView" android:textColor="@android:color/primary_text_light" android:textSize="24sp" /> <TextView android:id="@+id/subtitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Subtitle TextView" /> </LinearLayout> JODMVEFͨ͠ઌͰPWFSSJEF͞ΕΔɻ JODMVEFઌʹ߹ΘͤΔ΄͏͕࡞ۀָ͕
  12. ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ NFSHFͷ৔߹ 7JFX(SPVQͷ৔߹ ࢠϊʔυ͕JODMVEFઌʹల։͞ΕΔ ˠଞͷ7JFXʹର͢Δ$POTUSBJOUͷࢦఆ͕ඞཁ ˠ੾Γग़ͨ͠͸͕ͣɺJODMVEFઌʹ͋Δ7JFXΛ஌͍ͬͯΔঢ়ଶʹͳΔʢີ݁߹ʣ ˞ը૾͸JODMVEF͢ΔϨΠΞ΢τ͕ɺ$POTUSBJOUϨΠΞ΢τͷ৔߹ʢUPQ CPUUPN TUBSU FOEΛQBSFOUʹઃఆͨ͠ʣ

  13. JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ <?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" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView

    android:id="@+id/textView" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="20dp" android:layout_marginEnd="16dp" android:text="Header TextView" android:textSize="30sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <include android:id="@+id/include_1" layout="@layout/layout_included" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="40dp" app:layout_constraintEnd_toEndOf="@+id/textView" app:layout_constraintStart_toStartOf="@+id/textView" app:layout_constraintTop_toBottomOf="@+id/textView" /> <!-- include͢Δ਺͚ͩ܁Γฦ͢ --> </androidx.constraintlayout.widget.ConstraintLayout>
  14. JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ <?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" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView

    android:id="@+id/textView" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="20dp" android:layout_marginEnd="16dp" android:text="Header TextView" android:textSize="30sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <include android:id="@+id/include_1" layout="@layout/layout_included" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="40dp" app:layout_constraintEnd_toEndOf="@+id/textView" app:layout_constraintStart_toStartOf="@+id/textView" app:layout_constraintTop_toBottomOf="@+id/textView" /> <!-- include͢Δ਺͚ͩ܁Γฦ͢ --> </androidx.constraintlayout.widget.ConstraintLayout> JODMVEFλάΛઃஔ͠ɺ MBZPVUଐੑͰɺಡΈࠐΉϨΠΞ΢τΛࢦఆ͢Δ
  15. JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ <?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" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView

    android:id="@+id/textView" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="20dp" android:layout_marginEnd="16dp" android:text="Header TextView" android:textSize="30sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <include android:id="@+id/include_1" layout="@layout/layout_included" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="40dp" app:layout_constraintEnd_toEndOf="@+id/textView" app:layout_constraintStart_toStartOf="@+id/textView" app:layout_constraintTop_toBottomOf="@+id/textView" /> <!-- include͢Δ਺͚ͩ܁Γฦ͢ --> </androidx.constraintlayout.widget.ConstraintLayout> MBZPVU@ ଐੑΛ࢖͏ͨΊɺ MBZPVU@XJEUI MBZPVU@IFJHIUΛΦʔόʔϥΠυ
  16. JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ <?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" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView

    android:id="@+id/textView" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="20dp" android:layout_marginEnd="16dp" android:text="Header TextView" android:textSize="30sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <include android:id="@+id/include_1" layout="@layout/layout_included" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="40dp" app:layout_constraintEnd_toEndOf="@+id/textView" app:layout_constraintStart_toStartOf="@+id/textView" app:layout_constraintTop_toBottomOf="@+id/textView" /> <!-- include͢Δ਺͚ͩ܁Γฦ͢ --> </androidx.constraintlayout.widget.ConstraintLayout> ͋ͱ͸ීஈͲ͓Γͷ$POTUSBJOUΛ͚ͭΔ
  17. JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ <?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" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView

    android:id="@+id/textView" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="20dp" android:layout_marginEnd="16dp" android:text="Header TextView" android:textSize="30sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <include android:id="@+id/include_1" layout="@layout/layout_included" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="40dp" app:layout_constraintEnd_toEndOf="@+id/textView" app:layout_constraintStart_toStartOf="@+id/textView" app:layout_constraintTop_toBottomOf="@+id/textView" /> <!-- include͢Δ਺͚ͩ܁Γฦ͢ --> </androidx.constraintlayout.widget.ConstraintLayout> ϓϩάϥϜ͔Βѻ͏ʹ͸ɺJEΛ͚͓ͭͯ͘
  18. %FTJHOϏϡʔͷ1BMFUUFΛ࢖͏΄͏͕ѹ౗తʹָʂ JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ

  19. 7JFXΛϓϩάϥϜ͔Βѻ͏ʹ͸ class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?)

    { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // findViewByIdͰɺViewGroupͷIDΛࢦఆ͠ɺ͞Βʹ΋͏Ұ౓findViewByIdΛॏͶΕ͹ɺViewΛऔಘͰ͖Δ val title1 = findViewById<ViewGroup>(R.id.include_1).findViewById<TextView>(R.id.title) title1.text = "The first title" // ViewGroupΛࢦఆ͠ͳ͔ͬͨ৔߹͸ɺ࠷ॳʹग़ݱ͢ΔView͕ର৅ʹͳΔ val subtitle1 = findViewById<TextView>(R.id.subtitle) subtitle1.text = "The first subtitle" // Kotlin Android Extensions include_2.title.text = "Second title" include_2.subtitle.text = "Second subtitle" include_3.title.text = "Third title" include_3.subtitle.text = "Third subtitle" } } pOE7JFX#Z*EΛ౓ݺͿʢJODMVEF৔ॴͷJEͱɺϓϩάϥϜ͔Βѻ͏7JFXͷJEʣ "OESPJE,59Λ࢖༻͢ΔͱɺΊͬͪΌָ
  20. ·ͱΊ ੾Γग़ͨ͠ϨΠΞ΢τͷ9.- ಡΈࠐΉํͷ9.- w ಡΈࠐΉઌ͕$POTUSBJOU-BZPVU ͷ৔߹NFSHFͰ͸ͳ͘ɺ 7JFX(SPVQʹ͢Δ w MBZPVU@XJEUI MBZPVU@IFJHIU

    ͸ɺJODMVEFઌͱ߹Θ͓ͤͯ͘ͱ ࡞ۀָ͕ w JODMVEFͱMBZPVUଐੑͰɺଞͷ ϨΠΞ΢τΛಡΈࠐΊΔ w MBZPVU@ ଐੑ͕ඞཁͳͷͰɺ MBZPVU@XJEUI MBZPVU@IFJHIUΛ ΦʔόʔϥΠυ͢Δ w %FTJHOϏϡʔ1BMFUUF͕͍ͩͨ ͍΍ͬͯ͘ΕΔ