October 2015 – Windy Road Android

Drawable Resources Inset Drawable – Ảnh trong ảnh

Cú pháp:

<!-- language: lang-xml -->
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/drawable_resource"
android:insetTop="dimension"
android:insetRight="dimension" 
android:insetBottom="dimension" 
android:insetLeft="dimension" />

Nguồn: http://developer.android.com/guide/topics/resources/drawable-resource.html#Inset

Drawable Resources Transition – Đổi 2 ảnh qua lại

Vị trí file: `res/drawable/filename.xml`

Lớp sử dụng: `TransitionDrawable`

Gọi sử dụng:

In Java: R.drawable.filename
In XML: @[package:]drawable/filename

Cú pháp:

<!-- language: lang-xml -->
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@[package:]drawable/drawable_resource" android:id="@[+][package:]id/resource_name" android:top="dimension" android:right="dimension" android:bottom="dimension" android:left="dimension" />
</transition>

Thành phần:

android:topInteger – The top offset in pixels.

Ví dụ:

Tạo file: res/drawable/transition.xml

<!-- language: lang-xml -->
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/on" />
    <item android:drawable="@drawable/off" />
</transition>

Áp dụng cho View:

<!-- language: lang-xml -->
<ImageButton android:id="@+id/button" android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:src="@drawable/transition" />

Run Hiệu ứng trong Java:

ImageButton button = (ImageButton) findViewById(R.id.button);
TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();
drawable.startTransition(500);

Nguồn: http://developer.android.com/guide/topics/resources/drawable-resource.html#Transition

Drawable Resources Level List – Ảnh theo số

Vị trí file: `res/drawable/filename.xml`

Lớp sử dụng: `LevelListDrawable`

Gọi sử dụng:

In Java: R.drawable.filename
In XML: @[package:]drawable/filename

Cú pháp:

<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/drawable_resource" android:maxLevel="integer" 
android:minLevel="integer" />
</level-list>

Thành phần:

maxLevel, minLevel – Giới hạn Level mỗi Drawable

Sử dụng:

Tạo file xml:

<!-- language: lang-xml -->
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/status_off" 
android:maxLevel="0" />
    <item android:drawable="@drawable/status_on" 
android:maxLevel="1" />
</level-list>

đặt background View, đổi Level bằng hàm setLevel() hay setImageLevel()

Drawable Resources Layer List – Chèn Nhiều hình ảnh, thành 1 ảnh

Vị trí file: `res/drawable/filename.xml`

Hàm liên quan: LayerDrawable

Gọi xử dụng:

In Java: R.drawable.filename
In XML: @[package:]drawable/filename

Cú Pháp:

<!-- language: lang-xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@[package:]drawable/drawable_resource" android:id="@[+][package:]id/resource_name" android:top="dimension" android:right="dimension" android:bottom="dimension" android:left="dimension" />
</layer-list>

Mẹo: Canh giữa ảnh như sau

<!-- language: lang-xml -->
<item>
  <bitmap android:src="@drawable/image" android:gravity="center" />
</item>

Áp dụng:

Tạo File res/drawable/layers.xml:

<!-- language: lang-xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap android:src="@drawable/android_red" android:gravity="center" />
    </item>
    <item android:top="10dp" android:left="10dp">
      <bitmap android:src="@drawable/android_green" android:gravity="center" />
    </item>
    <item android:top="20dp" android:left="20dp">
      <bitmap android:src="@drawable/android_blue" android:gravity="center" />
    </item>
</layer-list>

Áp dụng vào view:

<!-- language: lang-xml -->
<ImageView 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:src="@drawable/layers" />

Nguồn: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList

Drawable Resources Nine-Patch File – Ảnh background, bọc đối tượng – Ảnh co giãn theo nội dung

Ảnh co giãn theo nội dung (.9.png)

Hàm liên quan: NinePatchDrawable

Áp dụng:

&lt;!-- language: lang-xml --&gt;
&lt;Button android:layout_height="wrap_content" android:layout_width="wrap_content" android:background="@drawable/myninepatch" /&gt;

XML Nine-Patch

Cú pháp:

&lt;!-- language: lang-xml --&gt;
&lt;nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:src="@[package:]drawable/drawable_resource" android:dither=["true" | "false"] /&gt;

Nguồn: http://developer.android.com/guide/topics/resources/drawable-resource.html#NinePatch

Drawable Resources Bitmap – Chứa file ảnh thuần (png, jpg, gif)

Chứa file ảnh thuần (png, jpg, gif)

Vị trí file: `res/drawable/filename.png` (`.png`, `.jpg`, or `.gif`)

Gọi sử dụng:

In Java: R.drawable.filename
In XML: @[package:]drawable/filename

Hàm liên quan: BitmapDrawable

Ví dụ:

Chép ảnh vào: res/drawable/myimage.png, gọi trong ImageView

