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

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

sussan0416
September 17, 2019

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

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

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

sussan0416

September 17, 2019
Tweet

More Decks by sussan0416

Other Decks in Technology

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" />


    [email protected]ଐੑΛ࢖͏ͨΊɺ
    [email protected] [email protected]ΛΦʔόʔϥΠυ

    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 [email protected] [email protected]
    ͸ɺJODMVEFઌͱ߹Θ͓ͤͯ͘ͱ
    ࡞ۀָ͕
    w JODMVEFͱMBZPVUଐੑͰɺଞͷ
    ϨΠΞ΢τΛಡΈࠐΊΔ
    w [email protected]ଐੑ͕ඞཁͳͷͰɺ
    [email protected] [email protected]Λ
    ΦʔόʔϥΠυ͢Δ
    w %FTJHOϏϡʔ1BMFUUF͕͍ͩͨ
    ͍΍ͬͯ͘ΕΔ

    View Slide