Hướng dẫn tạo custom View Android
Kotlin
4
android
55
White

Hoàng Vũ Anh viết ngày 23/07/2020

Chào anh em. nếu anh em đã từng xem những video dạy iOS của kênh
Lets Build That App trên Youtube thì có lẽ không xa lạ gì với việc dựng view 100% bằng code. Xem xong mấy anh em bên Android chắc cũng thắc mắc là không biết bên mình có làm được như vậy không.

Câu trả lời là có, tuy nhiên do bên Android dựng view bằng XML cũng rất ngon rồi nên chẳng ai quan tâm đến việc dựng view bằng code. Đấy là trong đa số các trường hợp nhưng đôi khi sẽ có những view mặc định Android không hỗ trợ, như một view dạng hình tròn chằng hạn, khi đó chúng ta sẽ phải dùng tới thư viện hoặc tự tạo một class để vẽ view đó.

Bài hôm nay sẽ hướng dẫn mọi người vẽ một view bằng code. Để bắt đầu cùng đọc qua những thuật ngữ cơ bản, bắt đầu thôi

View là gì?

This class represents the basic building block for user interface components. A View occupies a rectangular area on the screen and is responsible for drawing and event handling. View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.). The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.

Mình trích dẫn nguyên từ tài liệu của Google vì thấy nó cũng dễ hiểu, dịch ra sẽ làm sai lệch đi nội dung của định nghĩa.

  • Đầu tiên chúng ta sẽ tạo một project mới. Chọn Empty Project

alt text

  • Ngôn ngữ sử dụng là Kotlin, rồi ấn Finish

alt text

  • Sau đó tạo class tên là CircleView, class này kế thừa class View

class CircleView (context: Context, attrs: AttributeSet): View(context, attrs){  
    var paint: Paint = Paint()  
    var centerOfX =  340F  
  var centerOfY =  340F  
  var radiusOfCircleView =  140F  


  init {  
        paint.color = ContextCompat.getColor(context,android.R.color.holo_green_light)  
        paint.strokeWidth = 40f  
  paint.style = Paint.Style.STROKE// Constructor Call  
  }  

    override fun onDraw(canvas: Canvas?) {  
        canvas?.drawCircle(centerOfX,centerOfY,radiusOfCircleView,paint)  
        super.onDraw(canvas)  
    }  
}

Trong Android Canvas là công cụ dùng để vẽ View, Paint là bút vẽ. Tạo class xong rồi, chúng ta sang bên XML khai báo để sử dụng thằng này.

<?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"  
  xmlns:tools="http://schemas.android.com/tools"  
  android:layout_width="match_parent"  
  android:layout_height="match_parent"  
  tools:context=".MainActivity">  

 <com.tomosia.customviewexample.CircleView  android:layout_width="match_parent"  
  android:layout_height="match_parent"  
  app:layout_constraintBottom_toBottomOf="parent"  
  app:layout_constraintLeft_toLeftOf="parent"  
  app:layout_constraintRight_toRightOf="parent"  
  app:layout_constraintTop_toTopOf="parent" />  

</androidx.constraintlayout.widget.ConstraintLayout>
  • Chúng ta sẽ thấy hiện ra một View như thế này

alt text

Vậy là chúng ta đã hoàn thành xong bước đầu của phần tạo một custom view trong Android. Phần tiếp theo mình sẽ hướng dẫn để thêm các thuộc tính cho view.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hoàng Vũ Anh

1 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
2 0
Kotlin giờ là một từ khóa làm điên đảo cả giới lập trình viên đặc biệt là lập trình viên android. Kotlin hiện nay rất phổ biến và cực kì mạnh mẽ, c...
Aragami1408 viết 2 năm trước
2 0
White
5 0
Học Firebase qua Project Phần 1: Giới thiệu và tạo giao diện cho ứng dụng nhắn tin Như các bạn đã biết Firebase hiện tại là nền tảng khá phố biến ...
Nguyễn Hoàng Minh viết hơn 2 năm trước
5 0
White
1 2
kotlin fun main(args: Array) { find("a") find("b") find("c") find("d") } val a : MutableList = mutableListOf() fun find(name: String, a...
Trần Đức Tâm viết hơn 3 năm trước
1 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!