<!-- language: lang-xml -->
<ImageView 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:src="@drawable/myimage" />

Gọi ảnh trong Java:

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage);

Xem tiếp:

XML Bitmap

Định nghĩa Xml trỏ đến Ảnh. Tạo hiệu ứng, canh vị trí, properties.

Hàm: BitmapDrawable

Cú pháp:

<!-- language: lang-xml -->
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
android:src="@[package:]drawable/drawable_resource" 
android:antialias=["true" | "false"] 
android:dither=["true" | "false"] 
android:filter=["true" | "false"] 
android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |"fill_vertical" | "center_horizontal" | "fill_horizontal" |"center" | "fill" | "clip_vertical" | "clip_horizontal"] 
android:mipMap=["true" | "false"] 
android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />

Thành phần:

android:src – (Required) Drawable resource
android:antialias – ẩn hay hiện răng cưa (antialiasing)
android:dither – Ẩn hiện Phối màu
android:filter – ẩn hiện bộ lọc
android:mipMap – ẩn hiện mipmap hint
android:tileMode – Vị trí bao bọc
- disabled
- repeat
- clamp - tạo lại viền ngoài nếu Shader bên ngoài Ảnh gốc
- mirror
android:gravity - Trọng lực (trên, dưới trái phải) so với cha, cách = |
- top
- bottom
- left
- right
- center
- fill
- center_vertical
- fill_vertical
- clip_vertical
- …

Drawable Resources – Thư mục chứa ảnh, XML Ảnh, tạo ảnh

Thự mục chứa ảnh.

Vị trí file: `res/drawable/filename.png` (`.png`, `.jpg`, or `.gif`)

Gọi sử dụng:

In Java: R.drawable.filename
In XML: @[package:]drawable/filename

Có thể chứa các loại ảnh sau:

Bitmap File

Chứa file ảnh thuần (png, jpg, gif)

Hàm liên quan: BitmapDrawable

Nine-Patch File

Ảnh co giãn theo nội dung (.9.png)

Hàm liên quan: NinePatchDrawable

Layer List

Chèn Nhiều hình ảnh, thành 1 ảnh

Hàm liên quan: LayerDrawable

State List

Ảnh theo trạng thái (hover, press)

Hàm liên quan: StateListDrawable

Level List

Ảnh theo số (ví dụ: set số 1 => ảnh 1, số 2 => ảnh 2)

Hàm liên quan: LevelListDrawable

Transition Drawable

Đổi 2 ảnh qua lại (kiểu cross-fade mờ dần)

Hàm: TransitionDrawable

Inset Drawable

Định nghĩa ảnh ở trong ảnh. Dùng khi dùng ảnh nền mà ảnh thật nhỏ hơn ảnh nền (làm ảnh to ra thêm tí :D).

Clip Drawable

Định nghĩa ảnh, là 1 phần của ảnh khác (bị cắt ra)

Hàm: ClipDrawable

Scale Drawable

Định nghĩa ảnh, đổi size ảnh khác dựa vào giá trị level.

Hàm: ScaleDrawable

Shape Drawable

Tạo ảnh qua các đường = xml, màu, gradients.

Hàm: ShapeDrawable

Ngồn: http://developer.android.com/guide/topics/resources/drawable-resource.html#Transition

Drawable Resources Stage list – Đổi màu, ảnh theo trạng thái hover, click

Vị trí file:

res/color/filename.xml –
res/drawable/filename.xml

Lớp sử dụng: ColorStateList

Gọi sử dụng:

In Java: R.color.filename
In XML: @[package:]color/filename

Cú pháp:

<!-- language: lang-xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:color="hex_color" android:drawable="@drawable/button_pressed" 
android:state_pressed=["true" | "false"] 
android:state_focused=["true" | "false"] 
android:state_selected=["true" | "false"] 
android:state_checkable=["true" | "false"] 
android:state_checked=["true" | "false"] 
android:state_enabled=["true" | "false"] 
android:state_window_focused=["true" | "false"] />
</selector>

Thành phần:

android:drawable – Ảnh đổi
android:color – màu đổi

Sử dụng:

File: res/color/button_text.xml

<!-- language: lang-xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- pressed -->
 <item android:state_pressed="true" android:color="#ffff0000"/> 
<!-- focused -->
 <item android:state_focused="true" android:color="#ff0000ff"/> 
 <item android:color="#ff000000"/> <!-- default -->
</selector>

Sử dụng:

<Button android:layout_width="fill_parent" android:layout_height="wrap_content" 
android:text="@string/button_text" 
android:textColor="@color/button_text" />

Nguồn: http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList

Android Frame Animation – Hiệu Ứng theo khung hình

Vị trí file: res/drawable/filename.xml

Lớp sử dụng: AnimationDrawable

Gọi sử dụng:

In Java: R.drawable.filename
In XML: @[package:]drawable.filename

Cú pháp:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot=["true" | "false"] >
 <item android:drawable="@[package:]drawable/drawable_resource_name" android:duration="integer" />
</animation-list/>

Thuộc tính:

android:oneshot: chạy 1 lần
- true – chạy 1 lần
- false – chạy hình nhiều lần
android:duration – thời gian của hình

Gọi trong code:

file xml – res/anim/rocket.xml:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list/>

Sử dụng

 
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); 
rocketImage.setBackgroundResource(R.drawable.rocket_thrust); 

rocketAnimation = (AnimationDrawable) rocketImage.getBackground(); 
rocketAnimation.start();

Trích:

http://developer.android.com/guide/topics/resources/animation-resource.html

Android – Animator – Hiệu Ứng – Chuyển hoạt nhiều hơn

Khác biệt Animation:

Animators là phiên bản sau của Animations (API 2.3)
Animators thay đổi, thay đổi theo Coordinates (Vị trí)

(Trích: http://stackoverflow.com/questions/28220613/what-is-the-difference-between-an-animator-and-an-animation )

Vị trí File XML: res/animator/filename.xml

COMPILED RESOURCE DATATYPE – Loại Trong Resource: `ValueAnimator`, `ObjectAnimator`, or `AnimatorSet`

RESOURCE REFERENCE:

In Java: R.animator.filename
In XML: @[package:]animator/filename

Cú pháp:


<set
android:ordering=["together" | "sequentially"]>

<objectAnimator
android:propertyName="string"
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["repeat" | "reverse"]
android:valueType=["intType" | "floatType"]/>

<animator
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["repeat" | "reverse"]
android:valueType=["intType" | "floatType"]/>

<set>
...
</set>
</set>

Thuộc tính:

android:propertyName – tên thuộc tính (Required) example: “alpha”, “backgroundColor”, objectAnimator. Gọi trong Java: setTarget()
android:valueTo – (Required)
android:valueFrom
android:duration
android:startOffset – Thời gian delays sau khi gọi start()
android:repeatCount – Lần lặp
- -1 = vô hạn,
- 0 = không lặp
android:repeatMode – Kiểu lặp
- “reverse” = có nghịch đảo
- “repeat” = lặp mỗi lần
android:valueType – Từ khóa
- intType – thông số animated là kiểu Integers
- floatType (default)

Gọi trong Java Code:

// Tạo AnimatorSet từ Animator
AnimatorSet anim = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.test_animator);
// Đặt đối tượng
anim.setTarget(mView);
// bắt đầu
anim.start();

Trích:

http://developer.android.com/guide/topics/resources/animation-resource.html

Cú pháp:

Vị trí file: res/drawable/filename.xml

Lớp sử dụng: TransitionDrawable

Gọi sử dụng:

Cú pháp:

Ví dụ:

Vị trí file: res/drawable/filename.xml

Lớp sử dụng: LevelListDrawable

Gọi sử dụng:

Cú pháp:

Sử dụng:

Vị trí file: res/drawable/filename.xml

Hàm liên quan: LayerDrawable

Gọi xử dụng:

Cú Pháp:

Áp dụng:

Hàm liên quan: NinePatchDrawable

Áp dụng:

XML Nine-Patch

Vị trí file: res/drawable/filename.png (.png, .jpg, or .gif)

Gọi sử dụng:

Hàm liên quan: BitmapDrawable

Ví dụ:

XML Bitmap

Vị trí file: res/drawable/filename.png (.png, .jpg, or .gif)

Gọi sử dụng:

Có thể chứa các loại ảnh sau:

Vị trí file:

Lớp sử dụng: ColorStateList

Gọi sử dụng:

Cú pháp:

Sử dụng:

Vị trí file: res/drawable/filename.xml

Lớp sử dụng: AnimationDrawable

Gọi sử dụng:

Cú pháp:

Gọi trong code:

Khác biệt Animation:

Vị trí File XML: res/animator/filename.xml

COMPILED RESOURCE DATATYPE – Loại Trong Resource: ValueAnimator, ObjectAnimator, or AnimatorSet

RESOURCE REFERENCE:

Cú pháp:

Gọi trong Java Code:

Trích:

Vị trí file: `res/drawable/filename.xml`

Lớp sử dụng: `TransitionDrawable`

Vị trí file: `res/drawable/filename.xml`

Lớp sử dụng: `LevelListDrawable`

Vị trí file: `res/drawable/filename.xml`

Vị trí file: `res/drawable/filename.png` (`.png`, `.jpg`, or `.gif`)

Vị trí file: `res/drawable/filename.png` (`.png`, `.jpg`, or `.gif`)

COMPILED RESOURCE DATATYPE – Loại Trong Resource: `ValueAnimator`, `ObjectAnimator`, or `AnimatorSet`