Android成长的故事——Android常用UI组件2

SeekBar&&ProgressBar&&ImageView&&TabHost

         今天继续介绍Android中常用的组件，不废话，直接开始。

    SeekBar（拖动条）

    进度条只能显示进度，用户不能与程序交互，通过对其操作来改变其值。而拖动条就可

以实现此功能。拖动条比较常见，如“千千静听”中的播放进度条就是一个拖动条。Android

平台中的SeekBar 是ProgressBar的间接子类。

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

调用setOnSeekBarChangeListener() 方法，处理拖动条值变化事件， 把

SeekBar.OnSeekBarChangeListener 实例作为参数传入

下面的实例可以模拟实现该进度（拖动）条，还可以通过拖动游标改变进度值，每次拖

动之后仍会自动更新。

首先是xml文件

<?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>

效果图：

Java文件，可在日志中显示当前数值

  package cn.class3g.activity;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;

public class SeekBarDemo extends Activity implements OnSeekBarChangeListener{

	SeekBar seekbar=null;
	
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.setContentView(R.layout.seekbar_layout);
		
		findViews();
	}

	private void findViews() {
		seekbar= (SeekBar) this.findViewById(R.id.seekbar);
		seekbar.setOnSeekBarChangeListener(this);
		
	}

	@Override
	public void onProgressChanged(SeekBar seekBar, int progress,
			boolean fromUser) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void onStartTrackingTouch(SeekBar seekBar) {
		Log.d("TAG","start:"+ String.valueOf(seekBar.getProgress()));
		
	}

	@Override
	public void onStopTrackingTouch(SeekBar seekBar) {
		Log.d("TAG","start:"+ String.valueOf(seekBar.getProgress()));
		
	}
}

进度条（ProgressBar）

在XP系统中，我们安装软件或者使用千千静听听歌曲时都会遇到进度条的效果，进度条

可以带给用户良好的体验，Android系统已经为我们提供了ProgressBar类来完成进度条的效

果，我们可以很方便的运用该类。其中最常见的两种进度条是“环形进度条”和“水平进度

条”，在布局文件中定义两种进度条的方式比较相似，区别是，定义“水平进度条时”需要

加上一项属性“style="?android:attr/progressBarStyleHorizontal"”。ProgressBar类

中常用的方法如下：

ProgressBar.setMax(int max);设置总长度为100

ProgressBar.setProgress(intprogress);设置已经开启长度为0,假设设置为50,进度

条将进行到一半停止。

举例：

Xml文件：

<?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="400"
        android:secondaryProgress="300"
        android:id="@+id/progressbar2"
        />
    
</LinearLayout>

效果图：

下面是java代码，可以让进度条自动运行：

 package cn.class3g.activity;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
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(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.progressbar_layout);
        
        findViews();
    }

	private void findViews() {
		progressbar=(ProgressBar) this.findViewById(R.id.progressbar2);
		progressbar.setMax(1000);
		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) {
						// TODO Auto-generated catch block
						e.printStackTrace();
					}
				}				
			}			
		}).start();
	}
	public int doWork(){
		Log.d("TAG", String.valueOf(i));
		
		return ++i;
		
	}
	
}

图片组件（ImageView）

可以在布局中插入图片：

Xml文件：

<?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:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:background="#cccccc"
        android:scaleType="center"
        />
</LinearLayout>

效果图：

TabHost：实现页面的标签效果如图：

<?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/ic_launcher"
        android:scaleType="fitCenter"
        android:layout_marginTop="20dp"
       
        />
 
</LinearLayout>
 
</TabHost>

Java代码：

package cn.class3g.activity;

 

import android.app.TabActivity;

import android.content.Intent;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.Button;

import android.widget.TabHost;

 

public class TabHostDemo extends TabActivity {

   

    TabHost tabHost= null;

   

    public 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").setContent(newIntent(this,SeekBarDemo.class)));

   

       tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("ImageView").setContent(newIntent(this,ImageViewDemo.class)));

       

       findViews();

    }

 

    private voidfindViews() {

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

       btn.setOnClickListener(newView.OnClickListener() {

          

           publicvoid onClick(View v) {

             

              tabHost.setCurrentTab(1);

 

           }

       });

      

    }

}

2011年12月15日