第九讲：用户界面 View（四）

最新推荐文章于 2019-03-13 14:59:28 发布

赤脚码农

最新推荐文章于 2019-03-13 14:59:28 发布

阅读量781

点赞数

分类专栏： Android Apps 文章标签： layout import radiobutton android encoding button

Android Apps 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第九讲：用户界面 View（四）

19 Jul

本讲内容：Button TextView EditView CheckBox RadioGroup ImageView ImageButton

一、Button 按钮

按钮是程序中最常见的一个元素，我们通过一个例子感受一下，代码的讲解都写在注释里了，所以我就直接上代码和代码的运行结果。

 
   01package  android.basic.lesson9;
 
   02 
 
   03import  android.app.Activity;
 
   04import  android.os.Bundle;
 
   05import  android.view.View;
 
   06//不熟悉内部类的朋友可以留意一下这里的导入方式
 
   07import  android.view.View.OnClickListener;
 
   08import  android.widget.Button;
 
   09import  android.widget.TextView;
 
   10 
 
   11public  class MainHelloButton 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       //实现一个多按钮可用的单击监听器对象
 
   19       OnClickListener listener = new Button.OnClickListener(){
 
   20            @Override
 
   21            public void onClick(View v) {
 
   22                setTitle("您的答案是："+((TextView)v).getText());
 
   23            }
 
   24       };
 
   25 
 
   26       //为界面中的每个按钮绑定上这个单击监听器
 
   27       findViewById(R.id.Button01).setOnClickListener(listener);
 
   28       findViewById(R.id.Button02).setOnClickListener(listener);
 
   29       findViewById(R.id.Button03).setOnClickListener(listener);
 
   30    }
 
   31}

下面是布局文件：

 
   01<?xml version="1.0" encoding="utf-8"?>
 
   02<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">
 
   03    <textview android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/TextView01" android:text="杜鹃不啼，如何让它啼？" android:textsize="20sp" android:layout_marginbottom="10dp">
 
   04    </textview>
 
   05 
 
   06    <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/Button01" android:text="杀之不足惜！" android:textsize="20sp">
 
   07    </button>
 
   08 
 
   09    <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/Button02" android:text="诱之自然啼！" android:textsize="20sp">
 
   10    </button>
 
   11 
 
   12        <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/Button03" android:text="待之莫须急！" android:textsize="20sp">
 
   13    </button>
 
   14</linearlayout>

再下面就是运行效果：点击某个按钮之后，标题栏发生变化：

我们可以留意到 OnClickListener 是View的一个内部接口，也留意到想更改某个Activity的标题栏,可以用setTitle的方法直接设置。如果看源代码的话我们也可以留意到Button是我们下面要讲的TextView的子类，对句话你有个印象就行了。

二、TextView 文本框

我们在很早以前的例子里已经开始使用，TextView这个组件，足可见他应用之广泛。它的用处就是显示文本，它也是最基本的一个视图组件。我们有必要看一下TextView的继承关系：

从上图看到Button、EditText、CheckBox、RadioButton等等常用组件都是TextView的直接子类或间接子类，因此我们本讲里TextView内容虽然不多，但是这个组件大家还是要处处留意，逐步加深对TextView类的理解。

