Introducción a la programación de Tabs

2. PROGRAMACIÓN MULTIMEDIA
Y
DISPOSITIVOS MÓVILES

4. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
COMENZANDO A
PROGRAMAR

5. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
LA CLASE VIEWGROUPS

6. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS

7. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
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]

11. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS SIMPLES

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

18. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
CAPTURA DE EVENTOS
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

20. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS CON INTENT

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

26. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS CON FRAGMENT

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

32. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
SCROLLABLE TABS

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

38. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
SWIPEABLE 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

46. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
COMENZANDO A PROGRAMAR
© J.D.CABRERA
TABS CON MATERIAL
DESIGN

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