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

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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. ࣮૷αϯϓϧ
   

   View Slide

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

   View Slide

9. ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ
   
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical">
   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" />
   android:id="@+id/subtitle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="Subtitle TextView" />
   
   

   View Slide

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

    View Slide

11. ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ
    
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    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" />
    android:id="@+id/subtitle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Subtitle TextView" />
    
    JODMVEFͨ͠ઌͰPWFSSJEF͞ΕΔɻ
    JODMVEFઌʹ߹ΘͤΔ΄͏͕࡞ۀָ͕
    

    View Slide

12. ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ
    NFSHFͷ৔߹ 7JFX(SPVQͷ৔߹
    ࢠϊʔυ͕JODMVEFઌʹల։͞ΕΔ
    ˠଞͷ7JFXʹର͢Δ$POTUSBJOUͷࢦఆ͕ඞཁ
    ˠ੾Γग़ͨ͠͸͕ͣɺJODMVEFઌʹ͋Δ7JFXΛ஌͍ͬͯΔঢ়ଶʹͳΔʢີ݁߹ʣ
    ˞ը૾͸JODMVEF͢ΔϨΠΞ΢τ͕ɺ$POTUSBJOUϨΠΞ΢τͷ৔߹ʢUPQ CPUUPN TUBSU FOEΛQBSFOUʹઃఆͨ͠ʣ
    

    View Slide

13. JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ
    
    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">
    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" />
    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" />
    
    
    

    View Slide

14. JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ
    
    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">
    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" />
    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" />
    
    
    JODMVEFλάΛઃஔ͠ɺ
    MBZPVUଐੑͰɺಡΈࠐΉϨΠΞ΢τΛࢦఆ͢Δ
    

    View Slide

15. JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ
    
    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">
    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" />
    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" />
    
    
    MBZPVU@ଐੑΛ࢖͏ͨΊɺ
    MBZPVU@XJEUI MBZPVU@IFJHIUΛΦʔόʔϥΠυ
    

    View Slide

16. JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ
    
    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">
    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" />
    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" />
    
    
    ͋ͱ͸ීஈͲ͓Γͷ$POTUSBJOUΛ͚ͭΔ
    

    View Slide

17. JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ
    
    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">
    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" />
    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" />
    
    
    ϓϩάϥϜ͔Βѻ͏ʹ͸ɺJEΛ͚͓ͭͯ͘
    

    View Slide

18. %FTJHOϏϡʔͷ1BMFUUFΛ࢖͏΄͏͕ѹ౗తʹָʂ
    JODMVEFͰϨΠΞ΢τΛಡΈࠐΉ$POTUSBJOUΛద੾ʹઃఆ͢Δ
    

    View Slide

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(R.id.include_1).findViewById(R.id.title)
    title1.text = "The first title"
    // ViewGroupΛࢦఆ͠ͳ͔ͬͨ৔߹͸ɺ࠷ॳʹग़ݱ͢ΔView͕ର৅ʹͳΔ
    val subtitle1 = findViewById(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Λ࢖༻͢ΔͱɺΊͬͪΌָ
    

    View Slide

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

    View Slide