Android: Tạo Custom View

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Nền tảng Android cung cấp một loạt các mục giao diện người dùng đủ để đáp ứng nhu cầu của hầu hết các ứng dụng. Tuy nhiên, có thể có những trường hợp bạn cảm thấy cần phải triển khai giao diện người dùng tùy chỉnh cho một dự án mà bạn đang làm việc. Trong hướng dẫn này, chúng tôi sẽ làm việc thông qua quá trình tạo Chế độ xem tùy chỉnh.

Để tạo và sử dụng Chế độ xem tùy chỉnh, chúng tôi sẽ mở rộng lớp Chế độ xem, xác định và chỉ định một số thuộc tính tùy chỉnh, thêm Chế độ xem vào bố cục XML của chúng tôi, ghi đè lên phương thức onDrawđể điều chỉnh giao diện Chế độ xem và điều khiển nó từ Hoạt động chính của ứng dụng.

Bước 1: Tạo một dự án Android

Tạo một dự án Android mới trong Eclipse. Bạn có thể chọn bất kỳ cài đặt nào bạn muốn miễn là ứng dụng của bạn có lớp Hoạt động chính và tệp bố cục cho nó. Chúng tôi không cần bất kỳ sửa đổi nào đối với tệp kê khai. Trong tệp tải xuống mã nguồn hoạt động chính được đặt tên là "LovelyActivity" và tệp bố cục là "activity_lovely.xml" - thay đổi mã cho phù hợp với tên riêng của bạn nếu cần. Chúng tôi sẽ tạo và thêm vào một vài tệp bổ sung khi chúng tôi đi cùng.

Bước 2: Tạo lớp view

Chế độ xem tùy chỉnh của chúng tôi có thể mở rộng bất kỳ lớp học Android View hiện có nào như Nút hoặc TextView. Tuy nhiên, chúng ta sẽ tạo một lớp con trực tiếp của View. Việc mở rộng một lớp hiện có cho phép bạn sử dụng chức năng và kiểu dáng hiện có được liên kết với lớp đó, đồng thời cung cấp việc xử lý cho phù hợp với các nhu cầu bổ sung của riêng bạn.

Tạo một lớp mới trong ứng dụng của bạn bằng cách chọn gói chính của ứng dụng trong Eclipse và chọn "File", "New", "Class". Nhập tên của lựa chọn của bạn và nhấp vào "Hoàn tất". Mã hướng dẫn sử dụng tên lớp "LovelyView" - bạn sẽ cần phải thay đổi nó trong tất cả các mã dưới đây nếu bạn chọn một tên khác. Làm cho lớp học mới của bạn mở rộng Chế độ xem bằng cách thêm vào dòng khai báo mở của nó:

