Más contenido relacionado
Similar a DISPOSITIVOS MÓVILES: TABS (20)
Más de Jacinto Cabrera Rodríguez (20)
DISPOSITIVOS MÓVILES: TABS
- 8. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS CON MATERIAL DESIGN
SCROLLABLE TABS
TABS CON SWIPE VIEWS
FIXED TABS
TABS
- 9. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TAB WIDGET
TAB HOST
TABS: CONSTRUCCIÓN
- 10. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS: CONSTRUCCIÓN
TabHost [id/tabhost]
LinearLayout
TabWidget [id/tabs]
FrameLayout [id/tabcontent]
Linear Layout [id/tab1]
Linear Layout [id/tab2]
Linear Layout [id/tab3]
- 12. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS SIMPLES
<Linearlayout xmlns:android="http://schemas.android.com/apk/res/android">
<TabHost android:id=“@+id/tabhost “
<Linearlayout
<TabWidget android:id=“@+id/tabs “>
<FrameLayout android:id=“@+id/tabcontent “>
<Linearlayout android:id=“@+id/tab1“>
-CONTENIDO—
</Linearlayout>
<Linearlayout android:id=“@+id/tab2“>
-CONTENIDO—
</Linearlayout>
</FrameLayout>
</Linearlayout >
</TabHost>
</Linearlayout >
- 13. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
LO PREPARAMOS PARA CONFIGURARLO
CREAMOS LOS OBJETOS TABSPEC
OBTENEMOS LA REFERENCIA DEL TABHOST
TABS SIMPLES
- 14. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
Resources res = getResources();
TabHost tabs=(TabHost)findViewById(android.R.id.tabhost);
tabs.setup();
TabHost.TabSpec spec=tabs.newTabSpec("mitab1");
TABS SIMPLES
- 15. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
AÑADIMOS LA NUEVA PESTAÑA AL CONTROL
ASIGNAMOS UN LAYOUT A CADA PESTAÑA
INDICAMOS TEXTO E ICONO A MOSTRAR
CREAMOS UN OBJETO TABSPEC PARA CADA TAB
TABS SIMPLES
- 16. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
spec=tabs.newTabSpec("mitab1");
spec.setContent(R.id.tab1);
spec.setIndicator("TAB1",
res.getDrawable(android.R.drawable.ic_btn_speak_now));
tabs.addTab(spec);
TABS SIMPLES
- 17. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
spec=tabs.newTabSpec("mitab2");
spec.setContent(R.id.tab2);
spec.setIndicator("TAB2",
res.getDrawable(android.R.drawable.ic_dialog_map));
tabs.addTab(spec);
TABS SIMPLES
- 19. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
tabs.setOnTabChangedListener(new
OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
Log.i(“DEMOSTRACIÓN", "Pulsada pestaña: " + tabId);
}
});
TABS SIMPLES
- 21. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
import android.app.TabActivity;
import android.content.Intent;
TABS CON INTENT
- 22. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
PRINCIPAL
LAYOUT
PRINCIPAL
PESTAÑA 1
LAYOUT
PESTAÑA 1
PESTAÑA 2
LAYOUT
PESTAÑA 2
PESTAÑA 3
LAYOUT
PESTAÑA 3
INTENT
- 23. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS CON INTENT
<Linearlayout xmlns:android="http://schemas.android.com/apk/res/android">
<TabHost android:id=“@+id/tabhost “
<Linearlayout
<TabWidget android:id=“@+id/tabs “>
<FrameLayout android:id=“@+id/tabcontent “>
</FrameLayout>
</Linearlayout >
</TabHost>
</Linearlayout >
- 24. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TabHost.TabSpec fotospec = tabs.newTabSpec("fotos");
fotospec.setIndicator("", res.getDrawable(R.drawable.icon_fotos_tab));
Intent photosIntent = new Intent(this, Fotografias.class);
fotospec.setContent(photosIntent);
tabs.addTab(fotospec);
TABS CON INTENT
- 25. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
public class Videos extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.videos);
}
}
TABS CON INTENT: PESTAÑA.JAVA
- 27. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
TABS CON FRAGMENT
- 28. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
PRINCIPAL
LAYOUT
PRINCIPAL
PESTAÑA 1
LAYOUT
PESTAÑA 1
PESTAÑA 2
LAYOUT
PESTAÑA 2
PESTAÑA 3
LAYOUT
PESTAÑA 3
TABS CON FRAGMENT
- 29. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS CON FRAGMENT
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android">
<TabHost android:id=“@+id/tabhost “
<Linearlayout
<TabWidget android:id=“@+id/tabs “>
<FrameLayout android:id=“@+id/tabcontent “>
</FrameLayout>
</Linearlayout >
</TabHost>
</android.support.v4.app.FragmentTabHost>
- 30. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
TabHost.setup(this,getSupportFragmentManager(), android.R.id.tabcontent);
TabHost.addTab(
TabHost.newTabSpec("tab1").setIndicator("Tab 1", null),
Fragmento1.class, null);
TABS CON FRAGMENT
- 31. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragmento1_layout, container,false);
TextView tv = (TextView) v.findViewById(R.id.texto);
tv.setText("TOCADA LA PESTAÑA: "+this.getTag());
return v;
}
TABS CON FRAGMENT: PESTAÑA.JAVA
- 33. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
TABS CON FRAGMENT
- 34. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
SCROLLABLE TABS
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager">
</android.support.v4.app. PagerTitleStrip>
android:id="@+id/title“>
</android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>
- 35. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
public class Tabs04 extends FragmentActivity {
ViewPager viewPager=null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabs04);
viewPager= (ViewPager) findViewById(R.id.pager);
FragmentManager fragmentManager=getSupportFragmentManager();
viewPager.setAdapter(new MyAdapter(fragmentManager));
}
}
SCROLLABLE TABS
- 36. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
@Override
public int getCount() {
return 3; }
@Override
public CharSequence getPageTitle(int position) {
if(position==0) {return “Tab 1”;}
if(position==1) {return “Tab 2”;}
if(position==2) {return “Tab 3”;}
return null;
}
SCROLLABLE TABS
- 37. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
class MyAdapter extends FragmentStatePagerAdapter {
public MyAdapter(FragmentManager fm) {
super(fm); }
@Override
public Fragment getItem(int i) {
Fragment fragment=null;
if(i==0) { fragment=new Fragmento1(); }
if(i==1) { fragment=new Fragmento2(); }
if(i==2) { fragment=new Fragmento3(); }
return fragment;
}
SCROLLABLE TABS
- 39. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
import android.support.v4.app. FragmentTransaction;
SWIPEABLE TABS
- 40. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
SWIPEABLE TABS
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager">
</android.support.v4.view.ViewPager>
- 41. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
SWIPEABLE TABS
public class Actividad68 extends FragmentActivity {
ViewPager viewPager=null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_actividad67);
viewPager= (ViewPager) findViewById(R.id.pager);
final ActionBar actionBar=getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
addTabs(actionBar);
viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
- 42. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
private void addTabs(ActionBar actionBar)
{
ActionBar.Tab tab1=actionBar.newTab();
tab1.setText("Tab 1");
tab1.setTabListener(this);
actionBar.addTab(tab1);
}
SWIPEABLE TABS
- 43. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
SWIPEABLE TABS
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i2) {
Log.d("VIVZ","onPageScrolled "+i+" "+v+" "+i2);
}
@Override
public void onPageSelected(int i) {
actionBar.setSelectedNavigationItem(i);
Log.d("VIVZ","onPageSelected "+i);
}
- 44. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
SWIPEABLE TABS
@Override
public void onPageScrollStateChanged(int i) {
if(i==ViewPager.SCROLL_STATE_IDLE)
Log.d("VIVZ","onPageScrollStateChanged scroll state idle "+i);
if(i==ViewPager.SCROLL_STATE_DRAGGING)
Log.d("VIVZ","onPageScrollStateChanged scroll state dragging "+i);
if(i==ViewPager.SCROLL_STATE_SETTLING)
Log.d("VIVZ","onPageScrollStateChanged scroll state settling "+i);
}
- 45. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
class MyAdapter extends FragmentStatePagerAdapter {
public MyAdapter(FragmentManager fm) {
super(fm); }
@Override
public Fragment getItem(int i) {
Fragment fragment=null;
if(i==0) { fragment=new Fragmento1(); }
if(i==1) { fragment=new Fragmento2(); }
if(i==2) { fragment=new Fragmento3(); }
return fragment;
}
SWIPEABLE TABS
- 47. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:22.2.0‘
}
TABS: BUILDS GRANDLE
- 48. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS CON MATERIAL DESIGN
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white" />
- 49. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS CON MATERIAL DESIGN
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabs05);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new Adaptador(getSupportFragmentManager(),
Tabs05.this));
TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
}
- 50. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS CON MATERIAL DESIGN: ESTILOS
MANIFEST
TEMA
STYLES
COLOR
DIMENS
- 51. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS CON MATERIAL DESIGN: TABS CON TOOLBAR
<android.support.design.widget.CoordinatorLayout
CODIGO
<android.support.design.widget.AppBarLayout
CODIGO
<android.support.v7.widget.Toolbar
CODIGO
<android.support.design.widget.TabLayout
CODIGO
</android.support.design.widget.AppBarLayout>
CODIGO
<android.support.v4.view.ViewPager
CODIGO
</android.support.design.widget.CoordinatorLayout>
- 52. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
PERSONALIZAR LAS TABS
ACTIVIDAD DE INVESTIGACIÓN
- 53. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
PROGRAMACIÓN MULTIMEDIA
Y
DISPOSITIVOS MÓVILES