Comment créer un style Android à onglets avec le mode Vue de défilement de page

Question

Je veux un exemple d'onglet comme ça 

J'ai cherché mais je viens de recevoir ceci.

viewpageindicator

Je ne pouvais pas utiliser cette source. Quelqu'un peut-il me dire un autre exemple d'onglet avec option coulissante.
Je pense que l'indicateur de page d'affichage n'est pas la même chose que Google lit les onglets .

Parce que lorsque je fais défiler la page Google Play, la ligne située sous les onglets se déplace pendant le défilement, mais dans viewpageindicator, ce n'est pas .

Je vous remercie

Answer 1

Cet article ((Android Material Design fonctionnant avec des onglets) publié le 13 septembre 2015 vous guide dans la création de pages à onglet.

Par exemple, créer Onglets fixes

Les onglets fixes doivent être utilisés lorsque vous avez un nombre limité d’onglets. Celles-ci les onglets sont fixés en position. Dans la bibliothèque de support de conception Android, beaucoup de de nouveaux éléments tels que CoordinatorLayout, AppBarLayout, TabLayout et lot plus ont été introduits. Je ne couvrirai pas tout cela car ce n’est pas le ordre du jour de cet article.

Ouvrez le fichier de présentation de l'activité principale (activity_main.xml) et ajoutez sous le code de mise en page.

app:tabMode - Définit le mode de la disposition des onglets. Dans notre cas, le la valeur doit être "fixe"

activity_main.xml

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

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

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>
    </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>

Ouvrez MainActivity.Java et effectuez les modifications ci-dessous.

tabLayout.setupWithViewPager() - Attribue le ViewPager à TabLayout.

setupViewPager() - Définit le nombre d'onglets en définissant les options appropriées nom du fragment et de l'onglet.

ViewPagerAdapter - La classe d'adaptateur personnalisé fournit les fragments requis pour la vue pager . MainActivity.Java

package info.androidhive.materialtabs.activity;

import Android.os.Bundle;
import Android.support.design.widget.TabLayout;
import Android.support.v4.app.Fragment;
import Android.support.v4.app.FragmentManager;
import Android.support.v4.app.FragmentPagerAdapter;
import Android.support.v4.view.ViewPager;
import Android.support.v7.app.AppCompatActivity;
import Android.support.v7.widget.Toolbar;

import Java.util.ArrayList;
import Java.util.List;

import info.androidhive.materialtabs.R;
import info.androidhive.materialtabs.fragments.OneFragment;
import info.androidhive.materialtabs.fragments.ThreeFragment;
import info.androidhive.materialtabs.fragments.TwoFragment;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment(), "ONE");
        adapter.addFragment(new TwoFragment(), "TWO");
        adapter.addFragment(new ThreeFragment(), "THREE");
        viewPager.setAdapter(adapter);
    }

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

        public ViewPagerAdapter(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);
        }
    }
}

Maintenant, lancez l'application. Vous devriez pouvoir voir les onglets affichés avec le balayage fonctionnalité entre les onglets.

Answer 2

Vous devez d’abord créer un fichier de présentation XML avec viewpager Android.support.v4.view.ViewPager

Puis gonflez cette mise en page dans votre activité principale, assurez-vous que votre activité implémente 

Android.support.v7.app.ActionBar.TabListener Disons que vous voulez avoir 4 onglets, puis créez 

4 fragments différents. Créez un adaptateur commun pour faciliter ces fragments en fonction de la 

onglets que vous sélectionnez. 

Voici l'exemple simple avec l'extrait de code, http://www.feelzdroid.com/2014/10/Android-action-bar-tabs-swipe-views.html

Remarque: l'exemple ci-dessus fonctionne bien avec la bibliothèque de support Android, qui fournit une barre d'actions arrière 

compatibilité pour les versions antérieures des téléphones Android 

J'espère que ça aide. 

Merci

Answer 3

Quand j'avais implémenté quelque chose de similaire, je l'avais fait d'une manière plus agréable, dans le sens des classes. J'ai créé l'adaptateur dans un package appelé working. 

Ci-dessous le code:

public class TabsPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int index) {

        switch (index) {
        case 0:
          return new WorkingFragment();
        //You can add as many fragments as you wish here by adding the cases and calling the different fragments.
        }      
        return null;
    }

    @Override
    public int getCount() {
        // get item count - equal to number of tabs. 4 is only the number of fragments I had used.
        return 4;
    }
}

Vous devez ensuite créer une nouvelle classe appelée WorkingFragment dans l'exemple que je donne. Pour des raisons de code propre, j'ai créé cette classe dans le package principal.

Ci-dessous le code du fragment:

public class NewEventFragment extends Fragment {

    View rootView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    //reference the xml file containing the view with all the code here.
    }
}

Dans MainActivity, vous devez ensuite créer la fonctionnalité permettant de changer d’un onglet à un autre. Dans mon cas, j'avais inclus cela dans le paquet principal.

Vous trouverez ci-dessous le code de la classe MainActivity:

public class MainActivity extends FragmentActivity implements ActionBar.TabListener {

    private ViewPager ViewPager;
    private TabsPagerAdapter SectionsPagerAdapter;
    private ActionBar actionBar;

    //Include the name for the tabs in this array. Make sure the number of elements in this string matches the number of views you will have in your app. 
    private String[] tabs = {};

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

     // Initialisation
        ViewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar();
        SectionsPagerAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        ViewPager.setAdapter(SectionsPagerAdapter);
        actionBar.setHomeButtonEnabled(false);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 

     // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name).setTabListener(this));
        }

        ViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    @Override
    public void onTabReselected(Tab tab, Android.app.FragmentTransaction ft) {

    }

    @Override
    public void onTabSelected(Tab tab, Android.app.FragmentTransaction ft) {
        ViewPager.setCurrentItem(tab.getPosition());

    }

    @Override
    public void onTabUnselected(Tab tab, Android.app.FragmentTransaction ft) {
    }
} 

J'espère que cela vous a aidé à atteindre la fonctionnalité nécessaire pour votre application :)

Answer 4

moyen simple de travailler avec des onglets de fragments

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);

    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);

dans créer puis

private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new 
        ViewPagerAdapter(getSupportFragmentManager());        
        adapter.addFrag(new RootDetailFragment(), "TAB 1");
        adapter.addFrag(new ShiftDetailFragment(), "TAB 2");        
        viewPager.setAdapter(adapter);
}


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

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

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

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

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

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

dans le fichier de mise en page ajouter

 <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="#000"
        app:tabGravity="fill"
        app:tabMode="fixed" />
</Android.support.design.widget.AppBarLayout>