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

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

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

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͕͍ͩͨ ͍΍ͬͯ͘ΕΔ