ImageView trong Android
Hầu hết tất cả các ứng dụng, web, game trên desktop, web, moblie đều sử dụng hình ảnh. Và trong Android để hiển thị hình ảnh chúng ta sử dụng view được xây dựng sẵn trong Android SDK có tên là ImageView. ImageView là một view có chức năng loading, và hiển thị hình ảnh, hoặc bất cứ drawable. ImageView handle cho chúng ta tất cả các công việc để hiển thị hình ảnh.
ImageView là class con của View. Do đó, bạn có thể đặt một ImageView vào bên trong một GroupView trong ứng dụng của mình.
Chúng ta có thể tạo một ImageView trong tập tin XML hoặc khởi tạo ImageView trong code Java
Code ImageView trong XML:
Hình cần hiển thị phải có trong thư mục res/drawable, image có tên là demo.jpg
<ImageView android:id="@+id/simpleImageView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/demo" /> 
Thuộc tính thường dùng của ImageView
Bây giờ chúng xem một số thuộc tính hay sử dụng trong ImageViewtrong tập tin XML
1. android:id: Là thuộc tính duy nhất của ImageView. Xem ví dụ sau:
<ImageView android:id="@+id/simpleImageView" android:layout_width="fill_parent" android:layout_height="wrap_content" /> 2. android:src: là thuộc tính chứa hình ảnh cần hiển thị. Chúng ta cũng có thể tạo hình tại chế độ thiết kế:
<ImageView android:id="@+id/simpleImageView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/demo" /> Trong Java Class:
Chúng ta cũng có thể set hình ảnh trong Java Class bằng cách gọi phương thức setImageResource()
ImageView simpleImageView=(ImageView) findViewById(R.id.simpleImageView); simpleImageView.setImageResource(R.drawable.demo);//set the source in java class 
3. android:background: Thuộc tính này xác định màu nền cho ImageView.
<ImageView android:id="@+id/simpleImageView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#000" android:src="@drawable/demo" /><!--black color in background of a image view--> Trong Java Class
Chúng ta cũng có thể set màu nền cho đối tượng ImageView trong Java Class:
/*Add in Oncreate() funtion after setContentView()*/ ImageView simpleImageView=(ImageView) findViewById(R.id.simpleImageView); simpleImageView.setBackgroundColor(Color.BLACK);//set black color in background of a image view in java class 4. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của ImageView với nội dung nó chứa: left, right, top or bottom.
- paddingRight: thiết khoảng cách bên phải của ImageView.
- paddingLeft: thiết khoảng cách bên trái của ImageView.
- paddingTop: thiết khoảng cách phía trên của ImageView.
- paddingBottom: thiết khoảng cách phía bên dưới của ImageView.
- padding: thiết khoảng cách tất cả 4 phía của ImageView.
Ví dụ: chúng ta xác định padding=30dp từ mọi phía của ImageView
<ImageView android:id="@+id/simpleImageView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#000" android:src="@drawable/lion" android:padding="30dp"/><!--set 30dp padding from all the sides--> 
5. android:scaleType: ScaleType là thuộc tính xác định các thức mà hình ảnh sẽ được scale như thế nào để phù hợp với view của chúng ta. ImageView có thể hiển thị image theo nhiều cách khác nhau phụ thuộc vào các giá trị của thuộc tính scaleType. Giá trị của scaleType :fit_xy, center_crop, fitStart v.v .
Giả sử chúng ta có một ImageView có kích thước là width = 200sp, height = 200sp, và hình ảnh có kích thước là 400*500
<ImageView android:id="@+id/simpleImageView" android:layout_width="200sp" android:layout_height="200sp" android:src="@drawable/demo" android:scaleType="fitXY"/><!--set scaleType fit XY--> Khi set scaleType=fitXY thì có nghĩa hình ảnh đó sẽ được scale về kích thước đúng bằng với kích thước của view là 200*200, và kết quả là hình ảnh sẽ được fit (cố định) đúng với view nhưng hình ảnh không còn giử được ratio của nó nữa.
Ví dụ sau chúng ta dùng giá trị của scaleType="fitStart":
<ImageView android:id="@+id/simpleImageView" android:layout_width="200sp" android:layout_height="200sp" android:src="@drawable/demo" android:scaleType="fitStart"/><!--set scaleType fit fitStart--> 
Ví dụ: Trong ví dụ này chúng ta sẽ làm app hiển thị hình ảnh lên một ImageView. Để xem hình người sử dụng click vào 2 Button trên màn hình. Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:
Bước 1: Tạo một project tên là TextView: File->New->Android Application Project điền các thông tin ->Next ->Finish
Bước 2: Download 2 hình và lưu vào thư mục trong project của bạn:
Bước 3: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code, chúng ta sẽ tạo các TextView, EditText và Button trong Relative Layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="hiepsiit.com.imageview.MainActivity" > <ImageView android:id="@+id/imgDemo" android:layout_width="wrap_content" android:layout_height="300sp" android:src="@drawable/demo" android:scaleType="fitXY"/><!--set scaleType fit XY--> <Button android:id="@+id/btnDemo1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/imgDemo" android:layout_marginTop="36dp" android:text="@string/btndemo1" /> <Button android:id="@+id/btnDemo2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/btnDemo1" android:layout_alignBottom="@+id/btnDemo1" android:layout_alignRight="@+id/imgDemo" android:text="@string/btndemo2" /> </RelativeLayout> Chuyển quan XML đổi tên các điều khiển:
| Điều khiển | android:id | |
|---|---|---|
| TextView1 | imgDemo | @string/txtnuma |
| Button1 | btnDemo1 | @string/btndemo1 |
| Button2 | btnDemo2 | @string/btndemo2 |
Vào thư mục res/values bổ sung string.xml (Chúng ta không khai báo trực tiếp nhãn vào các điều khiển, mà thông qua string.xml)
<string name="btndemo1">Xem hình 1</string> <string name="btndemo2">Xem hình 2</string> Bước 3: Mở app -> src ->MainActivity.java và thêm code. Khi click vào Button "Xem hình 1" sẽ hiển thị hình demo.jpg, click vào Button "Xem hình 2" sẽ hiển thị hình demo2.jpg
package hiepsiit.com.imageview; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.ImageView; public class MainActivity extends Activity { ImageView imgDemo; Button btnDemo1, btnDemo2; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imgDemo = (ImageView) findViewById(R.id.imgDemo); btnDemo1= (Button) findViewById(R.id.btnDemo1); btnDemo2= (Button)findViewById(R.id.btnDemo2); btnDemo1.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub imgDemo.setImageResource(R.drawable.demo); } }); btnDemo2.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub imgDemo.setImageResource(R.drawable.demo2); } }); } }
Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.
Kết quả khi chạy ứng dụng:
Sau đó Click vào Button "Xem hình 2":
Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com
