Thứ Hai, 9 tháng 4, 2018

Tài nguyên Drawable (1) - Sử dụng shape xml trong Android

Tài nguyên Drawable

Tài nguyên Drawable là một khái niệm chung ám chỉ đối tượng đồ họa nào đó có thể được vẽ ra trên màn hình. Trong dự án ứng dụng Android với Android Studio thường các tài nguyên đồ họa này đặt trong thư mục res/drawable, sau đó nó được sử dụng bằng cách lấy ra từ trong code bằng các hàm API như ContextCompat.getDrawable, ResourcesCompat.getDrawable hay gán vào thuộc tính phù hợp trong XML như android:drawable, android:icon, android:button ...
Lớp cơ sở biểu diễn Drawable là lớp Drawable (android.graphics.drawable.Drawable), từ lớp này mà có các kiểu Drawable khác nhau như:
Loại Drawable Thông tin
ShapeDrawable Là một Drawable bằng phần tử shape trong XML, nó cho phép vẽ một số hình cơ bản.
GradientDrawable Tạo Gradient bên trong shape.
VectorDrawable Là một Drawable bằng phần tử vector trong XML, nó cho phép vẽ ảnh vector như SVG
BitmapDrawable android.graphics.drawable.BitmapDrawable
Biểu diễn ảnh Bitmap, hỗ trợ các định dạng png, jpg, gif, các tài nguyên ảnh png, jpg đặt trong drawable tự động được phân tích thành BitmapDrawable
NinePatchDrawable Các ảnh png với phần tên có dạng .9.png sẽ tự động phân tích thành dạng Nine-Patch, loại Drawable cho phép thu phóng phần nội dung
LayerDrawable Một loại Drawable, chứa nhiều Drawable bên trong, các Drawable bên trong được vẽ theo thứ tự.
StateListDrawable Một Drawable có chứa nhiều Drawable bên trong để cho đối tượng sử dụng tùy trạng thái mà vẽ Drawable trong nó.
LevelListDrawable Một Drawable có chứa nhiều Drawable bên trong, mỗi Drawable được giá trị Level (min và max). Sau đó đối tượng sử dụng tùy giá trị Level mà sẽ sử dụng Drawable nào bên trong để vẽ.
TransitionDrawable Một Drawable có chứa 2 Drawable bên trong, nó cung cấp khả năng chuyển đổi qua lại giữa 2 Drawable (hiệu ứng fade).
InsetDrawable Một Drawable tạo ra từ cách chèn một Drawable khác vào và chỉ ra khoảng cách các mép.
ClipDrawable Một Drawable dựa trên Level, nó cho phép thiết lập cắt chiều rộng / cao dưa trên giá trị level.
ScaleDrawable Là một Drawable tạo ra từ Drawable khác bằng cách điều chỉnh tỷ lệ thu phóng

Truy cập Drawable

Truy cập đến Drawable trong XML

Các đối tượng đồ hòa Drawable như các ảnh .jpg, .png đặt trong thư mục res/drawable với tên đầy đủ như: res/drawable/filename.png, hoặc là các định dạng .xml với tên đầy đủ res/drawable/filename.xml
Trong các triển khai XML ví dụ như layout, truy cập đến Drawable với dạng: "@drawable/filename", ví dụ:

android:background="@drawable/example"

Truy cập đến Drawable trong code

1 Lấy Drawable bằng ContextCompat
Drawable drawable  = ContextCompat.getDrawable(context,id)
  • context Là một đối tượng Context như Activity hoặc lấy từ các view: getContext()
  • id là ID trỏ đến Drawable, sử dụng lớp R để truy cập như R.drawable.example
2 Lấy Drawable bằng ResourcesCompat
Drawable drawable  = ResourcesCompat.getDrawable(res, id, null)
  • res là đối tượng Resources, lấy được bằng phương thức getResources() của View hay Activity
  • id là ID trỏ đến Drawable, sử dụng lớp R để truy cập như R.drawable.example
Sau khi có Drawable trong code tùy ý sử dụng theo mục đích, ví dụ thiết lập vào nền cho View setBackground(drawable)

Vẽ ShapeDrawable, GradientDrawable trong XML

Tạo XML với phần tử gốc là <shape> với tham số android:shape là loại hình muốn vẽ, chấp nhận các loại hình sau:
  • rectangle : Để vẽ hình chữ nhật
  • ring: Hình khuyên
  • oval: Hình oval (elip)
  • line: Đường thẳng
