hoja - styles android studio

Cómo crear un estilo de pestañas de Android con vista de barrido de página

Question

Quiero un ejemplo de pestaña como esta

Busqué pero acabo de conseguir esto.

viewpageindicator

No pude usar esta fuente. Puede alguien decirme otro ejemplo de pestaña con opción deslizante.
Creo que el viewpageindicator no es lo mismo que Google Play Tabs.

porque cuando me desplazo en google, la página de reproducción se mueve en la línea debajo de las pestañas mientras se desplaza, pero en viewpageindicator no lo es.

Gracias

Answer 1

Cuando había implementado algo similar, lo había hecho de una manera más agradable, en el sentido de las clases. Yo había creado el adaptador en un paquete llamado trabajo.

A continuación se muestra el código:

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

Entonces necesitas crear una nueva clase llamada WorkingFragment en el ejemplo que estoy dando. Por el bien de la codificación limpia, creé esta clase en el paquete principal.

A continuación se muestra el código para el fragmento:

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

En MainActivity , debe hacer que la funcionalidad cambie de una pestaña a otra. En mi caso había incluido esto en el paquete principal.

A continuación se muestra el código para la clase 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) {
    }
} 

Espero que esto te haya ayudado a lograr la funcionalidad necesaria para tu aplicación :)

Answer 2

Primero debe crear un archivo de diseño xml con viewpager android.support.v4.view.ViewPager

Luego infle este diseño en su actividad principal, asegúrese de que su actividad se implemente

android.support.v7.app.ActionBar.TabListener Digamos que quieres tener 4 pestañas, luego crea

4 fragmentos diferentes. Cree un adaptador común para facilitar estos fragmentos basados ​​en el

pestañas que seleccione.

Aquí está el ejemplo simple con un fragmento de código, http://www.feelzdroid.com/2014/10/android-action-bar-tabs-swipe-views.html

Nota: el ejemplo anterior funciona bien con el soporte para Android lib, que proporciona una barra de acción hacia atrás

compatibilidad para versiones anteriores de teléfonos android

Espero eso ayude.

Gracias

Answer 3

Una forma sencilla de trabajar con pestañas de fragmentos

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

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

en crear y luego

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

en el archivo de diseño agregar

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

Answer 4

Este artículo ( Diseño de material de Android que trabaja con pestañas ) publicado el 13 de septiembre de 2015 lo guía a través de la creación de páginas con pestañas.

Por ejemplo, creando pestañas fijas.

Las pestañas fijas deben usarse cuando tienes un número limitado de pestañas. Estas pestañas están fijas en su posición. En la biblioteca de soporte de diseño de Android se presentaron muchos elementos nuevos como CoordinatorLayout , AppBarLayout , TabLayout y muchos más. No cubriré todo esto ya que no es la agenda de este artículo.

Abra el archivo de diseño de la actividad principal ( activity_main.xml ) y agregue a continuación el código de diseño.

app:tabMode - Define el modo del diseño de la pestaña. En nuestro caso el valor debe ser "fijo".

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>

Abra MainActivity.java y realice los cambios a continuación.

tabLayout.setupWithViewPager() : asigna ViewPager a TabLayout.

setupViewPager() : define el número de pestañas configurando el fragmento y el nombre de pestaña apropiados.

ViewPagerAdapter: la clase de adaptador personalizado proporciona los fragmentos necesarios para el paginador de la vista. 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);
        }
    }
}

Ahora ejecuta la aplicación. Debería poder ver las pestañas que se muestran con la funcionalidad de deslizar entre las pestañas.