public class LovelyView extends View {

 

Thêm các câu lệnh nhập sau đây:

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;
 

Bước 3: Tạo tài nguyên thuộc tính

Để sử dụng Chế độ xem tùy chỉnh của chúng tôi vì chúng tôi sẽ sử dụng Chế độ xem chuẩn (tức là đặt thuộc tính của nó trong XML bố cục và tham chiếu chúng trong mã Java của chúng tôi), chúng tôi sẽ khai báo tài nguyên thuộc tính. Trong Eclipse, tạo một tệp mới trong thư mục "res / values" của dự án bằng cách chọn nó và chọn "File", "New", "File". Nhập "attrs.xml" làm tên tệp và nhấp vào "Hoàn tất".

Trong tệp thuộc tính, trước tiên chúng ta cần chỉ ra rằng chúng ta đang liệt kê các tài nguyên, vì vậy hãy thêm phần tử cha sau:

<resources>
</resources>
 

Bên trong phần tử này, chúng ta sẽ khai báo ba thuộc tính cho View cho phép chúng ta tạo kiểu cho nó. Hãy giữ cho mọi thứ tương đối đơn giản - View sẽ hiển thị một vòng tròn với một số văn bản ở giữa. Ba thuộc tính sẽ là màu vòng tròn, chuỗi văn bản và màu văn bản. Thêm phần sau vào phần tử tài nguyên của bạn :

<declare-styleable name="LovelyView">
    <attr name="circleColor" format="color" />
    <attr name="circleLabel" format="string"></attr>
    <attr name="labelColor" format="color"></attr>
</declare-styleable>
 

Thành phần có thể khai báo chỉ định tên Chế độ xem. Mỗi thuộc tính có một tên và định dạng. Chúng tôi sẽ có thể chỉ định các thuộc tính này trong XML bố cục khi chúng tôi thêm Chế độ xem tùy chỉnh và cũng có thể truy xuất chúng trong lớp Chế độ xem. Chúng ta cũng sẽ có thể lấy và thiết lập các thuộc tính từ lớp Java Activity của chúng ta. Các giá trị được cung cấp cho mỗi thuộc tính sẽ cần phải thuộc loại được liệt kê ở đây dưới dạng định dạng.

Bước 4: Thêm chế độ xem vào bố cục

Hãy thêm một thể hiện của Chế độ xem tùy chỉnh vào tệp bố cục chính của ứng dụng của chúng tôi. Để chỉ định Chế độ xem tùy chỉnh và các thuộc tính của nó, chúng tôi cần thêm thuộc tính vào phần tử bố cục chính. Trong bản tải xuống nguồn, nó là một RelativeLayout nhưng bạn có thể sử dụng kiểu nào bạn thích. Thêm thuộc tính sau vào phần tử cha của bố cục của bạn:

 

Thay đổi "your.package.name" để phản ánh gói ứng dụng của bạn. Điều này chỉ định không gian tên cho ứng dụng của chúng tôi, cho phép chúng tôi sử dụng các thuộc tính mà chúng tôi đã xác định trong đó. Bây giờ chúng ta có thể thêm một thể hiện của View mới. Bên trong bố cục, thêm nó như sau:

<your.package.name.LovelyView
    android:id="@+id/custView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_margin="5dp"
    custom:circleColor="#ff0099"
    custom:circleLabel="Hello"
    custom:labelColor="#ffff66" />
 

Một lần nữa, thay đổi tên gói cho phù hợp với tên của bạn và tên lớp nếu cần. Chúng tôi sẽ sử dụng ID để tham chiếu đến Chế độ xem trong mã Hoạt động của chúng tôi. Lưu ý rằng phần tử liệt kê các thuộc tính Chế độ xem chuẩn cùng với các thuộc tính tùy chỉnh. Các thuộc tính tùy chỉnh được bắt đầu bằng "custom:" và sử dụng các tên mà chúng tôi đã chỉ định trong tệp XML thuộc tính của chúng tôi. Cũng lưu ý rằng chúng tôi đã chỉ định các giá trị của các loại mà chúng tôi đã chỉ ra bằng cách sử dụng các thuộc tính định dạng trong tệp "attrs.xml". Chúng tôi sẽ truy xuất và giải thích các giá trị này trong lớp Chế độ xem của chúng tôi.

Bước 5: Truy lục các thuộc tính

Bây giờ hãy quay lại lớp View mà chúng ta đã tạo. Bên trong khai báo lớp, thêm một số biến cá thể như sau:

//circle and text colors
private int circleCol, labelCol;
//label text
private String circleText;
//paint for drawing custom view
private Paint circlePaint;
 

Chúng tôi sẽ sử dụng ba trong số này để theo dõi các cài đặt hiện tại về màu sắc và văn bản. Đối tượng Paint là khi chúng ta vẽ View. Sau các biến này, thêm phương thức khởi tạo cho lớp của bạn:

public LovelyView(Context context, AttributeSet attrs){
    super(context, attrs);
 
}
 

Khi chúng ta mở rộng lớp View, điều đầu tiên chúng ta làm là gọi phương thức superclass. Sau cuộc gọi siêu , hãy mở rộng phương thức để thiết lập Chế độ xem. Đầu tiên khởi tạo đối tượng Paint:

//paint object for drawing in onDraw
circlePaint = new Paint();
 

Bây giờ hãy lấy các giá trị thuộc tính mà chúng ta đã thiết lập trong XML:

//get the attributes specified in attrs.xml using the name we included
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
    R.styleable.LovelyView, 0, 0);
 

Mảng được nhập này sẽ cung cấp quyền truy cập vào các giá trị thuộc tính. Lưu ý rằng chúng tôi sử dụng tên tài nguyên mà chúng tôi đã chỉ định trong tệp "attrs.xml". Bây giờ chúng ta hãy cố gắng lấy các giá trị thuộc tính, sử dụng một khối try trong trường hợp có điều gì sai:

