Android cơ bản: [Bài 5] Tìm hiểu tài nguyên ứng dụng 1

Chào các bạn! Tiếp theo chúng ta cùng tìm hiểu về tài nguyên ứng dụng hình ảnh trong Android. Đầu tiên chúng ta cần phải biết thư mục lưu trữ tài nguyên, định dạng và cách truy xuất ra sao. Và cuối cùng là có những loại tài nguyên nào.

  1. Thư mục lưu trữ: các tài nguyên hình ảnh được lưu trữ trong thu mục res/drawable. Có thể có nhiều thư mục drawable theo từ hạn định khác nhau: drawable-hdpi, drawable-xhdpi, drawable-mdpi, drawable-xxhdp,…
  2. Định dạng: tài nguyên hình ảnh bao gồm cả định dạng: .xml và định dạng hình ảnh (.png, .gif, .jpg).
  3. Truy xuất: bao gồm 2 cách thức:
    • Java: R.drawable.<tên tài nguyên>. Ví dụ:
      Resources res = getResources();
      Drawable drawable = res.getDrawable(R.drawable.ic_launcher);
    • XML: @[pakage:]drawable/<tên tài nguyên>. Ví dụ:
      <ImageView
      android:layout_width=”50dp”
      android:layout_height=”50dp”
      android:src=”@drawable/ic_launcher” />
  4. Các định dạng tài nguyên hình ảnh: Bitmap, Shape, LayerList, StateList, LevelList, Transition, Inset, Clip, Scale và Nine-Patch.

