您的位置:首页 > 产品设计 > UI/UE

Android开发之路九------UI组件4

2011-12-22 19:14 267 查看
今天继续学习UI组件,主要是学习的是ProgressBar(进度条)、SeekBar、ImageView(处理图片显示)、和TabHost(切换组件)。

1、 ProgressBar组件

下面通过案例演示来说明:

首先建一个名为ProgressBar的Activity的类

案例实现过程:

public class ProgressbarDemo extendsActivity{
ProgressBar progressbar = null;
inti=0;
intprogressbarMax = 0;
Handler handler = new Handler();

@Override
publicvoid onCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.progress);
findViews();
}

private void findViews() {
progressbar =(ProgressBar) this.findViewById(R.id.progressbar2);
progressbar.setMax(1000);
progressbarMax =progressbar.getMax();

new Thread(newRunnable(){

public void run(){
while(i<progressbarMax){
i=doWork();

handler.post(newRunnable(){
public void run(){
progressbar.setProgress(i);
}
});
try {
Thread.sleep(50);
} catch(InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}).start();
}
public int doWork(){
return ++i;
}
}

布局文件progressbar.xml里的代码演示

<?xml version="1.0"encoding="utf-8"?>
<LinearLayoutxmlns: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>

清单文件:

<activity
android:label="@string/app_name"
android:name=".ProgressbarDemo">
<intent-filter >
<action android:name="android.intent.action.MAIN"/>

<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>

效果如退:





2、 TabHost(切换组件)

内部类:

1、interface TabHost.OnTabChangeListener

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

2、 interfaceTabHost.TabContentFactory

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

3、 class TabHost.TabSpec

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

方法:

public voidaddTab(TabHost.TabSpec tabSpec)

新增加一个选项卡

参数

tabSpec —— 指定怎样创建指示符和内容。

下面通过案例演示来说明:

首先建一个名为TabHost的Activity的类

代码参考:

public class TabHostDemo extends TabActivity {
TabHost tabHost = null;

@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);

tabHost = this.getTabHost();

LayoutInflaterinflater = LayoutInflater.from(this);
//取出来给tabhost_layout
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("SeekBardemo").
setContent(new Intent(this,SeekBarDemo.class)));

//setIndicator表示的是标签的名字 tab1 tab2 tab3 是他的ID值
tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("ImageViewDemo").

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

findViews();
}

private void findViews() {
Button btn = (Button) this.findViewById(R.id.button);
//实现监听
btn.setOnClickListener(newView.OnClickListener() {
@Override
public voidonClick(View v) {
//tabHost.setCurrentTab(1);
tabHost.setCurrentTabByTag("tab2");
}
});
}
}

布局文件中tabhost.xml里的代码:

<TabHostxmlns: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>

最后就是配置清单文件:

<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name">
<activity
android:label="@string/app_name"
android:name=".HostDemo">
<intent-filter >
<action android:name="android.intent.action.MAIN"/>

<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activity
android:name=".SeekBarDemo">
</activity>
<activity
android:name=".ImageViewDemo">
</activity>
</application>

效果如图:





3、SeekBar组件

下面通过案例演示来说明:

首先建一个名为SeekBar的Activity的类

案例实现过程:

public class SeekBarDemo extends Activity
implementsOnSeekBarChangeListener {
SeekBar seekbar = null;

@Override
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,
intprogress,
boolean fromUser) {
Log.d("TAG","changed:"+ String.valueOf(seekBar.getProgress()));

}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

Log.d("TAG","start:"+ String.valueOf(seekBar.getProgress()));
}

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

}
}

布局文件seekbar.xml里的代码演示

<LinearLayoutxmlns: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>

清单文件:

<activity
android:label="@string/app_name"
android:name=".SeekBarDemo">
<intent-filter >
<action android:name="android.intent.action.MAIN"/>

<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>

实现效果如图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: