Android应用中使用TabHost组件继承TabActivity的布局方法
继承tabactivity并以activity布局
先查看下最终效果图:
再看下代码结构:
其中black.gif顾名思义就是一个黑背景图片,grey.gif就是一张灰色的背景图片
然后直接上代码:
artistactivity.java
package cn.com.tagview; import android.app.activity; import android.os.bundle; import android.widget.textview; public class artistactivity extends activity { @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); textview textview = new textview(this); // 该文档将会作为标签的内容进行显示 textview.settext("艺术内容"); setcontentview(textview); } }
musicactivity.java
package cn.com.tagview; import android.app.activity; import android.os.bundle; import android.widget.textview; public class musicactivity extends activity { @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); textview textview = new textview(this); // 该文档将会作为标签的内容进行显示 textview.settext("音乐内容"); setcontentview(textview); } }
sportactivity.java
package cn.com.tagview; import android.app.activity; import android.os.bundle; import android.widget.textview; public class sportactivity extends activity { @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); textview textview = new textview(this); // 该文档将会作为标签的内容进行显示 textview.settext("运动内容"); setcontentview(textview); } }
artistactivity.java musicactivity.java sportactivity.java三个activity是用做标签内容的activity。即当用户点击相应的标签时,下边会显示相应的activity内容。
ic_tab.xml代码
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/grey" android:state_selected="true" ></item> <item android:drawable="@drawable/black" ></item> </selector>
这里一定要注意ic_tab.xml文件的位置,是放在res/drawable文件夹下的。有些朋友说怎么没有这个文件夹啊,实际上大家看到了我将它放在了drawable-hdpi中了,实际上drawable-hdpi、drawable-ldpi、drawable-mdpi三个文件夹都属于drawable文件夹的哦。该文件它规定了,当标签获得焦点和失去焦点时,标签上显示什么图片。
例如本例中,就是当state_selected="true"(当标签被选中时),显示@drawable/grey指定的资源图片。当未被选中时,显示@drawable/black指定的资源图片。
tagview.java代码:
package cn.com.tagview; import android.app.tabactivity; import android.content.intent; import android.content.res.resources; import android.os.bundle; import android.widget.tabhost; /** * @author chenzheng_java * @description 注意,该类一定要继承tabactivity */ public class tagview extends tabactivity { @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); // setcontentview(r.layout.main); // android代码中访问application资源的一个类 resources resources = getresources(); // 获取当前activity的标签,该方法的实现中已经执行了setcontentview(com.android.internal.r.layout.tab_content); tabhost tabhost = gettabhost(); // 每一个标签项 tabhost.tabspec spec; // 声明一个意图,该意图告诉我们,下一个跳转到的activity是artistactivity。 intent intent = new intent(this, artistactivity.class); /** * tabhost.newtabspec("artist")创建一个标签项,其中artist为它的标签标识符,相当于jsp页面标签的name属性 * setindicator("艺术标签",resources.getdrawable(r.drawable.ic_tab))设置标签显示文本以及标签上的图标(该图标并不是一个图片,而是一个xml文件哦) * setcontent(intent)为当前标签指定一个意图 * tabhost.addtab(spec); 将标签项添加到标签中 */ spec = tabhost.newtabspec("artist").setindicator("艺术标签", resources.getdrawable(r.drawable.ic_tab)).setcontent(intent); tabhost.addtab(spec); intent intent2 = new intent(this, musicactivity.class); spec = tabhost.newtabspec("music").setindicator("音乐标签", resources.getdrawable(r.drawable.ic_tab)).setcontent(intent2); tabhost.addtab(spec); intent intent3 = new intent(this, sportactivity.class); spec = tabhost.newtabspec("sport").setindicator("体育标签", resources.getdrawable(r.drawable.ic_tab)).setcontent(intent3); tabhost.addtab(spec); // tabhost.setcurrenttabbytag("music");设置第一次打开时默认显示的标签,该参数与tabhost.newtabspec("music")的参数相同 tabhost.setcurrenttab(1);//设置第一次打开时默认显示的标签,参数代表其添加到标签中的顺序,位置是从0开始的哦。 } }
androidmanifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="cn.com.tagview" android:versioncode="1" android:versionname="1.0"> <uses-sdk android:minsdkversion="8" /> <application android:icon="@drawable/icon" android:label="@string/app_name"> <!-- android:theme="@android:style/theme.notitlebar" 的意思是将系统默认的tag标签去掉,为咱们自己的标签空出位置--> <activity android:name=".tagview" android:label="@string/app_name" android:theme="@android:style/theme.notitlebar" > <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> <!-- 在主配置文件中声明用于标签切换的3个activity,记住此处一定要声明,否则会出错 android:name="artistactivity"里面artistactivity前面是否有.都可以,你只需要保证该类是在manifest标签下package属性的包中即可。 --> <activity android:name="artistactivity" android:label="@string/app_name"></activity> <activity android:name="musicactivity" android:label="@string/app_name"></activity> <activity android:name="sportactivity" android:label="@string/app_name"></activity> </application> </manifest>
一切都弄好之后,运行,就出现了最终效果。这里要注意,main.xml是一直都没有用到的哦。
废话连篇:
其实,利用tabhost布局与listview有很多相似之处,系统也同样为他们提供了帮助类,tabhost-tabactivity listview-listactivity .当我们的activity集成了这些类之后,一般在里面我们只需要整理绑定下数据就可以。
再次声明一下,代码中是存在setcontentview方法的调用的,只不过因为我们集成了tabactivity,tabactivity的gettabhost方法中已经进行了实现而已。对用户隐藏了,并不代表没有。
项目中为了简单易懂,我们只是在每个标签的内容部分添加了一个文本。实际上,我们完全可以在里面添加图片、视频等等。只要在相应的activity中实现就行了。我们可以看到,这种方式其实有很好的分层结构,activity与activity之间没有太多耦合。
可能一直到现在,有些朋友对tabactivity和listactivity这种实现都特别的别扭。我这里就简单的说一下,实际上这其实是一种设计模式,模板模式。系统给你提供了一个实现了大部分内容的模板,然后你通过继承模板,去做修改(例如模板中有一个方法没有任何实现,你重写该方法并对其进行具体实现),让其符合你的要求。这就是模板模式的原理。
继承tabactivity并以布局文件进行布局
然后再来看以xml布局文件进行布局的方法,先上效果图:
上面的是最终效果图。
代码结构如下。
main.xml代码:
<?xml version="1.0" encoding="utf-8"?> <!-- 该布局文件定义了标签的内容部分,该布局文件一定要以framelayout为根元素 --> <framelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <!-- 第一个标签内容 --> <linearlayout android:id="@+id/widget_layout_blue" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <edittext android:id="@+id/widget34" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="edittext" android:textsize="18sp"> </edittext> <button android:id="@+id/widget30" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button"> </button> </linearlayout> <!-- 第二个标签内容 analogclock为钟表组件--> <linearlayout android:id="@+id/widget_layout_red" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <analogclock android:id="@+id/widget36" android:layout_width="wrap_content" android:layout_height="wrap_content"> </analogclock> </linearlayout> <!-- 第三个标签内容 radiobutton必须在radiogroup中哦 --> <linearlayout android:id="@+id/widget_layout_green" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <radiogroup android:id="@+id/widget43" android:layout_width="166px" android:layout_height="98px" android:orientation="vertical"> <radiobutton android:id="@+id/widget44" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="radiobutton"> </radiobutton> <radiobutton android:id="@+id/widget45" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="radiobutton"> </radiobutton> </radiogroup> </linearlayout> </framelayout>
taghosttest.java的代码:
package cn.com.taghost.test; import android.app.tabactivity; import android.graphics.color; import android.os.bundle; import android.view.layoutinflater; import android.view.viewgroup; import android.widget.tabhost; public class taghosttest extends tabactivity { private tabhost mytabhost; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); mytabhost = this.gettabhost(); /** * inflate(int resource, viewgroup root, boolean attachtoroot) * resource 很显然是一个资源索引id * 当attachtoroot为true时,root代表一个可放置于容器中的组件 * 当attachtoroot为false时,root仅代表一个存储值的对象 * 该方法的意思是,将根据r.layout.main生成的标签view,添加到由mytabhost.gettabcontentview()获得的父容器中 * layoutinflater类的inflate方法中有如下片段 * if (root != null && attachtoroot) { root.addview(temp, params); } 其中temp是根据resource指定的资源生成的一个和标签有关的view */ layoutinflater.from(this).inflate(r.layout.main, mytabhost.gettabcontentview(), true); mytabhost.setbackgroundcolor(color.argb(150, 22, 70, 150)); mytabhost.addtab(mytabhost.newtabspec("one") .setindicator("a").setcontent(r.id.widget_layout_blue)); mytabhost.addtab(mytabhost.newtabspec("two") .setindicator("b", getresources().getdrawable(r.drawable.icon)) .setcontent(r.id.widget_layout_green)); mytabhost.addtab(mytabhost.newtabspec("three") .setindicator("c", getresources().getdrawable(r.drawable.icon)) .setcontent(r.id.widget_layout_red)); } }
这种方法实现起来比较简单,看看我们都做了些什么。
第一步:定义标签内容部分的布局文件,该布局文件必须以framelayout为根节点。
第二步:让activity继承tabactivity,然后实现自己的代码。