Android 自学之基本界面组件(下)

按钮(Button)与图片按钮(ImageButton)组件的功能和用法

Button继承了TextView，ImageButton继承了Button。不管是Button还是ImageButton，他们的功能都很单一，主要是在UI界面生成一个按钮，该按钮可以供用户单击，当用户单击按钮后出发一个Onclick事件。

Button  和  ImageButton的不同在于Button生成的按钮显示文字，ImageButton生成的按钮显示图片。(关于ImageButton属性android：text属性是无效的就算你设置了他也不会显示)

下面我来举个例子看看：按钮、圆形按钮、带文字的图片按钮

layout/main.xml

 <?xml version="1.0" encoding="utf-8"?>
 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="horizontal"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     >
 <TableRow>
 <!-- 普通文字按钮 -->
 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="@drawable/red"
     android:text="普通按钮"
     android:textSize="10pt"
 />
 <!-- 普通图片按钮 -->
 <ImageButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/blue"
     android:background="#000000"
 />
 </TableRow>
 <TableRow>
 <!-- 按下时显示不同图片的按钮 -->
 <ImageButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/button_selector"
     android:background="#000000"
 />
 <!-- 带文字的图片按钮-->
 <Button
     android:id="@+id/test"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="@drawable/button_selector"
     android:text="带文字的图片按钮"
 />
 </TableRow>
 </TableLayout>

单选按钮、复选框组件的功能和用法

单选按钮(RadioButton)和复选框(checkBox)是所有组件界面中最普通的UI组件，Android中的RadioButton，Checkbox都是继承了Button按钮，所以他们能直接使用Button所支持的各种属性和方法。

下面代码中我们可以看看两者的不同之处：

layout/main.xml

 <?xml version="1.0" encoding="utf-8"?>
 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     >
 <TableRow>
 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="性别:"
     android:textSize="11pt"
     />
 <!-- 定义一组单选框 -->
 <RadioGroup
     android:orientation="horizontal"
     android:layout_gravity="center_horizontal">
 <!-- 定义两个单选框 -->
 <RadioButton android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="男"
     />
 <RadioButton android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="女"
     />
 </RadioGroup>
 </TableRow>
 <TableRow>
 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="喜欢的颜色:"
     android:textSize="11pt"
     />
 <!-- 定义一个垂直的线性布局 -->
 <LinearLayout android:layout_gravity="center_horizontal"
     android:orientation="vertical"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
 >
 <!-- 定义三个复选框 -->
 <CheckBox android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="红色"
     android:checked="true"
 />
 <CheckBox android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="蓝色"
 />
 <CheckBox android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="绿色"
 />
 </LinearLayout>
 </TableRow>
 </TableLayout>

状态开关按钮(ToggleButton)的功能和用法

ToggleButton也是由Button派生出来的。从界面上看他与CheckBox复选框很相似，他们都可以设置两个状态；不过他们两个的区别主要体现在功能上，ToggleButton通常用于切换程序中的某种状态。

ToggleButton所支持的XML属性及相关方法说明：

XML属性	相关方法	说明
android：checked	setChecked(boolean)	设置该按钮是否被选中
android：textOff		设置该按钮没有被选中时显示的文本
android：textOn		设置该按钮被选中时显示的文本

下面我们来看看我们的代码：

layout/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"
     >
 <!-- 定义一个ToggleButton按钮 -->
 <ToggleButton android:id="@+id/toggle"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textOff="横向排列"
     android:textOn="纵向排列"
     android:checked="true"
     />
 <!-- 定义一个可以动态改变方向的线性布局 -->
 <LinearLayout android:id="@+id/test"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     >
 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="测试按钮一"
     />
 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="测试按钮二"
     />
 <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="测试按钮三"
     />
 </LinearLayout>
 </LinearLayout>

com.example.togglebutton.MainActivity.java

package com.example.togglebutton;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.LinearLayout;
import android.widget.ToggleButton;
import android.os.Build;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //我们先拿到我们的状态按钮
        ToggleButton toggle = (ToggleButton) findViewById(R.id.toggle);
        //然后我们要拿到我们我定义的那个可以动态布局的线性布局
        final LinearLayout linear = (LinearLayout) findViewById(R.id.test);
        //给状态按钮设置点击事件
        toggle.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton arg0, boolean arg1) {
                    //对状态按钮传回的boolean进行判断
                    if (arg1) {
                        //垂直布局
                        linear.setOrientation(1);
                    } else {
                        //水平布局
                        linear.setOrientation(0);
                    }
            }
        });

    }
}

时钟(AnalogClock和DigitalClock)组件的功能和用法