下面我们举一个例子，来看一下TextView，并认识一下使用setMovementMethod()方法实现文本可滚动，下面看代码：

 
   01package  android.basic.lesson9;
 
   02 
 
   03import  android.app.Activity;
 
   04import  android.os.Bundle;
 
   05import  android.text.method.ScrollingMovementMethod;
 
   06import  android.widget.TextView;
 
   07 
 
   08public  class HelloTextView extends Activity {
 
   09    /** 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 
 
   15        //找到TextView组件
 
   16        TextView tv = (TextView)findViewById(R.id.TextView01);
 
   17 
 
   18        //设置移动方法
 
   19        tv.setMovementMethod(ScrollingMovementMethod.getInstance());
 
   20    }
 
   21}

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文件里。下面是显示效果：

我们知道在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()方法中添加如下代码：

 
   01//找到xml中定义的EditText
 
   02final  EditText et = (EditText) findViewById(R.id.EditText01);
 
   03et.setOnKeyListener(new View.OnKeyListener() {
 
   04 
 
   05    @Override
 
   06    public boolean onKey(View v,  int keyCode, KeyEvent event) {
 
   07        //监视硬键盘按键
 
   08        if(event.getAction()== KeyEvent.ACTION_DOWN && keyCode== KeyEvent.KEYCODE_ENTER){
 
   09            //按住把EditView中的文版显示在吐司消息中
 
   10            Toast.makeText(MainHelloEditView.this, et.getText(),
 
   11                    Toast.LENGTH_SHORT).show();
 
   12            //返回true说明你已经处理了这个事件并且它应该就此终止，如果返回false就表示此事件还需要继续传递下去
 
   13            return true;
 
   14        }
 
   15        return false;
 
   16    }
 
   17});

3、运行程序，输入一些文字之后按回车键看看效果：

有兴趣的同学可以把toast后面的return true换成 return false看看效果，再按OK键呼出软键盘试试。

四、ImageView 图片框，ImageButton 图片按钮

我们通过一个例子来看一下ImageView和ImageButton的应用。

 
   01package  android.basic.lesson9;
 
   02 
 
   03import  android.app.Activity;
 
   04import  android.os.Bundle;
 
   05import  android.view.MotionEvent;
 
   06import  android.view.View;
 
   07import  android.view.View.OnClickListener;
 
   08import  android.view.View.OnTouchListener;
 
   09import  android.widget.ImageButton;
 
   10import  android.widget.ImageView;
 
   11import  android.widget.Toast;
 
   12 
 
   13public  class MainHelloImageButton extends Activity {
 
   14    /** Called when the activity is first created. */
 
   15    @Override
 
   16    public void onCreate(Bundle savedInstanceState) {
 
   17        super.onCreate(savedInstanceState);
 
   18        setContentView(R.layout.main);
 
   19 
 
   20        // 找到xml中的ImageButton和ImageView
 
   21        final ImageButton ib = (ImageButton) findViewById(R.id.ImageButton01);
 
   22        final ImageView iv = (ImageView) findViewById(R.id.ImageView01);
 
   23 
 
   24        // 定义触摸监听
 
   25        OnTouchListener otl = new OnTouchListener() {
 
   26            @Override
 
   27            public boolean onTouch(View v, MotionEvent event) {
 
   28                switch (v.getId()) {
 
   29                case R.id.ImageButton01:
 
   30                    Toast.makeText(getApplicationContext(), "触摸"+((ImageView)v).getId(),
 
   31                            Toast.LENGTH_LONG).show();
 
   32                    break;
 
   33                case R.id.ImageView01:
 
   34                    Toast.makeText(getApplicationContext(), "触摸"+((ImageView)v).getId(),
 
   35                            Toast.LENGTH_LONG).show();
 
   36                    break;
 
   37                }
 
   38                return false;
 
   39            }
 
   40        };
 
   41 
 
   42        // 定义点击监听
 
   43        OnClickListener ocl = new OnClickListener() {
 
   44            @Override
 
   45            public void onClick(View v) {
 
   46                Toast.makeText(getApplicationContext(), "点击"+((ImageView)v).getId(),
 
   47                        Toast.LENGTH_LONG).show();
 
   48            }
 
   49        };
 
   50 
 
   51        // 绑定监听
 
   52        ib.setOnClickListener(ocl);
 
   53        ib.setOnTouchListener(otl);
 
   54        iv.setOnClickListener(ocl);
 
   55        iv.setOnTouchListener(otl);
 
   56    }
 
   57}

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 
 
   4    <imagebutton android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/ImageButton01" android:layout_marginbottom="10dp" android:src="@drawable/android_normal">
 
   5        </imagebutton>
 
   6    <imageview android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/ImageView01" android:src="@drawable/android_normal">
 
   7        </imageview>
 
   8</linearlayout>

运行效果：

通过这个例子大家可以体会一下OnTouch和OnClick事件之间的区别。

五、CheckBox 选择框