try {
    //get the text and colors specified using the names in attrs.xml
    circleText = a.getString(R.styleable.LovelyView_circleLabel);
    circleCol = a.getInteger(R.styleable.LovelyView_circleColor, 0);//0 is default
    labelCol = a.getInteger(R.styleable.LovelyView_labelColor, 0);
} finally {
    a.recycle();
}
 

Chúng ta đọc các thuộc tính vào các biến cá thể của chúng ta. Lưu ý rằng chúng tôi sử dụng các tên mà chúng tôi đã liệt kê cho từng tên trong "attrs.xml" một lần nữa. Các màu được lấy ra dưới dạng giá trị số nguyên và nhãn văn bản dưới dạng Chuỗi.

Đó là phương thức khởi tạo hoàn thành - vào thời điểm nó đã thực thi, lớp nên lấy ra các thuộc tính View đã chọn mà chúng ta đã định nghĩa trong tệp tài nguyên thuộc tính và thiết lập các giá trị cho trong XML bố trí.

Bước 6: Vẽ chế độ xem

Bây giờ chúng ta có thuộc tính View của chúng ta trong lớp, vì vậy chúng ta có thể tiếp tục và vẽ nó. Để làm điều này, chúng ta cần ghi đè lên phương thức onDraw . Thêm đường viền của nó sau phương thức khởi tạo của bạn như sau:

@Override
protected void onDraw(Canvas canvas) {
    //draw the View
}
 

Vì chúng ta sẽ vẽ một vòng tròn, hãy lấy một số thông tin về không gian có sẵn, bên trong phương thức onDraw:

//get half of the width and height as we are working with a circle
int viewWidthHalf = this.getMeasuredWidth()/2;
int viewHeightHalf = this.getMeasuredHeight()/2;
 

Bây giờ chúng ta có thể tính toán bán kính vòng tròn:

//get the radius as half of the width or height, whichever is smaller
//subtract ten so that it has some space around it
int radius = 0;
if(viewWidthHalf>viewHeightHalf)
    radius=viewHeightHalf-10;
else
    radius=viewWidthHalf-10;
 

Bây giờ chúng ta hãy thiết lập một số thuộc tính để vẽ với:

circlePaint.setStyle(Style.FILL);
circlePaint.setAntiAlias(true);
 

Bây giờ chúng ta sẽ sử dụng màu vòng tròn đã chọn như được lưu trữ trong biến cá thể của chúng ta:

//set the paint color using the circle color specified
circlePaint.setColor(circleCol);
 

Điều này có nghĩa là vòng tròn sẽ được vẽ bằng bất kỳ màu nào mà chúng tôi đã liệt kê trong XML bố cục. Hãy vẽ nó ngay bây giờ bằng cách sử dụng các chi tiết sau:

canvas.drawCircle(viewWidthHalf, viewHeightHalf, radius, circlePaint);

 

Bây giờ hãy thêm văn bản. Trước tiên, hãy đặt màu bằng cách sử dụng giá trị được lấy từ XML bố cục:

//set the text color using the color specified
circlePaint.setColor(labelCol);
 

Bây giờ hãy đặt một số thuộc tính khác:

//set text properties
circlePaint.setTextAlign(Paint.Align.CENTER);
circlePaint.setTextSize(50);
 

Cuối cùng, chúng ta có thể vẽ văn bản, sử dụng chuỗi văn bản được truy xuất:

//draw the text using the string attribute and chosen properties
canvas.drawText(circleText, viewWidthHalf, viewHeightHalf, circlePaint);
 

Đó là onDraw hoàn thành.

Giao diện ban đầu của ứng dụng

Bước 7: Cung cấp phương thức nhận và đặt

Khi bạn tạo Chế độ xem tùy chỉnh với các thuộc tính của riêng mình, bạn cũng nên cung cấp các phương thức get và set cho chúng trong lớp View của bạn. Sau phương thức onDraw , trước tiên hãy thêm các phương thức get cho ba thuộc tính tùy chỉnh:

public int getCircleColor(){
    return circleCol;
}
 
public int getLabelColor(){
    return labelCol;
}
 
public String getLabelText(){
    return circleText;
}
 