时钟组件是两个非常简单的组件，DigitalClock本身就继承了TextView---也就是说，它本身就是文本框，只是里面显示的内容是当前时间；AnalogClock则继承了View组件，它重写了View和OnDraw方法，他会在View上模拟时钟。

AnalogClock和DigitalClock都会显示时间，他们不同的是；DigitalClock显示数字时钟，可以显示当前的秒数，AnalogClock显示模拟时钟，不会显示当前秒数。

下面看看两种时钟的代码：

layout/main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent">

     <AnalogClock android:layout_width="wrap_content" android:layout_height="wrap_content"/>

     <DigitalClock android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="14pt"/>

 </LinearLayout>

android 还提供了一个计时器组件：Chronometer，该组件与DigitalClock都继承自TextView，因此他们都会显示一段文本。但Chronometer并不现实当前时间，他显示的是从某个起始时间开始，一共过去了多长时间。

Chronometer的用法很简单，他只提供了以i个android：format属性，用于指定计时器的计时格式。除此之外，Chronometer支持如下常用方法。

• setBase（long base）：设置计时器的起始时间。
• setFormat（String format）：设置显示时间的模式。
• start（）：开始计时
• stop（）：停止计时。
• setOnChronometerTickListener(Chronometer.OnChronometerTickListener  listener):为计时器绑定事件监听器，当计时器改变时触发该监听器。

下面看看代码演示：一个计时器，启动后20s停止

layout/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"
     android:gravity="center_horizontal"
     >
 <Chronometer
     android:id="@+id/test"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textSize="12pt"
     android:textColor="#ffff0000"
     />
 <Button
     android:id="@+id/start"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="启动"
     />
 </LinearLayout>

com.example.chronometertest.MainActivity.java

 package com.example.chronometertest;

 import android.support.v7.app.ActionBarActivity;
 import android.support.v7.app.ActionBar;
 import android.support.v4.app.Fragment;
 import android.os.Bundle;
 import android.os.SystemClock;
 import android.view.LayoutInflater;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.ViewGroup;
 import android.widget.Button;
 import android.widget.Chronometer;
 import android.widget.Chronometer.OnChronometerTickListener;
 import android.os.Build;

 public class MainActivity extends ActionBarActivity {

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
         //获取计时器组件
         final Chronometer ch = (Chronometer) findViewById(R.id.test);
         //获取开始按钮
         Button bu = (Button) findViewById(R.id.start);
         bu.setOnClickListener(new OnClickListener() {

             @Override
             public void onClick(View arg0) {
                 //设置开始计时
                 ch.setBase(SystemClock.elapsedRealtime());
                 //启动计时器
                 ch.start();
             }
         });

         ch.setOnChronometerTickListener(new OnChronometerTickListener() {

             @Override
             public void onChronometerTick(Chronometer ch) {
                 // 如果从开始到现在超过了20s
                 if (SystemClock.elapsedRealtime() - ch.getBase() > 20 * 1000) {
                     ch.stop();
                 }

             }
         });
     }
 }

图像视图(ImageView)组件的功能和用法

图像视图(ImageView)是继承与View组件，他主要的功能是用于显示图片(他能显示的不仅仅是图片而已，如何Drawable对象都能用ImageView显示)。

ImageView支持的XML属性及相关方法和说明

XML属性	相关方法	说明
android：adjustViewBounds	setAdjustViewBounds（boolean）	设置ImageView是否调整自己的边界来保持所显示图片的长宽比
android：maxHeight	setMaxHeight(int)	设置ImageView的最大高度
android：maxWidth	setMaxWidth(int)	设置ImageView最大宽度
android：scaleType	setScaleType(ImageView.scaleType)	设置所显示的图片如何缩放或移动以适应ImageView的大小
android：src	setImageResource(int)	设置ImageView所显示的Drawable对象的ID

上表所支持的android：scaleType属性可指定如下属性值。

• matirx(ImageView.ScaleType.MATIRX):使用matirx方式进行缩放。
• fitXY(ImageView.ScaleType.FIT_XY):对图片横向、纵向独立缩放，使得该图片完全适应ImageView，图片的纵横比可以能会改变。
• fitStart(ImageView.ScaleType.FIT_START):保持纵横比缩放图片，直到该图片能完全显示在ImageView中(图片较长的边长与ImageView相应的边长相等)，缩放完成后将该图片放在ImageView的左上角
• fitCenter(ImageView.ScaleType.FIT_CENTER):保持纵横比缩放图片，直到该图片能完全显示在ImageView中(图片较长的边长与ImageView相应的边长相等)，缩放完成后将该图片放在ImageView的中央
• fitEnd(ImageView.ScaleType.FIT_END):保持纵横比缩放图片，直到该图片能完全显示在ImageView中(图片较长的边长与ImageView相应的边长相等),缩放完成后将该图片放在ImageView的右下角
• center(ImageView.ScaleType.CENTER):把图片放在ImageView的中间，但不做任何缩放
• centerCrop(ImageView.ScaleType.CENTER_CROP):保持纵横比缩放图片，以使得图片完全覆盖ImageView
• centerInside(ImageView.ScaleType.CENTER_INSIDE):保持纵横比缩放图片，以使得ImageView能完全显示图片。

