Android之路之九（UI组件3——ProgressBar&SeekBar&TabHost&ImageView）

今天呢，学习UI组件中的：ProgressBar、SeekBar、TabHost、ImageView

 

那么，就通过实例来了解上述四个组件。

首先介绍ProgressBar（即进度条）

先创建progressbar_layout.xml布局文件：

这里定义了两个进度条，其中在未定义其样式的情况下，它是一个圆圈形式的进度条。

然后在ProgressBar.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;
	static 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;
	}
}

启动虚拟机：

Ok，接下来了解SeekBar（拖动条）。

同样的建立seekbar.xml布局文件：

然后，在SeekBar.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);
	}
	public void onProgressChanged(SeekBar seekBar, int progress,
			boolean fromUser) {
		Log.d("TAG", "changed: "+  String.valueOf(seekBar.getProgress()));		
	}
	public void onStartTrackingTouch(SeekBar seekBar) {
		Log.d("TAG", "start: "+  String.valueOf(seekBar.getProgress()));		
	}
	public void onStopTrackingTouch(SeekBar seekBar) {
		Log.d("TAG", "stop: "+  String.valueOf(seekBar.getProgress()));
		
	}

}

启动虚拟机

：

接下来，来了解ImageView组件

先创建imageview_layout.xml组件：

然后在ImageViewDemo.java文件中调用其布局文件：

package cn.class3g.activity;

import android.app.Activity;
import android.graphics.Bitmap;
import android.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 Activity implements OnTouchListener {

	ImageView imageView1, imageView2;

	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		this.setContentView(R.layout.imageview_layout);
		findViews();
	}

	private void findViews() {
		imageView1 = (ImageView) findViewById(R.id.img1);
		imageView2 = (ImageView) findViewById(R.id.img2);		
		imageView1.setOnTouchListener(this);

	}

	public boolean onTouch(View v, MotionEvent event) {
		float scale = 412 / 320;

		int x = (int) (event.getX() * scale);
		int y = (int) (event.getY() * scale);
		
		//尝试考虑解决边界问题
		int width = (int) (100 * scale);
		int height = (int) (100 * scale);

		BitmapDrawable bitmapDrawable = (BitmapDrawable) imageView1.getDrawable();
		
		imageView2.setImageBitmap(Bitmap.createBitmap(bitmapDrawable.getBitmap(),
				x,y, width, height));
		
		return false;
	}

}

这个实例中，实现了一个类似于图片截图的功能（固定尺寸）

启动虚拟机：

这里需要注意了，因为在ImageViewDemo.java中下边的小图是取的固定尺寸，当点击图片的坐标超出其尺寸时，将出现错误。

最后，来了解TabHost（界面切换）组件

首先，同样的创建tabhost_layout.xml布局文件：

然后TabHostDemo.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;

	protected void onCreate(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");//根据其名称切换
			}
		});
		
	}

}

启动虚拟机：

 

Ok，成功界面切换.