现在的位置: 首页 > 综合 > 正文

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

2017年11月05日 ⁄ 综合 ⁄ 共 7624字 ⁄ 字号 小 中 大 ⁄ 评论关闭

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文件,这里用到状态列表图片
<?xml version="1.0" encoding="utf-8"?>
< selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/bg_selected" />
<!-- 当用户按下Textview的时候显示这张图片 -->
<!-- pressed -->
<!-- 当用户选择TextView的时候显示这张图片 -->
<item android:state_selected="true" android:drawable="@drawable/bg_selected" />
<!-- 其他状态显示的是这张图片 -->
<item android:drawable="@drawable/bg_normal" /> <!-- default -->
< /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
<?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"
android:id="@+id/tabhost"
>
<!-- tabhost用来存放标签对象
1.在标签页中,每一页和这一页的内容,是垂直摆放的所以这里用到了线性布局
-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
androidrientation="vertical"
>
<!-- 这里开始存放每个标签TabWidget ,这个标签可以存放所有的标签TabWidget-->
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs"
/>
<!-- android:id="@android:id/tabs"这个是在系统文件中定义的,是写死的 -->
<!-- 因为每个标签页相当于浮动的,所以这里每个标签页的内容用到了帧布局 -->
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabcontent"
>
<!-- 这里放的是第一个标签的内容 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/page1"
>
<!-- 第一个的标签页显示的内容 -->
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="这是第一个标签页"
/>
</LinearLayout>
<!-- 第二个的标签页显示的内容 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/page2"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="这是第二个标签页"
/>
</LinearLayout>
<!-- 第三个的标签页显示的内容 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/page3"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="这是第三个标签页"
/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
< /TabHost>
------------------------------------------------------------------------------
g./tabhost/res/layout/tab.xml这里是标签页内容定义文件,可以在activity中进行调用
<?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"
androidrientation="vertical"
android:background="#FFFFFF"
>
< !-- 这里要求当用户按住textview的时候,显示一张图片,当textview被
选择的时候显示一张图片,当其他状态的时候,也显示一张图片
android:background="@drawable/tab_bg"
//给这个TextView应用这个状态列表图像.
-->
<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"
/>
<!--
android:background="@drawable/tab_bg"
//这里用到了状态列表图形,这里需要随着标签页的切换来改变图形
//这里的状态列表图形定义,可以参考api:
//打开Dev Guide这个标签->然后在左侧选择->
//Framework Topics -Application Resources->
//Resource Types->Drawable->State List->然后拷贝例子代码到tab_bg.xml中
android:layout_marginRight="1dp"定义了标签页之间的间隔颜色

android:gravity="center"指定内容要居中对齐 -->
< /LinearLayout>

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