Tab选项卡界面(1)

Tab用一个简单的应用程序接口的标签是集中的界面布局文件的同一页上的接口组件不同的标签。并计划将在主类集中的代码文件。这种方法的优点是,文件在项目数不会被添加,但是,假设Tab接口组件更个性化的标签。复杂,把它们集中放在同一个文件会造成日后程序维护上的困难。

我们已经学习过Intent对象的用法。这里我们就用Intent对象来建立Tab标签页接口。这个新的方法事实上是基于一个非常easy的概念,就是每个Tab标签页都相应到一个独立的Activity类。因此不同标签页的接口布局文件和程序代码都是各自独立,如此一来就能够降低接口布局文件和程序代码的复杂性,使它们易于阅读和维护。

(1)要完毕Tab标签接口须要一个TabHost组件。它负责管控整个Tab标签页的架构。TabHost组件下包括有两个组件:TabWidget组件和FrameLayout组件。TabWidget组件负责掌控全部的Tab标签,FrameLayout组件则负责显示每个Tab标签页的接口组件。

(2)建立Tab标签页接口有2种方法,一种是把每个Tab page内的接口组件都一齐写在同一个布局文件里。可是用不同的<LinearLayout>标签把不同的Tab page 内的接口组件分隔开来。还有一种方式是把每个Tab page内的接口组件都写成一个独立的接口布局文件,再利用Intent的方法把它载入到相应的Tab page中。这中方法须要用到Intent技术。

以下就来解说下第一种方法,为使用Intent对象做铺垫:

<TabHost xmlns:android="http://schemas.android.com/apk.res/android"
	android:id="@+id/tabHost"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	>
<Tab Widget android:id="@+id/tabs"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"

	/>

<!--TabWidget标签的id一定要设定成@android:id/tabs; FrameLayout标签的id一定要设定成@android:id/tabcontent-->

<FrameLayout android:id="@+id/tabcontent"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"

	>

<LinearLayout android:id="@+id/tab1"

	android:orientaion="vertical"
	android:layout_width="fill_parent"
	android:layout_height="warp_content"
	android:paddingTop="70dp"
	>

<!-- 第一个Tab page的接口组件-->

</LinearLayout>

<LinearLayout android:id="@+id/tab1"

	android:orientaion="vertical"
	android:layout_width="fill_parent"
	android:layout_height="warp_content"
	android:paddingTop="70dp"
	>
<!-- 第二个Tab page的接口组件-->
</LinearLayout>

</FrameLayout>
</TabHost>

代码:

package tw.android;

import java.util.Calendar;
import android.app.*;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.*;
import android.widget.TabHost.TabSpec;

public class TabPageDemo extends Activity{
	//继承的类仍然是Activity

	private DatePicker mDatePik;
	private TimePicker mTimePik;
	private TextView mTxtResult;
	private Button mBtnOk;

	privte  Button mBtnOk;

	//创建新想Handler对象
	private Handler mHandler=new Handler();

	/**Called when the activity is first created */
	@Override
	public void onCreate(Bundle savedInstanceState){

		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		setupViewComponent();
	}

	private void setupViewComponent(){

		//从资源R中获取接口组件并设定属性
		TabHost tabHost=(TabHost)findViewById(R.id.tabHost);
		tabHost.setup();

		TabSpec spec=tabHost.newTabSpec("tab1");
		spec.setContent(R.id.tab1);
		spec.setIndicator("日期和时间",getResource().getDrawable(android.R.drawable.ic_lock_idle_alarm)
			);
		tabHost.addTab(spec);

		spec=tabHost.newTabSpec("tab2");
		spec.setIndicator("ProgressBar Demo",getResource().getDrawable(android.R.drawable.ic_dialog_alert)
			);
		spec.setContent(R.id.tab2);

		tabHost.addTab(spec);

		tabHost.setCurrentTab(0);
		//以下内容就是将原来的setupViewComponent()方法内的所有程序代码,程序启动时候载入的程序setCurrentTab(0),0代表第一个Tab page 。1代表地二个Tab page ,其它依次类推

	}

}

版权声明:本文博客原创文章,博客,未经同意,不得转载。

时间: 2024-08-18 04:24:53

Tab选项卡界面(1)的相关文章

Android UI 之 Tab类型界面总结

Android 程序中实现Tab类型界面很常见,本人在做项目的时候也经常用到,所以想在这里总结一下,实现tab类型界面的几种方式,供大家参考.如有不对之处,欢迎大家指正! 一.TabActivity + TabWidget + TabHost. 实现TAB类型界面,首先想到的就是这种方式.但是在API level 13之后官方就不建议使用它了.不过还是在这里简单说一下它的使用吧. 使用它的关键就是布局文件了.需要在布局中添加<TabHost>.<TabWidget>.<Fra

tytabs.jquery.min.js实例,渐变的TAB选项卡特效

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>唐山塑钢门窗</title><script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"><

自创简易CSS Tab 选项卡

前段时间我注册了 w3c.run域名,打算做一个W3C相关技术在线试验工具.没错,就是在线编写html.css.js代码然后在线运行,查看效果. 在设计首页时,我打算首页提供三个代码编辑器,介于界面大小限制,不宜同时显示三个编辑器,考虑采用tab选项卡切换的方式展现. 另外考虑到页面加载速度问题(我可能是个性能狂),找了几个他人写的tab,感觉都不太理想,主要是代码量有些大,有的甚至要用特定js库. 于是我干脆自己写了一个.代码量很小,相对还算灵活吧,可以再稍加css修饰使其更加上档次. 效果图

【锋利的JQuery-学习笔记】Tab选项卡的实现

效果图: 关键点: 1.标签和标签内容都是用<ul><li>实现的,主要是通过Css样式设计成选项卡的模样. 2.用js代码实现点击标签时,标签内容的切换(做法是<div id="jnBrandList">横向滚动). html: <div id="jnBrand"> <div id="jnBrandTab"> <h2 title="品牌活动">品牌活动&

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

原生JS画的tab选项卡

记录一下原生js写的tab选项卡 鼠标滑入可以切换图片 离开之后自动切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-

【Little Demo】左右按钮tab选项卡双切换

通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. 1) 先实现Tab内容和标签部分的显示: HTML代码: <div class="tab-Infomations"> <div class="arrows"></div> <div class="tab-conten

可以自动切换的tab选项卡实现过程详解

可以自动切换的tab选项卡实现过程详解:关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换.本章节分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.so

移动web:tab选项卡

平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmove.touchend. 和做其他的效果一样,先有html结构,css样式修饰,再写JS代码. html: <div class="mtabs" id="tabs"> <ul class="mhead"> <li>t