UI_tab view 的兑现

2012-07-20

UI___tab view 的实现一.通过xml文件实现1.创建一个tab iew，所需的xml文件TabHostxmlns:androidhttp://

UI___tab view 的实现
一.通过xml文件实现

1.创建一个tab iew，所需的xml文件

<TabHost    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:fadingEdge="none"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <RelativeLayout        android:id="@+id/LinearLayout01"        android:drawingCacheQuality="high"        android:layout_height="fill_parent"        android:layout_width="fill_parent">        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_alignParentTop="false"            android:layout_below="@android:id/tabs"            android:layout_marginTop="-5dp">        </FrameLayout>        <TabWidget            android:id="@android:id/tabs"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_alignParentTop="true"            android:tabStripEnabled="false" />            </RelativeLayout>

</TabHost>
android:layout_marginTop="-5dp"
红色部分是为了让接下来加一排button的时候两个layout之间看上去没有黑边框。

2.创建一个tab iew，所需的activity代码

final TabHost tabs = (TabHost) this.findViewById(android.R.id.tabhost);        final TabSpec tspec1 = tabs.newTabSpec("Journal [3]");        //设置tab的lable，跟icon        tspec1.setIndicator("Journal [3]", getResources().getDrawable(R.drawable.navi_journal));        tspec1.setContent(new Intent(this, SubPageJournal.class));        tabs.addTab(tspec1);        final TabSpec tspec2 = tabs.newTabSpec("Appointments");        tspec2.setIndicator("Appointments", getResources().getDrawable(R.drawable.navi_appointment));        tspec2.setContent(new Intent(this, SubPageAppointment.class));        tabs.addTab(tspec2);        final TabSpec tspec3 = tabs.newTabSpec("My Lab");        tspec3.setIndicator("My Lab", getResources().getDrawable(R.drawable.navi_lab));        tspec3.setContent(new Intent(this, SubPageLab.class));        tabs.addTab(tspec3);        final TabSpec tspec4 = tabs.newTabSpec("Medications");        tspec4.setIndicator("Medications", getResources().getDrawable(R.drawable.navi_medication));        tspec4.setContent(new Intent(this, SubPageMedications.class));        tabs.addTab(tspec4);                //设置背景颜色        tabs.getTabWidget().getChildAt(0).setBackgroundColor(0xffDE2852);        tabs.getTabWidget().getChildAt(1).setBackgroundColor(0xff007DC6);        tabs.getTabWidget().getChildAt(2).setBackgroundColor(0xffFF9631);        tabs.getTabWidget().getChildAt(3).setBackgroundColor(0xff94CB31);        tabs.setBackgroundColor(0xffDE2852);

3.给某个tab 标签下面加一个排横着的button

<LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#FFFFFF">    <RadioGroup        android:id="@+id/RadioGroup01"        android:background="#DE2852"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:paddingTop="5dp">        <RadioButton            android:text="My Care"            android:id="@+id/myCare"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:textColor="#ff000000"            android:background="@drawable/buttonbackground"            android:button="@drawable/no_image"            android:layout_weight="1"            android:gravity="center_horizontal"            android:layout_marginLeft="5dp"            android:layout_marginRight="5dp"></RadioButton>        <RadioButton            android:text="Vital"            android:id="@+id/vital"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:textColor="#ff000000"            android:background="@drawable/buttonbackground"            android:button="@drawable/no_image"            android:layout_weight="1"            android:gravity="center_horizontal"            android:layout_marginLeft="5dp"            android:layout_marginRight="5dp"></RadioButton>        <RadioButton            android:text="Givers"            android:id="@+id/givers"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:textColor="#ff000000"            android:background="@drawable/buttonbackground"            android:button="@drawable/no_image"            android:layout_weight="1"            android:gravity="center_horizontal"            android:layout_marginLeft="5dp"            android:layout_marginRight="5dp"></RadioButton>        <RadioButton            android:text="History"            android:id="@+id/history"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:textColor="#ff000000"            android:background="@drawable/buttonbackground"            android:button="@drawable/no_image"            android:layout_weight="1"            android:gravity="center_horizontal"            android:layout_marginLeft="5dp"            android:layout_marginRight="5dp"></RadioButton>    </RadioGroup>   <ListView        android:id="@+id/content_list"        android:layout_height="fill_parent"        android:layout_width="fill_parent"        android:cacheColorHint="#00000000"        android:dividerHeight="0dp"        android:divider="@null">    </ListView></LinearLayout>

