複数の画面で、共通のレイアウトを使いたいことがあると思います。このようなときは、予め共通で使用するレイアウトリソースを定義しておき、各画面でさせると、作業の効率化・デザインの変化に強くすることができます。
今回は、ConstraintLayoutでレイアウトを使い回す方法について解説しました。使い古されたネタなので、目新しさはありませんが、改めてまとめてみました。
ϨΠΞτΛ͍ճ͢ʙ$POTUSBJOU-BZPVUฤʙླʢ!TVTTBOʣ͋Δ͋Δ-5ʙεϚϗΞϓϦ։ൃΤϯδχΞʙ7PM
View Slide
ϑϦʔϥϯεʢJ04w"OESPJEΤϯδχΞʣླ !TVTTBOɹגࣜձࣾΦʔϧΞότɹגࣜձࣾωετΤοάɹϑϦʔϥϯεʹస$MBTTJɹ݄ΑΓδϣΠϯ$BGF4OBQɹձࣾһ࣌ΑΓܧଓ
ࠓ͓͢Δ͜ͱ$POTUSBJOU-BZPVUʹ͓͚ΔϨΠΞτͷ͍·Θ͠ํ܁Γฦ͠͏ϨΠΞτɺผͷϑΝΠϧʹΓग़ͯ͠มԽʹڧ͍ϨΠΞτΛ࡞Ζ͏ʂ
લʹɺ͜Μͳ2JJUBΛॻ͖·ͨ͠ʢ࠷ۙ·ͨɺ͍͍Ͷ͞ΕΔΑ͏ʹͳ͖ͬͯͨʣ
ͦ͏͍͑ʜʜ$POTUSBJOU-BZPVUͰͲ͏Δͷ͔ॻ͍͍ͯͳ͍ʜஸྑ͍ػձͳͷͰɺͬͯΈ·ͨ͢͠Ͱʹ͍ͬͯΔํɺ͢Έ·ͤΜN @@N
ͬ͘͟Γखॱw ڞ௨Խ͢ΔϨΠΞτΛఆٛw JODMVEFͰϨΠΞτΛಡΈࠐΉw $POTUSBJOUΛదʹઃఆ͢Δͨͬͨͷεςοϓʂ
࣮αϯϓϧ
࣮αϯϓϧͭͷ5FYU7JFXΛάϧʔϓԽ͠·ͨ͠
ڞ௨Խ͢ΔϨΠΞτΛఆٛ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" />
ڞ௨Խ͢ΔϨΠΞτΛఆٛ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,
ڞ௨Խ͢ΔϨΠΞτΛఆٛ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ઌʹ߹ΘͤΔ΄͏͕࡞ۀָ͕
ڞ௨Խ͢ΔϨΠΞτΛఆٛNFSHFͷ߹ 7JFX(SPVQͷ߹ࢠϊʔυ͕JODMVEFઌʹల։͞ΕΔˠଞͷ7JFXʹର͢Δ$POTUSBJOUͷࢦఆ͕ඞཁˠΓग़͕ͨͣ͠ɺJODMVEFઌʹ͋Δ7JFXΛ͍ͬͯΔঢ়ଶʹͳΔʢີ݁߹ʣ˞ը૾JODMVEF͢ΔϨΠΞτ͕ɺ$POTUSBJOUϨΠΞτͷ߹ʢUPQ CPUUPN TUBSU FOEΛQBSFOUʹઃఆͨ͠ʣ
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ͰϨΠΞτΛಡΈࠐΉ$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ଐੑͰɺಡΈࠐΉϨΠΞτΛࢦఆ͢Δ
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]ΛΦʔόʔϥΠυ
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Λ͚ͭΔ
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Λ͚͓ͭͯ͘
%FTJHOϏϡʔͷ1BMFUUFΛ͏΄͏͕ѹతʹָʂJODMVEFͰϨΠΞτΛಡΈࠐΉ$POTUSBJOUΛదʹઃఆ͢Δ
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 Extensionsinclude_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Λ༻͢ΔͱɺΊͬͪΌָ
·ͱΊΓग़ͨ͠ϨΠΞτͷ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͕͍͍ͩͨͬͯ͘ΕΔ