自定义标签页

android学习笔记---66_自定义标签页

分类： 安卓学习笔记 2013-07-20 17:50 132人阅读 评论(0) 收藏 举报

2013/7/17
66_自定义标签页
技术qq交流群：JavaDream：251572072
教程下载,在线交流:创梦IT社区: www.credream.com
smdl2tmp1.asec
8.用TabHost实现标签页与自定义标签页
--------------------------------------
a.首先了解标签页
------------------------------------
| | | | |--->这个部分叫TabWigdet
| | | | | 用来放标签的,每一个格格
|----------------------------------| 放一个标签
| |
| |
| |-->这个部分叫FrameLayout,是一个
| | 用来显示每个标签页的内容的窗口
| |
| |
| |
|-----------------------------------
以上整个的合起来叫做:TabHost
b.TabHost是标签页的集合,TabSpec代表标签页.得到TabHost对象后,可以调用addTab方法
添加多个TabSpec标签页对象
----------------------------------
TabHost tabHost=(TabHost)this.findViewById(R.id.tabHost);
tabHost.setup();//查找获取ID为 android:id/tabs的TabWidget用于标签导航,
FrameLayout用于放置所有标签页面:
TabSpec tabSpec1 = tabHost.newTabSpec("tab1");//创建标签,并指定标识
tabSpec1.setlndicator("首页",)
-----------------------------------------------------------------------------------
2.下面是自定义标签页实例的所有源码:
a.新建android工程:tabhost
b./tabhost/src/com/credream/tabhost/TabhostActivity.java
package com.credream.tabhost;
import android.app.Activity;
import android.os.Bundle;
import android.os.Debug;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;
/**
*
* @author xiaofeng 欢迎加入creDream创梦IT社区: www.credream.com
* creDream创梦QQ技术交流群:251572072
* 欢迎进入进行技术交流,或教程下载
*/
public class TabhostActivity extends Activity {
TabHost tabHost;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Debug.startMethodTracing("itcast");
//找到TabHost的标签集合
tabHost = (TabHost) this.findViewById(R.id.tabhost);
tabHost.setup();//这一句在源代码中,会根据findviewbyId()找到
//对应的TabWidget,还需要根据findViewById()找到这个TabWidget下面对应的标签页的
//内容.也就是FrameLayout这个显示控件.
/*这里的第一个findviewbyId(),这个Id是系统指定的固定的id,可以查看api文档得到
* 进入文档G:\android\android-sdk-windows\docs\reference\packages.html点击
* Reference-->然后在左侧找到android-->点击然后选择:R.id-->找到tabs点击-->
* public static final int tabs
* Since: API Level 1
* Constant Value: 16908307 (0x01020013)
* 这里可以看到tabs代表的值,但是为了可读性好,还是给在布局文件main.xml中给
* TagWidget控件,用这种方式定义id:
* android:id="@android:id/tabs"这里@代表 访问R文件,这里代表访问的是android包中的R文件中的id
* 这个类中的tabs
* android是个包,R文件的类就在这个包中定义的,id是R类中的一个内部类,
* FrameLayout控件的id代表的是:
* android:id="@android:id/tabs"
* */
//TabSpec这个是标签页对象.
TabSpec tabSpec = tabHost.newTabSpec("page1");//新建一个标签页对象.
//tabSpec.setIndicator("首页", getResources().getDrawable(R.drawable.i1));
//第一个参数指定标签名字,第二个,指定图片资源,汉子显示在图片的下面.
tabSpec.setIndicator(createTabView("首页"));//设置这个标签页的标题
//createTabView("首页")这里这个时候就可以替换成自己的API,也就那个切换标签页的显示内容页对应的view对象
tabSpec.setContent(R.id.page1);//指定标签页的内容页.
tabHost.addTab(tabSpec);//把这个标签页,添加到标签对象tabHost中.

tabSpec = tabHost.newTabSpec("page2");
// tabSpec.setIndicator("第二页", getResources().getDrawable(R.drawable.i2));
tabSpec.setIndicator(createTabView("第二页"));
tabSpec.setContent(R.id.page2);
tabHost.addTab(tabSpec);

tabSpec = tabHost.newTabSpec("page3");
//tabSpec.setIndicator("第三页", getResources().getDrawable(R.drawable.i7));
tabSpec.setIndicator(createTabView("第三页"));
tabSpec.setContent(R.id.page3);
tabHost.addTab(tabSpec);
// 这里可以设置,哪个标签页为默认的第一个页面.
tabHost.setCurrentTab(0);
}

@Override
protected void onDestroy() {
Debug.stopMethodTracing();
super.onDestroy();
}
//这里可以做一个自定义标签页,返回一个view,tabSpec.setIndicator(createTabView("第二页"))
//因为这里可以传一个view进去.
private View createTabView(String name) {
//通过下面的这句可以得到自定义的标签页的view对象.
//View tabView = getLayoutInflater().inflate(R.layout.tab, null);
//TextView textView =tabView.findViewById(R.id.name);//找到textview控件
//textView.setText(name);显示这个名称.
//return tabView


LinearLayout linearLayout = new LinearLayout(this);
linearLayout.setOrientation(LinearLayout.VERTICAL);
linearLayout.setBackgroundColor(0xFFFFFF);

TextView textView = new TextView(this);
textView.setText(name);
textView.setBackgroundResource(R.drawable.tab_bg);
textView.setTextColor(0xFFFFFF);
textView.setTextSize(18.0f);
textView.setGravity(Gravity.CENTER);
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
linearLayout.addView(textView, params);

return linearLayout;
}
}
-----------------------------------------------------
c.在drawable文件夹中放入项目需要的两张图片,用来做标签页的背景图:
/tabhost/res/drawable/bg_normal.9.png
/tabhost/res/drawable/bg_selected.9.png
----------------------------------------------
d.写标签页的切换效果的/tabhost/res/drawable/tab_bg.xml文件,这里用到状态列表图片

< selector xmlns:android=" http://schemas.android.com/apk/res/android">







< /selector>
------------------------------------------------------------------------------
e.放上用来做为标签页的图标文件
/tabhost/res/drawable-hdpi/i1.png
/tabhost/res/drawable-hdpi/i2.png
/tabhost/res/drawable-hdpi/i7.png
/tabhost/res/drawable-hdpi/icon.png
--------------------------------------------
f.项目的布局文件:
/tabhost/res/layout/main.xml

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

android:layout_width="fill_parent"
android:layout_height="fill_parent"
android rientation="vertical"
>

android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs"
/>


android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabcontent"
>

android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/page1"
>

android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="这是第一个标签页"
/>


android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/page2"
>
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="这是第二个标签页"
/>


android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/page3"
>
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="这是第三个标签页"
/>



< /TabHost>
------------------------------------------------------------------------------
g./tabhost/res/layout/tab.xml这里是标签页内容定义文件,可以在activity中进行调用

< LinearLayout
xmlns:android=" http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android rientation="vertical"
android:background="#FFFFFF"
>
< !-- 这里要求当用户按住textview的时候,显示一张图片,当textview被
选择的时候显示一张图片,当其他状态的时候,也显示一张图片
android:background="@drawable/tab_bg"
//给这个TextView应用这个状态列表图像.
-->
android:background="@drawable/tab_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:layout_marginRight="1dp"
android:id="@+id/name"
/>

< /LinearLayout>