Android笔记之可滑可按tabhost+Viewpager

设计思路：

1、新建3个Activity，用作3个选项卡下的界面

2、设计主界面的布局：TabHost+TabWidget+viewpager

设计选项卡的布局以及背景布局

3、在主Activity利用Viewpager+tabhost实现可滑动的选项卡，并与3个Activity联系起来

一、主Activity代码：涉及两个布局文件：一个主xml文件，一个定义选项卡的布局的tabwidget.xml

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.app.LocalActivityManager;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TextView;

public class MainActivity extends Activity {
    List<View> listViews;//视图列表

    Context context = null;

    LocalActivityManager manager = null;

    TabHost tabHost = null;

    private ViewPager pager = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        manager = new LocalActivityManager(this, true);
        manager.dispatchCreate(savedInstanceState);
        /*在一个Activity的一部分中显示其他Activity”要用到LocalActivityManagerity
        作用体现在manager获取View：manager.startActivity(String, Intent).getDecorView()*/

        tabHost = (TabHost) findViewById(R.id.tabhost);
        tabHost.setup();
        tabHost.setup(manager);//实例化THost
        
        context=MainActivity.this;
        
        pager  = (ViewPager) findViewById(R.id.viewpager);//ViewPager
        

        //加入3个子Activity
        Intent i1 = new Intent(context, T1Activity.class); 
        Intent i2 = new Intent(context, T2Activity.class); 
        Intent i3 = new Intent(context, T3Activity.class); 
        
        listViews = new ArrayList<View>();  //实例化listViews       
        listViews.add(manager.startActivity("T1", i1).getDecorView());
        listViews.add(manager.startActivity("T2", i1).getDecorView());
        listViews.add(manager.startActivity("T3", i1).getDecorView());
        
        RelativeLayout tabIndicator1 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tabwidget, null);  
        //tabIndicator1从一个layout文件获取view（即单个选项卡）再在大布局里显示
        TextView tvTab1 = (TextView)tabIndicator1.findViewById(R.id.tv_title);
        //id是tabIndicator1的
        tvTab1.setText("Tab1");
        
        RelativeLayout tabIndicator2 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tabwidget,null);  
        TextView tvTab2 = (TextView)tabIndicator2.findViewById(R.id.tv_title);
        tvTab2.setText("Tab2");
        
        RelativeLayout tabIndicator3 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tabwidget,null);  
        TextView tvTab3 = (TextView)tabIndicator3.findViewById(R.id.tv_title);
        tvTab3.setText("Tab3");
        
        tabHost.addTab(tabHost.newTabSpec("A").setIndicator(tabIndicator1).setContent(i1));
        //TabSpec的名字A，B，C才是各个tab的Id
        tabHost.addTab(tabHost.newTabSpec("B").setIndicator(tabIndicator2).setContent(i2));
        tabHost.addTab(tabHost.newTabSpec("C").setIndicator(tabIndicator3).setContent(i3));
    
        
        //为tabhost设置监听
        tabHost.setOnTabChangedListener(new OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                 tabHost.setOnTabChangedListener(new OnTabChangeListener() {
                        @Override
                        public void onTabChanged(String tabId) {
                            if ("A".equals(tabId)) {
                                pager.setCurrentItem(0);//在tabhost的监听改变Viewpager
                            } 
                            if ("B".equals(tabId)) {
                                pager.setCurrentItem(1);
                            } 
                            if ("C".equals(tabId)) {
                                pager.setCurrentItem(2);
                            } 
                        }
                    });
                
            }
        });

        //为ViewPager适配和设置监听
        pager.setAdapter(new MyPageAdapter(listViews));
        pager.setOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                tabHost.setCurrentTab(position);//在Viewpager改变tabhost
            }
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }
            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

private class MyPageAdapter extends PagerAdapter {
        
        private List<View> list;

        private MyPageAdapter(List<View> list) {
            this.list = list;
        }
        @Override
        public void destroyItem(ViewGroup view, int position, Object arg2) {
            ViewPager pViewPager = ((ViewPager) view);
            pViewPager.removeView(list.get(position));
        }
        @Override
        public void finishUpdate(View arg0) {
        }
        @Override
        public int getCount() {
            return list.size();
        }
        @Override
        public Object instantiateItem(ViewGroup view, int position) {
            ViewPager pViewPager = ((ViewPager) view);
            pViewPager.addView(list.get(position));
            return list.get(position);
        }
        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }
        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {
        }
        @Override
        public Parcelable saveState() {
            return null;
        }
        @Override
        public void startUpdate(View arg0) {
        }
    }
}

2、主xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >
        </TabWidget>
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        <!-- 将tabhost的tabcontent隐藏，用viewPage填充 -->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:visibility="gone"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
        </FrameLayout>
    </LinearLayout>

</TabHost>

tabwidget.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="64dip"
    android:background="@drawable/tabwidget_btn_bg"
       >
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:layout_centerHorizontal="true" 
        android:text="111"
        android:layout_centerVertical="true"
        />
</RelativeLayout>

附上tabwidget_btn_bg的代码：

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->  
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/titlebar_bg_nor_3" />  
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/titlebar_bg_nor_2" />  
    <!-- Pressed --> 
    <item android:state_pressed="true" android:drawable="@drawable/bg_btn_sel" />     
</selector>