2014-10-03 3 views
5

Я пытаюсь использовать эту библиотеку в моем приложении: https://github.com/astuetz/PagerSlidingTabStripPagerSlidingTabStrip осуществлять руководство

Я читал документы, но я не понимаю anything.I есть два фрагмента, поэтому я хочу, чтобы поместить две вкладки в мою app.Where я помещаю viewpager xml?

Где поставить блок этого кода:

// 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); 

Только основная деятельности или все фрагменты и основную деятельность? (У меня такой же вопрос для xml viewpager) Может ли кто-нибудь объяснить мне, как я могу реализовать это для своего приложения шаг за шагом?

Пс: https://github.com/astuetz/PagerSlidingTabStrip/tree/master/sample Это пример кода.

ответ

31

шаг за шагом

Я просто сделать это за две вкладки, как вы просили!

0) Добавить библиотеку в свой путь сборки

1) Создайте свой два фрагмента

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

и

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

и их макетов, например, могут быть:

<?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) Создание MainActivity расположение:

<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) Создать ViewPager адаптер

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) Назначить адаптер к вашему ViewPager и ViewPager к PagerSlidingTabStrip на 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) Запуск

enter image description here

+0

Спасибо за этот удивительный guide.But I проблема возникает в eclipse: в атрибуте отсутствует пространство имен Android pref ix для этой строки: tools: context = ". MainActivity" Как я могу это исправить? –

+0

Не важно delete 'tools: context' :-) – mmlooloo

+0

Хорошо, у меня есть еще один вопрос, вы можете попробовать использовать framelayout вместо relativelayout? Потому что я должен использовать framelayout. –

1

Ваш файл макета будет иметь выступы на верхней и ViewPager на дне, как показано на фрагменте кода ниже:

<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" /> 

Создать Фрагмент

создать фрагмент [re s/layout/fragment_page.xml] и скопируйте и вставьте этот код

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

В PageFragment.Java определяют логику инфляции для секции фрагмента содержимого вкладки:

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; 
} 

Реализовать FragmentPagerAdapter

Следующая вещь, чтобы сделать, это реализовать адаптер для ViewPager, который контролирует порядок вкладки.

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]; 
}} 

Установка раздвижных Вкладки

Наконец, мы должны приложить наши ViewPager к SampleFragmentPagerAdapter, а затем настроить раздвижные вкладки с два этапа:

В OnCreate() метод вашей деятельности, найдите ViewPager и подключите адаптер.

Установите ViewPager на PagerSlidingTabStrip, чтобы подключить пейджер с вкладками.

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); 
}} 

И это результат

enter image description here

для получения дополнительной информации, проверьте следующее link

Good Luck

Смежные вопросы