Hướng dẫn tạo custom View Android
Kotlin
50
android
66
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
1 0
Tôi đã gặp vấn đề với việc đồng bộ danh bạ trên chiếc Samsung Galaxy S6 Edge của khi bật chế độ tiết kiệm pin. Sau khi tìm kiếm 1 lúc, tôi đã tìm r...
Lương Trưởng viết 2 năm trước
1 0
Male avatar
0 0
https://grokonez.com/frontend/angular/angular6/kotlinspringbootangular6crudhttpclientmysqlexamplespringdatajparestapisexample Kotlin Spring Boot +...
loveprogramming viết 5 ngày trước
0 0
{{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á!