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

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

2017年12月17日 ⁄ 综合 ⁄ 共 8510字 ⁄ 字号 小 中 大 ⁄ 评论关闭

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 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