Download - m1 Lab3 Nuevo
-
7/21/2019 m1 Lab3 Nuevo
1/33
GUA DE LABORATORIO 3
Diseo de interfaces de usuario (2/2) y tareas
en background
-
7/21/2019 m1 Lab3 Nuevo
2/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 1
LABORATORIO
Objetivos:
Identificar los componentes que nos proporciona el SDK de Android. Disear aplicaciones utilizando los controles adecuadamente
Equipos , Materiales, Programas y Recursos :
PC con Sistema Operativo Windows o Linux Eclipse IDE Android Development Tool para Eclipse Android SDK
Introduccin:
En la presente sesin se detalla los fundamentos para el diseo de interfaces en Android.
Seguridad:
Ubicar maletines y/o mochilas en el gabinete al final de aula de laboratorio. No ingresar con lquidos ni comida al aula de laboratorio. Al culminar la sesin de laboratorio, apagar correctamente la computadora y el
monitor.
Preparacin:
Durante el desarrollo de los temas de clase se tendrn ejercicios explicativos en cada uno delos puntos, ello le dar a la sesin una interaccin de la teora y la parte prctica, ya que entodo el momento el alumno podr comprobar en su propia PC, todos los tems del manual.
Procedimiento y Resultados:
-
7/21/2019 m1 Lab3 Nuevo
3/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 2
Pe staas
TabsActivity.java package mod1.lab3;
import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.widget.TabHost;
public class TabsActivity extends Activity {
@Override protected void onCreate(Bundle savedInstanceState ) {
super .onCreate( savedInstanceState );setContentView(R.layout. activity_tabs );
TabHost tabs =(TabHost)findViewById(android.R.id. tabhost );
tabs .setup();
TabHost.TabSpec spec =tabs .newTabSpec( "pes1" );spec .setContent(R.id. pestania1 );spec .setIndicator( "Inicio" );tabs .addTab( spec );
spec =tabs .newTabSpec( "pes2" );spec .setContent(R.id. pestania2 );spec .setIndicator( "Servicios" );tabs .addTab( spec );
-
7/21/2019 m1 Lab3 Nuevo
4/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 3
spec =tabs .newTabSpec( "pes3" );spec .setContent(R.id. pestania3 );spec .setIndicator( "Contacto" );tabs .addTab( spec );
tabs .setCurrentTab(0);
}
@Override public boolean onCreateOptionsMenu(Menu menu ) {
// Inflate the menu; this adds items to the action bar ifit is present.
getMenuInflater().inflate(R.menu. tabs , menu );return true ;
}
@Override public boolean onOptionsItemSelected(MenuItem item ) {
// Handle action bar item clicks here. The action barwill
// automatically handle clicks on the Home/Up button, solong
// as you specify a parent activity inAndroidManifest.xml.
int id = item .getItemId();if ( id == R.id. action_settings ) {
return true ;}return super .onOptionsItemSelected( item );
}}
-
7/21/2019 m1 Lab3 Nuevo
5/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 4
activity_tabs.java
-
7/21/2019 m1 Lab3 Nuevo
6/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 5
Action Bar y Estilos
MenuPrincipalActivity.java package mod1.lab3;
import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.widget.Toast;
public class MenuPrincipalActivity extends Activity {
@Override protected void onCreate(Bundle savedInstanceState ) {
super .onCreate( savedInstanceState );
setContentView(R.layout. activity_menu_principal );
this .getActionBar().setHomeButtonEnabled( true );
}
@Override public boolean onCreateOptionsMenu(Menu menu ) {
// Inflate the menu; this adds items to the action bar ifit is present.
getMenuInflater().inflate(R.menu. menu_principal , menu );return true ;
}
@Override public boolean onOptionsItemSelected(MenuItem item ) {
-
7/21/2019 m1 Lab3 Nuevo
7/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 6
switch ( item .getItemId()) {case android.R.id. home :
Toast. makeText ( this , "Seleccionado el cono " ,Toast. LENGTH_SHORT ).show();
return true ;
case R.id. MnuOpc1 :Toast. makeText ( this , "Seleccionado la opcin 1: " ,Toast. LENGTH_SHORT ).show();
return true ;case R.id. MnuOpc2 :
Toast. makeText ( this , "Seleccionado la opcin 2: " ,Toast. LENGTH_SHORT ).show();
return true ;case R.id. MnuOpc3 :
Toast. makeText ( this , "Seleccionado la opcin 3: " ,Toast. LENGTH_SHORT ).show();
return true ;default :
return super .onOptionsItemSelected( item );}
}}
-
7/21/2019 m1 Lab3 Nuevo
8/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 7
activity_menu_principal.xml
-
7/21/2019 m1 Lab3 Nuevo
9/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 8
Nota: Modificar el archivo /res/menu/menu_principal.xml:
menu_principal.xml
-
7/21/2019 m1 Lab3 Nuevo
10/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 9
Nota: Modificar el archivo /res/values/styles.xml:
styles.xml
@style/EstiloActionBar
@style/EstiloTitleText
#ffffff
#00ff00
-
7/21/2019 m1 Lab3 Nuevo
11/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 10
Men Con textu al
MenuContextualActivity.java package mod1.lab3;
import android.app.Activity;import android.os.Bundle;import android.view.ContextMenu;import android.view.ContextMenu.ContextMenuInfo;import android.view.Menu;import android.view.MenuInflater;import android.view.MenuItem;import android.view.View;import android.widget.TextView;
public class MenuContextualActivity extends Activity {
static TextView lblMensaje ;
@Override protected void onCreate(Bundle savedInstanceState ) {
super .onCreate( savedInstanceState );setContentView(R.layout. activity_menu_contextual );
// Obtenemos las referencias a los controles lblMensaje = (TextView) findViewById(R.id. LblMensaje );
// Asociamos los mens contextuales a los controles
-
7/21/2019 m1 Lab3 Nuevo
12/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 11
registerForContextMenu( lblMensaje );
}
@Override
public boolean onCreateOptionsMenu(Menu menu ) {// Inflate the menu; this adds items to the action bar ifit is present.
getMenuInflater().inflate(R.menu. menu_contextual , menu );return true ;
}
@Override public boolean onOptionsItemSelected(MenuItem item ) {
// Handle action bar item clicks here. The action barwill
// automatically handle clicks on the Home/Up button, so
long // as you specify a parent activity in
AndroidManifest.xml. int id = item .getItemId();if ( id == R.id. action_settings ) {
return true ;}return super .onOptionsItemSelected( item );
}
@Override public void onCreateContextMenu(ContextMenu menu , View v ,
ContextMenuInfo menuInfo ) {super .onCreateContextMenu( menu , v , menuInfo );
MenuInflater inflater = getMenuInflater();inflater .inflate(R.menu. menu_context_item , menu );
}
@Override public boolean onContextItemSelected(MenuItem item ) {
switch ( item .getItemId()) {case R.id. CtxLblOpc1 :
lblMensaje .setText( "Etiqueta: Opcion 1 pulsada!" );return true ;
case R.id. CtxLblOpc2 :lblMensaje .setText( "Etiqueta: Opcion 2 pulsada!" );return true ;
default :return super .onContextItemSelected( item );
}}
}
-
7/21/2019 m1 Lab3 Nuevo
13/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 12
activity_menu_contextual.xml
-
7/21/2019 m1 Lab3 Nuevo
14/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 13
Nota: Crear el archivo en /res/menu/menu_context_item.xml:
menu_context_item.xml
-
7/21/2019 m1 Lab3 Nuevo
15/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 14
Men Contextual co n L ista
ListaMenuContextualActivity.java package mod1.lab3;
import android.app.Activity;import android.os.Bundle;import android.view.ContextMenu;import android.view.ContextMenu.ContextMenuInfo;import android.view.Menu;import android.view.MenuInflater;import android.view.MenuItem;import android.view.View;import android.widget.AdapterView;import android.widget.ArrayAdapter;import android.widget.ListView;import android.widget.Toast;
public class ListaMenuContextualActivity extends Activity {
static ListView lstLista ;
@Override protected void onCreate(Bundle savedInstanceState ) {
super .onCreate( savedInstanceState );setContentView(R.layout. activity_lista_menu_contextual );
-
7/21/2019 m1 Lab3 Nuevo
16/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 15
lstLista = (ListView) findViewById(R.id. LstLista );String[] datos = new String[] { "Elem1" , "Elem2" ,
"Elem3" , "Elem4" , "Elem5" };ArrayAdapter adaptador = new
ArrayAdapter( this , android.R.layout. simple_list_item_1 ,
datos ); lstLista .setAdapter( adaptador );registerForContextMenu( lstLista );
}
@Override public boolean onCreateOptionsMenu(Menu menu ) {
// Inflate the menu; this adds items to the action bar ifit is present.
getMenuInflater().inflate(R.menu. lista_menu_contextual ,menu );
return true ;
}
@Override public boolean onOptionsItemSelected(MenuItem item ) {
// Handle action bar item clicks here. The action barwill
// automatically handle clicks on the Home/Up button, solong
// as you specify a parent activity inAndroidManifest.xml.
switch ( item .getItemId()) {case R.id. CtxLstOpc1 :
Toast. makeText ( this , "Etiqueta: Opcion 1 pulsada!" ,Toast. LENGTH_LONG ).show();
return true ;case R.id. CtxLstOpc2 :
Toast. makeText ( this , "Etiqueta: Opcion 2 pulsada!" ,Toast. LENGTH_LONG ).show();
return true ;default :
return super .onContextItemSelected( item );}
}
@Override public void onCreateContextMenu(ContextMenu menu , View v ,
ContextMenuInfo menuInfo ) {super .onCreateContextMenu( menu , v , menuInfo );MenuInflater inflater = getMenuInflater();
AdapterView.AdapterContextMenuInfo info =(AdapterView.AdapterContextMenuInfo) menuInfo ;
menu .setHeaderTitle( lstLista .getAdapter().getItem( info . position ).toString());
inflater .inflate(R.menu. menu_context_lista , menu );}
}
-
7/21/2019 m1 Lab3 Nuevo
17/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 16
activity_lista_menu_contextual.xml
-
7/21/2019 m1 Lab3 Nuevo
18/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 17
Nota: Crear el archivo en /res/menu/menu_context_lista.xml:
menu_context_lista.xml
-
7/21/2019 m1 Lab3 Nuevo
19/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 18
Tabs Action Bar
TabsActionBarActivity.java package mod1.lab3;
import android.app.ActionBar;import android.app.Activity;import android.app.Fragment;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;
public class TabsActionBarActivity extends Activity {
@Override protected void onCreate(Bundle savedInstanceState ) {
super .onCreate( savedInstanceState );setContentView(R.layout. activity_tabs_action_bar );
ActionBar abar = getActionBar();
// Se configura la navegacin a travs de Tabs abar .setNavigationMode(ActionBar. NAVIGATION_MODE_TABS );
// Ocultar el ttulo del Activity abar .setDisplayShowTitleEnabled( false );
// Creacin de tabs ActionBar.Tab tab1 = abar .newTab().setText( "Pestaa 1" );
ActionBar.Tab tab2 = abar .newTab().setText( "Pestaa 2" );
-
7/21/2019 m1 Lab3 Nuevo
20/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 19
//Creamos los fragmentos de cada tab Fragment tab1frag = new Tab1Fragmento();Fragment tab2frag = new Tab2Fragmento();
//Asociamos los listener a los tabs tab1 .setTabListener( new MiTabListener( tab1frag ));tab2 .setTabListener( new MiTabListener( tab2frag ));
// Agregar los tabs al ActionBar abar .addTab( tab1 );abar .addTab( tab2 );
}
@Override public boolean onCreateOptionsMenu(Menu menu ) {
// Inflate the menu; this adds items to the action bar ifit is present.
getMenuInflater().inflate(R.menu. tabs_action_bar , menu );return true ;
}
@Override public boolean onOptionsItemSelected(MenuItem item ) {
// Handle action bar item clicks here. The action barwill
// automatically handle clicks on the Home/Up button, solong
// as you specify a parent activity inAndroidManifest.xml.
int id = item .getItemId();if ( id == R.id. action_settings ) {
return true ;}return super .onOptionsItemSelected( item );
}}
-
7/21/2019 m1 Lab3 Nuevo
21/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 20
activity_tabs_action_bar.xml
-
7/21/2019 m1 Lab3 Nuevo
22/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 21
Nota: Crear la clase Java en el paquete mod1.lab3:
MiTabListener.java package mod1.lab3;
import android.app.ActionBar.Tab;import android.app.ActionBar.TabListener;import android.app.Fragment;import android.app.FragmentTransaction;import android.util.Log;
public class MiTabListener implements TabListener {
private Fragment fragment ;
public MiTabListener(Fragment fg ){
this . fragment = fg ;}
@Override public void onTabReselected(Tab tab , FragmentTransaction ft ) {
Log. i ( "ActionBar" , tab .getText() + " reseleccionada." );}
@Override public void onTabSelected(Tab tab , FragmentTransaction ft ) {
Log. i ( "ActionBar" , tab .getText() + " seleccionada." );ft .replace(R.id. tabs_contenedor , fragment );
}
@Override public void onTabUnselected(Tab tab , FragmentTransaction ft ) {
Log. i ( "ActionBar" , tab .getText() + " deseleccionada." );ft .remove( fragment );
}}
-
7/21/2019 m1 Lab3 Nuevo
23/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 22
Nota: Crear la clase Java en el paquete mod1.lab3:
Tab1Fragmento.java package mod1.lab3;
import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;
public class Tab1Fragmento extends Fragment {@Override public View onCreateView(LayoutInflater inflater ,
ViewGroup container , Bundle savedInstanceState ) {return inflater .inflate(R.layout. tabs_fragmento1 , container ,
false );}
}
-
7/21/2019 m1 Lab3 Nuevo
24/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 23
Nota: Crear la clase Java en el paquete mod1.lab3:
Tab2Fragmento.java package mod1.lab3;
import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;
public class Tab2Fragmento extends Fragment {@Override public View onCreateView(LayoutInflater inflater ,
ViewGroup container , Bundle savedInstanceState ) {return inflater .inflate(R.layout. tabs_fragmento2 , container ,
false );}
}
-
7/21/2019 m1 Lab3 Nuevo
25/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 24
Nota: Crear el archivo en /res/layout/tabs_fragmento1.xml:
tabs_fragmento1.xml
-
7/21/2019 m1 Lab3 Nuevo
26/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 25
Nota: Crear el archivo en /res/layout/tabs_fragmento2.xml:
tabs_fragmento2.xml
-
7/21/2019 m1 Lab3 Nuevo
27/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 26
Nota: Modificar el archivo /res/values/styles.xml:
styles.xml
@style/EstiloActionBar
@style/EstiloTitleText
@style/EstiloTabTitleText
#ffffff
#00ff00
#0000ff 18sp
-
7/21/2019 m1 Lab3 Nuevo
28/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 27
Services (Tareas en Backgro und )
Nota: Crear la clase Java en el paquete mod1.lab3:
MostrarHoraService.java package mod1.lab3;
import java.util.Calendar;import java.util.GregorianCalendar;import java.util.Timer;import java.util.TimerTask;
import android.app.Service;import android.content.Intent;import android.os.Handler;import android.os.IBinder;import android.widget.Toast;
public class MostrarHoraService extends Service {
private Timer mTimer = new Timer(); public static final long INTERVALO_SEGUNDOS = 4 * 1000;
// Handler es una clase que crea otro hilo de ejecucin paraevitar
// el error can't create handler inside thread that has notcalled
// looper.prepare() private Handler mHandler ;
public MostrarHoraService() {mHandler = new Handler();
}
@Override public IBinder onBind(Intent arg0 ) {
return null ;}
@Override public int onStartCommand(Intent intent , int flags , int
startId ) {mTimer .scheduleAtFixedRate( new TimeDisplayTimerTask(), 0,
INTERVALO_SEGUNDOS );return START_STICKY ;
}
// Inicio de Timer class TimeDisplayTimerTask extends TimerTask {
@Override public void run() {
-
7/21/2019 m1 Lab3 Nuevo
29/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 28
// Crear otro hilo mHandler .post( new Runnable() {
@Override public void run() {
GregorianCalendar gc = new GregorianCalendar();String hora = gc .get(Calendar. HOUR ) + ":"
+ gc .get(Calendar. MINUTE ) + ":" + gc .get(Calendar. SECOND );Toast. makeText (getBaseContext(), hora ,
Toast. LENGTH_SHORT ).show();}
});}
}
@Override public void onDestroy() {
super .onDestroy();Toast. makeText ( this , "Service Destroyed" ,
Toast. LENGTH_LONG ).show();}
}
Nota: Agregar al AndroidManifest.xml, dentro de la etiqueta :
...
...
Nota: Agregar al Activity que tiene el Launcher, en el mtodo onCreate()
...startService( new Intent(getBaseContext(), MostrarHoraService. class ));...
-
7/21/2019 m1 Lab3 Nuevo
30/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 29
Widget
Nota: Crear la clase Java en el paquete mod1.lab3:
SaludoWidget.java package mod1.lab3;
import android.appwidget.AppWidgetManager;import android.appwidget.AppWidgetProvider;import android.content.ComponentName;import android.content.Context;import android.util.Log;import android.widget.RemoteViews;
public class SaludoWidget extends AppWidgetProvider {
@Override public void onUpdate(Context context , AppWidgetManager
appWidgetManager , int [] appWidgetIds ) {Log. i ( "====>" , "En onUpdate()" );
ComponentName thisWidget = new ComponentName( context ,SaludoWidget. class );
int [] widgetId =appWidgetManager .getAppWidgetIds( thisWidget );
RemoteViews remoteViews = new RemoteViews( context .getPackageName(), R.layout. widget_saludo );
-
7/21/2019 m1 Lab3 Nuevo
31/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 30
remoteViews .setTextViewText(R.id. txtMensaje , "Bienvenidojugador" );
appWidgetManager .updateAppWidget( widgetId , remoteViews );}
}
-
7/21/2019 m1 Lab3 Nuevo
32/33
Tecsup
Dpto. de Informtica David Rodrguez - [email protected] Pg. 31
Nota: Crear el archivo en /res/layout/. Adems copiar un archivo llamado jugador.png en lacarpeta /res/drawable/.
widget_saludo.xml
-
7/21/2019 m1 Lab3 Nuevo
33/33
Tecsup
Nota: Crear el archivo en la carpeta /res/menu/:
menu_widget_saludo.xml
Nota: Agregar al AndroidManifest.xml, dentro de la etiqueta :
Conclusiones:
En la presente sesin, se detall el diseo de interfaces en Android.