Android 2.2 + ViewPager和Fragments实现TabHost使用教程

Posted 2023-04-15

【中文标题】Android 2.2 + ViewPager和Fragments实现TabHost使用教程

【英文标题】：Tutorial to implement the use of TabHost in Android 2.2 + ViewPager and Fragments

【发布时间】：2013-07-15 07:02:45

【问题描述】：

为像我这样难以找到实现 TabHost 和 ViewPager 的方法的人提供的简短教程，包括用手指滑动页面和单击选项卡以更改页面。所示解决方案与 android 2.2+ 版本兼容。

包括Tabs初始化、ViewPager连接Tabs和Page Scrolling管理。

它的主要特点是针对早期版本的 Android（Android 2.2 (Froyo)，API 版本 8）进行了优化，并针对不同目的进行了简单的实现。

【问题讨论】：

你可以在这里下载项目：github.com/acarrer/tabhostandfragments

最好把这个放到问答格式中（应该不会太难做）。 Stack Overflow 不太适合博客文章或教程内容。

【参考方案1】：

本教程包括 4 个类和 2 个布局。已经在安卓手机2.2上测试过了，你可以复制粘贴试试看。

MainActivity.java（主要活动）：

package samples.tabhost.andreaoid.net;

import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;

public class MainActivity extends FragmentActivity implements OnTabChangeListener, OnPageChangeListener 

    MyPageAdapter pageAdapter;
    private ViewPager mViewPager;
    private TabHost mTabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mViewPager = (ViewPager) findViewById(R.id.viewpager);

        // Tab Initialization
        initialiseTabHost();

        // Fragments and ViewPager Initialization
        List<Fragment> fragments = getFragments();
        pageAdapter = new MyPageAdapter(getSupportFragmentManager(), fragments);
        mViewPager.setAdapter(pageAdapter);
        mViewPager.setOnPageChangeListener(MainActivity.this);
    

    // Method to add a TabHost
    private static void AddTab(MainActivity activity, TabHost tabHost, TabHost.TabSpec tabSpec) 
        tabSpec.setContent(new MyTabFactory(activity));
        tabHost.addTab(tabSpec);
    

    // Manages the Tab changes, synchronizing it with Pages
    public void onTabChanged(String tag) 
        int pos = this.mTabHost.getCurrentTab();
        this.mViewPager.setCurrentItem(pos);
    

    @Override
    public void onPageScrollStateChanged(int arg0) 
    

    // Manages the Page changes, synchronizing it with Tabs
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) 
        int pos = this.mViewPager.getCurrentItem();
        this.mTabHost.setCurrentTab(pos);
    

    @Override
        public void onPageSelected(int arg0) 
    

    private List<Fragment> getFragments()
        List<Fragment> fList = new ArrayList<Fragment>();

        // TODO Put here your Fragments
        MySampleFragment f1 = MySampleFragment.newInstance("Sample Fragment 1");
        MySampleFragment f2 = MySampleFragment.newInstance("Sample Fragment 2");
        MySampleFragment f3 = MySampleFragment.newInstance("Sample Fragment 3");
        fList.add(f1);
        fList.add(f2);
        fList.add(f3);

        return fList;
    

    // Tabs Creation
    private void initialiseTabHost() 
        mTabHost = (TabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup();

        // TODO Put here your Tabs
        MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab1").setIndicator("Tab1"));
        MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab2").setIndicator("Tab2"));
        MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab3").setIndicator("Tab3"));

        mTabHost.setOnTabChangedListener(this);
    

MyPageAdapter.java（片段管理器）：

package samples.tabhost.andreaoid.net;

import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyPageAdapter extends FragmentPagerAdapter 
    private List<Fragment> fragments;

    public MyPageAdapter(FragmentManager fm, List<Fragment> fragments) 
        super(fm);
        this.fragments = fragments;
    

    @Override
    public Fragment getItem(int position) 
        return this.fragments.get(position);
    

    @Override
    public int getCount() 
        return this.fragments.size();
    

MyTabFactory（标签管理器）：

package samples.tabhost.andreaoid.net;

import android.content.Context;
import android.view.View;
import android.widget.TabHost.TabContentFactory;

public class MyTabFactory implements TabContentFactory 

    private final Context mContext;

    public MyTabFactory(Context context) 
        mContext = context;
    

    public View createTabContent(String tag) 
        View v = new View(mContext);
        v.setMinimumWidth(0);
        v.setMinimumHeight(0);
        return v;
    

MySampleFragment.java（单个片段 - 包含用于演示目的）：

package samples.tabhost.andreaoid.net;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MySampleFragment extends Fragment 

    private static View mView;

    public static final MySampleFragment newInstance(String sampleText) 
        MySampleFragment f = new MySampleFragment();

        Bundle b = new Bundle();
        b.putString("bString", sampleText);
        f.setArguments(b);

        return f;
    

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 

        mView = inflater.inflate(R.layout.sample_fragment, container, false);
        String sampleText = getArguments().getString("bString");

        TextView txtSampleText = (TextView) mView.findViewById(R.id.txtViewSample);
        txtSampleText.setText(sampleText);

        return mView;
    

activity_main.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_
        android:layout_ >
        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="vertical" >
            <TabWidget
                android:id="@android:id/tabs"
                android:orientation="horizontal"
                android:layout_
                android:layout_
                android:layout_weight="0" />
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_
                android:layout_
                android:layout_weight="0" />
            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_
                android:layout_
                android:layout_gravity="bottom" />
        </LinearLayout>
    </TabHost>
</RelativeLayout>

sample_fragment.xml（您可以将片段布局放在这里）：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:orientation="vertical" >

    <TextView
        android:id="@+id/txtViewSample"
        android:layout_
        android:layout_
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="" />

</RelativeLayout>

【讨论】：

选项卡切换在模拟器上不稳定。选项卡内容明显调整大小。有谁知道为什么？

非常感谢您的回答。您对 @dimen/activity_vertical_margin 和 @dimen/activity_horizo​​ntal_margin 应用了哪些值？

此外，应该对您提供的 activity_main.xml 应用哪些更改，以使活动的标签栏 (TabWidget)底部，而不是顶部？

@Bliss 你知道怎么做吗？