$30 off During Our Annual Pro Sale. View Details »

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

sussan0416
September 17, 2019

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

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

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

sussan0416

September 17, 2019
Tweet

More Decks by sussan0416

Other Decks in Technology

Transcript

  1. ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ <?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>
  2. ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ <?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,
  3. ڞ௨Խ͢ΔϨΠΞ΢τΛఆٛ <?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ઌʹ߹ΘͤΔ΄͏͕࡞ۀָ͕
  4. 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>
  5. 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ଐੑͰɺಡΈࠐΉϨΠΞ΢τΛࢦఆ͢Δ
  6. 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ΛΦʔόʔϥΠυ
  7. 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Λ͚ͭΔ
  8. 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Λ͚͓ͭͯ͘
  9. 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Λ࢖༻͢ΔͱɺΊͬͪΌָ
  10. ·ͱΊ ੾Γग़ͨ͠ϨΠΞ΢τͷ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͕͍ͩͨ ͍΍ͬͯ͘ΕΔ