Button普通按钮组件
颜色选择器
普通按钮在实际开发中也是非常广泛的,提交数据,进入游戏,发送聊天数据,在实际开发中要对Button的几个状态做相应的操作,比如:按钮按下的时候用一种颜色,弹起又一种颜色,或者按钮不可用的时候一种颜色等。上述实现是通过StateListDrawable这种Drawable资源来实现,即编写一个drawable的资源文件。
等
1.基本语法
<Button
属性列表
/>
2.StateListDrawable简介:
StateListDrawable是Drawable资源的一种,可以根据不同的状态,设置不同的图片效果,关键节点改变背景颜色,我们只需要将Button的blackground属性设置为该drawable资源即可轻松实现,按下按钮时不同的按钮颜色或背景!
3.基本属性
- drawable:引用的Drawable位图,我们可以把他放到最前面,就表示组件的正常状态~
- state_focused:是否获得焦点
- state_window_focused:是否获得窗口焦点
- state_enabled:控件是否可用
- state_checkable:控件可否被勾选,eg:checkbox
- state_checked:控件是否被勾选
- state_selected:控件是否被选择,针对有滚轮的情况
- state_pressed:控件是否被按下
- state_active:控件是否处于活动状态,eg:slidingTab
- state_single:控件包含多个子控件时,确定是否只显示一个子控件
- state_first:控件包含多个子控件时,确定第一个子控件是否处于显示状态
- state_middle:控件包含多个子控件时,确定中间一个子控件是否处于显示状态
- state_last:控件包含多个子控件时,确定最后一个子控件是否处于显示状态
4,列子:点击按钮触发事件,在屏幕中添加一个“确定”按钮
`XML文件`
<Button
android:id="@+id/btn_ok"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="确定"
/>
`。JAVA文件`
public class MainActivity extends Activity {
Button btnok; `定义按钮`
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnok= (Button) findViewById(R.id.btn_ok); `绑定按钮组件`
`设置监听事件`
btnok.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
`需要触发的代码`
Intent intent = new Intent(MainActivity.this,DemoAActivity.class);
startActivity(intent);
}
});
}
}
5 例子:设置一个按钮,利用drawable资源自定义普通状态和点击状态的背景颜色
原理:在values文件夹里新建color.xml
文件,用来存储颜色,在drawable-hdpi文件夹里为Button创建引入文件–button_background.xml
文件
5.1 color.xml代码
<resources>
<color name="down">#00FFFF</color>
<color name="usual">#7FFFD4</color>
</resources>
5.2 button_background.xml代码
注意:创建文件时勾选selector
创建文件选择器
<selector xmlns:android="http://schemas.android.com/apk/res/android" >\
`<!-- 按钮按下去的状态 -->`
<item
android:state_pressed="true"
android:drawable="@color/down" `引用color.xml的颜色`
>
</item>
`<!-- 通常状态 -->`
<item
android:drawable="@color/usual"
></item>
</selector>
5.3 Main_Activity.XML代码
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btn_down"
android:text="按下改变按钮"
android:background="@drawable/button_background" `引用button_background.xml的效果`
/>
效果:::
6. 例子:使用颜色值绘制圆角按钮
原理:在values文件夹里新建color.xml
文件,用来存储颜色,在drawable-hdpi文件夹里创建button_down.xml(设置点击效果)文件和button_ueusl.xml文件(设置平常效果),在drawable-hdpi文件夹里创建选择器文件–button_yuanjiao.xml
文件,并引用前两个文件
6.1 button_down.xml (设置点击效果)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
`<!-- 设置左上,和右下圆角 -->`
<corners
android:topLeftRadius="30dp"
android:bottomRightRadius="30dp"
/>
` <!-- 设置颜色 -->`
<solid
android:color="@color/down"
/>
</shape>
6.2 button_ueusl.xml(设置平常效果)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
` <!-- 设置左上,和右下圆角 -->`
<corners
android:topLeftRadius="30dp"
android:bottomRightRadius="30dp"
/>
` <!-- 设置颜色 -->`
<solid
android:color="@color/usual"
/>
</shape>
6.3 button_yuanjiao.xml(选择器文件)
<?xml version="1.0" encoding="utf-8"?>
`<!-- selector 选择器 -->`
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
` <!-- 按下的效果 -->`
<item
android:state_pressed="true"
android:drawable="@drawable/button_down" `引入button_down.xml文件 `
></item>
` <!-- 平常的效果 -->`
<item
android:state_pressed="false"
android:drawable="@drawable/button_usual" `引入button_usual.xml 文件`
></item>
</selector>
6.4 Main_activity.xml(主文件)
<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/btn_yuanjiao"
android:text="绘制圆角按钮"
android:layout_marginTop="10dp"
android:textSize="25dp"
android:background="@drawable/button_yuanjiao" `用background属性引入button_yuanjiao.xml 文件`
/>
效果:::
图片按钮(ImageButton)
在Android中图片按钮也非常多,因为图片按钮更加美观,
1.与Button的不同,
与Button的使用方法基本相同,只不过使用ImageView标记定义,并且得为其设置src属性
2.基本语法
<ImageButton
属性列表
/>
3.属性列表
- src ---------------------------------------------用于指定按钮上现实的图片
- scaleType-------------------------------------用于指定显示的图片以何种方式缩放(具体·属性见下)
matrix:使用matrix方式进行缩放
对图像横向、纵向独立缩放,以适应于 Imagebutton大小,图像横向比例可能会改变
fitstart----------------保持纵横比例缩放,以适应于 Imagebutton大小,缩放完会放在控件左上角
fitCenter-------------同上,缩放后放在中间
fitEnd---------------- 同上,缩放后放于右下角
center----------------将图片放在控件中间,不进行任何缩放
centerCrop----------保持纵横比例缩放图片,使得图片能完全覆盖ImageButton
centerInside---------保持纵横比例缩放图片,使得ImageButton能完全显示该图片
4.1,实例1
<ImageButton
android:id="@+id/btn_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/a1"
android:scaleType="center"
/>
效果:::
注意:上例中在添加图片时,并没有设置background属性,所以图片显示在一个灰色的背景上,这时图片按钮会随着用户的操作而发生改变。若修改backgroubd属性,不会随着用户的操作而发生改变,如果需要改变,可以使用StateListDrawadle资源来对其设置
4.2,实例2,游戏登录页面,点击开始游戏,对应的输出开始游戏
XML页面
<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"
tools:context="${relativePackage}.${activityClass}" >
<ImageButton
android:id="@+id/btn_image1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/b3"
android:scaleType="fitXY"
android:background="@drawable/b0"
/>
<ImageButton
android:layout_marginTop="5dp"
android:layout_below="@id/btn_image1"
android:id="@+id/btn_image2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/b2"
android:scaleType="fitXY"
android:background="@drawable/b0"
/>
<ImageButton
android:layout_marginTop="5dp"
android:layout_below="@id/btn_image2"
android:id="@+id/btn_image3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/b1"
android:scaleType="fitXY"
android:background="@drawable/b0"
/>
</RelativeLayout>
效果:::
.JAVA文件
public class ImageButtonActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_button);
ImageButton imageButton1=(ImageButton) findViewById(R.id.btn_image1);
ImageButton imageButton2=(ImageButton) findViewById(R.id.btn_image2);
ImageButton imageButton3=(ImageButton) findViewById(R.id.btn_image3);
imageButton1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(ImageButtonActivity.this, "你点击了Image1按钮", Toast.LENGTH_SHORT).show();
}
});
imageButton2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(ImageButtonActivity.this, "你点击了image2按钮", Toast.LENGTH_SHORT).show();
}
});
imageButton3.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(ImageButtonActivity.this, "你点击了Image3按钮", Toast.LENGTH_SHORT).show();
}
});
}
}
RadioButton单选按钮
单选按钮一般用于唯一选择,比如性别选择、生肖选择等,Android提供的单选按钮默认是一个圆形图标,并且在其旁边附带一些说明性文字,在实际开发中一般将多个单选按钮放置在一个按钮组中,这样选中其中一个,其它的将失去选中状态。
1、单选按钮一般与RadioGroup组件一起使用,划分成一个互斥的单选按钮组。
2、单选按钮可以通过onCheckedChanged()方法得知单选按钮是否被选中。
3、还可以通过getText()方法获取单选按钮的值,前提是添加一个setOnCheckedChangeListener事件监听。
4、还有一种方法,也可以获取单选按钮的值,在其它按钮的单击事件中设置for循环进行遍历,通过isChecked()方法判断该按钮的选中状态,再通过getText()方法获取对应的值。
1.基本语法格式
<RadioButton
android:id="@+id/btn_man"
android:text="男"
android:checked="true" `默认为此选项`
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
2.利用RadioGroup组成单选按钮组
<RadioGroup
android:id="@+id/btn_radio_group_sex"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
>
</RadioGroup>
3.RadioGroup与RadioButton结合使用
<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"
tools:context="${relativePackage}.${activityClass}"
android:orientation="vertical"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="请选择你的性别"
android:textSize="25dp"
/>
<RadioGroup
android:id="@+id/btn_radio_group_sex"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
>
<RadioButton
android:id="@+id/btn_man"
android:text="男"
android:checked="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<RadioButton
android:id="@+id/btn_woman"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女"
/>
</RadioGroup>
<Button
android:id="@+id/btn_sex_submit"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="提交"
/>
</LinearLayout>
效果:::
4.通过getText()
方法获取单选按钮的值,前提是添加一个setOnCheckedChangeListener
事件监听。(下边的好用)
RadioGroup adioGroup = (RadioGroup) findViewById(R.id.btn_radio_group_sex); `绑定按钮组`
adioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() { `设置监听事件`
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// TODO Auto-generated method stub
RadioButton radiobutton1 = (RadioButton) findViewById(R.id.btn_man); `获取按钮`
String sex1 = (String) radiobutton1.getText(); `获取按钮值`
Toast.makeText(RadioButtonActivity.this, sex1, Toast.LENGTH_SHORT).show(); `输出值`
}
});
5. ,在其它按钮的单击事件中设置for循环进行遍历,通过isChecked()
方法判断该按钮的选中状态,再通过getText()
方法获取对应的值。————选择你的性别
public class RadioButtonActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_radio_button);
final RadioGroup adioGroup = (RadioGroup) findViewById(R.id.btn_radio_group_sex); `获取RadioGroup 组件`
Button btn_sex_submit=(Button) findViewById(R.id.btn_sex_submit); `获取Button点击组件`
btn_sex_submit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub `.getChildCount()方法`
for(int i=0;i<adioGroup.getChildCount();i++){ `通过循环遍历选中的单选按钮`
RadioButton radiobutton = (RadioButton) adioGroup.getChildAt(i); `获取按钮`
if(radiobutton.isChecked()){ `判断按钮是否被选中`
String sex1=(String) radiobutton.getText(); `获取选中按钮的值`
Toast.makeText(RadioButtonActivity.this, sex1, Toast.LENGTH_SHORT).show();
break; `跳出循环`
}
}
}
});
}
}
6.例子:名侦探柯南选择题,判断正误
6.1 .XML-按钮页面
<!-- 单选题。判断对错,并给出提示 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="名侦探柯南的主角是谁?"
android:textSize="25dp"
android:layout_marginTop="30dp"
/>
<RadioGroup
android:id="@+id/btn_radio_group_kenan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_marginTop="5dp"
>
<RadioButton
android:id="@+id/btn_maolixiaowuliang"
android:text="A:毛利小五郎"
android:checked="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<RadioButton
android:id="@+id/btn_kenan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B:江户川柯南"
/>
<RadioButton
android:id="@+id/btn_yuanzi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C:园子"
/>
<RadioButton
android:id="@+id/btn_boshi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="D:博士"
/>
</RadioGroup>
<Button
android:id="@+id/btn_kenan_submit"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="提交"
/>
6.2 .java 主页面文件
//柯南判断题
final RadioGroup adioGroup1 = (RadioGroup) findViewById(R.id.btn_radio_group_kenan); `获取单选按钮组`
Button btn_kenan_submit=(Button) findViewById(R.id.btn_kenan_submit); `提交按钮`
btn_kenan_submit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
for(int i=0;i<adioGroup1.getChildCount();i++){ `循环遍历`
RadioButton radiobutton = (RadioButton) adioGroup1.getChildAt(i); `获取单选按钮`
if(radiobutton.isChecked()){ `判断按钮是否被选中`
if(radiobutton.getText().equals("B:江户川柯南")){ `判断答案是否正确`
/*Toast.makeText(RadioButtonActivity.this, "回答正确", Toast.LENGTH_SHORT).show();*/
AlertDialog.Builder builder = new AlertDialog.Builder(RadioButtonActivity.this);
builder.setTitle("查看答案").show();
builder.setMessage("回答正确").show();
}else {
AlertDialog.Builder builder = new AlertDialog.Builder(RadioButtonActivity.this);
builder.setTitle("答案解析");
builder.setMessage("回答错误,正确答案是 B:江户川柯南,回去重新看一遍");
builder.setPositiveButton("确定", null);
builder.setNegativeButton("取消", null);
builder.show();
}
break;
}
}
}
});
注意-新知识:AlertDialog.Builder:设置弹窗
6.3 ,AlertDialog.Builder简单案例:
AlertDialog.Builder builder = new AlertDialog.Builder(RadioButtonActivity.this); `获取对象`
builder.setTitle("答案解析"); `弹窗标题`
builder.setMessage("回答错误,正确答案是 B:江户川柯南,回去重新看一遍"); `弹窗信息`
builder.setPositiveButton("确定", null); `确定按钮`
builder.setNegativeButton("取消", null); `取消按钮`
builder.show(); `调用show显示`
效果:::
CheckBox复选框按钮
1.多选按钮也叫复选框同单选按钮类似,也是进行选择的按钮,但是它们唯一的不同是,多选按钮可以选取多个,多选按钮是以一个方框图标显示的,同样在旁边有说明性文字。
1.基本语法
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btu_checkbox"
android:text="游泳"
android:textSize="25dp"
/>
效果:::
2. 多选按钮可以选中多项,所以为了判断是否被选中,还需要为每一个按钮添加事件监听器。
final CheckBox bcheckbox_swimming =(CheckBox) findViewById(R.id.bcheckbox_swimming); `绑定复选框组件`
bcheckbox_swimming.setOnCheckedChangeListener(new OnCheckedChangeListener() { `设置监听事件`
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// TODO Auto-generated method stub
if(bcheckbox_swimming.isChecked()){ `判断是否被选中`
String str = (String) bcheckbox_swimming.getText(); `获取选中的值`
#//String str = bcheckbox_swimming.getText().toString; `作用与上边一致`
Toast.makeText(CheckBoxActivity.this, str, Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(CheckBoxActivity.this, "此按钮未被选中", Toast.LENGTH_SHORT).show();
}
}
});
3. ,例子-选择你的兴趣爱好
3.1, ChckBox.XML页面布局文件
<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"
tools:context="${relativePackage}.${activityClass}"
android:gravity="center"
>
<TextView
android:id="@+id/checkbox_tetx_hobby"
android:text="兴趣爱好"
android:textSize="25dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/checkbox_basketball"
android:layout_below="@id/checkbox_tetx_hobby"
android:text="篮球"
android:textSize="20dp"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/checkbox_music"
android:layout_below="@id/checkbox_basketball"
android:text="音乐"
android:textSize="20dp"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/checkbox_study"
android:layout_below="@id/checkbox_music"
android:text="学习"
android:textSize="20dp"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/bcheckbox_swimming"
android:layout_below="@id/checkbox_study"
android:text="游泳"
android:textSize="20dp"
/>
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:id="@+id/btu_checkbox_hobby"
android:text="提交"
android:layout_below="@id/bcheckbox_swimming"
/>
</RelativeLayout>
效果:::
3.2, ChckBox.java文件,实现获取选中的信息
//兴趣爱好
Button btu_checkbox_hobby = (Button) findViewById(R.id.btu_checkbox_hobby); `//获取提交按钮组件`
final CheckBox checkbox_basketball=(CheckBox) findViewById(R.id.checkbox_basketball); `//绑定复选框`
final CheckBox checkbox_music=(CheckBox) findViewById(R.id.checkbox_music);
final CheckBox checkbox_study=(CheckBox) findViewById(R.id.checkbox_study);
final CheckBox bcheckbox_swimming=(CheckBox) findViewById(R.id.bcheckbox_swimming);
btu_checkbox_hobby.setOnClickListener(new OnClickListener() { `//设置按钮监听事件`
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
String str = "你的兴趣爱好是:"; `//设置字符串变量`
if(checkbox_basketball.isChecked()){ `//判断是否选中`
str += checkbox_basketball.getText().toString()+","; `//如果选中,拼接字符串`
}
if(checkbox_music.isChecked()){
str += checkbox_music.getText().toString()+",";
}
if(checkbox_study.isChecked()){
str += checkbox_study.getText().toString()+",";
}
if(bcheckbox_swimming.isChecked()){
str += bcheckbox_swimming.getText().toString()+",";
}
Toast.makeText(CheckBoxActivity.this, str, Toast.LENGTH_SHORT).show(); `//输出信息`
}
});
效果:::