我们也是使用一个例子来演示选择框，请在这里例子里留意 onClickListener和onCheckedChangeListener的区别

 
   01package  android.basic.lesson9;
 
   02 
 
   03import  android.app.Activity;
 
   04import  android.os.Bundle;
 
   05import  android.view.View;
 
   06import  android.view.View.OnClickListener;
 
   07import  android.widget.Button;
 
   08import  android.widget.CheckBox;
 
   09import  android.widget.CompoundButton;
 
   10import  android.widget.CompoundButton.OnCheckedChangeListener;
 
   11import  android.widget.Toast;
 
   12 
 
   13public  class MainHelloCheckBox extends Activity {
 
   14    /** Called when the activity is first created. */
 
   15    @Override
 
   16    public void onCreate(Bundle savedInstanceState) {
 
   17        super.onCreate(savedInstanceState);
 
   18        setContentView(R.layout.main);
 
   19 
 
   20        //声明对象
 
   21        final CheckBox cb1 = (CheckBox) findViewById(R.id.CheckBox01);
 
   22        final CheckBox cb2 = (CheckBox) findViewById(R.id.CheckBox02);
 
   23 
 
   24        //声明监听器
 
   25        OnClickListener ocl = new OnClickListener() {
 
   26 
 
   27            @Override
 
   28            public void onClick(View v) {
 
   29                    if(!((CheckBox)v).isChecked()){
 
   30                    Toast.makeText(MainHelloCheckBox.this, "\""+((Button)v).getText()+"\"被取消",
 
   31                            Toast.LENGTH_SHORT).show();
 
   32                    }
 
   33            }
 
   34        };
 
   35 
 
   36        OnCheckedChangeListener occl = new OnCheckedChangeListener() {
 
   37 
 
   38            @Override
 
   39            public void onCheckedChanged(CompoundButton buttonView,
 
   40                    boolean isChecked) {
 
   41                if(isChecked){
 
   42                    Toast.makeText(MainHelloCheckBox.this, "\""+buttonView.getText()+"\"被选择",
 
   43                            Toast.LENGTH_SHORT).show();
 
   44                }
 
   45            }
 
   46        };
 
   47 
 
   48        //绑定监听器
 
   49        cb1.setOnCheckedChangeListener(occl);
 
   50        cb2.setOnCheckedChangeListener(occl);
 
   51        cb1.setOnClickListener(ocl);
 
   52        cb2.setOnClickListener(ocl);
 
   53    }
 
   54}

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>

运行效果如下图，点击选择和取消选择都会触发事件，做出消息提示，请留意之间的异同。

六、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>
 
   7</radiobutton></radiogroup></linearlayout>

添加android:checked=”true”可以做一个默认选中项，如果不增加的话默认都不是选中状态。（读者可以试一下两个单选钮都设置了选中状态时，会有什么结果，思考一下为什么是这样。）

2、在Acticity里处理一下点击事件：

 
   01package  android.basic.lesson9;
 
   02 
 
   03import  android.app.Activity;
 
   04import  android.os.Bundle;
 
   05import  android.view.View;
 
   06import  android.view.View.OnClickListener;
 
   07import  android.widget.RadioButton;
 
   08import  android.widget.Toast;
 
   09 
 
   10public  class MainHelloRadioGroup extends Activity {
 
   11    /** Called when the activity is first created. */
 
   12    @Override
 
   13    public void onCreate(Bundle savedInstanceState) {
 
   14        super.onCreate(savedInstanceState);
 
   15        setContentView(R.layout.main);
 
   16 
 
   17        final RadioButton radio_red = (RadioButton) findViewById(R.id.radio_red);
 
   18        final RadioButton radio_blue = (RadioButton) findViewById(R.id.radio_blue);
 
   19 
 
   20        OnClickListener ocl = new OnClickListener() {
 
   21 
 
   22            @Override
 
   23            public void onClick(View v) {
 
   24                Toast.makeText(MainHelloRadioGroup.this, ((RadioButton)v).getText(), Toast.LENGTH_SHORT).show();
 
   25 
 
   26            }
 
   27        };
 
   28 
 
   29        radio_red.setOnClickListener(ocl);
 
   30        radio_blue.setOnClickListener(ocl);
 
   31    }
 
   32}