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;
            }
        });
    }
}

 

 

 

 

 

 

 

posted on 2014-05-26 10:29  杨_静  阅读(365)  评论(0)  编辑  收藏  举报

导航