zoukankan      html  css  js  c++  java
  • 史上最全的Android的Tab与TabHost讲解

    Tab与TabHost 
     
      
    这就是Tab,而盛放Tab的容器就是TabHost 
    如何实现?? 
    每一个Tab还对应了一个布局,这个就有点好玩了。一个Activity,对应了多个功能布局。 
    ①新建一个Tab项目,注意,不要生成main Activity 

     

    这里不要选 
    ②在包里面新建一个类MyTab,继承于TabActivity 
    其实,TabActivity是Activity的子类 

    1
    2
    3
    4
    5
    6
    7
    package zyf.tab.test;
     
    import android.app.TabActivity;
     
    public class MyTab extends TabActivity {
     
    }


    ③从父类继承OnCreate()入口方法 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    package zyf.tab.test;
    import android.app.TabActivity;
    import android.os.Bundle;
    public class MyTab extends TabActivity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            // TODO Auto-generated method stub
            super.onCreate(savedInstanceState);
        }
    }


    ④在Manifest.xml文件中注册一下MyTab类(Activity) 

    1
    2
    3
    4
    5
    6
    <activity android:name=".MyTab">
        <intent-filter>
            <action android:name="android.intent.action.MAIN"></action>
            <category android:name="android.intent.category.LAUNCHER"></category>
        </intent-filter>
    </activity>


    ⑤这时候,需要设计一下标签页对应的布局,一般采用FrameLayout作为根布局,每个标签页面对应一个子节点的Layout 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <?xml version="1.0" encoding="utf-8"?>
    <!--  这里是根节点布局  -- >
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" android:layout_height="fill_parent">
     
    <!--  第一个Tab 对应的布局  -- >
        <LinearLayout android:id="@+id/widget_layout_Blue"
            android:layout_width="fill_parent" android:layout_height="fill_parent"
            androidrientation="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>
    <!--  第二个Tab 对应的布局  -- >
        <LinearLayout android:id="@+id/widget_layout_red"
            android:layout_width="fill_parent" android:layout_height="fill_parent"
            androidrientation="vertical"  >
            <AnalogClock android:id="@+id/widget36"
                android:layout_width="wrap_content" android:layout_height="wrap_content">
            </AnalogClock>
        </LinearLayout>
    <!--  第三个Tab 对应的布局  -- >
        <LinearLayout android:id="@+id/widget_layout_green"
            android:layout_width="fill_parent" android:layout_height="fill_parent"
            androidrientation="vertical">
            <RadioGroup android:id="@+id/widget43"
                android:layout_width="166px" android:layout_height="98px"
                androidrientation="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>


    ⑥首先,应该声明TabHost,然后用LayoutInflater过滤出布局来,给TabHost加上含有Tab页面的FrameLayout 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    private TabHost myTabhost;
    myTabhost=this.getTabHost();//从TabActivity上面获取放置Tab的TabHost
    LayoutInflater.from(this).inflate(R.layout.main, myTabhost.getTabContentView(), true);
    //from(this)从这个TabActivity获取LayoutInflater
    //R.layout.main 存放Tab布局
    //通过TabHost获得存放Tab标签页内容的FrameLayout
    //是否将inflate 拴系到根布局元素上
    myTabhost.setBackgroundColor(Color.argb(150, 22, 70, 150));
    //设置一下TabHost的颜色


    ⑦接着,在TabHost创建一个标签,然后设置一下标题/图标/标签页布局 

    1
    2
    3
    4
    5
    myTabhost.addTab(myTabhost.newTabSpec("TT")// 制造一个新的标签TT
         .setIndicator("KK",getResources().getDrawable(R.drawable.ajjc))
                            // 设置一下显示的标题为KK,设置一下标签图标为ajjc
                            .setContent(R.id.widget_layout_red));
            //设置一下该标签页的布局内容为R.id.widget_layout_red,这是FrameLayout中的一个子Layout

    ⑧标签切换事件处理,setOnTabChangedListener 

    1
    2
    3
    4
    5
    6
    myTabhost.setOnTabChangedListener(new OnTabChangeListener(){
                @Override
                public void onTabChanged(String tabId) {
                    // TODO Auto-generated method stub
                }          
            });


    ⑨各个标签页的动态MENU 
    先把在XML中设计好的MENU放到一个int数组里 

    1
    2
    private static final int myMenuResources[] = { R.menu.phonebook_menu,
                R.menu.addphone_menu, R.menu.chatting_menu, R.menu.userapp_menu };


    在setOnTabChangedListener()方法中根据标签的切换情况来设置myMenuSettingTag 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    @Override
        public void onTabChanged(String tagString) {
            // TODO Auto-generated method stub
            if (tagString.equals("One")) {
                myMenuSettingTag = 1;
            }
            if (tagString.equals("Two")) {
                myMenuSettingTag = 2;
            }
            if (tagString.equals("Three")) {
                myMenuSettingTag = 3;
            }
            if (tagString.equals("Four")) {
                myMenuSettingTag = 4;
            }
            if (myMenu != null) {
                onCreateOptionsMenu(myMenu);
            }
        }


    然后onCreateOptionsMenu(Menu menu) 方法中通过MenuInflater过滤器动态加入MENU 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
       @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // TODO Auto-generated method stub
            // Hold on to this
            myMenu = menu;
            myMenu.clear();//清空MENU菜单
            // Inflate the currently selected menu XML resource.
            MenuInflater inflater = getMenuInflater();      
    //从TabActivity这里获取一个MENU过滤器
            switch (myMenuSettingTag) {
            case 1:
                inflater.inflate(myMenuResources[0], menu);
                //动态加入数组中对应的XML MENU菜单
                break;
            case 2:
                inflater.inflate(myMenuResources[1], menu);
                break;
            case 3:
                inflater.inflate(myMenuResources[2], menu);
                break;
            case 4:
                inflater.inflate(myMenuResources[3], menu);
                break;
            default:
                break;
            }
            return super.onCreateOptionsMenu(menu);
        }


    menu 布局 

    1
    2
    3
    4
    5
    6
    <?xml version="1.0" encoding="utf-8"?>
    <menu
      xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group_a"><item android:id="@+id/item_a" android:icon="@drawable/gimp" android:title="Gimp"></item>
    </group>
    </menu>


    ⑩运行效果 

     

     

  • 相关阅读:
    索引聚焦如何使 SQL Server高效 设计(ITPUT 讨论汇总)
    android包Android "java.lang.NoClassDefFoundError:*"报错的处理方法
    删除实现图的构造、DFS、BFS 以及图的删除实现
    RTL8019以太网控制器
    JavaScript正则表达式
    sql语句
    无线模块电阻表
    FindWindow(api)确认程序是否在运行
    正则表达式语法
    msi安装程序安装参数
  • 原文地址:https://www.cnblogs.com/tonglingqijie/p/4710886.html
Copyright © 2011-2022 走看看