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

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

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

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

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

layout/main.xml

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:orientation="horizontal"

 4     android:layout_width="fill_parent"

 5     android:layout_height="fill_parent"

 6     >

 7 <TableRow>

 8 <!-- 普通文字按钮 -->    

 9 <Button

10     android:layout_width="wrap_content"

11     android:layout_height="wrap_content"

12     android:background="@drawable/red"

13     android:text="普通按钮"

14     android:textSize="10pt"

15 />

16 <!-- 普通图片按钮 -->

17 <ImageButton

18     android:layout_width="wrap_content"

19     android:layout_height="wrap_content"

20     android:src="@drawable/blue"

21     android:background="#000000"

22 />

23 </TableRow>

24 <TableRow>

25 <!-- 按下时显示不同图片的按钮 -->

26 <ImageButton

27     android:layout_width="wrap_content"

28     android:layout_height="wrap_content"

29     android:src="@drawable/button_selector"

30     android:background="#000000"

31 />

32 <!-- 带文字的图片按钮-->

33 <Button

34     android:id="@+id/test"

35     android:layout_width="wrap_content"

36     android:layout_height="wrap_content"

37     android:background="@drawable/button_selector"

38     android:text="带文字的图片按钮"

39 />

40 </TableRow>

41 </TableLayout>

 

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

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

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

layout/main.xml

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:orientation="vertical"

 4     android:layout_width="fill_parent"

 5     android:layout_height="fill_parent"

 6     >

 7 <TableRow>

 8 <TextView 

 9     android:layout_width="wrap_content"

10     android:layout_height="wrap_content"

11     android:text="性别:"

12     android:textSize="11pt"

13     />

14 <!-- 定义一组单选框 -->

15 <RadioGroup 

16     android:orientation="horizontal"

17     android:layout_gravity="center_horizontal">

18 <!-- 定义两个单选框 -->

19 <RadioButton android:layout_width="wrap_content"

20     android:layout_height="wrap_content"

21     android:text="男"

22     />

23 <RadioButton android:layout_width="wrap_content"

24     android:layout_height="wrap_content"

25     android:text="女"

26     />

27 </RadioGroup>

28 </TableRow>    

29 <TableRow>

30 <TextView 

31     android:layout_width="wrap_content"

32     android:layout_height="wrap_content"

33     android:text="喜欢的颜色:"

34     android:textSize="11pt"

35     />

36 <!-- 定义一个垂直的线性布局 -->

37 <LinearLayout android:layout_gravity="center_horizontal"

38     android:orientation="vertical"

39     android:layout_width="wrap_content"

40     android:layout_height="wrap_content"

41 >

42 <!-- 定义三个复选框 -->

43 <CheckBox android:layout_width="wrap_content"

44     android:layout_height="wrap_content"

45     android:text="红色"

46     android:checked="true"

47 />

48 <CheckBox android:layout_width="wrap_content"

49     android:layout_height="wrap_content"

50     android:text="蓝色"

51 />

52 <CheckBox android:layout_width="wrap_content"

53     android:layout_height="wrap_content"

54     android:text="绿色"

55 />

56 </LinearLayout>

57 </TableRow>

58 </TableLayout>

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

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

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

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

 

 

 

 

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

layout/main.xml

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:orientation="vertical"

 4     android:layout_width="fill_parent"

 5     android:layout_height="fill_parent"

 6     >

 7 <!-- 定义一个ToggleButton按钮 -->

 8 <ToggleButton android:id="@+id/toggle"

 9     android:layout_width="wrap_content"

10     android:layout_height="wrap_content"

11     android:textOff="横向排列"

12     android:textOn="纵向排列"

13     android:checked="true"

14     />

15 <!-- 定义一个可以动态改变方向的线性布局 -->

16 <LinearLayout android:id="@+id/test"

17     android:orientation="vertical"

18     android:layout_width="fill_parent"

19     android:layout_height="fill_parent"

20     >

21 <Button

22     android:layout_width="wrap_content"

23     android:layout_height="wrap_content"

24     android:text="测试按钮一"

25     />

26 <Button

27     android:layout_width="wrap_content"

28     android:layout_height="wrap_content"

29     android:text="测试按钮二"

30     />

31 <Button

32     android:layout_width="wrap_content"

33     android:layout_height="wrap_content"

34     android:text="测试按钮三"

35     />

36 </LinearLayout>

