一 : Android开发UI之Button
前言
最近一直在讲androidUI控件的使用方式,这篇文章讲解一下基本上属于用处最广泛的控件之一的Button控件。如果有过其他平台开发经验的程序员,对按钮是不会陌生的。本篇文章首先讲解一下Android的Button控件的常用事件以及事件绑定和触发,再在Button控件中通过设定属性值来实现图文混排,这个功能是在项目中常用到的。
Button控件
Button继承了TextView。它的功能就是提供一个按钮,这个按钮可以供用户点击,当用户对按钮进行操作的时候,触发相应事件,如点击,触摸。
还有一个ImageButton,它继承自Button,可以在ImageButton中显示一个图片展示给用户看,并且对其Text属性设置值的时候是无效的,其它功能与Button一样。
常用事件
一般对于一个按钮而言,用的最多的就是点击事件,Button间接继承自View,而AndroidUI中的所有事件,都是定义在View中的。在本篇博客中,示例讲解的点击事件、触摸事件,其他事件的使用方式与此类似,只是触发的时机不同而已。此处分别需要实现View.OnClickListener、View.OnTouchListener接口的方法。
下面使用一个示例讲解一下事件的绑定及触发,在示例中显示两个按钮控件,一个为普通按钮,一个为填充图片的按钮,为它们绑定click事件,当点击事件触发的时候,对其尺寸进行修改,为图片按钮绑定触摸事件,当触摸的时候触发,切换图片显示。
布局代码:
- <?xmlversion="1.0"encoding="utf-8"?>
- <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical">
- <Button
- android:id="@+id/btnChangeSize"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="点击修改尺寸"
- />
- <Button
- android:id="@+id/btnChangeImg"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="@drawable/image1"
- />
- </LinearLayout>
实现代码:
- packagecom.bgxt.buttondemo;
- importandroid.app.Activity;
- importandroid.os.Bundle;
- importandroid.view.MotionEvent;
- importandroid.view.View;
- importandroid.view.View.OnClickListener;
- importandroid.view.View.OnTouchListener;
- importandroid.widget.Button;
- //通过实现接口,对其进行click、touch事件的支持
- publicclassButtonListenerextendsActivityimplementsOnClickListener,
- OnTouchListener{
- privateButtonbtnChangeSize;
- privateButtonbtnChangeImg;
- privateintflag=1;
- @Override
- protectedvoidonCreate(BundlesavedInstanceState){
- super.onCreate(savedInstanceState);
- setContentView(R.layout.btn_listener);
- btnChangeSize=(Button)findViewById(R.id.btnChangeSize);
- btnChangeImg=(Button)findViewById(R.id.btnChangeImg);
- //对两个按钮进行事件绑定
- btnChangeSize.setOnClickListener(this);
- btnChangeImg.setOnClickListener(this);
- btnChangeImg.setOnTouchListener(this);
- }
- @Override
- publicbooleanonTouch(Viewv,MotionEventevent){
- //获取触发事件的Button控件
- Buttonbtn=(Button)v;
- if(event.getAction()==MotionEvent.ACTION_UP){
- //当触摸时按下,则替换展示图片为image1
- btn.setBackgroundResource(R.drawable.image1);
- }else{
- btn.setBackgroundResource(R.drawable.image2);
- }
- returnfalse;
- }
- @Override
- publicvoidonClick(Viewv){
- Buttonbtn=(Button)v;
- if(flag==1
- &&btn.getWidth()==getWindowManager().getDefaultDisplay()
- .getWidth()){
- //如果等于屏幕的宽度,则修改标识flag为-1
- flag=-1;
- }elseif(flag==-1&&btn.getWidth()<100){
- flag=1;
- }
- //设置button控件尺寸
- btn.setWidth(btn.getWidth()+(int)(btn.getWidth()*0.1)*flag);
- btn.setHeight(btn.getHeight()+(int)(btn.getHeight()*0.1)*flag);
- }
- }
展示效果图:
当点击按钮的时候,按钮被放大,当放大到屏幕宽度时,开始缩小。
当触摸图标按钮的时候,图像改变。
图文混排
对于在实际项目中,经常会需要设置按钮展示为图文混排的效果,这样可以通过图表更直观的把按钮的功能展示给用户,又可以有简短的文字说明。虽然ImageButton也可以实现图片按钮的效果,但是对于ImageButton而言,设置Text属性是没有作用的,所以这里不讲解ImageButton的使用。对于Button控件,图文混排需要用到一个android:drawableXxx属性(Xxx为图片所在按钮的方向),这个属性配合android:text,就可以实现图文混排的效果。
下面一个示例,分别展示了上下左右四个方位的图标按钮,并且生成一个通过Java代码动态生成图文混排按钮的。因为Button是继承自TextView的,所以通过代码设置图文混排的方式与TextView类似,都需要用到SpannableString类。
布局代码:
- <?xmlversion="1.0"encoding="utf-8"?>
- <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical">
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="150dp"
- android:orientation="horizontal">
- <!--图片在上,项目中常用这样的设置-->
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:drawableTop="@drawable/image2"
- android:text="b1"/>
- <!--图片在下-->
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:drawableBottom="@drawable/image2"
- android:drawablePadding="10dp"
- android:text="b2"/>
- <!--图片在左-->
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:drawableLeft="@drawable/image2"
- android:text="b3"/>
- <!--图片在右-->
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:drawablePadding="10dp"
- android:drawableRight="@drawable/image2"
- android:text="b4"/>
- </LinearLayout>
- <!--声明一个空的按钮,用于进行代码设置-->
- <Buttonandroid:layout_width="200dp"android:layout_height="200dp"android:id="@+id/btnSty"android:layout_marginTop="10dp"/>
- </LinearLayout>
Java实现代码:
- packagecom.bgxt.buttondemo;
- importandroid.app.Activity;
- importandroid.graphics.Bitmap;
- importandroid.graphics.BitmapFactory;
- importandroid.os.Bundle;
- importandroid.text.SpannableString;
- importandroid.text.Spanned;
- importandroid.text.style.ImageSpan;
- importandroid.widget.Button;
- publicclassButtonStyleextendsActivity{
- privateButtonbtnSty;
- @Override
- protectedvoidonCreate(BundlesavedInstanceState){
- //TODOAuto-generatedmethodstub
- super.onCreate(savedInstanceState);
- setContentView(R.layout.btn_style);
- //获取按钮控件
- btnSty=(Button)findViewById(R.id.btnSty);
- //生成SpannableString,用于图片的载体
- SpannableStringspannebleLeft=newSpannableString("left");
- Bitmapbitmapleft=BitmapFactory.decodeResource(getResources(),R.drawable.image1);
- ImageSpanimageSpanLeft=newImageSpan(ButtonStyle.this,bitmapleft);
- spannebleLeft.setSpan(imageSpanLeft,0,4,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
- SpannableStringspannebleRight=newSpannableString("right");
- BitmapbitmapRight=BitmapFactory.decodeResource(getResources(),R.drawable.image2);
- ImageSpanimageSpanRight=newImageSpan(ButtonStyle.this,bitmapRight);
- spannebleRight.setSpan(imageSpanRight,0,5,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
- //把生成的SpannableString追加到按钮上
- btnSty.append(spannebleLeft);
- btnSty.append("aLi");
- btnSty.append(spannebleRight);
- }
- }
效果展示:
总结
对于实际项目而言,一般按钮的样式都会通过额外的XML样式文件包装一下,这个之后再介绍,这里只是介绍一下Button的简单使用。按钮的最多用处就是供用户点击从而触发相应时间,没有什么难点。
二 : DRM | Android开发
在本文档中三 : Android开发UI之Radio、Check、Toggle
前言
这篇文章讲解一下Android平台下,RadioButton、CheckBox以及ToggleButton三个控件的用法,因为这三个控件之中都存在一个选中或是没选中的状态,所以放在一起讲解。
这三个控件均是从Button之中间接继承而来的,所以一些Button中的设置都是通用的,如图文混排,动态修改显示内容,因为之前已经对这些内容进行了说明,如果不清楚朋友可以参见一下另外一篇文章:Android开发UI之Button,所以这篇文章只是就这三个控件的常用方法进行简要说明,并给出示例。
CompoundButton
RadioButton(单选按钮)、CheckBox(复选按钮)、ToggleButton(开关按钮)都继承自android.widget.CompoundButton类,而CompoundButton又继承自Button类,在这个类中封装了一个checked属性,用于判断是否被选中,这也是它与Button的不同,对其进行了扩展,这个属性在这三个控件中的用法是一样的。
一般checked属性通过以下方式来设置与获取:
RadioButton
RadioButton,为一个单选按钮,一般配合RadioGroup一起使用,在同一RadioGroup内,所有的RadioButton的选中状态为互斥,它们有且只有一个RadioButton被选中,但是在不同的RadioGroup中是不相互影响的。
下面通过一个简单的示例来说明一下,在示例中会存在两个RadioButton,用于定义性别信息,当用户选中了某个后,点击按钮,把选中的信息提示到屏幕上。
布局代码:
- <?xmlversion="1.0"encoding="utf-8"?>
- <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical">
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:text="Gender:"/>
- <!--定义一个RadioGroup用于包装RadioButton-->
- <RadioGroup
- android:id="@+id/gender"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content">
- <RadioButton
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="male"/>
- <RadioButton
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="female"/>
- </RadioGroup>
- <Button
- android:id="@+id/btnGender"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:text="选择性别"/>
- </LinearLayout>
实现代码:
- packagecom.example.changebutton;
- importandroid.app.Activity;
- importandroid.os.Bundle;
- importandroid.view.View;
- importandroid.widget.Button;
- importandroid.widget.RadioButton;
- importandroid.widget.RadioGroup;
- importandroid.widget.Toast;
- publicclassRadioButtonActivityextendsActivity{
- privateRadioGroupgroup;
- privateButtonbtnGender;
- @Override
- protectedvoidonCreate(BundlesavedInstanceState){
- //TODOAuto-generatedmethodstub
- super.onCreate(savedInstanceState);
- setContentView(R.layout.radiobutton_layout);
- group=(RadioGroup)findViewById(R.id.gender);
- btnGender=(Button)findViewById(R.id.btnGender);
- btnGender.setOnClickListener(newView.OnClickListener(){
- @Override
- publicvoidonClick(Viewv){
- //获取单选按钮的选项个数
- intlen=group.getChildCount();
- StringmsgString="";
- for(inti=0;i<len;i++){
- //RadioGroup中包含的子View就是一个RadioButton
- RadioButtonradiobutton=(RadioButton)group.getChildAt(i);
- if(radiobutton.isChecked()){
- //如果被选中,则break循环,并且记录选中信息
- msgString="Youchoosetobea"
- +radiobutton.getText().toString();
- break;
- }
- }
- if(msgString.equals("")){
- Toast.makeText(RadioButtonActivity.this,
- "Pleaseselectagender!",Toast.LENGTH_SHORT)
- .show();
- }else{
- Toast.makeText(RadioButtonActivity.this,msgString,
- Toast.LENGTH_SHORT).show();
- }
- }
- });
- }
- }
实现效果:
CheckBox
CheckBox是一个复选按钮,它的用法与RadioButton很像,但是与之不同的是,它可以多选,所以也无需用一个组控件包裹起来。
这里涉及了一动态添加UI控件的知识,在Android中动态增加控件一般有两种方式:
这里通过一个示例来说明CheckBox的使用,在示例中动态添加了CheckBox的选项,并且对其进行选中之后提示选中信息。上面两种方式都用用到,通过一个chooseMethod(boolean)区分。
布局代码:
- <?xmlversion="1.0"encoding="utf-8"?>
- <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- android:id="@+id/checkLayout">
- <!--这里只是定义了一个按钮,其他的CheckBox控件在代码中动态添加-->
- <Button
- android:id="@+id/checkBtn"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:text="确定"/>
- </LinearLayout>
如果使用动态填充的方式获取CheckBox的话,需要添加一个CheckBox的XML文件,代码如下:
- <?xmlversion="1.0"encoding="utf-8"?>
- <CheckBoxxmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="wrap_content">
- </CheckBox>
实现代码:
- packagecom.example.changebutton;
- importjava.util.ArrayList;
- importjava.util.List;
- importandroid.app.Activity;
- importandroid.app.AlertDialog;
- importandroid.os.Bundle;
- importandroid.view.View;
- importandroid.view.View.OnClickListener;
- importandroid.widget.Button;
- importandroid.widget.CheckBox;
- importandroid.widget.LinearLayout;
- publicclassCheckBoxActivityextendsActivityimplementsOnClickListener{
- privateList<CheckBox>checkBoxs=newArrayList<CheckBox>();
- privateButtoncheckBtn;
- @Override
- protectedvoidonCreate(BundlesavedInstanceState){
- super.onCreate(savedInstanceState);
- chooseMethod(false);
- checkBtn=(Button)findViewById(R.id.checkBtn);
- checkBtn.setOnClickListener(this);
- }
- @Override
- publicvoidonClick(Viewv){
- Strings="";
- //循环cheackBoxs
- for(CheckBoxc:checkBoxs){
- if(c.isChecked()){
- //如果选中就添加选中结果到msg中。
- s+=c.getText()+"\n";
- }
- }
- if("".equals(s)){
- s="您没有选中选项!";
- }
- //使用对话框弹出选中的信息
- newAlertDialog.Builder(this).setMessage(s)
- .setPositiveButton("Exit",null).show();
- }
- privatevoidchooseMethod(booleanb){
- String[]checkboxText=newString[]{"Youarestudent?",
- "DoyoulikeAndroid?","Doyouhaveagirlfriend",
- "Doyoulikeonlineshopping?"};
- if(b){
- //使用本文中提到的第一种方式,通过Id动态加载
- setContentView(R.layout.checkbox_layout);
- //获取带填充的布局控件
- LinearLayoutlinearLayout=(LinearLayout)this
- .findViewById(R.id.checkLayout);
- //根据数组,循环添加内容
- for(inti=0;i<checkboxText.length;i++){
- CheckBoxcheckbox=newCheckBox(this);
- checkBoxs.add(checkbox);
- checkBoxs.get(i).setText(checkboxText[i]);
- //把CheckBox加入到布局控件中
- linearLayout.addView(checkbox);
- }
- }else{
- //通过动态填充的方式,找到布局文件
- LinearLayoutlinearLayout=(LinearLayout)getLayoutInflater()
- .inflate(R.layout.checkbox_layout,null);
- for(inti=0;i<checkboxText.length;i++){
- //在通过动态填充的方式找到CheckBox的文件
- CheckBoxcheckbox=(CheckBox)getLayoutInflater().inflate(
- R.layout.cheackbox,null);
- checkBoxs.add(checkbox);
- checkBoxs.get(i).setText(checkboxText[i]);
- linearLayout.addView(checkbox);
- }
- //最后把这个布局文件加载显示
- setContentView(linearLayout);
- }
- }
- }
实现效果
ToggleButton
ToggleButton,一个开关按钮,有两个状态,大抵的用法与上面两个控件一直,可以通过两个属性显示不同状态时,控件内显示文字的内容不同,属性如下:
ToggleButton,这个控件有一个OnCheckedChangeListener()事件,当开关的状态切换的时候会被触发,其中需要传递一个OnCheckedChangeListener接口的实现内,当被切换时,触发其中的onCheckedChange()方法,可以在其中写需要实现的功能代码。
下面通过一个示例讲解一下ToggleButton的使用,使用一个toggleButton控件,控制一个LinearLayout的布局排列方式。
布局代码:
- <?xmlversion="1.0"encoding="utf-8"?>
- <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical">
- <ToggleButton
- android:id="@+id/togBtn"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:checked="true"
- android:textOff="横向排列"
- android:textOn="纵向排列"/>
- <LinearLayout
- android:id="@+id/OriLayout"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical">
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="btn1"/>
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="btn2"/>
- <Button
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="btn3"/>
- </LinearLayout>
- </LinearLayout>
实现代码:
- packagecom.example.changebutton;
- importandroid.app.Activity;
- importandroid.os.Bundle;
- importandroid.widget.CompoundButton;
- importandroid.widget.CompoundButton.OnCheckedChangeListener;
- importandroid.widget.LinearLayout;
- importandroid.widget.ToggleButton;
- publicclassToggleButtonActivityextendsActivity{
- privateToggleButtontogBtn;
- privateLinearLayoutlinearLayout;
- @Override
- protectedvoidonCreate(BundlesavedInstanceState){
- //TODOAuto-generatedmethodstub
- super.onCreate(savedInstanceState);
- setContentView(R.layout.toggle_layout);
- togBtn=(ToggleButton)findViewById(R.id.togBtn);
- linearLayout=(LinearLayout)this.findViewById(R.id.OriLayout);
- togBtn.setOnCheckedChangeListener(newOnCheckedChangeListener(){
- @Override
- publicvoidonCheckedChanged(CompoundButtonbuttonView,
- booleanisChecked){
- //通过判断是否选中,来设置LinearLayout的横向纵向排列
- if(isChecked){
- linearLayout.setOrientation(1);
- }else{
- linearLayout.setOrientation(0);
- }
- }
- });
- }
- }
实现效果:
总结
以上就讲解了一下CompoundButton抽象类下的三个实现控件类的使用,在Android-4.0之后,又新加入了一个控件Switch,对它的使用与之上介绍的三个控件类似,这里就不再详细讲解了。
转载于
本文标题:android开发-Android开发UI之Button61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1