iOS : Ejercicio 2. Cambiar texto label por click en button

Blog >Lista ejercicios >  Ejercicio 2
Vamos con el segundo ejercicio del tutorial para aprender iOS:

EJERCICIO 2: CAMIAR TEXTO DEL OBJETO LABEL POR MEDIO DE CLICK EN BOTON

En el segundo ejercicio del tutorial, primero creamos un proyecto. Vamos a trabajar para hacer esta app en entorno de iPhone,así que hacemos click en la clase Main_iPhone.storyboard para que nos aparezca un View Controller en el que vamos a arrastar un label y un Button.

Vamos a trabajar en la clase ViewController, donde :

En el .h vamos a decirle al programa que vamos a usar
En el .m vamos a decirle al programa que vamos a hacer

Comenzamos, entonces lo primero que hay que decirle al programa que vamos a usar el InterfaceBuilder, así que el archivo.h quedaría así :

#import UIKit/UIKit.h

@interface ViewController :UIViewController{

//OBJETOS

//REFERENCIA AL AL LABEL

IBOutlet UILabel *label;

}

//ACCIONES Y PROPIEDADES

//ACCION PINCHAR BOTON

-(IBAction)pincharBoton;

@end

En iOS se usa * para los objetos ya que se pueden considerar punteros para ahorrar memoria, ahora vamos al archivo .m, y ahi escribimos el siguiente código :

#import "ViewController.h"

@implementation ViewController

-(IBAction)pincharBoton{
label.text=@"TheBestAndroide";

}

@end

Bien, ya sólo nos faltan las conexiones para que iOS sepa cuales son los objetos de la View, y lo hacemos de la siguiente manera, seleccionamos el label, botón derecho en el label y seleccionamos new referencing Outlet Collections, en el circulito de la derecha hacemos click con el ratón y sin soltar lo arrastramos hasta el label, al soltar aparecerá el nombre que hemos seleccionado en el archivo .h, ya tenemos la conexión al label

Ahora con el boton hacemos la misma operación, solo que  esta vez seleccionando la opción Touch up inside, que significa clickar dentro del botón.

Y este es el resultado

Podeis descargar el código fuente de thebestandroide con sólo compartir en facebook,twitter,linkedin o suscribirte a nuestro canal RSS más abajo. 

Indice

Ejercicio anterior

Siguiente ejercicio

Categories: developer iOS, ejercicio iOS, ios cambiar texto label, ios change text label, thebestandroide ejercicios ios

iOS : Ejercicio 1. Cambiar de View Controller

Blog >Lista ejercicios >  Ejercicio 1

Hola desarrolladores, voy a empezar con este post una serie de ejercicios para programar en IOS.
Vamos a ir desde 0 a cada vez más complicado, iOS se programa mediante XCode, comenzamos con una View Controller que desde un botón, vaya a otra View Controller y esta segunda, tenga un botón que vuelva a la primera :

NOTA: NO VAMOS A TRATAR NINGUN CONCEPTO DE PROGRAMACIÓN DE OBJETIVE-C EN ESTE EJERCICIO :

EJERCICIO 1. Pasar de una View Controller a otra de forma gráfica.


Abrimos X-Code, new Proyect  Single-View-Application

Nos creará 6 archivos :

AppDelegate.h
AppDelegate.m
ViewController.h
ViewController.m
MainStoryboard_iPhone.storyboard
MainStoryboard_iPad.storyboard

Los archivos .h son las cabeceras donde se declaran los atributos de las clases, mientras que los .m son donde se implementa el código. Nosotros pincharemos sobre

MainStoryboard_iPhone.storyboard
MainStoryboard_iPad.storyboard

Estas clases, gestionan las interacciones de la pantalla del dispositivo, nosotros trabajaremos sobre la de iPhone.

Ahora arrastramos en el cuadro de abajo a la derecha en objets, un label a la pantalla principal.Una vez echo esto, seleccionamos el label, y en el panel de la derecha donde aparecen las propiedades de los objetos cambiamos el texto "label" por "Thebestandroide".
En este panel estan todas las propiedades del label, o del objeto que se seleccione. En este caso, podremos subir o bajar el tamaño de la letra, cambiar el color... etc

Volvemos al panel de objetos y cambiamos el target a controls, ahí arrastramos un botón con texto a la interfad.
Modificamos propiedades en el panel de arriba segun nuestros gustos :

Ahora arrastramos un object que se llama View Controller para crear la segunda pantalla.

Para poder insertar elementos en la segunda vista hace falta que clickemos en el cuadro inferior debajo, donde pone "View Controller", seguidamente insertamos un label y otro boton, de tal manera que quede así :

Para fabricar la relación entre el boton de la primera vista y la segunda vista, lo que tenemos que hacer es clickar sobre el botón del primer view controller pulsando la tecla control y arrastrandolo a la segunda vista,de las 3 opciones que nos aparecen, elegir "model".
Le indicaremos al programa que tiene que pasar a la segunda vista clickando en el botón de la primera, y con el boton de la segunda vista, realizar la misma operación hacia la primera vista de tal manera que quede así:

Indice

Siguiente ejercicio

Categories: developer iOS, ejercicio iOS, iOS Cambiar Viewcontroller, thebestandroide ejercicios ios

ThebestAndroide : iOS

Este es el apartado del blog Thebestandroide dedicado a la programación a iOS, aquí explico  qué es iOS y como se usa :

iOS es el sistema operativo de Apple diseñado para el iPhone originalmente, y a posteriori se implementó para el iPod, iPad y Apple TV.

iOS deriva de Mac OS X, que esta basado en Darwin BSD, que es el sistema operativo que utilizaba Unix.

iOS se centra en un sistema que se conoce como manipulación directa con gestos multitáctiles como interruptores, botones o deslizadores.iOS cuenta entre otras cosas con cuatro capas de abstracción al usuario:

ARQUITECTURA SOFTWARE

La arquitectura del software está basada en capas. 

Son las capas de alto nivel la que aportan las funcionalidades necesarias a la hora de desarrollar aplicaciones :

• COCOA TOUCH : Posee una ifraestructura básica usada para las aplicaciones (frameworks). Basada en el lenguaje de programación Objetive-C, uno de los lenguajes que soporta el IDE Xcode, que es mediante el cual se programan aplicaciones. Esta capa se compone de :

1. Fundation framework : NSObject, que es el objeto del que que dependen todos los objetos que introduzcas en tu aplicación.

1. UIKit framework : Trabaja con la vista de la aplicación.

• MEDIA : Provee de tecnología 2D y 3D además de soporte para audio y video. Esta capa está basada en C y Objetive C.

• MEDIACORE SERVICES Y CORE OS : Interfaces básicas que controlan los servicios básicos.

En la página oficial de desarrolladores para Apple, encontrareis toda la información necesaria, podeis acceder desde aquí. 

SDK de Xcode

El SDK de iOS se compone de varias partes para poder programar app´s, y consta de estas partes :

• XCODE : IDE que permite el desarrollo de aplicaciones para iOS y para MAC OS X, soporta múltples lenguajes,como C, C++, JAVA, AppleScript, y entre ellos objetive-C, que en realidad es un C preparadao exclusivamente para el sistema operativo Mac X OS, diseñado para editar, compilar y depurar código fuente.

• INTERFACE BUILDER : Crea las interfaces gráficas y vinculadas con Xcode.

• SIMULADOR iOS : Es el simulador para probar aplicaciones, cabe destacar que este simulador, es muchísimo más rápido que el que se usa para Android, y posiblemente las aplicaciones corran más rápido que en un dispositivo real. Así es Mac, genial...

•  INSTRUMENTS : Prueba el rendimiento de la aplicación desarrollada, su uso de la memoria, su gestión, etc

Este SDK esta integrado con los frameworks Cocoa y CocoaTouch, Live issues avisa de los errores de código y además, está en plena interacción con el portal Web de desarrolladores. Su compilador es Apple LLVM Compiler, además de tener un autocompletar el código en tiempo de desarrollo en tiempo real.

Bien, para desarrolladores que ya sea porque no tengan recursos para obtener un MAC o porque no quieran gastarse el dinero para comprarse un ordenador sólo para aprender a programar en iOS, la solución es simple : Descargar VMWARE, su parche y una imagen de IOS, aunque ya os aviso que el proceso consta de 7 a 10 GB.

Si quereis más información, consultar este post de la mano de los taringueros, aquí.

Estoy trabajando en ello, pero ya podeis disponer de unos cuantos ejercicios básicos para empezar a programar en Objetive-C  que comparto a través de mi blog Thebestandroide.

• Objetive C y la programación en Xcode

1. Mensajes y tipos de datos
2. Nonatomic y atomic
3. Snippets en Xcode

• Ejercicios básicos  iOS

1. Cambiar de View Controler 
2. Cambiar texto de label mediante click a botón
3. Cambiar texto de label mediante click a botón II
4. Cambiar ImageView mediante click a botón 
5. Arquitectura Tab Bar
6. Usar UINavigation Básico
7. Hacer nuestra Lista de elementos
8. Hacer nuestra Lista de elementos II
9. Hacer nuestra Lista de elementos III
10. Varios tipos de AlertDialog
11. Localización
12. MapView en tu dispositivo
13. Acelerómetro y CMMotionManager
14. Cámara y galería de fotos
15. Multitasking I
16. Multitasking II
17. Multitasking III  
18. Core Animation : Transición entre vistas  
19. Reproducción de mp3  
20. Reproducción de video  
21. Cargar HTML, Javascript o una URL en un IUWebView  
22. Facebook & Twitter  
23. Accediendo al directorio Documents de nuestro iPhone
    

ESPACIO EN CONSTRUCCIÓN, DISCULPEN MOLESTIAS

Podeis descargar el código fuente de thebestandroide con sólo compartir en facebook,twitter,linkedin o suscribirte a nuestro canal RSS más abajo. 

Categories: developer iOS, developer mobile ios, thebestandroide, thebestandroide ios

Android : Context Menu con imagen por item

Blog >Lista Soluciones >  Context Menu II


Context Menu con ImageView + texto por item

Continuamos con la extensión del post Menu Contextual, en esta ocasión vamos a hacer un contextMenu con una imagen por item.

Aunque lo usemos como ContextMenu, en realidad es un dialogo con una vista personalizada, vamos a utilizar un ListView.

Para seguir con este post es imprescindible tener un listview con imagen + texto, podreis encontrar el código necesario en este post anterior ListView

Una vez tengamos nuestro Listview, simplemente tenemos que convertir esa listview en un AlertDialog clicable, que hará la función de contextMenu. Hay que hacer este "apaño" porque la clase MenuContext no acepta imágenes, ya sea intentando ponerla desde XML como

Como he dicho anteriormente contamos con las siguientes clases y recursos del post ListView que las enumero a continuación:

• elemento.java 
• MenuAdapter.java 
• itemlist.xml 
• imágenes icon1, icon2, icon3
• iconomenujuego 

Creamos la clase ContextMenuList, en la que jugamos con el adaptador MenuAdapter, para crear el Dialog con los elementos de su lista, es decir icono + texto:
 

public class ContextMenuList implements DialogInterface.OnCancelListener, DialogInterface.OnDismissListener{
 
 private Context context;
 private String titulo;
 private ArrayList arraydir;
 private Activity a;
 int iconoid;
 
 MenuAdapter adaptador;
 //CONSTRUCTOR
 public ContextMenuList(Context c,String titulo,Activity a,int icon) {
  this.context=c;
  this.titulo=titulo;
  this.a=a;
  this.iconoid=icon;
        arraydir = new ArrayList();
 }
 //CREAMOS LA LISTA DE LOS ELEMENTOS DEL MENU
 public void crearListaAdaptador(int recurso, String titulo){
        elemento item;
        item = new elemento(context.getResources().getDrawable(recurso),titulo);
        arraydir.add(item);
 }
 //SE LLAMA UNA VEZ SE ACABA DE LLAMAR A LOS ITEMS
 public void adaptadorCompleto(){
        adaptador= new MenuAdapter(a, arraydir);
 }
 //METODO QUE CREA EL ALERTDIALOG
 public Dialog createMenu() {
  final AlertDialog.Builder builder = new AlertDialog.Builder(context);
  builder.setTitle(titulo);
  builder.setIcon(context.getResources().getDrawable(iconoid));
  builder.setAdapter(adaptador, new DialogInterface.OnClickListener() {
  @Override
  public void onClick(DialogInterface dialoginterface, int i) {
   elemento item = (elemento) adaptador.getItem(i);

   }
  });
  builder.setInverseBackgroundForced(true);
  AlertDialog dialog = builder.create();
  dialog.setOnCancelListener(this);
  dialog.setOnDismissListener(this);
  
  return dialog;
 }
 @Override
 public void onDismiss(DialogInterface dialog) {
 // TODO Auto-generated method stub
 }
 @Override
 public void onCancel(DialogInterface dialog) {
   // TODO Auto-generated method stub
 }
}

Y nuestra actividad principal en la que sólo hemos colocado un botón para cuando hagamos click aparezca el context menu es así :
 

public class MainActivity extends Activity {
 private Button b1;
 private ContextMenuList MenuContextual;
 Dialog dialog;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  MenuContextual=new ContextMenuList(this, "Graficos", this,getResources().getIdentifier("iconomenujuego" , "drawable", getPackageName()));
  MenuContextual.crearListaAdaptador(getResources().getIdentifier("icon1" , "drawable", getPackageName()), " Bitmaps");
  MenuContextual.crearListaAdaptador(getResources().getIdentifier("icon2" , "drawable", getPackageName()), " Vectorial");
  MenuContextual.crearListaAdaptador(getResources().getIdentifier("icon3" , "drawable", getPackageName()),  " 3D");
  MenuContextual.adaptadorCompleto();
  
  
  b1=(Button) findViewById(R.id.button1);
  b1.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    dialog=MenuContextual.createMenu();
    dialog.show();
   }
  });
    } 
}

Pues ya tenemos nuestro Dialog camuflado de Menu Context y con todas sus funcionalidades

Y este es el resultado :

Podeis descargar el código fuente de thebestandroide con sólo compartir en facebook,twitter,linkedin o suscribirte a nuestro canal RSS más abajo. 

Descargar Context Menu con imágenes.

Categories: Android Context menu, Android context menu example, Android context menu item icon, Android context menu item image

Android : Context Menu al hacer click en un button

Blog >Lista Soluciones >  Context Menu I

Vamos a ver como crear menús contextuales con RadioButton.


Lo primero que vamos a hacer es asociar nuestra actividad principal con el menú contextual mediante un botón que tendremos en la misma.

Ahora vamos a crear nuestro menú contextual mediante un recurso xml, así en que en la carpeta res/menu añadimos un nuevo archiuvo xml en que habrá este código:

A continuación hay que sobreescribir el evento encargado de construir los menús contextuales en los distintos controles de la aplicación, así que llamammos a onCreateContextMenu()

Para cada vez que necesitemos mostrar un menú contextual.
En él usamos la referencia inflater para generar la extructura del menú.

@Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //REFERENCIA AL BOTON EN LA VISTA
  b1=(Button) findViewById(R.id.button1);
  //EVENTO ONCLICK
  b1.setOnClickListener(new OnClickListener() {
   //ABRIR EL MENU CONTEXTUAL
   @Override
   public void onClick(View v) {

    registerForContextMenu(v);
    openContextMenu(v);
   }
  });
 }
 public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo){
  super.onCreateContextMenu(menu, v, menuInfo); 
  MenuInflater inflater= getMenuInflater();
  inflater.inflate(R.menu.menucontext_1, menu);
 }

Y por último, vamos a implementar una función para controlar las acciones según se pulse en un item u otro.

 public boolean onContextItemSelected(MenuItem item){
  switch (item.getItemId()){
  case R.id.menugraficos1:
   return true;
  case R.id.menugraficos2:
   return true;
  case R.id.menugraficos3:
   return true;
  default:
   return super.onContextItemSelected(item);
  }
 }

Y este es el resutado :

Podeis descargar el código fuente de esta primera parte desde Thebestandroide más abajo :

Descargar Context Menu I.

Bien, ahora queremos que aparezca un radioButton por cada item que haya en el menú contextual, así que lo primero que hacemos es cambiar el recurso XML para que aparezcan:

Al poner la etiqueta group con el parámetro checkableBehavior="single" le decimos que todos los radioButton están en un mismo grupo y con ese parámetro en "single" hacemos que sólo se pueda seleccionar 1 de todos.
Finalmente añadimos varias lineas para que ejecuten ese comportamiento cada vez que hacemos click en un item en onContextItemSelected();

public boolean onContextItemSelected(MenuItem item){
  switch (item.getItemId()){
  case R.id.menugraficos1:
   item.setChecked(true);
   return true;
  case R.id.menugraficos2:
   item.setChecked(true);
   return true;
  case R.id.menugraficos3:
   item.setChecked(true);
   return true;
  default:
   return super.onContextItemSelected(item);
  }
 }

Y este es el resultado:

Ya que estamos, y para hacerlo más completo vamos a introducirle un titulo y una imagen al menú para que aparezca siempre que este salte con estas 2 líneas:

 menu.setHeaderTitle("Gráficos");
 menu.setHeaderIcon(R.drawable.iconomenujuego);

Previamente a estas líneas arrastramos a la carpeta drawable para tener la imagen disponible como recurso.

Así que la función quedaría así

 public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo){
  super.onCreateContextMenu(menu, v, menuInfo); 
  menu.setHeaderTitle("Gráficos");
  menu.setHeaderIcon(R.drawable.iconomenujuego);
  MenuInflater inflater= getMenuInflater();
  inflater.inflate(R.menu.menucontext_1, menu);

Y este es el resultado :

Bueno una vez todo explicado, a continuación pongo el código entero :

El código del recurso XML, osea el context menu

El código de la actividad principal

public class MainActivity extends Activity {
 private Button b1;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  b1=(Button) findViewById(R.id.button1);

  b1.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    lanzarMenu(v);
   }
  });
 }
 public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo){
  super.onCreateContextMenu(menu, v, menuInfo); 
  menu.setHeaderTitle("Gráficos");
  menu.setHeaderIcon(R.drawable.iconomenujuego);
  MenuInflater inflater= getMenuInflater();
  inflater.inflate(R.menu.menucontext_1, menu);
 }

 public boolean onContextItemSelected(MenuItem item){
  switch (item.getItemId()){
  case R.id.menugraficos1:
   item.setChecked(true);
   return true;
  case R.id.menugraficos2:
   item.setChecked(true);
   return true;
  case R.id.menugraficos3:
   item.setChecked(true);
   return true;
  default:
   return super.onContextItemSelected(item);
  }
 }
 //funcion para lanzar el menú
 public void lanzarMenu(View v){
  registerForContextMenu(v);
  openContextMenu(v);
 }
}

Ahora veremos algo aun MÁS interesante respecto a los menus contextuales, ¿Cómo insertar imágenes en cada item del menu contextual?  Lo haremos desde el siguiente post : Contextmenu + imagen por item.



Podeis descargar el código fuente de thebestandroide con sólo compartir en facebook,twitter,linkedin o suscribirte a nuestro canal RSS más abajo. 

Descargar Menu contextual2.

Categories: Android Context menu, Android contextmenu radiobutton, Android onCreateContextMenu, Android registerForContextMenu