第九讲:用户界面 View(四)

423
回复
2283169
查看
  [复制链接]

2826

主题

7684

帖子

9603

安币

管理员

Rank: 9Rank: 9Rank: 9

QQ达人最佳新人活跃会员热心会员推广达人灌水之王突出贡献

QQ
发表于 2011-4-23 13:41:57 | 显示全部楼层 |阅读模式
本讲内容:Button TextView EditView CheckBox RadioGroup ImageView ImageButton
一、Button 按钮
按钮是程序中最常见的一个元素,我们通过一个例子感受一下,代码的讲解都写在注释里了,所以我就直接上代码和代码的运行结果。
  1. package android.basic.lesson9;

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. //不熟悉内部类的朋友可以留意一下这里的导入方式
  6. import android.view.View.OnClickListener;
  7. import android.widget.Button;
  8. import android.widget.TextView;

  9. public class MainHelloButton extends Activity {
  10.     /** Called when the activity is first created. */
  11.     @Override
  12.     public void onCreate(Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.         setContentView(R.layout.main);

  15.        //实现一个多按钮可用的单击监听器对象
  16.        OnClickListener listener = new Button.OnClickListener(){
  17.                         @Override
  18.                         public void onClick(View v) {
  19.                                 setTitle("您的答案是:"+((TextView)v).getText());
  20.                         }
  21.        };

  22.        //为界面中的每个按钮绑定上这个单击监听器
  23.        findViewById(R.id.Button01).setOnClickListener(listener);
  24.        findViewById(R.id.Button02).setOnClickListener(listener);
  25.        findViewById(R.id.Button03).setOnClickListener(listener);
  26.     }
  27. }
复制代码
下面是布局文件:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="center" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
  3.         <textview android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/TextView01" android:text="杜鹃不啼,如何让它啼?" android:textsize="20sp" android:layout_marginbottom="10dp">
  4.         </textview>

  5.         <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/Button01" android:text="杀之不足惜!" android:textsize="20sp">
  6.         </button>

  7.         <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/Button02" android:text="诱之自然啼!" android:textsize="20sp">
  8.         </button>

  9.                 <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/Button03" android:text="待之莫须急!" android:textsize="20sp">
  10.         </button>
  11. </linearlayout>
复制代码
再下面就是运行效果: [/url]点击某个按钮之后,标题栏发生变化: [url=http://android.yaohuiji.com/wp-content/uploads/2010/07/image73.png]我们可以留意到 OnClickListener 是View的一个内部接口,也留意到想更改某个Activity的标题栏,可以用setTitle的方法直接设置。 如果看源代码的话我们也可以留意到Button是我们下面要讲的TextView的子类,对句话你有个印象就行了。二、TextView 文本框我们在很早以前的例子里已经开始使用,TextView这个组件,足可见他应用之广泛。它的用处就是显示文本,它也是最基本的一个视图组件。我们有必要看一下TextView的继承关系:[/url]从上图看到Button、EditText、CheckBox、RadioButton等等常用组件都是TextView的直接子类或间接子类,因此我们本讲里TextView内容虽然不多,但是这个组件大家还是要处处留意,逐步加深对TextView类的理解。下面我们举一个例子,来看一下TextView,并认识一下使用setMovementMethod()方法实现文本可滚动,下面看代码:
  1. package android.basic.lesson9;

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.text.method.ScrollingMovementMethod;
  5. import android.widget.TextView;

  6. public class HelloTextView extends Activity {
  7.     /** Called when the activity is first created. */
  8.     @Override
  9.     public void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.main);

  12.         //找到TextView组件
  13.         TextView tv = (TextView)findViewById(R.id.TextView01);

  14.         //设置移动方法
  15.         tv.setMovementMethod(ScrollingMovementMethod.getInstance());
  16.     }
  17. }
复制代码
main,xml代码:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
  3. <textview android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/TextView01" android:text="@string/hello" android:textsize="30sp">
  4. </textview></linearlayout>
