[Andorid] 산책 앱 개발 일지 4: 커스텀 뷰 만들기
커스텀 뷰는 왜 만들었어요?
- 레이아웃에서 중복되는 코드를 재사용하기 위해 만들어요.
이 앱에서는 하단에 표시되는 버튼을 재사용하기 위해 만들었어요.
layout xml 파일 작성
- 커스텀뷰의 기본으로 쓰일 레이아웃 파일을 만들어요.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/default_height"
android:background="@color/theme_yellow"
android:padding="8dp"
>
<TextView
android:id="@+id/customText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="완료"
android:textColor="@color/white"
android:textSize="@dimen/content_size"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
attrs 정의
res/values/attrs.xml
파일을 만들고 <declare-styleable>
리소스를 추가해 상황에 따라 바꿔야할 속성들을 정의해요.
- 각
attr
들의 name
이 커스텀뷰 클래스에서 속성을 정의하는데 사용돼요.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomBottomButton">
<attr name="customText" format="reference|string" />
<attr name="customTextColor" format="reference|color"/>
</declare-styleable>
</resources>
CustomView 클래스 작성
- 커스텀뷰 사용에 필요한 속성들을 함수로 정의하고
obtainStyledAttributes()
를 사용하여 속성을 적용해요.
class CustomBottomButton(context: Context, attrs: AttributeSet) : ConstraintLayout(context, attrs) {
private var customText: TextView
init {
val v = View.inflate(context, R.layout.custom_bottom_btn, this)
customText = v.findViewById(R.id.customText)
context.theme.obtainStyledAttributes(
attrs,
R.styleable.CustomBottomButton,
0,0
).apply {
try {
setText(getString(R.styleable.CustomBottomButton_customText))
setTextColor(getColor(R.styleable.CustomBottomButton_customTextColor, 0))
} finally {
recycle()
}
}
}
fun setText(text: String?) {
customText.text = text
onRefresh()
}
fun setTextColor(color: Int){
customText.setTextColor(color)
}
private fun onRefresh() {
invalidate()
requestLayout()
}
}
CustomView 사용
- 함수로 정의된 속성들을 손쉽게 사용할 수 있어요.
<com.chloedewyes.walkmydog.custom.CustomBottomButton
android:id="@+id/continueBtn"
android:layout_width="match_parent"
android:layout_height="@dimen/default_height"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:customText="다음"
app:customTextColor="@color/white"
/>
참고&출처
이 앱에서는 하단에 표시되는 버튼을 재사용하기 위해 만들었어요.
- 커스텀뷰의 기본으로 쓰일 레이아웃 파일을 만들어요.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/default_height"
android:background="@color/theme_yellow"
android:padding="8dp"
>
<TextView
android:id="@+id/customText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="완료"
android:textColor="@color/white"
android:textSize="@dimen/content_size"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
attrs 정의
res/values/attrs.xml
파일을 만들고 <declare-styleable>
리소스를 추가해 상황에 따라 바꿔야할 속성들을 정의해요.
- 각
attr
들의 name
이 커스텀뷰 클래스에서 속성을 정의하는데 사용돼요.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomBottomButton">
<attr name="customText" format="reference|string" />
<attr name="customTextColor" format="reference|color"/>
</declare-styleable>
</resources>
CustomView 클래스 작성
- 커스텀뷰 사용에 필요한 속성들을 함수로 정의하고
obtainStyledAttributes()
를 사용하여 속성을 적용해요.
class CustomBottomButton(context: Context, attrs: AttributeSet) : ConstraintLayout(context, attrs) {
private var customText: TextView
init {
val v = View.inflate(context, R.layout.custom_bottom_btn, this)
customText = v.findViewById(R.id.customText)
context.theme.obtainStyledAttributes(
attrs,
R.styleable.CustomBottomButton,
0,0
).apply {
try {
setText(getString(R.styleable.CustomBottomButton_customText))
setTextColor(getColor(R.styleable.CustomBottomButton_customTextColor, 0))
} finally {
recycle()
}
}
}
fun setText(text: String?) {
customText.text = text
onRefresh()
}
fun setTextColor(color: Int){
customText.setTextColor(color)
}
private fun onRefresh() {
invalidate()
requestLayout()
}
}
CustomView 사용
- 함수로 정의된 속성들을 손쉽게 사용할 수 있어요.
<com.chloedewyes.walkmydog.custom.CustomBottomButton
android:id="@+id/continueBtn"
android:layout_width="match_parent"
android:layout_height="@dimen/default_height"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:customText="다음"
app:customTextColor="@color/white"
/>
참고&출처
res/values/attrs.xml
파일을 만들고 <declare-styleable>
리소스를 추가해 상황에 따라 바꿔야할 속성들을 정의해요.attr
들의 name
이 커스텀뷰 클래스에서 속성을 정의하는데 사용돼요.<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomBottomButton">
<attr name="customText" format="reference|string" />
<attr name="customTextColor" format="reference|color"/>
</declare-styleable>
</resources>
- 커스텀뷰 사용에 필요한 속성들을 함수로 정의하고
obtainStyledAttributes()
를 사용하여 속성을 적용해요.
class CustomBottomButton(context: Context, attrs: AttributeSet) : ConstraintLayout(context, attrs) {
private var customText: TextView
init {
val v = View.inflate(context, R.layout.custom_bottom_btn, this)
customText = v.findViewById(R.id.customText)
context.theme.obtainStyledAttributes(
attrs,
R.styleable.CustomBottomButton,
0,0
).apply {
try {
setText(getString(R.styleable.CustomBottomButton_customText))
setTextColor(getColor(R.styleable.CustomBottomButton_customTextColor, 0))
} finally {
recycle()
}
}
}
fun setText(text: String?) {
customText.text = text
onRefresh()
}
fun setTextColor(color: Int){
customText.setTextColor(color)
}
private fun onRefresh() {
invalidate()
requestLayout()
}
}
CustomView 사용
- 함수로 정의된 속성들을 손쉽게 사용할 수 있어요.
<com.chloedewyes.walkmydog.custom.CustomBottomButton
android:id="@+id/continueBtn"
android:layout_width="match_parent"
android:layout_height="@dimen/default_height"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:customText="다음"
app:customTextColor="@color/white"
/>
참고&출처
<com.chloedewyes.walkmydog.custom.CustomBottomButton
android:id="@+id/continueBtn"
android:layout_width="match_parent"
android:layout_height="@dimen/default_height"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:customText="다음"
app:customTextColor="@color/white"
/>
뷰 클래스 만들기
CustomView를 만들어서 재사용하기
나만의 커스텀뷰 만들기 코틀린
Author And Source
이 문제에 관하여([Andorid] 산책 앱 개발 일지 4: 커스텀 뷰 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chloedewyes/Andorid-산책-앱-개발-일지-4-커스텀-뷰-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)