实例：图片浏览器

layout/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">

     <LinearLayout android:orientation="horizontal"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:gravity="center">

     <Button android:id="@+id/plus"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="增大透明度"
         />

     <Button android:id="@+id/minus"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="降低透明度"
         />

     <Button android:id="@+id/next"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="下一张"
         />        

     </LinearLayout>

     <!-- 定义显示图片整体的ImageView -->
     <ImageView android:id="@+id/image1"
         android:layout_width="fill_parent"
         android:layout_height="240px"
         android:src="@drawable/shuangta"
         android:scaleType="fitCenter"/>

         <!-- android:scaleType="fitCenter"
         上面代码的这句话是指在ImageView中显示图片时会进行保持纵横比的缩放，
         并将缩放后的图片放在该ImageView的中央 -->

     <!-- 定义显示图片局部细节的ImageView -->
     <ImageView android:id="@+id/image2"
         android:layout_width="120dp"
         android:layout_height="120dp"
         android:layout_marginTop="10dp"/>
 </LinearLayout>
     

上面的代码显示的效果是一个上下结构的：上面是三个按钮  采用线性布局，下面是两个显示区域。

com.example.imageviewtest.ImageViewTest.java

package com.example.imageviewtest;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.os.Build;

public class ImageViewTest extends ActionBarActivity {

    //定义一个访问图片的数组
    int[] images = new int[]{
        R.drawable.lijiang,
        R.drawable.qiao,
        R.drawable.shuangta,
        R.drawable.shui,
        R.drawable.xiangbi,
    };
    //定义默认显示的图片
    int currentImg = 2;
    //定义图片的初始透明度
    private int alpha = 255;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        final Button plus = (Button) findViewById(R.id.plus);
        final Button minus = (Button) findViewById(R.id.minus);
        final Button next = (Button) findViewById(R.id.next);

        final ImageView image1 = (ImageView) findViewById(R.id.image1);
        final ImageView image2 = (ImageView) findViewById(R.id.image2);

        //定义一个查看下一张图片的监听器
        next.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                //设置图片的下标
                if (currentImg >=4 ) {
                    currentImg =  -1;
                }

                BitmapDrawable bitmapDrawable = (BitmapDrawable) image1.getDrawable();

                //如果图片还未回收，先强制回收该图片
                if (!bitmapDrawable.getBitmap().isRecycled()) {
                    bitmapDrawable.getBitmap().recycle();
                }
                //改变ImageView显示的图片
                image1.setImageBitmap(BitmapFactory.decodeResource(getResources(), images[++currentImg]));
            }
        });

        OnClickListener listener = new OnClickListener() {

            @Override
            public void onClick(View v) {
                if (v == plus) {
                    alpha += 20;
                } 

                if (v == minus) {
                    alpha -= 20;
                }

                if (alpha >= 255) {
                    alpha = 255;
                }

                if (alpha <= 0) {
                    alpha = 0;
                }

                //改变图片的透明度
                image1.setAlpha(alpha);
            }
        };

        //为两个按钮添加监听
        plus.setOnClickListener(listener);
        minus.setOnClickListener(listener);

        image1.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                BitmapDrawable bitmapDrawable = (BitmapDrawable) image1
                        .getDrawable();
                    //获取第一个图片显示框中的位图
                    Bitmap bitmap = bitmapDrawable.getBitmap();
                    //bitmap图片实际大小与第一个ImageView的缩放比例
                    double scale = bitmap.getWidth() / 320.0;
                    //获取需要显示的图片的开始点
                    int x = (int) (event.getX() * scale);
                    int y = (int) (event.getY() * scale);
                    if (x  + 120 > bitmap.getWidth())
                    {
                        x = bitmap.getWidth() - 120;
                    }
                    if (y  + 120 > bitmap.getHeight())
                    {
                        y = bitmap.getHeight() - 120;
                    }
                    //显示图片的指定区域
                    image2.setImageBitmap(Bitmap.createBitmap(bitmap, x, y, 120, 120));
                    image2.setAlpha(alpha);

                return false;
            }
        });
    }
}