web-dev-qa-db-fra.com

Fragment Tabs à l'intérieur du fragment

J'ai dans mon activité principale une navigation dans la barre d'actions à l'aide d'onglets utilisant Fragments (avec Material Design), comme ci-dessous, qui fonctionne bien, mais je souhaite maintenant avoir la navigation par onglet dans mes fragments ...

// Add Fragments to Tabs in Main Activity
private void setupViewPager(ViewPager viewPager) {
    Adapter adapter = new Adapter(getSupportFragmentManager());
    adapter.addFragment(new FeedsFragment(), "Latest Updates");
    adapter.addFragment(new ClubTeamsFragment(), "Club Teams");
    adapter.addFragment(new FixturesFragment(), "Fixtures");
    adapter.addFragment(new ResultsFragment(), "Results");
    adapter.addFragment(new ClubFieldsFragment(), "Club Fields");
    viewPager.setAdapter(adapter);
}

Je suis à peu près sûr que TabHost est maintenant obsolète.

Je souhaite réaliser l'image ci-jointe. Les onglets bleus se trouvent au niveau Activité principale et les onglets de date gris figurent dans la vue fragmentée sélectionnée.

 enter image description here

J'ai lu quelques articles sur l'utilisation de Tab Host ou Fragment Activity ou dois-je utiliser Activity qui est étendu à Fragment?

androidandroid-fragmentstabs
21
BENN1TH

Voir ci-dessous la réponse que j'ai obtenue avec l'utilisation d'onglets de fragment à l'intérieur des onglets de fragment qui se trouvent dans mon MainActivity

Dans mon fragment avec getChildFragmentManager () 

public class FixturesTabs extends Fragment {

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setRetainInstance(true);
  }

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

    View view = inflater.inflate(R.layout.fixtures_new_tabs,container, false);
    // Setting ViewPager for each Tabs
    ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
    setupViewPager(viewPager);
    // Set Tabs inside Toolbar
    TabLayout tabs = (TabLayout) view.findViewById(R.id.result_tabs);
    tabs.setupWithViewPager(viewPager);


    return view;

}


// Add Fragments to Tabs
private void setupViewPager(ViewPager viewPager) {


    Adapter adapter = new Adapter(getChildFragmentManager());
    adapter.addFragment(new TodaysFixturesFragment(), "Today");
    adapter.addFragment(new WeekFixturesFragment(), "Week");
    adapter.addFragment(new MonthFixturesFragment(), "Month");
    adapter.addFragment(new AllFixturesFragment(), "Month");
    adapter.addFragment(new MyTeamsFixturesFragment(), "My Teams");
    viewPager.setAdapter(adapter);



}

static class Adapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public Adapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}



}

Et mon XML nommé "fixtures_new_tabs.xml" pour correspondre à la présentation gonflée

<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:app="http://schemas.Android.com/apk/res-auto">


<Android.support.design.widget.CoordinatorLayout
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <Android.support.design.widget.TabLayout
            Android:id="@+id/result_tabs"
            Android:background="@color/grey"
            app:tabTextColor="@color/medium_grey"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabIndicatorColor="@color/colorPrimary"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:tabMode="scrollable"/>
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</Android.support.design.widget.CoordinatorLayout>

</RelativeLayout>

Espérons que cela aide ou pointe les autres dans la direction de leur solution.

P.S. Si vous obtenez un écran blanc après avoir implémenté cela, vous avez peut-être ajouté le même fragment parent à son fragment enfant.

51
BENN1TH

J'ai changé quelques petites choses dans la solution Han et BENN1TH parce que l'onglet ne s'alignait pas correctement. (ils ont ajouté cinq fragments). J'espère que ça aide.

        <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways"
        Android:paddingTop="@dimen/appbar_padding_top"
        Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.design.widget.TabLayout
            Android:id="@+id/result_tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content">
        </Android.support.design.widget.TabLayout>

    </Android.support.design.widget.AppBarLayout>
0
Bukunmi