Ví dụ khai báo là vẽ hình oval:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
</shape>
Tùy theo loại hình muốn vẽ mà bên trong <shape> có các phần tử con là dữ liệu để vẽ hình như sau:
  • Thiết lập nét vẽ với stroke
    <stroke
        android:width="10dp"
        android:color="#de461b"
        android:dashGap="2dp"
        android:dashWidth="10dp" />
    android:width chiều rộng nét vẽ; android:color màu nét vẽ; android:dashGap độ dài khoảng trống để tạo nét đứt; android:dashWidth độ dài nét đứt
    Ví dụ sau tạo ra một hình Oval với nét đứt
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <stroke
            android:width="5dp"
            android:color="#de461b"
            android:dashGap="2dp"
            android:dashWidth="10dp" />
    </shape>
  • Thiết lập màu tô với solid hoặc gradient
    Phần tử solid thêm vào để gán một màu tô vào theo cú pháp (ví dụ tô bằng màu vàng):
    <solid
        android:color="#f9d849" />
    Phần tử gradient để tạo màu tô theo Gradient
    Gradient sinh ra bằng cách biến đổi liên tục qua ba màu, ba màu thiết lập bằng thuộc tính: startColor, centerColor, endColor, thiết lập kiểu biến đổi bằng thuộc tính type với kiểu linear hoặc circle, góc biến đổi màu thiết lập bằng thuộc tính angle
    Ví dụ tô bằng gradient kiểu linear góc tố 45 độ
    <gradient
        android:angle="45"
        android:endColor="#87CEEB"
        android:centerColor="#768087"
        android:startColor="#000"
        android:type="linear" />
    Ví dụ tô bằng gradient kiểu linear góc tố 45 độ
     <gradient
            android:angle="45"
            android:endColor="#D38312"
            android:startColor="#FF6B6B"
            android:type="linear" />
    Khi sử dụng loại tô theo hình trong radial thì cần thiết lập bán kính của vùng tô bằng thuộc tính android:gradientRadius, có thể gán bằng giá trị cụ thể như 100dp hoặc bằng ký hiệu %p ví dụ "10%p" bán kính bằng 10% cạnh nhỏ, "100%p" bán kính bằng cạnh nhỏ. Vùng tô có hiệu lực là một hình tròn bán kính android:gradientRadius, tâm ở giữa hình hoặc thiết lập bằng thuộc tính centerXcenterY nhận giá trị từ 0 đến 1, ví dụ bằng 0.5 là ở giữa
    <gradient
        android:centerColor="#136d94"
        android:endColor="#05ec19"
        android:gradientRadius="50%p"
        android:startColor="#b9ad08"
        android:type="radial" />
    Ví dụ điều chỉnh tâm cách góc trên/trái theo chiều X là 10%, chiều Y một khoảng 20%
    <gradient
        android:centerColor="#136d94"
        android:endColor="#05ec19"
        android:gradientRadius="100%"
        android:startColor="#b9ad08"
        android:centerX="0.1"
        android:centerY="0.2"
        android:type="radial" />
  • Thiết lập kích thước vùng vẽ bằng <size> Nếu muốn thiết lập chính xác kích thước của Drawable này thì thêm vào phần tử size
    <size android:height="20dp"
        android:width="100dp" />
  • Thiết lập padding vùng vẽ <padding> Nếu muốn thiết lập các padding cho vùng vẽ
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
  • Thiết lập bo tròn các góc <corners> Với 4 góc của hình chữ nhật, có thể thiết lập bán kính bo tròn bằng phần tử corners, với các thuộc tính android:radius thiết lập bán kính bo tròn cả 4 góc như nhau, và với android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, android:bottomRightRadius để thiết lập bán kính cho từng góc
    Ví dụ bo tròn cả 4 góc
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <gradient
            android:angle="45"
            android:endColor="#D38312"
            android:startColor="#FF6B6B"
            android:type="linear" />
        <size android:height="20dp"
            android:width="100dp" />
    
        <corners android:radius="10dp"/>
    
    </shape>
  • Một số ví dụ với shape

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners
            android:radius="100dp"
            android:bottomRightRadius="20dp" />
        <gradient
            android:type="linear"
            android:startColor="#0083ff"
            android:centerColor="#00d4ff"
            android:endColor="#00fff6"
            android:angle="135"/>
        <size
            android:width="100dp"
            android:height="100dp" />
    
        <stroke
            android:width="2.3dp"
            android:color="#FFFFFF" />
    </shape>
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
        <corners android:radius="4dp" />
        <stroke android:width="4dp" android:color="#C1E1A6" />
        <solid android:color="#118C4E"/>
        <padding android:left="20dp" android:top="20dp"
            android:right="20dp" android:bottom="20dp" />
    </shape>
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"   android:shape="oval" >
        <solid
            android:color="#FFEECC" />
        <size
            android:width="100dp"
            android:height="100dp" />
    
        <stroke android:width="5dp" android:color="#444444" />
    </shape>

Không có nhận xét nào :

Đăng nhận xét

Danh mục Gửi liên hệ

Loading...