- vừa được xem lúc

Tập tành Custom View trong Android (Phần 1)

0 0 31

Người đăng: Hoàng Việt Ngô

Theo Viblo Asia

Anh em code Android chắc cũng biết Android platform cung cấp khá đa dạng nhiều loại View Classes để "fit" với từng loại dự án khác nhau. Tuy nhiên, sẽ có một số dự án đặc trưng đòi hỏi sự cải tiến hoặc biến đổi khác nhau của view , đây là lí do ta nên biết custom view để tăng tính linh hoạt và tái sử dụng view.

Ở phần 1 này chúng ta sẽ đi qua về "view lifecycle" và custom một số attributes view cơ bản , chưa có draw canvas và onMeasure() đâu 😃) mình sẽ viết về nó ở phần 2.

1. View lifecycle

Activity , fragment , service ,... đều là các component sở hữu 1 vòng đời của riêng nó , View cũng như thế. Vòng đời của 1 view được mô tả như sau:

Constructor:

Khúc này chắc khá nhiều anh em hoang mang kiểu thấy tận 4 constructor overload được gọi , vậy chúng để làm gì nhỉ ?

constructor(context: Context): super(context)

Constructor này được gọi khi view chính thức được chạy vào context nơi mà view được chạy vào , có thể truy cập vào theme , resource qua context này .

constructor(context: Context, attrs: AttributeSet): super(context , attrs)

Thằng này được gọi khi ta inflate 1 view từ XML , cung cấp các thuộc tính default của AttributeSet cho sẵn và theme cũng là từ theme mặc định của context.

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

Được gọi khi view được inflate từ XML , kèm theo 1 style được lấy từ theme attribute.

constructor(context: Context, attrs: AttributeSet, defStyle: Int, defStyleRes: Int): super(context, attrs, defStyle, defStyleRes)

Được gọi khi view được inflate từ XML , kèm theo 1 style được lấy từ theme attribute hoặc style resource.

OnAttachToWindow():

Đây là callback được gọi đến khi view được attach tới 1 window , lúc này view chính thức active và vẽ trên bề mặt window đó , các attribute và listener được thiết lập.

OnDetachToWindow():

Lúc này view chính thức được gỡ khỏi bề mặt window , các attributes hay các resource được giải phóng và view inactive , được gọi khi chúng ta remove view khỏi Viewgroup hoặc destroy parent context của nó (fragment , activity,...)

onMeasure():

Callback này được gọi để xác định , tính toán kính thước của các view phụ thuộc vào kích thước mà parent , viewgroup của nó cung cấp. Bạn sẽ được cung cấp 2 param là "widthMeasureSpec" và "heightMeasureSpec" , 2 chỉ số này được parent view cung cấp là kích thước mà view của bạn được vẽ.

onLayout():

Callback này được gọi khi khi việc tính toán kích thước done và view được định vị trên màn hình.

onDraw():

Sau khi tính toán và định hình vị trí , view được vẽ trên layout mà nó được chỉ định. Object Canvas được sinh ra để thực hiện điều này .

Note: Vì onDraw() được gọi multiple time khi view có bất kì sự thay đổi nào trên màn hình , nên cẩn thận với việc khởi tạo nhiều object ở đây nha.

invalidate():

Việc gọi method này làm mất hiệu lực của toàn bộ view , khi view đang được hiển thị thành công thì onDraw() sẽ được call ở 1 vài thời điểm trong tương lai.

Note: Thay vì gọi thẳng onDraw() , chúng ta sẽ gọi tới invalidate() , để tối ưu hóa hiệu năng, ta nên hạn chế call method này nhất có thể.

requestLayout():

Method này được call khi có bất kì sự thay đổi nào trong layout view bound , nó sẽ định trước layout phase (measure -> layout -> draw) .

Note: Chúng ta nên gọi phương thức này trên UI thread , nếu nó được gọi trên non-UI thread , hãy sử dụng Handler.

2. Define custom Attributes.

Custom views có thể được cấu hình qua XML resource file và qua thẻ <declare-styleable . Ví dụ bạn cần cấu hình shapeColor và isDisplayShapeName , ta sẽ khai báo như sau:

<resources> <declare-styleable name="ShapeSelectorView"> <attr name="shapeColor" format="color" /> <attr name="displayShapeName" format="boolean" /> </declare-styleable>
</resources>

Khi đã define attribute trong resource , lúc này có thể sử dụng chúng trong layout XML :

<com.codepath.example.customviewdemo.ShapeSelectorView app:shapeColor="#7f0000" app:displayShapeName="true" android:id="@+id/shapeSelector" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/btnSelect" android:layout_alignParentLeft="true" android:layout_below="@+id/tvPrompt" />

3. Apply custom attributes.

Khi đã custom xong các thành phần (displayShapeName, shapeColor) , chúng ta cần trích xuất các thành phần này trong file CustomView , define chúng trong constructor với tham số truyền vào là AttributeSet (như tui đã nói bên trên).

Cùng với các method get,set các thuộc tính được khai báo:

public void setDisplayingShapeName(boolean state) { this.displayShapeName = state; invalidate(); requestLayout(); } public void setShapeColor(int color) { this.shapeColor = color; invalidate(); requestLayout(); }

Với các method này ta có thể set các thuộc tính trên bên ngoài code tùy với mục đích sử dụng.

4. Tổng kết.

Trên đây là bài viết nói về ViewLifeCycle và custom AttributeSet cơ bản. Phần 2 chúng ta sẽ nói tới draw view sử dụng Canvas và cách để build 1 thư viện crop image sử dụng Canvas.

Bài viết tham khảo:

https://guides.codepath.com/android/defining-custom-views#apply-custom-attributes

https://www.oodlestechnologies.com/dev-blog/understanding-custom-view-android/

Bình luận

Bài viết tương tự

- vừa được xem lúc

Học Flutter từ cơ bản đến nâng cao. Phần 1: Làm quen cô nàng Flutter

Lời mở đầu. Gần đây, Flutter nổi lên và được Google PR như một xu thế của lập trình di động vậy.

0 0 281

- vừa được xem lúc

Học Flutter từ cơ bản đến nâng cao. Phần 3: Lột trần cô nàng Flutter, BuildContext là gì?

Lời mở đầu. Màn làm quen cô nàng FLutter ở Phần 1 đã gieo rắc vào đầu chúng ta quá nhiều điều bí ẩn về nàng Flutter.

0 0 207

- vừa được xem lúc

[Android] Hiển thị Activity trên màn hình khóa - Show Activity over lock screen

Xin chào các bạn, Hôm nay là 30 tết rồi, ngồi ngắm trời chờ đón giao thừa, trong lúc rảnh rỗi mình quyết định ngồi viết bài sau 1 thời gian vắng bóng. .

0 0 107

- vừa được xem lúc

Tìm hiểu Proguard trong Android

1. Proguard là gì . Cụ thể nó giúp ứng dụng của chúng ta:. .

0 0 100

- vừa được xem lúc

Làm ứng dụng học toán đơn giản với React Native - Phần 6

Chào các bạn một năm mới an khang thịnh vượng, dồi dào sức khỏe. Lại là mình đây Đây là link app mà các bạn đang theo dõi :3 https://play.google.com/store/apps/details?id=com.

0 0 68

- vừa được xem lúc

20 Plugin hữu ích cho Android Studio

1. CodeGlance. Plugin này sẽ nhúng một minimap vào editor cùng với thanh cuộn cũng khá là lớn. Nó sẽ giúp chúng ta xem trước bộ khung của code và cho phép điều hướng đến đoạn code mà ta mong muốn một cách nhanh chóng.

0 0 315