Pestañas intercambiables en el fragmento Menú Deslizante
He implementado el cajón de navegación al referirme a este tutorial y ahora lo que quiero hacer es mostrar las pestañas de deslizamiento dentro de un fragmento. Es decir, cuando hago clic en un elemento en el cajón de navegación, digamos que el primero, debe mostrar las pestañas de deslizamiento para que los elementos. (Tengo 6 fragmentos en mi vista de lista (también: – A, B, C, D, E, F) y necesito 3 pestañas intercambiables en mi Fragmento A).
Si el item1 es Eventos, cuando hago clic en él, entonces debe mostrar las pestañas de deslizamiento.
- Cómo configurar la altura de las pestañas de la barra de acciones para android
- Cambiar el tamaño del texto en la pestaña de android
- Cómo implementar PageTransformer con pestañas deslizables
- El fragmento ViewPager no funciona en la segunda vez dentro del fragmento del cajón de navegación correctamente
- Error al cargar el mapa. Error al contactar a los servidores de Google. Esto es probablemente un problema de autenticación
Pero me enfrento a las siguientes cuestiones: –
-
¿Cómo puedo implementar ver paginador dentro de fragmento?
-
Es posible que un fragmento extienda un fragmento.
-
Cuando un fragmento está extendiendo una FragmentActivity, entonces en mi actividad principal, el código muestra un error diciendo "tipo incompatibilidad", no se puede convertir de un fragmento a un fragmento.
Este es mi archivo Deep.java
package com.amar.demo; import info.androidhive.slidingmenu.adapter.NavDrawerListAdapter; import info.androidhive.slidingmenu.model.NavDrawerItem; import java.util.ArrayList; import android.app.Activity; import android.app.Fragment; import android.app.FragmentManager; import android.content.res.Configuration; import android.content.res.TypedArray; import android.os.Bundle; import android.support.v4.app.ActionBarDrawerToggle; import android.support.v4.widget.DrawerLayout; import android.util.Log; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.AdapterView; import android.widget.ListView; public class Deep extends Activity { private DrawerLayout mDrawerLayout; private ListView mDrawerList; private ActionBarDrawerToggle mDrawerToggle; // nav drawer title private CharSequence mDrawerTitle; // used to store app title private CharSequence mTitle; // slide menu items private String[] navMenuTitles; private TypedArray navMenuIcons; private ArrayList<NavDrawerItem> navDrawerItems; private NavDrawerListAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.deep); mTitle = mDrawerTitle = getTitle(); // load slide menu items navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items); // nav drawer icons from resources navMenuIcons = getResources() .obtainTypedArray(R.array.nav_drawer_icons); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerList = (ListView) findViewById(R.id.list_slidermenu); navDrawerItems = new ArrayList<NavDrawerItem>(); // adding nav drawer items to array // Home navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons .getResourceId(0, -1))); // Find People navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons .getResourceId(1, -1))); // Photos navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons .getResourceId(2, -1))); // Communities, Will add a counter here navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons .getResourceId(3, -1), true, "22")); // Pages navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons .getResourceId(4, -1))); // What's hot, We will add a counter here navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons .getResourceId(5, -1), true, "50+")); // Recycle the typed array navMenuIcons.recycle(); mDrawerList.setOnItemClickListener(new SlideMenuClickListener()); // setting the nav drawer list adapter adapter = new NavDrawerListAdapter(getApplicationContext(), navDrawerItems); mDrawerList.setAdapter(adapter); // enabling action bar app icon and behaving it as toggle button getActionBar().setDisplayHomeAsUpEnabled(true); getActionBar().setHomeButtonEnabled(true); mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, // nav menu toggle icon R.string.app_name, // nav drawer open - description for // accessibility R.string.app_name // nav drawer close - description for // accessibility ) { public void onDrawerClosed(View view) { getActionBar().setTitle(mTitle); // calling onPrepareOptionsMenu() to show action bar icons invalidateOptionsMenu(); } public void onDrawerOpened(View drawerView) { getActionBar().setTitle(mDrawerTitle); // calling onPrepareOptionsMenu() to hide action bar icons invalidateOptionsMenu(); } }; mDrawerLayout.setDrawerListener(mDrawerToggle); if (savedInstanceState == null) { // on first time display view for first nav item displayView(0); } } /** * Slide menu item click listener * */ private class SlideMenuClickListener implements ListView.OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // display view for selected nav drawer item displayView(position); } } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.testmenu, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // toggle nav drawer on selecting action bar app icon/title if (mDrawerToggle.onOptionsItemSelected(item)) { return true; } // Handle action bar actions click switch (item.getItemId()) { case R.id.a_More: return true; default: return super.onOptionsItemSelected(item); } } /* * * Called when invalidateOptionsMenu() is triggered */ @Override public boolean onPrepareOptionsMenu(Menu menu) { // if nav drawer is opened, hide the action items boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList); menu.findItem(R.id.a_More).setVisible(!drawerOpen); return super.onPrepareOptionsMenu(menu); } /** * Diplaying fragment view for selected nav drawer list item * */ private void displayView(int position) { // update the main content by replacing fragments Fragment fragment = null; switch (position) { case 0: fragment = new HomeFragment(); break; case 1: fragment = new FindPeopleFragment(); break; case 2: fragment = new PhotosFragment(); break; case 3: fragment = new CommunityFragment(); break; case 4: fragment = new PagesFragment(); break; case 5: fragment = new WhatsHotFragment(); break; default: break; } if (fragment != null) { FragmentManager fragmentManager = getFragmentManager(); // fragmentManager.beginTransaction() // .replace(R.id.frame_container, fragment).commit(); // update selected item and title, then close the drawer mDrawerList.setItemChecked(position, true); mDrawerList.setSelection(position); setTitle(navMenuTitles[position]); mDrawerLayout.closeDrawer(mDrawerList); } else { // error in creating fragment Log.e("MainActivity", "Error in creating fragment"); } } @Override public void setTitle(CharSequence title) { mTitle = title; getActionBar().setTitle(mTitle); } /** * When using the ActionBarDrawerToggle, you must call it during * onPostCreate() and onConfigurationChanged()... */ @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); // Sync the toggle state after onRestoreInstanceState has occurred. mDrawerToggle.syncState(); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); // Pass any configuration change to the drawer toggls mDrawerToggle.onConfigurationChanged(newConfig); } } En este código estoy enfrentando un problema en el caso 0.
Este es mi código de HomeFragment: – package com.amar.demo;
import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.FragmentTransaction; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.amar.demo.adapter.TabsPagerAdapter; public class HomeFragment extends FragmentActivity implements ActionBar.TabListener { private ViewPager viewPager; private TabsPagerAdapter mAdapter; private ActionBar actionBar; // Tab titles private String[] tabs = { "My Restaurant", "Offers", "Search & Book", "News & Updates" }; public HomeFragment() { } public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_home, container, false); // code of tabes viewPager = (ViewPager) rootView.findViewById(R.id.pager); actionBar = getActionBar(); mAdapter = new TabsPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(mAdapter); 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)); } /** * on swiping the viewpager make respective tab selected * */ 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) { } }); return rootView; } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub } }
Este es mi código deep.xml: –
<!-- Framelayout to display Fragments --> <FrameLayout android:id="@+id/frame_container" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- Listview to display slider menu --> <ListView android:id="@+id/list_slidermenu" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="@color/list_background" android:choiceMode="singleChoice" android:divider="@color/list_divider" android:dividerHeight="1dp" android:listSelector="@drawable/list_selector" /> </android.support.v4.widget.DrawerLayout>
Este es mi código de homefragment.xml: –
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager>
- Cómo configurar las pestañas en la parte inferior de la pantalla en android?
- Eliminar las pestañas de la barra de acciones en Android
- Parte inferior de la pantalla de la barra de menús / barra de herramientas en android
- Android ViewPager con iconos
- Pestañas con los iconos que utilizan ViewPager, ¿cómo ponerlos? Adjuntando un archivo de diseño
- Tablayout sólo con iconos
- Cómo agregar el icono para las pestañas deslizables
- Las pestañas de la barra de acciones que aparecen como lista desplegable
Debe crear un fragmento con un diseño personalizado que contenga un ViewPager en él.
Siga estos pasos, se guiará en todo el proceso.
1. Cree el diseño para representar el ViewPager, el nombre que fragment_main.xml
<TabHost android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TabWidget android:id="@android:id/tabs" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0"/> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0"/> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout> </TabHost>
2. Cree un fragmento para contener el ViewPager declarado en el XML anterior, el nombre MyFragment.java
Como puede ver, declaramos el TabHost ViewPager y otros elementos declarados en el XML anterior. También en este fragmento inflamos el diseño creado antes, y un TabAdapter para manejar todas las pestañas.
import android.content.Context; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.TabHost; import android.widget.TabWidget; import java.util.ArrayList; public static class MyFragment extends Fragment { private TabHost mTabHost; private ViewPager mViewPager; private TabsAdapter mTabsAdapter; public MyFragment() { } @Override public void onCreate(Bundle instance) { super.onCreate(instance); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_main, container, false); mTabHost = (TabHost) v.findViewById(android.R.id.tabhost); mTabHost.setup(); mViewPager = (ViewPager) v.findViewById(R.id.pager); mTabsAdapter = new TabsAdapter(getActivity(), mTabHost, mViewPager); // Here we load the content for each tab. mTabsAdapter.addTab(mTabHost.newTabSpec("one").setIndicator("One"), PageOneFragment.class, null); mTabsAdapter.addTab(mTabHost.newTabSpec("two").setIndicator("Two"), PageTwoFragment.class, null); return v; } public static class TabsAdapter extends FragmentPagerAdapter implements TabHost.OnTabChangeListener, ViewPager.OnPageChangeListener { private final Context mContext; private final TabHost mTabHost; private final ViewPager mViewPager; private final ArrayList<TabInfo> mTabs = new ArrayList<TabInfo>(); static final class TabInfo { private final String tag; private final Class<?> clss; private final Bundle args; TabInfo(String _tag, Class<?> _class, Bundle _args) { tag = _tag; clss = _class; args = _args; } } static class DummyTabFactory implements TabHost.TabContentFactory { private final Context mContext; public DummyTabFactory(Context context) { mContext = context; } public View createTabContent(String tag) { View v = new View(mContext); v.setMinimumWidth(0); v.setMinimumHeight(0); return v; } } public TabsAdapter(FragmentActivity activity, TabHost tabHost, ViewPager pager) { super(activity.getSupportFragmentManager()); mContext = activity; mTabHost = tabHost; mViewPager = pager; mTabHost.setOnTabChangedListener(this); mViewPager.setAdapter(this); mViewPager.setOnPageChangeListener(this); } public void addTab(TabHost.TabSpec tabSpec, Class<?> clss, Bundle args) { tabSpec.setContent(new DummyTabFactory(mContext)); String tag = tabSpec.getTag(); TabInfo info = new TabInfo(tag, clss, args); mTabs.add(info); mTabHost.addTab(tabSpec); notifyDataSetChanged(); } @Override public int getCount() { return mTabs.size(); } @Override public Fragment getItem(int position) { TabInfo info = mTabs.get(position); return Fragment.instantiate(mContext, info.clss.getName(), info.args); } public void onTabChanged(String tabId) { int position = mTabHost.getCurrentTab(); mViewPager.setCurrentItem(position); } public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } public void onPageSelected(int position) { // Unfortunately when TabHost changes the current tab, it kindly // also takes care of putting focus on it when not in touch mode. // The jerk. // This hack tries to prevent this from pulling focus out of our // ViewPager. TabWidget widget = mTabHost.getTabWidget(); int oldFocusability = widget.getDescendantFocusability(); widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS); mTabHost.setCurrentTab(position); widget.setDescendantFocusability(oldFocusability); } public void onPageScrollStateChanged(int state) { } } }
Como puede ver, cada pestaña llama a un fragmento específico. Estos fragmentos representan el contenido de cada ficha. Así que vamos a crearlos, son muy simples, y contiene sólo un TextView .
3. Cree un fragmento para el primer contenido de la pestaña, denomínelo PageOneFragment.java
Este fragmento contiene el contenido de la primera pestaña. Puedes poner cualquier cosa dentro de este fragmento, vivirá separado de los otros fragmentos y de las otras pestañas.
Aquí inflamos la onCreateView diseño xml pageone_fragment.xml dentro del método onCreateView . Vamos a crear este diseño xml en el siguiente paso.
import android.app.Activity; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class PageOneFragment extends Fragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.pageone_fragment, container, false); } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); } @Override public void onAttach(Activity activity) { super.onAttach(activity); } @Override public void onStart() { super.onStart(); } @Override public void onResume() { super.onResume(); } }
Debemos crear el diseño de este fragmento como hemos mencionado antes.
4. Cree el diseño para el PageOneFragment, el nombre que pageone_fragment.xml
Esto es sólo un diseño simple con un TextView para representar el contenido de la pestaña. Puede construir lo que quiera dentro de este diseño, vivirá separado de los otros fragmentos y pestañas.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/first_fragment" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:background="#ff4063ff"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="First Page" android:textColor="#FFFFFF" android:textStyle="bold" android:id="@+id/firstFragmentTextView" android:layout_gravity="center_horizontal|top" /> </LinearLayout>
Como tenemos dos pestañas, tenemos dos fragmentos, uno para cada pestaña. Así que vamos a crear el segundo fragmento para el contenido de la segunda pestaña.
5. Cree el fragmento para el segundo contenido de la pestaña, denomínelo PageTwoFragment.java
Como se puede ver, inflar un diseño diferente en el método onCreateView , se llama pagetwo_fragment.xml . Lo crearemos en el siguiente paso.
import android.app.Activity; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class PageTwoFragment extends Fragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.pagetwo_fragment, container, false); } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); } @Override public void onAttach(Activity activity) { super.onAttach(activity); } @Override public void onStart() { super.onStart(); } @Override public void onResume() { super.onResume(); } }
Y como hicimos antes para el PageOneFragment, vamos a crear el diseño para el segundo fragmento también, como mencionamos antes.
6. Cree el diseño para el PageTwoFragment, el nombre que pagetwo_fragment.xml
Este es un diseño simple con un único TextView , sólo para representar el contenido. Puedes construir todo lo que quieras aquí, vivirá separado de los otros fragmentos y pestañas.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/first_fragment" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:background="#ff4063ff"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="Second Page" android:textColor="#FFFFFF" android:textStyle="bold" android:id="@+id/firstFragmentTextView" android:layout_gravity="center_horizontal|top" /> </LinearLayout>
7. Llame a este fragmento de su NavigationDrawer
Si desea llamar a este fragmento de su NavigationDrawer , dentro de la instrucción switch en el método displayView(int position) su actividad, debe hacer esto en una de sus sentencias case , por ejemplo.
case 0: fragment = new MyFragment(); break;
Aquí esta el resultado final
Un ViewPager ejecuta en un fragmento, con dos pestañas cada uno contiene un fragmento único con un contenido único.
Eso es.
Espero que esto te ayude.
Para el error en el paso 7 "Tipo no coincidente
hazlo:
replace **import android.app.Fragment** to **import android.support.v4.app.Fragment**
Y en caso de que:
android.support.v4.app.FragmentManager fragmentManager = getSupportFragmentManager(); fragmentManager.beginTransaction().replace(R.id.frame_container, fragment).commit();
public void addTab(TabHost.TabSpec tabSpec, Class<?> clss, Bundle args) { tabSpec.setContent(new DummyTabFactory(mContext)); String tag = tabSpec.getTag(); TabInfo info = new TabInfo(tag, clss, args); mTabs.add(info); mTabHost.addTab(tabSpec); notifyDataSetChanged(); }
Donde declaración de mTabs variable
Gracias