どうも、ささおです。
今回は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の方があるような気がします。)
<?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>
追加したものはこちらです。
android:id="@+id/constraintLayout"
ConstraintLayoutに「constraintLayout」というIDを指定しました。
2, MainActivity.ktで1のConstraintLayoutを引っ張ってくる
こんな感じになります。
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 constraintLayout = findViewById(R.id.constraintLayout) as ConstraintLayout
いつものfindViewByIdを使用して、xmlからConstraintLayoutを引っ張ります。
3, 配置するUIをインスタンス化する
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" } }
Button(this)でインスタンス化することができます。
今回はわかりやすいようにtextを入力しました。”sasao”としましたが、なんでも大丈夫です!
4, 3でインスタンス化したUIにサイズを指定する
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 } }
追加したのは2行です。
val buttonLayoutParams = LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT) button.layoutParams = buttonLayoutParams
まず1行目でサイズを作成しています。
LinearLayout.LayoutParams(width: ,height: )
となっていてwidhtもheightもWRAP_CONTENTにしているので文字に合わせて大きさが変わります!
2行目では、1行目で作成したサイズをインスタンス化したbuttonに指定しています。
5, 2で引っ張ってきたConstraintLayoutに3,4でいじったUIを配置する
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) } }
最後に、2で引っ張ってきたconstraintLayoutにbuttonを配置します。
配置するためにはaddView()を使用します。
このようになります。

以上です!!