Tutorial zur Verwendung von TabHost in Android 2.2 + ViewPager und Fragmente

Question

Ein kurzes Tutorial für Leute wie mich, die einige Probleme hatten, TabHost und ViewPager zu implementieren, einschließlich Seitenwischen mit den Fingern und Tab-Klick zum Seitenwechsel. Die gezeigte Lösung ist kompatibel mit den Android-Versionen 2.2 und höher.

Es enthält Tabs Initialisierung, ViewPager mit Tabs und Blättern Verwaltung verbunden.

Seine Haupteigenschaft ist die Optimierung für frühere Versionen von Android (FROYO, API Version 8, Android 2.2) und die einfache Implementierung für verschiedene Zwecke.

Ich hoffe, es wird nützlich sein.

Answer 1

Das Tutorial enthält 4 Klassen und 2 Layouts. Es wurde mit einem Android Phone 2.2 getestet und Sie können einfach & Paste kopieren, um es zu versuchen.

Dieses Tutorial ist offen für Kommentare & Verbesserungen!

MainActivity.java (die Hauptaktivität):

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 (fragment Manager):

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 (tab Manager):

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 (das einzige Fragment - zu Demonstrationszwecken enthalten):

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 (können Sie sich hier setzen Sie Ihre Fragment-Layout):

<?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>