소개

아무것도 지식이없는 상태에서 Kotlin을 사용하여 Custom View를 생성하는 방법을 찾았으므로 Tips를 요약했습니다.

CustomView 생성 방법

이번에는 Custom View를 1부터 자작하지 않고, Android Studio가 준비한 템플릿으로 작성합니다.

작업 절차

1. 프로젝트 만들기

프로젝트를 새로 만듭니다. 프로젝트 이름 등은 무엇이든 문제가 없습니다.

2. Custom View 생성

Custom View는 Android Studio에서 생성할 수 있으므로 오른쪽 클릭 → New → UI Component → Custom View에서 생성합니다.


Custom View의 이름은 아무 것도 괜찮습니다.


Custom View 생성시 자동으로 샘플의 xml(sample_my_custom_view.xml)도 생성되지만, 이것은 사용하지 않으므로 삭제/무시해서 문제 없습니다.

3. Custom View 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) {

    }
}

4. Custom View 보기

4.1. 전 준비

Custom View 디스플레이를 준비하기 위해 레이아웃을 설정합니다.
activity_main.xml 파일을 엽니다.

먼저 불필요한 TextView를 삭제합니다.

CustomView에 더 쉽게 표시할 수 있도록 부모 레이아웃을 LinearLayout으로 변경합니다.


LinearLayout을 수직으로 설정합니다.

4.2(a). 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>

Run하여 아래와 같이 빨간색 영역을 생성할 수 있으면 성공입니다.

4.2(b). Kotlin 파일에 기술하고 표시

MainActivity.kt를 편집합니다.
다음과 같이 씁니다.

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 설정을 잘하면 동일한 것을 생성 가능합니다).

결론

MainActivity.kt를 아래로 변경하면 그라데이션처럼 CustomView를 나란히 생성할 수 있습니다.

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)
        }


    }
}

작업 파일의 GitHub( htps : // 기주 b. 코 m / 나오 카나타 / mp ぇ 쿠 s와 m ぃ )는 이쪽으로부터
※사용은 자기 책임으로 부탁합니다.