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 extendsActivity implements 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 可切换至：（该效果即前面所写的例子）
或