37 </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

 

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 2     xmlns:tools="http://schemas.android.com/tools"

 3     android:orientation="vertical"

 4     android:layout_width="fill_parent"

 5     android:layout_height="fill_parent">

 6 

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

 8     

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

10     

11 

12 </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

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:orientation="vertical"

 4     android:layout_width="fill_parent"

 5     android:layout_height="fill_parent"

 6     android:gravity="center_horizontal"

 7     >

 8 <Chronometer

 9     android:id="@+id/test"  

10     android:layout_width="wrap_content" 

11     android:layout_height="wrap_content" 

12     android:textSize="12pt"

13     android:textColor="#ffff0000"

14     />

15 <Button

16     android:id="@+id/start"  

17     android:layout_width="wrap_content" 

18     android:layout_height="wrap_content" 

19     android:text="启动"

20     />        

21 </LinearLayout>

com.example.chronometertest.MainActivity.java

 1 package com.example.chronometertest;

 2 

 3 import android.support.v7.app.ActionBarActivity;

 4 import android.support.v7.app.ActionBar;

 5 import android.support.v4.app.Fragment;

 6 import android.os.Bundle;

 7 import android.os.SystemClock;

 8 import android.view.LayoutInflater;

 9 import android.view.Menu;

10 import android.view.MenuItem;

11 import android.view.View;

12 import android.view.View.OnClickListener;

13 import android.view.ViewGroup;

14 import android.widget.Button;

15 import android.widget.Chronometer;

16 import android.widget.Chronometer.OnChronometerTickListener;

17 import android.os.Build;

18 

19 public class MainActivity extends ActionBarActivity {

20 

21     @Override

22     protected void onCreate(Bundle savedInstanceState) {

23         super.onCreate(savedInstanceState);

24         setContentView(R.layout.main);

25         //获取计时器组件

26         final Chronometer ch = (Chronometer) findViewById(R.id.test);

27         //获取开始按钮

28         Button bu = (Button) findViewById(R.id.start);

29         bu.setOnClickListener(new OnClickListener() {

30             

31             @Override

32             public void onClick(View arg0) {

33                 //设置开始计时

34                 ch.setBase(SystemClock.elapsedRealtime());

35                 //启动计时器

36                 ch.start();

37             }

38         });

39         

40         ch.setOnChronometerTickListener(new OnChronometerTickListener() {

41             

42             @Override

43             public void onChronometerTick(Chronometer ch) {

44                 // 如果从开始到现在超过了20s

45                 if (SystemClock.elapsedRealtime() - ch.getBase() > 20 * 1000) {

46                     ch.stop();

47                 }

48                 

49             }

50         });

51     }

52 }

 图像视图(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

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 

 3     android:orientation="vertical" 

 4     android:layout_width="fill_parent" 

 5     android:layout_height="fill_parent">

 6     

 7     <LinearLayout android:orientation="horizontal" 

 8         android:layout_width="fill_parent" 

 9         android:layout_height="wrap_content" 

10         android:gravity="center">

11         

12     <Button android:id="@+id/plus"

13         android:layout_width="wrap_content"

14         android:layout_height="wrap_content"

15         android:text="增大透明度"

16         />

17     

18     <Button android:id="@+id/minus"

19         android:layout_width="wrap_content"

20         android:layout_height="wrap_content"

21         android:text="降低透明度"

22         />

23     

24     <Button android:id="@+id/next"

25         android:layout_width="wrap_content"

26         android:layout_height="wrap_content"

27         android:text="下一张"

28         />        

29         

30     </LinearLayout>

31     

32     <!-- 定义显示图片整体的ImageView -->

33     <ImageView android:id="@+id/image1"

34         android:layout_width="fill_parent"

35         android:layout_height="240px"

36         android:src="@drawable/shuangta"

37         android:scaleType="fitCenter"/>

38     

39         <!-- android:scaleType="fitCenter"    

40         上面代码的这句话是指在ImageView中显示图片时会进行保持纵横比的缩放，

41         并将缩放后的图片放在该ImageView的中央 -->

42     

43     <!-- 定义显示图片局部细节的ImageView -->    

44     <ImageView android:id="@+id/image2" 

45         android:layout_width="120dp"

46         android:layout_height="120dp"

47         android:layout_marginTop="10dp"/>

48 </LinearLayout>

49     

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

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;

            }

        });

    }

}