<RadioGroup>----- <RadioGroup>
红色部分为加的button。

4.如何让tab标签切换的时候始终显示的是sub tab的home page
（当sub tab下有子页面跳转（多级跳转）的时候）
举例：tabhost中共有3个sub tab（A， B， C）
程序启动后点击 tab 标签 A 进入 A 界面
A中点击某个button的时候会changeContent 到 a1 界面，
如果这个时候点击tab 标签 B，就会跳转到 B 界面，
然后再点击 tab 标签 A的时候显示的就不是 A 界面而是 a1 界面，

因为在标签间切换的时候不会重新调activity的oncreate 而是调的onresume，
如果在A界面的时候changecontent，下一次回来，还会停留在上次的content界面上。
为了解决这个问题就需要重写 onresume 函数，然后重新设置一下UI,根据自己的具体需要重新设置content就是了

  @Override    protected void onResume() {        //setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);        initUI();        //System.out.println("SubpageAppointment.onResume");        super.onResume();    }

initUI();
红色部分initUI是自己写的函数哈。

5. 实现当某个sub tab 中有多级跳转（子页面跳转）的时候
按返回键有返回到上一级的效果而不是关闭程序
按返回键，程序关闭是activity的默认设置，为了解决这个文集需要从写onBackPressed() 函数。
为了表示层级关系我给每个page 指定了一个int变量。
然后给当前这个sub tab 添加 mSubPage int 变量
当changecontent的时候把当前page的int 的值置赋给这个mSubPage就是了
然后在onBackPressed函数中判断 mSubPage 的值再决定跳转到他的上一级页面。
下面是部分代码

   /** The PAG e_ chem. */    private final int PAGE_CHEM = 1;    /** The PAG e_ ray. */    private final int PAGE_RAY = 2;    /** The PAG e_ pathology. */    private final int PAGE_PATHOLOGY = 3;    /** The PAG e_ mico. */    private final int PAGE_MICO = 4;    /** The PAG e_ iagedetail. */    private final int PAGE_IAGEDETAIL = 5;    private final int PAGE_CHEMEDTAIL = 6;    private final int PAGE_PATHOLOGYDETAIL = 7;    /** The m sub page. */    private int mSubPage;   。。。。。。   @Override    public void onBackPressed() {        if (mSubPage == PAGE_IAGEDETAIL) {            mSubPage = PAGE_RAY;            initView();        } else if (mSubPage == PAGE_CHEMEDTAIL) {            mSubPage = PAGE_CHEM;            initView();        } else if (mSubPage == PAGE_PATHOLOGYDETAIL) {            mSubPage = PAGE_PATHOLOGY;            initView();        } else {            super.onBackPressed();        }    }

initView();是自定义的函数，会根据mSubPage 的值初始化不同的页面。

6. 避免tabHost中横竖屏切换的时候会自动重启activity，会自动调用onpase ondestory onstart onreume 等函数影响ui显示的逻辑的问题。
其实很简单，只需要在 mainifest.xml的tabhost的main activity标签中添加一个属性就可以了
android:configChanges="orientation|keyboardHidden这样就不会自动去重启了。

7.设置自定义的tab标签样式。。
自定义tab标签的layout
tab_wiget.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <ImageView        android:id="@+id/image_tab"        android:layout_height="60dp"        android:layout_width="60dp"        android:background="@drawable/navi_home"        android:layout_centerHorizontal="true">    </ImageView>    <TextView        android:id="@+id/title_tab"        android:layout_width="fill_parent"        android:textSize="12dp"        android:text="ddffd"        android:textColor="#ffFFFFFF"        android:textStyle="bold"        android:gravity="center_horizontal"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:layout_below="@+id/image_tab"        android:layout_marginTop="-10dp" /></RelativeLayout>

在代码中添加sub tab

final TabHost tabs = (TabHost) this.findViewById(android.R.id.tabhost);        final TabSpec tspec1 = tabs.newTabSpec("Journal [1]");        RelativeLayout tabWidget1 = (RelativeLayout) LayoutInflater.from(this)                .inflate(R.layout.tab_widget, null);        ImageView imageTab1 = (ImageView) tabWidget1                .findViewById(R.id.image_tab);        TextView titleTab1 = (TextView) tabWidget1.findViewById(R.id.title_tab);        imageTab1.setImageResource(R.drawable.redactivities);        titleTab1.setText("Journal [1]");        tspec1.setIndicator(tabWidget1);        tspec1.setContent(new Intent(this, SubPageJournal.class));        tabs.addTab(tspec1);

tspec1.setIndicator(tabWidget1);指定自定义的layout

8.如何让tabhost在设备切换到横屏的时候改变tabhost 的layout，
比如让标签竖直排列在屏幕右边。
a.在res 下新建一个 layout-land文件夹
b.重写tabhost 的 xml 布局文件

<TabHost   xmlns:android="http://schemas.android.com/apk/res/android"            android:id="@android:id/tabhost"           android:orientation="horizontal"           android:layout_width="fill_parent"            android:layout_height="fill_parent">    <LinearLayout android:orientation="horizontal"                  android:layout_width="fill_parent"                   android:layout_height="fill_parent">                <FrameLayout android:id="@android:id/tabcontent"                     android:layout_height="fill_parent"                      android:layout_width="fill_parent"                     android:background="#ffffffff"                     android:layout_weight="1"/>                     <TabWidget android:id="@android:id/tabs"                      android:tabStripEnabled="false"                   android:layout_height="fill_parent"                    android:layout_width="wrap_content"                   android:background="#ffDE2852"                   android:layout_weight="0"/>    </LinearLayout></TabHost>

注意把原来portrait中的relativeLayout 换成了LinearLayout
并且加上了属性android:orientation="horizontal"
c.在建立tabhost 的主activity的oncreate函数中添加如下代码，修改tabwiget的排列为竖直的排列，这个只能在代码中修改，在xml中设置Orientation属性是不顶用的。

Configuration cfg = getResources().getConfiguration();        boolean hor = cfg.orientation == Configuration.ORIENTATION_LANDSCAPE;        if (hor) {            TabWidget tw = tabs.getTabWidget();            tw.setOrientation(LinearLayout.VERTICAL);        }

d.在layou-land的文件夹下，调整sub page的layout，注意文件名一定要跟layout中的文件名相同，这样在横置手机的时候才会自动调用layout-land下的布局。

9.如何控制某些sub page下可以横竖切换，有些sub page下不可以横竖切换。
可以根据不同的情况，在onResume() 跟 onPause() 函数中分别调用下面两行代码

//恢复横竖切换
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);

