android UI 设计之 Tabs

http://www.anddev.org/how_to_switch_views_in_an_activity-t10063.html

1: 在androidUI设计中，经常会遇到如下那样的UI

2： 我记得以前用 TabView还是 TabWidget 的时候，遇到一些Bug。。让人很苦闷。

3：下面几种设计方法应该是比较靠谱的：

    3.1：  

1) Use Tabs. A single activity using TabWidget could cycle you through your views on a single screen. This doesn't use the menu, but rather adds the selection mechanism at the top of the screen.

2) Add/Remove/Inflate your views in code. This is closer to the method you were trying for. Create a base layout in XML (with nothing but a FrameLayout or something else simple in it):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/contentPane"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
</FrameLayout>
 

FrameLayout contentPane;
 
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_view);
 
    contentPane = (FrameLayout)findViewById(R.id.contentPane);
 
    /*The rest of your onCreate code*/
}
 
public boolean onOptionsItemSelected(MenuItem item) {
    LayoutInflater li;
    switch( item.getItemId() ) {
    case 0:
        contentPane.removeAllViews();
        li = (LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        contentPane.addView( li.inflate(R.layout.view2, null) );
        return true;
    case 1:
        contentPane.removeAllViews();
        li = (LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        contentPane.addView( li.inflate(R.layout.view3, null) );
        return true;
    /*ETC. for more menu choices*/
    }
    return false;
}

3.2 也是在elong 芝麻开门项目中使用到的方法:

   

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center" >

            <com.dp.android.widget.TabView
                android:id="@+id/hotelsearch_bottom_tab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:stretchColumns="*" />
        </LinearLayout>
        <!-- hotel search -->

        <!-- viewflipper has the function of scroll maybe the true reason is include layout use the scrollview -->

        <ViewFlipper
            android:id="@+id/hotelsearch_modules"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="5dp" >

            <include layout="@layout/hotel_search_general" />

            <include layout="@layout/hotel_search_nearby" />

            <include layout="@layout/hotel_search_todayhotel" />
        </ViewFlipper>

		ViewFlipper modules = (ViewFlipper) findViewById(R.id.hotelsearch_modules);
		TabView tab = (TabView) findViewById(R.id.hotelsearch_bottom_tab);

		tab.setViewLayouts(
                                                R.layout.railway_tab_btn_left,
						R.layout.railway_tab_btn_middle,
						R.layout.railway_tab_btn_right);

		tab.bindView(modules);

                //we update some data info in listener ..
                tab.setOnTabFocusChangedListener(this);

finally   i think way 3.2 is not so good as method 3.1 (i think it is more confused)