Bây giờ sang phần giới thiệu và demo các dạng tài nguyên hình ảnh:

  1. Bitmap:
    • Định dạng ảnh nhị phân, Android hỗ trợ 3 định dạng tài nguyên hình ảnh: png, jpg và gif.
    • Các thực thi của Bitmap bao gồm: sử dụng như tài nguyên thông qua R.drawable.<tên file>. Tham chiếu biên dịch tài nguyên thông qua đối tượng BitmapDrawable.
    • Sử dụng các thuộc tính Bitmap trong XML: AntinAlias, Dither, Filter, Gravity, Mipmap, Tilemode và Automirrored.
    • Truy xuất trong java code: BitmapDrawable drawable = (BitmapDrawable) getResources().getDrawable(R.drawable.mipmap)
    • Hướng dẫn Demo:
      • Đầu tiên ta chép tấm hình này vào thư mục drawable:
        caro
      • Trong thư mục này tiếp tục tạo file xml có nội dung như sau:
        <?xml version="1.0" encoding="utf-8"?>
        <bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
            android:src="@drawable/caro" android:tileMode="disabled"
            android:gravity="center">
        </bitmap>
      • Tạo thiết kế file xml như sau:
        <LinearLayout xmlns:tools="http://schemas.android.com/tools"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
        
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >
        
                <TextView
                    android:id="@+id/tvTileModes"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/darker_gray"
                    android:text="@string/tilemodes"
                    android:textAppearance="?android:attr/textAppearanceLarge" />
        
                <RadioGroup
                    android:id="@+id/rgrTileModes"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >
        
                    <RadioButton
                        android:id="@+id/rbtDefault"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:checked="true"
                        android:text="@string/Default"
                        android:textSize="12sp" />
        
                    <RadioButton
                        android:id="@+id/rbtClamp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/Clamp"
                        android:textSize="12sp" />
        
                    <RadioButton
                        android:id="@+id/rbtRepeat"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/Repeat"
                        android:textSize="12sp" />
        
                    <RadioButton
                        android:id="@+id/rbtMirror"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/Mirror"
                        android:textSize="12sp" />
                </RadioGroup>
            </LinearLayout>
        
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >
        
                <TextView
                    android:id="@+id/tvGravity"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/darker_gray"
                    android:text="@string/gravity"
                    android:textAppearance="?android:attr/textAppearanceLarge" />
        
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" >
        
                    <RadioGroup
                        android:id="@+id/rgrGravity"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent" >
        
                        <RadioButton
                            android:id="@+id/rbtnTop"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/top" />
        
                        <RadioButton
                            android:id="@+id/rbtnLeft"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/left" />
        
                        <RadioButton
                            android:id="@+id/rbtnRight"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/right" />
        
                        <RadioButton
                            android:id="@+id/rbtnBottom"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/bottom" />
        
                        <RadioButton
                            android:id="@+id/rbtnFill"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/fill" />
        
                        <RadioButton
                            android:id="@+id/rbtnFillHorizontal"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/fillhorizontal" />
        
                        <RadioButton
                            android:id="@+id/rbtnFillVertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/fillvertical" />
        
                        <RadioButton
                            android:id="@+id/rbtnCenter"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:checked="true"
                            android:text="@string/center" />
        
                        <RadioButton
                            android:id="@+id/rbtnTopLeft"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/topleft" />
        
                        <RadioButton
                            android:id="@+id/rbtnTopRight"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/topright" />
        
                        <RadioButton
                            android:id="@+id/rbtnBottomLeft"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/botomleft" />
        
                        <RadioButton
                            android:id="@+id/rbtnBottomRight"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/bottomright" />
                    </RadioGroup>
        
                    <ImageView
                        android:id="@+id/imvTestPosition"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:contentDescription="@null"
                        android:scaleType="fitXY"
                        android:src="@drawable/gravity" />
                </LinearLayout>
            </LinearLayout>
        
        </LinearLayout>
      • Tiếp theo trong java code hứng lại các tài nguyên và xử lý khi người dùng tương tác vào như sau:
        package com.tqky.demobitmapdrawable;
        
        import android.graphics.Shader.TileMode;
        import android.graphics.drawable.BitmapDrawable;
        import android.os.Bundle;
        import android.support.v7.app.ActionBarActivity;
        import android.view.Gravity;
        import android.widget.ImageView;
        import android.widget.RadioGroup;
        import android.widget.RadioGroup.OnCheckedChangeListener;
        
        public class MainActivity extends ActionBarActivity {
        	BitmapDrawable drawable;
        	ImageView imageView;
        
        	@Override
        	protected void onCreate(Bundle savedInstanceState) {
        		super.onCreate(savedInstanceState);
        		setContentView(R.layout.activity_main);
        
        		imageView = (ImageView) findViewById(R.id.imvTestPosition);
        		
        		drawable = (BitmapDrawable) getResources().getDrawable(
        				R.drawable.gravity);
        		
        		((RadioGroup) findViewById(R.id.rgrTileModes)).setOnCheckedChangeListener(new OnCheckedChangeListener() {
        			
        			@Override
        			public void onCheckedChanged(RadioGroup group, int checkedId) {
        				// TODO Auto-generated method stub
        				switch (checkedId) {
        				case R.id.rbtDefault:
        					imageView.setImageBitmap(null);
        					drawable.setTileModeX(null);
        					imageView.setImageDrawable(drawable);
        					break;
        				case R.id.rbtClamp: 
        					imageView.setImageBitmap(null);
        					drawable.setTileModeX(TileMode.CLAMP);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtMirror: 
        					imageView.setImageBitmap(null);
        					drawable.setTileModeX(TileMode.MIRROR);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtRepeat: 
        					imageView.setImageBitmap(null);
        					drawable.setTileModeX(TileMode.REPEAT);
        					imageView.setBackground(drawable);
        					break;
        				}
        			}
        		});
        		
        		((RadioGroup) findViewById(R.id.rgrGravity)).setOnCheckedChangeListener(new OnCheckedChangeListener() {
        
        			@Override
        			public void onCheckedChanged(RadioGroup group, int checkedId) {
        				// TODO Auto-generated method stub
        				switch (checkedId) {
        				case R.id.rbtnBottom:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.BOTTOM);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtnBottomLeft:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.BOTTOM | Gravity.LEFT);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtnBottomRight:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.BOTTOM | Gravity.RIGHT);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtnTop:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.TOP);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtnTopLeft:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.TOP | Gravity.LEFT);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtnTopRight:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.TOP | Gravity.RIGHT);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtnLeft:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.LEFT);
        					imageView.setBackground(drawable);
        					break;	
        				case R.id.rbtnRight:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.RIGHT);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtnCenter:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.CENTER);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtnFill:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.FILL);
        					imageView.setBackground(drawable);
        					break;	
        				case R.id.rbtnFillHorizontal:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.FILL_HORIZONTAL);
        					imageView.setBackground(drawable);
        					break;
        				case R.id.rbtnFillVertical:
        					imageView.setImageBitmap(null);
        					drawable.setGravity(Gravity.FILL_VERTICAL);
        					imageView.setBackground(drawable);
        					break;
        				}
        			}
        		});
        
        	}
        }
        

        Ở trong đoạn code này chủ yếu là demo về các thuộc tính của bitmap. Sau này có thể áp dụng 1 cách hợp lý.

      • Kết quả khi chạy chương trình như sau:
        demo1
        khi ta chọn vào các radioButton thì hình ảnh sẽ được thay đổi theo.
      • Tải code demo tại Đây. Ở bài sau mình sẽ tiếp tục hướng dẫn các bạn làm tiếp các dạng tài nguyên còn lại.