复制代码


长长的关于冯诺依曼的文本我就不粘贴了,它定义在strings.xml文件里。下面是显示效果:[url=http://android.yaohuiji.com/wp-content/uploads/2010/07/image74.png]
我们知道在TextView外层套一个ScrollView也可以实现文本滚动的,同学们自己可以实现一下,然后对比其显示效果有何不同(某一个带滚动条)。三、EditView 可编辑文本框我们通过一个例子来介绍一下EditView。1、新建一个项目,在main.xml中添加一个EditText。<EditText    android:text=""    android:id="@+id/EditText01"  
    android:hint="随便输点什么然后按回车"    android:layout_width="fill_parent"    android:layout_height="wrap_content"></EditText>其中,android:hint属性就是没有输入内容之前的提示内容,hint英文的意思也是暗示之意。2、在onCreate()方法中添加如下代码:
  1. //找到xml中定义的EditText
  2. final EditText et = (EditText) findViewById(R.id.EditText01);
  3. et.setOnKeyListener(new View.OnKeyListener() {

  4.         @Override
  5.         public boolean onKey(View v, int keyCode, KeyEvent event) {
  6.                 //监视硬键盘按键
  7.                 if(event.getAction()== KeyEvent.ACTION_DOWN && keyCode== KeyEvent.KEYCODE_ENTER){
  8.                         //按住把EditView中的文版显示在吐司消息中
  9.                         Toast.makeText(MainHelloEditView.this, et.getText(),
  10.                                         Toast.LENGTH_SHORT).show();
  11.                         //返回true说明你已经处理了这个事件并且它应该就此终止,如果返回false就表示此事件还需要继续传递下去
  12.                         return true;
  13.                 }
  14.                 return false;
  15.         }
  16. });
复制代码

3、运行程序,输入一些文字之后按回车键看看效果:[/url]有兴趣的同学可以把toast后面的return true换成 return false看看效果,再按OK键呼出软键盘试试。四、ImageView 图片框,ImageButton 图片按钮我们通过一个例子来看一下ImageView和ImageButton的应用。
  1. package android.basic.lesson9;

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.MotionEvent;
  5. import android.view.View;
  6. import android.view.View.OnClickListener;
  7. import android.view.View.OnTouchListener;
  8. import android.widget.ImageButton;
  9. import android.widget.ImageView;
  10. import android.widget.Toast;

  11. public class MainHelloImageButton extends Activity {
  12.         /** Called when the activity is first created. */
  13.         @Override
  14.         public void onCreate(Bundle savedInstanceState) {
  15.                 super.onCreate(savedInstanceState);
  16.                 setContentView(R.layout.main);

  17.                 // 找到xml中的ImageButton和ImageView
  18.                 final ImageButton ib = (ImageButton) findViewById(R.id.ImageButton01);
  19.                 final ImageView iv = (ImageView) findViewById(R.id.ImageView01);

  20.                 // 定义触摸监听
  21.                 OnTouchListener otl = new OnTouchListener() {
  22.                         @Override
  23.                         public boolean onTouch(View v, MotionEvent event) {
  24.                                 switch (v.getId()) {
  25.                                 case R.id.ImageButton01:
  26.                                         Toast.makeText(getApplicationContext(), "触摸"+((ImageView)v).getId(),
  27.                                                         Toast.LENGTH_LONG).show();
  28.                                         break;
  29.                                 case R.id.ImageView01:
  30.                                         Toast.makeText(getApplicationContext(), "触摸"+((ImageView)v).getId(),
  31.                                                         Toast.LENGTH_LONG).show();
  32.                                         break;
  33.                                 }
  34.                                 return false;
  35.                         }
  36.                 };

  37.                 // 定义点击监听
  38.                 OnClickListener ocl = new OnClickListener() {
  39.                         @Override
  40.                         public void onClick(View v) {
  41.                                 Toast.makeText(getApplicationContext(), "点击"+((ImageView)v).getId(),
  42.                                                 Toast.LENGTH_LONG).show();
  43.                         }
  44.                 };

  45.                 // 绑定监听
  46.                 ib.setOnClickListener(ocl);
  47.                 ib.setOnTouchListener(otl);
  48.                 iv.setOnClickListener(ocl);
  49.                 iv.setOnTouchListener(otl);
  50.         }
  51. }
复制代码

main.xml配置:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="center" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">

  3.         <imagebutton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/ImageButton01" android:layout_marginbottom="10dp" android:src="@drawable/android_normal">
  4.                 </imagebutton>
  5.         <imageview android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/ImageView01" android:src="@drawable/android_normal">
  6.                 </imageview>
  7. </linearlayout>
复制代码

运行效果:[url=http://android.yaohuiji.com/wp-content/uploads/2010/07/image77.png]
通过这个例子大家可以体会一下OnTouch和OnClick事件之间的区别。五、CheckBox 选择框我们也是使用一个例子来演示选择框,请在这里例子里留意 onClickListener和onCheckedChangeListener的区别
  1. package android.basic.lesson9;

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.view.View.OnClickListener;
  6. import android.widget.Button;
  7. import android.widget.CheckBox;
  8. import android.widget.CompoundButton;
  9. import android.widget.CompoundButton.OnCheckedChangeListener;
  10. import android.widget.Toast;

  11. public class MainHelloCheckBox extends Activity {
  12.         /** Called when the activity is first created. */
  13.         @Override
  14.         public void onCreate(Bundle savedInstanceState) {
  15.                 super.onCreate(savedInstanceState);
  16.                 setContentView(R.layout.main);

  17.                 //声明对象
  18.                 final CheckBox cb1 = (CheckBox) findViewById(R.id.CheckBox01);
  19.                 final CheckBox cb2 = (CheckBox) findViewById(R.id.CheckBox02);

  20.                 //声明监听器
  21.                 OnClickListener ocl = new OnClickListener() {

  22.                         @Override
  23.                         public void onClick(View v) {
  24.                                         if(!((CheckBox)v).isChecked()){
  25.                                         Toast.makeText(MainHelloCheckBox.this, "\""+((Button)v).getText()+"\"被取消",
  26.                                                         Toast.LENGTH_SHORT).show();
  27.                                         }
  28.                         }
  29.                 };

  30.                 OnCheckedChangeListener occl = new OnCheckedChangeListener() {

  31.                         @Override
  32.                         public void onCheckedChanged(CompoundButton buttonView,
  33.                                         boolean isChecked) {
  34.                                 if(isChecked){
  35.                                         Toast.makeText(MainHelloCheckBox.this, "\""+buttonView.getText()+"\"被选择",
  36.                                                         Toast.LENGTH_SHORT).show();
  37.                                 }
  38.                         }
  39.                 };

  40.                 //绑定监听器
  41.                 cb1.setOnCheckedChangeListener(occl);
  42.                 cb2.setOnCheckedChangeListener(occl);
  43.                 cb1.setOnClickListener(ocl);
  44.                 cb2.setOnClickListener(ocl);
  45.         }
  46. }
复制代码
main.xml的代码:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
  3. <textview android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/TextView01" android:text="选择你想得到的东西:">
  4. <checkbox android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/CheckBox01" android:text="得不到">
  5. </checkbox>
  6. <checkbox android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/CheckBox02" android:text="已失去">
  7. </checkbox>
  8. </textview></linearlayout>
复制代码

行效果如下图,点击选择和取消选择都会触发事件,做出消息提示,请留意之间的异同。[/url]六、RadioGroup and RadioButton 单选组和单选钮在这一小节里,我们创建一个RadioGroup组件和他的两个子元素RadioButton,实现单选效果。1、新建一个项目,打开res/layout/main.xml 添加如下代码:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <radiogroup android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="vertical">
  4.       <radiobutton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/radio_red" android:text="红">
  5.       <radiobutton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/radio_blue" android:text="蓝">
  6.     </radiobutton></radiobutton></radiogroup>
  7. </linearlayout>
复制代码

添加android:checked=”true”可以做一个默认选中项,如果不增加的话默认都不是选中状态。(读者可以试一下两个单选钮都设置了选中状态时,会有什么结果,思考一下为什么是这样。)2、在Acticity里处理一下点击事件:
  1. package android.basic.lesson9;

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.view.View.OnClickListener;
  6. import android.widget.RadioButton;
  7. import android.widget.Toast;

  8. public class MainHelloRadioGroup extends Activity {
  9.         /** Called when the activity is first created. */
  10.         @Override
  11.         public void onCreate(Bundle savedInstanceState) {
  12.                 super.onCreate(savedInstanceState);
  13.                 setContentView(R.layout.main);

  14.                 final RadioButton radio_red = (RadioButton) findViewById(R.id.radio_red);
  15.                 final RadioButton radio_blue = (RadioButton) findViewById(R.id.radio_blue);

  16.                 OnClickListener ocl = new OnClickListener() {

  17.                         @Override
  18.                         public void onClick(View v) {
  19.                         Toast.makeText(MainHelloRadioGroup.this, ((RadioButton)v).getText(), Toast.LENGTH_SHORT).show();

  20.                         }
  21.                 };

  22.                 radio_red.setOnClickListener(ocl);
  23.                 radio_blue.setOnClickListener(ocl);
  24.         }
  25. }
复制代码



3、运行程序,查看结果:[url=http://android.yaohuiji.com/wp-content/uploads/2010/07/image79.png]
本讲内容比较多,例子也比较多,大家可以多做练习来加深理解和提高熟练度,并留意一些常用属性的设置。这节课就到这里吧。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

0

主题

21

帖子

14

安币

初级码农

Rank: 1

发表于 2011-7-10 19:18:35 | 显示全部楼层
学习king

0

主题

205

帖子

306

安币

攻城狮

Rank: 3Rank: 3

发表于 2011-7-15 22:40:50 | 显示全部楼层
顶起~~

0

主题

22

帖子

38

安币

程序猿

Rank: 2

发表于 2011-7-20 23:26:05 | 显示全部楼层
感谢分享,每讲都会认真得看

0

主题

22

帖子

38

安币

程序猿

Rank: 2

发表于 2011-7-20 23:30:02 | 显示全部楼层
感谢分享,每讲都会认真得看

1

主题

28

帖子

38

安币

程序猿

Rank: 2

发表于 2011-7-31 13:49:49 | 显示全部楼层
textSize 要记得大写。。  layout_marginBottom  记得大写。。

1

主题

28

帖子

38

安币

程序猿

Rank: 2

发表于 2011-7-31 15:07:31 | 显示全部楼层
(edittext 那个):类:
package com.liyang.k;

import android.app.Activity;
import android.view.KeyEvent;
import android.view.View;
import android.os.Bundle;
import android.widget.EditText;
import android.widget.Toast;
  

public class KActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final EditText et = (EditText) findViewById(R.id.EditText01);
        et.setOnKeyListener(new View.OnKeyListener(){
                public boolean onKey(View v, int keyCode, KeyEvent event) {
                        if(event.getAction()== KeyEvent.ACTION_DOWN && keyCode== KeyEvent.KEYCODE_ENTER){
                                Toast.makeText(KActivity.this, et.getText(),Toast.LENGTH_SHORT).show();
                                 return true;
                        }
                         return false;
                        }
               
        });
    }
}

1

主题

28

帖子

38

安币

程序猿

Rank: 2

发表于 2011-7-31 16:35:45 | 显示全部楼层
这章真麻烦。。哎。。总算弄完了。。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )