UI组件详解3---- ProgressBar、SeekBar、ImageView与TabHost

一、ProgressBar:

   

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical">

 

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="进度条演示" />

    <ProgressBar

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:max="1000"

        android:progress="100"

        android:id="@+id/progressbar1"

        />

        <ProgressBar

        style="@android:style/Widget.ProgressBar.Horizontal"

        android:layout_marginTop="30dp"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:max="1000"

        android:progress="100"

        android:secondaryProgress="300"

        android:id="@+id/progressbar2"

        />

</LinearLayout>

 

 

Toadd a progress bar to a layout file, you can use the <ProgressBar> element. 

By default, the progress baris a spinning wheel (an indeterminate indicator). 

To change to a horizontalprogress bar, apply the Widget.ProgressBar.Horizontal style,like so:

 <ProgressBar     style="@android:style/Widget.ProgressBar.Horizontal"     ... />

 

 

ProgressbarDemo.java代码如下：

package cn.class3g.activity;

 

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.widget.ProgressBar;

public class ProgressbarDemo extends Activity {

   

    ProgressBar progressbar = null;

    int i=0;

    int progressbarMax = 0;

   

    Handler handler = new Handler();

    public void onCreate(BundlesavedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.main);

       

        findViews();

      

    }

    private void findViews() {

         progressbar=(ProgressBar)this.findViewById(R.id.progressbar2);

        

         progressbarMax = progressbar.getMax();

         

         new Thread(new Runnable(){

             public void run(){

             while(i< progressbarMax){

                 i = doWork();

                 handler.post(new Runnable(){

                     public void run(){

                         progressbar.setProgress(i);

                     }

                 });

                 

                 try {

                    Thread.sleep(50);

                } catch(InterruptedException e) {

                    // TODOAuto-generated catch block

                    e.printStackTrace();

                }

             }

         }

     }).start();

         

    }

    public int doWork(){

        return ++i;

       

    }

}

效果图：

二、SeekBar

SeekBar是ProgressBar的扩展，在其基础上增加了一个可滑动的滑片(注：就是那个可拖动的图标)。用户可以触摸滑片并向左或向右拖动，再或者可以使用方向键都可以设置当前的进度等级。不建议把可以获取焦点的widget放在SeekBar的左边或右边。

SeekBar可以附加一个SeekBar.OnSeekBarChangeListener以获得用户操作的通知。

 

内部类

        接口        SeekBar.OnSeekBarChangeListener      

        一个回调函数用来当进度等级发生改变时通知客户端

l        SeekBar.getProgress() ：获取拖动条当前值

l         调 用 setOnSeekBarChangeListener() 方 法 ， 处 理 拖 动 条 值 变 化 事 件 ， 把SeekBar.OnSeekBarChangeListener 实例作为参数传入

下面的实例可以模拟实现该进度 （ 拖动 ） 条 ， 还可以通过拖动游标改变进度值， 每次拖动之后仍会自动更新。

以下为我所写的实例：

 

SeekBarDemo.java代码：

packagecn.class3g.activity;

 

importandroid.app.Activity;

importandroid.os.Bundle;

importandroid.util.Log;

importandroid.widget.SeekBar;

importandroid.widget.SeekBar.OnSeekBarChangeListener;

 

public class SeekBarDemo extendsActivityimplements OnSeekBarChangeListener{

    

    SeekBar seekbar = null;

      public void onCreate(Bundle savedInstanceState) {

           super.onCreate(savedInstanceState);

           setContentView(R.layout.seekbar_layout);

           

           findViews();

          

        }

 

    private void findViews() {

        seekbar = (SeekBar) this.findViewById(R.id.seekbar);

        seekbar.setOnSeekBarChangeListener(this);

    }

 

    public void onProgressChanged(SeekBar seekBar,int progress, boolean formUser) {

        // TODO Auto-generated method stub

        Log.d("TAG", "Change" + String.valueOf(seekBar.getProgress()));

    }

 

    public void onStartTrackingTouch(SeekBarseekBar) {

        Log.d("TAG", "Start" + String.valueOf(seekBar.getProgress()));

       

    }

 

    public void onStopTrackingTouch(SeekBarseekBar) {

        // TODO Auto-generated method stub

        Log.d("TAG", "Stop" + String.valueOf(seekBar.getProgress()));

    }

}

 

 

 

seekbar_layout代码：

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

 

    <SeekBar

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:max="1000"

        android:id="@+id/seekbar"

        />

 

</LinearLayout>

 

效果图：

在eclipse中的LogCat处可看到：

三、ImageView

android.widget.ImageView

 

直接子类   ImageButton,QuickContactBadge 

 

间接子类       ZoomButton

显示任意图像，例如图标。ImageView类可以加载各种来源的图片（如资源或图片库），需要计算图像的尺寸，比便它可以在其他布局中使用，并提供例如缩放和着色（渲染）各种显示选项。

以下为实例说明：

ImageViewDemo.java代码如下：

package cn.class3g.activity;

 

import android.app.Activity;

import android.graphics.Bitmap;

importandroid.graphics.drawable.BitmapDrawable;

import android.os.Bundle;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.widget.ImageView;

 

public class ImageViewDemo extends Activityimplements OnTouchListener {

 

       ImageViewimageView1, imageView2;

 

       protectedvoid onCreate(Bundle savedInstanceState) {

              //TODO Auto-generated method stub

              super.onCreate(savedInstanceState);

              this.setContentView(R.layout.imageview_layout);

 

              findViews();

       }

 

       privatevoid findViews() {

              imageView1= (ImageView) findViewById(R.id.img1);

              imageView2= (ImageView) findViewById(R.id.img2);

             

              imageView1.setOnTouchListener(this);

 

       }

 

       publicboolean onTouch(View v, MotionEvent event) {

              floatscale = 412 / 320;

 

              intx = (int) (event.getX() * scale);

              inty = (int) (event.getY() * scale);

             

              //尝试考虑解决边界问题

              intwidth = (int) (100 * scale);

              intheight = (int) (100 * scale);

 

              BitmapDrawablebitmapDrawable = (BitmapDrawable) imageView1.getDrawable();

             

              imageView2.setImageBitmap(Bitmap.createBitmap(bitmapDrawable.getBitmap(),

                            x,y,width, height));

             

              returnfalse;

       }

 

}

 

imageview_layout的代码如下：

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

 

    <ImageView

        android:id="@+id/img1"

        android:layout_width="fill_parent"

        android:layout_height="300dp"

        android:background="#cccccc"

        android:src="@drawable/pig"/>

 

    <ImageView

        android:id="@+id/img2"

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:background="#cccccc"

        android:scaleType="fitStart"

        android:layout_marginTop="20dp"

        />

 

</LinearLayout>

在虚拟机上运行效果：

四、TabHost

提供选项卡（Tab页）的窗口视图容器。此对象包含两个子对象：一组是用户可以选择指定Tab页的标签；另一组是FrameLayout用来显示该Tab页的内容。通常控制使用这个容器对象，而不是设置在子元素本身的值。（译者注：即使使用的是单个元素，也最好把它放到容器对象ViewGroup里）

内部类

interfaceTabHost.OnTabChangeListener    

接口定义了当选项卡更改时被调用的回调函数

 

interface TabHost.TabContentFactory  

当某一选项卡被选中时生成选项卡的内容

 

class TabHost.TabSpec     

单独的选项卡，每个选项卡都有一个选项卡指示符,内容和tag标签,以便于记录.

以下是实例演示：

 

TabHostDemo.java代码如下：

packagecn.class3g.activity;

 

importandroid.app.TabActivity;

importandroid.content.Intent;

import android.os.Bundle;

importandroid.view.LayoutInflater;

importandroid.view.View;

importandroid.widget.Button;

importandroid.widget.TabHost;

 

public class TabHostDemo extendsTabActivity {

 

    TabHost tabHost = null;

 

    protected voidonCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

 

        tabHost = this.getTabHost();

 

        LayoutInflater inflater =LayoutInflater.from(this);

 

        inflater.inflate(R.layout.tabhost_layout, tabHost.getTabContentView(),

                true);

 

        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("切换标签")

                .setContent(R.id.tab1));

 

        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("SeekBar demo")

                .setContent(new Intent(this, SeekBarDemo.class)));

 

        tabHost.addTab(tabHost.newTabSpec("tab3")

                .setIndicator("ImageView Demo")

                .setContent(new Intent(this, ImageViewDemo.class)));

 

        findViews();

    }

 

    private void findViews() {

        Button btn = (Button) this.findViewById(R.id.button);

        btn.setOnClickListener(new View.OnClickListener() {

           

            public void onClick(View v) {

               

//              tabHost.setCurrentTab(1);

                tabHost.setCurrentTabByTag("tab2");

            }

        });

       

    }

 

}

 

tabhost_layout.xml布局文件为：

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"   >

 

    <LinearLayout

        android:id="@+id/tab1"        

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical">

       

        <Button

            android:id="@+id/button"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

             android:text="切换至tab2"

            />

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:src="@drawable/pig"

            android:scaleType="fitCenter"

            android:layout_marginTop="20dp"

            />

       

       

    </LinearLayout>

 

</TabHost>

 

 

 

在虚拟机上运行效果为：

然后点击SeekBar demo、点击按钮或ImageView Demo 可切换至：（该效果即前面所写的例子）

     或