//设置为竖屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

//同理设置为横屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE）;

10.给tab 标签设置监听
举例：tabhost中共有3个sub tab（A， B， C）
程序启动后点击 tab 标签 A 进入 A 界面
A中点击某个button的时候会changeContent 到 a1 界面，
如果这个时候点击tab 标签 A，android默认的是不会发生变化的，仍然停留在a1界面
假如我们想点击tab 标签 A后让他回到上一级，就得给tab 标签设置监听

 TabHost tabs； 。。。。。。。。 //0 是tab 标签的id tabs.getTabWidget().getChildAt(0).setOnClickListener(new OnClickListener() {                @Override                public void onClick(View v) {                    if (0 != tabs.getCurrentTab()) {//Journal [1]是之前add tab 的时候的标签                        tabs.setCurrentTabByTag("Journal [1]");                    } else {                        LocalActivityManager manager = getLocalActivityManager();//SubPageJournal 这个是在add tad 的时候setContent的 activity                        SubPageJournal subpage = (SubPageJournal) manager                                .getActivity("Journal [1]");//backMainPage()是自己写的函数，用来changeContent，类似于上面提到的initUI()                        subpage.backMainPage();                    }                }            });

LocalActivityManager可以在ActivityGroup里面访问子Activity的View 并操作它去改变UI

热点排行

其他相关

UI_tab view 的兑现