ImageButton: trong android bạn có thể sử dụng ImageButton để hiển thị một Button thông thường với hình nền là một bức ảnh tùy ý. Về việc xử lý với ImageButton rất giống với Button
Để làm rõ 2 thành phần này trong ví dụ này mình sẽ làm một ứng dụng với kịch bản như sau: Giao diện của ứng dụng gồm 2 thành phần: 1 ImageView, 1 ImageButton khi bạn click vào ImageView thì mình sẽ hiển thị “Toast” để thông báo; khi bạn click vào ImageButton mình sẽ thay đổi ảnh của ImageView theo vòng lần lượt 6 ảnh là quốc kỳ của các nước.
Để làm được ví dụ này các bạn thực hiện lần lượt các bước sau:
Bước 1: bạn tạo thư mục drawable trong folder res và copy các bức ảnh các bạn muốn hiển thị vào trong đó trong ví dụ của mình mình copy hình ảnh quốc kỳ 6 nước vào thư mục này như hình.
Ngoài ra mình có copy 1 ảnh để làm nền cho ImageButton vì ảnh của mình có kích thước 96×96 nên mình copy vào thư mục drawalbe-xhdpi . Việc copy chuẩn vào folder rất có lợi vì hđh android sẽ tự xác định kích thước màn hình của bạn để chọn ảnh tương ứng các bạn có thể thử bằng cách delete ảnh ở thư mục này và copy vào thư mục drawalbe ở trên và chạy để xem kết quả.
Bước 2: Mở file res-> layout ->activity_main.xml
Thêm 2 đối tượng ImageView và ImageButton theo src dưới đây
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <LinearLayout 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:orientation="vertical" tools:context=".MainActivity" > <!-- thuoc tinh android:src dung de set hinh anh cho ImageView va ImageButton --><ImageView android:id="@+id/imDemo" android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center_horizontal" android:layout_marginTop="50dp" android:contentDescription="@string/vietnam" android:src="@drawable/vietnam" /><ImageButton android:contentDescription="@string/changeImage" android:id="@+id/ibtChangeImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="30dp" android:src="@drawable/ic_arrow_round_change" /></LinearLayout> |
Bước 3: mở file MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
| package com.example.imageviewdemo;import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageButton;import android.widget.ImageView;import android.widget.Toast;public class MainActivity extends Activity { // buoc 1 thiet ke layout// khai bao doi tuong private ImageView imDemo; private ImageButton ibtChangeImage; private int countOnclickButton=0;@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);// lien ket doi tuong den layout imDemo = (ImageView) findViewById(R.id.imDemo);// bat su kien click vao imageView imDemo.setOnClickListener(new OnClickListener() {@Override public void onClick(View arg0) { // khi click vao imageView se thuc hien phuong thuc nay ShowToastShort(MainActivity.this, "Ban Click vao ImageView"); } }); // Cac ban co the thay doi de dang hinh anh cua ImageView // o minh lam 1 vi du don gian bat su kien onclick vao ImageButton // va lan luot thay doi hinh dang cua imageView // minh su dung bien i de dem so lan onclick vao button // neu so lan onClick khac nhau minh se hien thi lan luot 6 anh theo vong tron // link ImageButton den layout de dieu khien ibtChangeImage=(ImageButton)findViewById(R.id.ibtChangeImage); // handler su kien click vao ImageButton ibtChangeImage.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub countOnclickButton++; switch (countOnclickButton%6) { case 0: imDemo.setImageResource(R.drawable.vietnam); break; case 1: imDemo.setImageResource(R.drawable.canada); break; case 2: imDemo.setImageResource(R.drawable.gb); break; case 3: imDemo.setImageResource(R.drawable.south_korea); break; case 4: imDemo.setImageResource(R.drawable.sweden); break; case 5: imDemo.setImageResource(R.drawable.usa); break;default: break; } } }); }public static void ShowToastShort(Context mContext, String Message) { Toast.makeText(mContext, Message, Toast.LENGTH_SHORT).show();}@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }} |
0 nhận xét:
Đăng nhận xét