2014-10-03 5 views
5

Ich versuche, diese Bibliothek in meiner App zu verwenden: https://github.com/astuetz/PagerSlidingTabStripPagerSlidingTabStrip implementieren Führungs

ich die Dokumente lesen, aber ich verstand nicht, anything.I haben zwei Fragmente so zwei Registerkarten meiner app.Where platzieren möchte ich setze ich den viewpager xml?

Wo ich die dieser Code-Block setzen Sie:

// Initialize the ViewPager and set an adapter 
ViewPager pager = (ViewPager) findViewById(R.id.pager); 
pager.setAdapter(new TestAdapter(getSupportFragmentManager())); 

// Bind the tabs to the ViewPager 
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs); 
tabs.setViewPager(pager); 

Gerade Haupttätigkeit oder alle Fragmente und Haupttätigkeit? (Ich habe dieselbe Frage für viewpager xml) Kann mir jemand erklären, wie ich dies Schritt für Schritt in meine App implementieren kann?

Ps: https://github.com/astuetz/PagerSlidingTabStrip/tree/master/sample Dies ist der Beispielcode.

Antwort

31

Schritt für Schritt

ich es nur für zwei Registerkarten, wie Sie gefragt!

0) Fügen Sie die Bibliothek auf Ihren Build-Pfad

1) Erstellen Sie zwei Fragmente

public class FragmentA extends Fragment { 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
     return inflater.inflate(R.layout.fragment_a,container,false); 
    } 
} 

und

public class FragmentB extends Fragment { 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
     return inflater.inflate(R.layout.fragment_b,container,false); 
    } 
} 

und deren Layouts können beispielsweise sein:

<?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:background="#FFFF00"> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?android:attr/textAppearanceLarge" 
     android:text="This is Fragment A" 
     android:id="@+id/textView" 
     android:gravity="center" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentBottom="true" /> 
</RelativeLayout> 

2) Erstellen Sie MainActivity Layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 

    <com.astuetz.PagerSlidingTabStrip 
     android:id="@+id/tabs" 
     android:layout_width="match_parent" 
     android:layout_height="48dip" 
     /> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/tabs" 
     tools:context=".MainActivity" /> 

</RelativeLayout> 

3) Erstellen Sie Ihren viewpager Adapter

public class MyPagerAdapter extends FragmentPagerAdapter { 

    public MyPagerAdapter(FragmentManager fm) { 
     super(fm); 
    } 
    @Override 
    public CharSequence getPageTitle(int position) { 
     return (position == 0)? "Tab 1" : "Tab2" ; 
    } 
    @Override 
    public int getCount() { 
     return 2; 
    } 
    @Override 
    public Fragment getItem(int position) { 
     return return (position == 0)? new FragmentA() : new FragmentB() ; 
    } 
} 

3) Weisen Sie Adapter an Ihren viewpager und die viewpager zum PagerSlidingTabStrip bei der MainActivity

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

     ViewPager pager = (ViewPager) findViewById(R.id.pager); 
     pager.setAdapter(new MyAdapter(getSupportFragmentManager())); 

     // Bind the tabs to the ViewPager 
     PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs); 
     tabs.setViewPager(pager); 
    } 

4) Führen

enter image description here

+0

Vielen Dank für dieses tolle guide.But I Habe ein Problem dieses Problem in Eclipse: Attribut fehlt der Android Namespace Pref ix für diese Zeile: tools: context = ". MainActivity" Wie kann ich das beheben? –

+0

es ist nicht wichtig delete 'tools: context' :-) – mmlooloo

+0

Okay, ich habe noch eine Frage können Sie versuchen, framelayout anstatt relaylayout verwenden? Weil ich Framelayout benutzen muss. –

1

Ihre Layout-Datei wird Registerkarten am oberen Rand haben und einen ViewPager am Boden wie in der unten stehenden Code-Schnipsel gezeigt:

<com.astuetz.PagerSlidingTabStrip 
    android:id="@+id/tabs" 
    app:pstsShouldExpand="true" 
    app:pstsTextAllCaps="true" 
    android:layout_width="match_parent" 
    android:layout_height="48dp"> 
</com.astuetz.PagerSlidingTabStrip> 


<android.support.v4.view.ViewPager 
    android:id="@+id/viewpager" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@android:color/white" /> 

erstellen Fragment

Fragment erstellen [re s/Layout/fragment_page.xml] und kopieren und fügen Sie diesen Code

<TextView 
android:id="@+id/tvTitle" 
android:text="Fragment #X" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:gravity="center" /> 

In PageFragment.java die Inflation Logik für das Fragment Abschnitt der Registerkarte Inhalt definieren:

public class PageFragment extends Fragment { 
private int mPage; 
public static final String ARG_PAGE = "ARG_PAGE"; 

public static PageFragment newInstance(int page) { 
    Bundle args = new Bundle(); 
    args.putInt(ARG_PAGE, page); 
    PageFragment fragment = new PageFragment(); 
    fragment.setArguments(args); 
    return fragment; 
} 

@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    mPage = getArguments().getInt(ARG_PAGE); 
} 

// Inflate the fragment layout we defined above for this fragment 
// Set the associated text for the title 
@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
    View view = inflater.inflate(R.layout.fragment_page, container, false); 
    TextView tvTitle = (TextView) view.findViewById(R.id.tvTitle); 
    tvTitle.setText("Fragment #" + mPage); 
    return view; 
} 

Implement FragmentPagerAdapter

Das nächste, was zu tun ist, um den Adapter für Ihre ViewPager zu implementieren, die die Reihenfolge der Registerkarte steuert.

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter{ 


final int PAGE_COUNT = 3; 
private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" }; 

public SampleFragmentPagerAdapter(FragmentManager fm) { 
    super(fm); 
} 

@Override 
public int getCount() { 
    return PAGE_COUNT; 
} 

@Override 
public Fragment getItem(int position) { 
    return PageFragment.newInstance(position + 1); 
} 

@Override 
public CharSequence getPageTitle(int position) { 
    // Generate title based on item position 
    return tabTitles[position]; 
}} 

Setup-Schiebe Tabs

Schließlich müssen wir unsere ViewPager zum SampleFragmentPagerAdapter befestigen und dann konfigurieren, um die Schiebezungen mit einem zweistufigen Verfahren:

Im onCreate() Methode suchen Sie den ViewPager und verbinden Sie den Adapter.

Legen Sie den ViewPager auf dem PagerSlidingTabStrip fest, um den Pager mit den Registerkarten zu verbinden.

public class MainActivity extends FragmentActivity { 

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

    // Get the ViewPager and set it's PagerAdapter so that it can display items 
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); 
    viewPager.setAdapter(new SampleFragmentPagerAdapter(getSupportFragmentManager())); 

    // Give the PagerSlidingTabStrip the ViewPager 
    PagerSlidingTabStrip tabsStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs); 
    // Attach the view pager to the tab strip 
    tabsStrip.setViewPager(viewPager); 
}} 

Und das ist das Ergebnis

enter image description here

für weitere Informationen besuchen Sie die folgende link

Good Luck

Verwandte Themen