今回はAndroidアプリにおいて、コード側(Kotlin)からUIを動的に追加する方法を紹介します。ただ追加するだけなら簡単です。
AndroidでKotlinから動的にUIを追加する方法
やり方は他にもあるかもしれませんが、今回は以下の順序でやってみました。
- XMLに親となるレイアウト(LinearLayoutやConstraintLayoutなど)を配置
- Kotlin側で動的に追加する子要素を生成
- 作成した子要素を親要素に追加
コード側から親レイアウトを特定するためにIDを設定してください。
Kotlinから動的にUIを追加するサンプル
まっさらなLinearLayoutに要素を追加するサンプルを以下2種類作成しました。
(XMLは共通です)
- TextXiew(単体)を追加
- 子要素を持つLinerLayoutを追加
XMLのサンプル
親レイアウトになるLinearLayoutを記載します。
IDを割り振ることを忘れずに。
<!--レイアウトを追加するUI-->
<LinearLayout
android:id="@+id/ll1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"
android:background="#eeeeee" />
TextViewを動的に追加する
以下のようなTextViewが追加されます。
Kotlinは以下コードになります。
private fun addUI1(){
// 追加するTextViewを生成
var newTextView = TextView(applicationContext)
newTextView.text="追加されたUIです"
newTextView.setBackgroundColor(Color.rgb(255,255,0))
//LinearLayoutに追加
binding.ll1.addView(newTextView)
}
LinearLayoutを動的に追加する
以下のような要素が追加されます。
「ButtonとTextViewを含むLinearLayout」が追加されます。
Kotlinは以下コードになります。
private fun addUI2(){
// 中身のButtonを生成
var newBtn = Button(applicationContext)
newBtn.text = "追加されたボタン"
// 中身のTextViewを生成
var newTextView = TextView(applicationContext)
newTextView.text="0"
newTextView.setBackgroundColor(Color.rgb(255,255,0))
newTextView.gravity = Gravity.CENTER
// 追加するLinearLayoutを生成
var newll = LinearLayout(applicationContext)
newll.orientation=LinearLayout.VERTICAL
newll.addView(newBtn)
newll.addView(newTextView)
//GUI(XML)のLinearLayoutに追加
binding.ll1.addView(newll)
}
さいごに
今回は動的にUIを追加する方法を紹介しました。
個人的には必要になったときに必要数追加する用途が良いかと思います。
スマホ画面は狭いので、使用していないUI(=今必要ないUI)はなるべく表示したくないので。
以下関連記事。動的にUIが変化するアニメーションとは相性が良いかもしれません。
コメント