web-dev-qa-db-ja.com

Android 2.2 + ViewPagerおよびFragmentsでTabHostの使用を実装するためのチュートリアル

指でページをスワイプしたり、タブをクリックしてページを変更したりするなど、TabHostとViewPagerを実装する方法を見つけるのに苦労した私のような人々のための短いチュートリアル。示されているソリューションは、Androidバージョン2.2以降と互換性があります。

これには、タブの初期化、タブに接続されたViewPager、およびページスクロール管理が含まれます。

その主な特徴は、以前のバージョンのAndroid(Android 2.2(Froyo)、APIバージョン8)の最適化と、さまざまな目的のための単純な実装です。

19
ᗩИᎠЯƎᗩ

チュートリアルには、4つのクラスと2つのレイアウトが含まれています。 Android phone 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_width="match_parent"
    Android:layout_height="match_parent"
    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_width="fill_parent"
        Android:layout_height="wrap_content" >
        <LinearLayout
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:orientation="vertical" >
            <TabWidget
                Android:id="@Android:id/tabs"
                Android:orientation="horizontal"
                Android:layout_width="fill_parent"
                Android:layout_height="wrap_content"
                Android:layout_weight="0" />
            <FrameLayout
                Android:id="@Android:id/tabcontent"
                Android:layout_width="0dp"
                Android:layout_height="0dp"
                Android:layout_weight="0" />
            <Android.support.v4.view.ViewPager
                Android:id="@+id/viewpager"
                Android:layout_width="fill_parent"
                Android:layout_height="wrap_content"
                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_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical" >

    <TextView
        Android:id="@+id/txtViewSample"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentLeft="true"
        Android:layout_alignParentRight="true"
        Android:layout_alignParentTop="true"
        Android:text="" />

</RelativeLayout>
46
ᗩИᎠЯƎᗩ