Mỗi phương thức chỉ trả về giá trị được yêu cầu. Bây giờ thêm các phương thức thiết lập cho các thuộc tính màu sắc:

public void setCircleColor(int newColor){
    //update the instance variable
    circleCol=newColor;
    //redraw the view
    invalidate();
    requestLayout();
}
public void setLabelColor(int newColor){
    //update the instance variable
    labelCol=newColor;
    //redraw the view
    invalidate();
    requestLayout();
}
 

Các phương thức này chấp nhận tham số int biểu diễn màu cần thiết. Trong cả hai trường hợp, chúng tôi cập nhật biến mẫu trong câu hỏi, sau đó nhắc Chế độ xem được vẽ lại. Điều này sẽ làm cho phương thức onDraw thực thi lại, sao cho các giá trị mới ảnh hưởng đến Chế độ xem được hiển thị cho người dùng. Bây giờ thêm phương thức set cho văn bản:

public void setLabelText(String newLabel){
    //update the instance variable
    circleText=newLabel;
    //redraw the view
    invalidate();
    requestLayout();
}
 

Điều này giống như hai phương thức thiết lập khác, ngoại trừ tham số String. Chúng ta sẽ gọi các phương thức này trong lớp Activity của chúng ta tiếp theo.

Bước 8: Thao tác chế độ xem từ hoạt động

Bây giờ chúng ta đã có các khái niệm cơ bản về Chế độ xem tùy chỉnh của chúng tôi, hãy minh họa bằng cách sử dụng các phương thức trong lớp Hoạt động của chúng tôi. Trong lớp Activity chính của ứng dụng, thêm các câu lệnh import sau đây:

import android.graphics.Color;
import android.view.View;
 

Trước phương thức onCreate , bên trong khai báo lớp, thêm một biến cá thể thể hiện cá thể của khung nhìn tùy chỉnh được hiển thị:

private LovelyView myView;

 

Bên trong phương thức onCreate , sau mã hiện có, hãy lấy nó bằng cách sử dụng ID của nó như được bao gồm trong tệp sơ đồ bố trí XML:

myView = (LovelyView)findViewById(R.id.custView);

 

Để minh họa thiết lập các giá trị thuộc tính View từ Activity, chúng ta sẽ thêm một nút đơn giản. Mở tệp bố cục của bạn và thêm nó sau phần tử Chế độ xem tùy chỉnh:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:onClick="btnPressed"
    android:text="@string/btn_label" />
 

Chúng tôi chỉ định một phương thức để thực thi khi người dùng nhấp chuột - chúng tôi sẽ thêm phương thức này vào lớp Hoạt động. Trước tiên, thêm chuỗi vào tệp XML "res / values ​​/ strings" của bạn:

<string name="btn_label">Press Me</string>

 
 
Ứng dụng có nút

Bây giờ quay trở lại lớp Activity và thêm phương thức được liệt kê cho các nhấp chuột vào nút:

public void btnPressed(View view){
//update the View
}
 

Hãy sử dụng các phương thức đã thiết lập mà chúng tôi đã định nghĩa để cập nhật giao diện Chế độ xem tùy chỉnh:

myView.setCircleColor(Color.GREEN);
myView.setLabelColor(Color.MAGENTA);
myView.setLabelText("Help");
 

Tất nhiên, đây chỉ là để minh họa cách bạn có thể tương tác với Chế độ xem tùy chỉnh trong mã Hoạt động của mình. Khi người dùng nhấp vào nút, giao diện của Chế độ xem tùy chỉnh sẽ thay đổi.

Ứng dụng sau khi nhấn nút

Phần kết luận

Nói chung, bạn nên sử dụng các lớp học Android View hiện có nếu có thể. Tuy nhiên, nếu bạn cảm thấy rằng bạn cần một mức độ tùy chỉnh ngoài cài đặt mặc định, việc tạo Chế độ xem tùy chỉnh của riêng bạn thường đơn giản. Những gì chúng tôi đã đề cập trong hướng dẫn này thực sự chỉ là khởi đầu khi tạo ra các giao diện người dùng Android được điều chỉnh. Xem hướng dẫn chính thức để biết thông tin về cách thêm tính tương tác và tối ưu hóa cho các tùy chỉnh của bạn.

» Tiếp: Tài nguyên chuỗi (string resource)
« Trước: View và ViewGroup trong Android
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!