【Android】Custom Viewの簡単な生成方法 for Kotlin

#はじめに
何も知識のない状態でKotlinを使ってCustom Viewを生成する方法を見つけたのでそのTipsをまとめました。

#CustomViewの生成方法
今回はCustom Viewを１から自作しないで、Android Studioが用意したテンプレートで作成します。

##作業手順
###1. プロジェクトの作成

プロジェクトを新規作成します。プロジェクト名などは何でも問題ありません。
![スクリーンショット 2019-06-28 15.23.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/f5bc7e6c-84ad-2452-2920-abe7fb1d2113.png)
![スクリーンショット 2019-06-28 15.25.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/b1f74bd6-4c9e-bde5-3200-fe4f6d16cd35.png)


###2. Custom Viewの生成
Custom ViewはAndroid Studioから生成できるので、右クリック→New→UI Component→Custom Viewで生成します。
![スクリーンショット 2019-06-28 15.25.53（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/95343e81-dad8-eadf-4d57-cd82abd5cc51.png)

Custom Viewの名前も何でも問題ありません。
![スクリーンショット 2019-06-28 15.26.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/84882aeb-1a51-334c-1d1d-94c73a345e29.png)

Custom View生成時に自動でサンプルのxml(sample_my_custom_view.xml)も生成されますが、これは使わないので削除/無視して問題ありません。
![スクリーンショット 2019-06-28 15.27.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/e3005375-72eb-f4a2-eb73-166a1839e126.png)

###3. Custom ViewのKotlinファイルの編集
テンプレートはカスタマイズするには余分なものがあるため、最低限必要なものに変更します。

```Kotlin:MyCustomView.kt
package com.hoge.samplecustomview

import android.content.Context
import android.util.AttributeSet
import android.view.View

class MyCustomView : View {

    constructor(context: Context) : super(context) {
        init(null, 0)
    }

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        init(attrs, 0)
    }

    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {
        init(attrs, defStyle)
    }

    private fun init(attrs: AttributeSet?, defStyle: Int) {

    }
}

```

![スクリーンショット 2019-06-28 15.29.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/6725900e-25e5-9457-4a52-766726111d2f.png)

###4. Custom Viewの表示
####4.1. 前準備
Custom View表示の前準備に、レイアウトの設定をします。
activity_main.xmlファイルを開きます。

まず、余計なTextViewを削除します。
![スクリーンショット 2019-06-28 15.30.32（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/4c913065-fae8-1bde-f208-5d28d46af3f0.png)
CustomViewに表示しやすくするため、親のレイアウトをLinearLayoutに変更します。
![スクリーンショット 2019-06-28 15.34.14（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/a5804736-de64-1924-addf-7fa9e12cc02e.png)
![スクリーンショット 2019-06-28 15.34.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/63ba0dc7-7311-05c7-df6d-f039e9c8fae0.png)
LinearLayoutを垂直(Vertical)にします。
![スクリーンショット 2019-06-28 15.35.04（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/1a316a94-897a-47aa-be04-6e893c404b3b.png)

####4.2(a). xmlファイルに記述して表示
xmlファイルを以下に変更します。

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" android:orientation="vertical"
        android:id="@+id/mainLinearLayout">
    
        <com.naokanata.samplecustomview.MyCustomView 
                android:layout_width="match_parent" 
                android:layout_height="100dp"
                android:background="@color/colorAccent"
        />
    
</LinearLayout>
```

![スクリーンショット 2019-06-28 15.45.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/d55bb0ac-d9b4-45a2-edbe-ec78516d77de.png)

Runして以下のように赤い領域が生成できていれば成功です。
![スクリーンショット 2019-06-28 15.47.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/2a347f64-7e13-701f-1d1b-47693af85661.png)


####4.2(b). Kotlinファイルに記述して表示
MainActivity.ktを編集します。
以下のように書きます。

```Kotlin:MainActivity.kt
package com.hoge.samplecustomview

import android.content.Context
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.ViewGroup.LayoutParams
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var mycustomview = MyCustomView(this)
        var lp = LayoutParams(LayoutParams.MATCH_PARENT,100)
        mycustomview.layoutParams = lp
        mycustomview.setBackgroundColor(getColor(R.color.colorAccent))

        mainLinearLayout.addView(mycustomview)


    }
}
```

以下のように赤い領域が生成できていれば成功です（xml版と高さ幅が違いますが、dpの設定をうまくすれば同じものを生成可能です）。
![スクリーンショット 2019-06-28 16.01.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/fa617bc9-880c-a393-177e-c731b2f465d8.png)

##おわりに
MainActivity.ktを以下に変更するとグラデーションみたいにCustomViewを並べて生成できます。

```Kotlin:MainActivity.kt
package com.hoge.samplecustomview

import android.content.Context
import android.graphics.Color
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.ViewGroup.LayoutParams
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        for(i in 0..10){
            var mycustomview = MyCustomView(this)
            var lp = LayoutParams(LayoutParams.MATCH_PARENT,100)
            mycustomview.layoutParams = lp
            mycustomview.setBackgroundColor(Color.rgb(1f,1f,i/10f))
            mainLinearLayout.addView(mycustomview)
        }


    }
}
```

![スクリーンショット 2019-06-28 16.35.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319161/bcf10602-9b8a-b61e-eb93-20ee9b6eebda.png)

作業ファイルのGitHub([https://github.com/NaoKanata/sampleCustomView](https://github.com/NaoKanata/sampleCustomView))はこちらから
※使用は自己責任でお願いします。