どうも、ささおです。
今回はxmlファイルをほぼ触らずに、UIを配置します。
iOSを触っているとコード上でUIを配置ことが多く、Androidでの方法がわからなかったので調べてみました。
Contents
コードで配置する流れ
1, activity_main.xmlのConstraintLayoutにIDを指定する。
2, MainActivity.ktで1のConstraintLayoutを引っ張ってくる。
3, 配置するUIをインスタンス化する。
4, 3でインスタンス化したUIにサイズを指定する。
5, 2で引っ張ってきたConstraintLayoutに3,4でいじったUIを配置する。
1,activity_main.xmlのConstraintLayoutにIDを指定する。
デフォルトのconstraintLayoutにIDを指定します。
（ConstraintLayoutでやる理由はデフォルドがConstraintLayoutになっているからという理由以外はありません。むしろコードでの触りやすさはLinearLayoutの方があるような気がします。）
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="???.???.MainActivity"> </android.support.constraint.ConstraintLayout> |
追加したものはこちらです。
|
1 |
android:id="@+id/constraintLayout" |
ConstraintLayoutに「constraintLayout」というIDを指定しました。
2, MainActivity.ktで1のConstraintLayoutを引っ張ってくる
こんな感じになります。
|
1 2 3 4 5 6 7 8 9 |
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout } } |
こちらの行を追加しました。
|
1 |
val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout |
いつものfindViewByIdを使用して、xmlからConstraintLayoutを引っ張ります。
3, 配置するUIをインスタンス化する
|
1 2 3 4 5 6 7 8 9 10 11 |
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout val button = Button(this) button.text = "sasao" } } |
今回はわかりやすいようにtextを入力しました。”sasao”としましたが、なんでも大丈夫です！
4, 3でインスタンス化したUIにサイズを指定する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout val button = Button(this) button.text = "sasao" val buttonLayoutParams = LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT) button.layoutParams = buttonLayoutParams } } |
|
1 2 3 |
val buttonLayoutParams = LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT) button.layoutParams = buttonLayoutParams |
LinearLayout.LayoutParams(width: ,height: )
となっていてwidhtもheightもWRAP_CONTENTにしているので文字に合わせて大きさが変わります！
２行目では、１行目で作成したサイズをインスタンス化したbuttonに指定しています。
5, 2で引っ張ってきたConstraintLayoutに3,4でいじったUIを配置する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout val button = Button(this) button.text = "sasao" val buttonLayoutParams = LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT) button.layoutParams = buttonLayoutParams constraintLayout.addView(button) } } |
配置するためにはaddView()を使用します。
このようになります。
以上です！！
