Home > Article > Backend Development > Android UI control series: ImageButton (button with icon)
In addition to the Button button that comes with the Android system, it also provides a button with an icon ImageButton
To make a button with an icon, you must first define the ImageButton in the layout file, and then set the desired button through the setImageDrawable method. icon displayed.
Note:
We can set the icon of the button directly in the layout file, such as
android:src=”@drawable/icon1″
We can also Set a custom icon in the program
imgbtn3.setImageDrawable(getResources().getDrawable(R.drawable.icon2));
We can also use the system’s own icon
imgbtn4 .setImageDrawable(getResources().getDrawable(android.R.drawable.sym_call_incoming));
After setting the icon of the button, you need to set the listener setOnClickListener for the button to capture the event and handle the following
The example describes a layout composed of four icon buttons. The icons of three buttons are customized and the icon of the fourth button is system. When button 1 is clicked, a dialog pops up. When button 2 is clicked , after clicking OK, the icon of button 2 can be changed to the icon of button 3. When button 3 is clicked, the icon of button 3 changes to the icon of the system making a phone call. Clicking button 4 will display a prompt dialog
ImageButtonTest.java source code
package org.loulijun.imagebutton; import android.app.Activity; import android.app.AlertDialog; import android.app.Dialog; import android.content.DialogInterface; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ImageButton; import android.widget.TextView; public class ImageButtonTest extends Activity { /** Called when the activity is first created. */ TextView textview; ImageButton imgbtn1; ImageButton imgbtn2; ImageButton imgbtn3; ImageButton imgbtn4; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); textview=(TextView)findViewById(R.id.textview); //分别取得4个ImageButton对象 imgbtn1=(ImageButton)findViewById(R.id.imagebutton1); imgbtn2=(ImageButton)findViewById(R.id.imagebutton2); imgbtn3=(ImageButton)findViewById(R.id.imagebutton3); imgbtn4=(ImageButton)findViewById(R.id.imagebutton4); //分别为ImageButton设置图标 //imgbtn1已经在main.xml布局中设置了图标,所以就不在这里设置了(设置图标即可在程序中设置,也可在布局文件中设置) imgbtn2.setImageDrawable(getResources().getDrawable(R.drawable.icon));//在程序中设置图标 imgbtn3.setImageDrawable(getResources().getDrawable(R.drawable.icon2)); imgbtn4.setImageDrawable(getResources().getDrawable(android.R.drawable.sym_call_incoming));//设置系统图标 //下面为各个按钮设置事件监听 imgbtn1.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Dialog dialog=new AlertDialog.Builder(ImageButtonTest.this) .setTitle("提示") .setMessage("我是ImageButton1") .setPositiveButton("确定",new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub //相应的处理操作 } }).create(); dialog.show(); } }); imgbtn2.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Dialog dialog=new AlertDialog.Builder(ImageButtonTest.this) .setTitle("提示") .setMessage("我是ImageButton2,我要使用ImageButton3的图标") .setPositiveButton("确定",new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub imgbtn2.setImageDrawable(getResources().getDrawable(R.drawable.icon2)); } }).create(); dialog.show(); } }); imgbtn3.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Dialog dialog=new AlertDialog.Builder(ImageButtonTest.this) .setTitle("提示") .setMessage("我是ImageButton3,我想使用系统打电话的图标") .setPositiveButton("确定",new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub imgbtn3.setImageDrawable(getResources().getDrawable(android.R.drawable.sym_action_call)); } }).create(); dialog.show(); } }); imgbtn4.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Dialog dialog=new AlertDialog.Builder(ImageButtonTest.this) .setTitle("提示") .setMessage("我是使用的系统图标") .setPositiveButton("确定",new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub //相应的处理操作 } }).create(); dialog.show(); } }); } }
Layout file main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:id="@+id/textview" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="ImageButton测试案例" /> <ImageButton android:id="@+id/imagebutton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon1" /> <ImageButton android:id="@+id/imagebutton2" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageButton android:id="@+id/imagebutton3" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageButton android:id="@+id/imagebutton4" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
The running effect is as follows:
Click on the After one button
#After clicking OK, click the second button
Click OK, and you will see that the icon programming of button two is the same as the icon of button three
Click button three
After clicking OK, I found that the icon of button three changed to the icon of the system making a phone call
Click button four
The above is the content of the Android UI control series: ImageButton (button with icon). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!