003 Android studio. Fragmentos

Practica003: Android( Fragmentos del menu   )
Ing. Honoria Reyes Macedo

INTRODUCCION
Se utilizaran fragmentos para poder ser accesados desde el menu "DrawerLayout"

IDENTIFICAR CARACTERISTICAS DEL Activity (formulario)

IDE a usar: Android Studio

 a) Medida de pantalla

Medida de los componentes:

en  sp     Pixeles escalados 12sp, 14sp, 18sp, 22sp  (muy recomendado)

            en  dp     Puntos por pulgada

            en  px     Pixeles por pulgada

Se recomienda:

     48dp  que equivale aproximadamente a nueve milímetros, tamaño mínimo recomendado    

                    para botones

     4dp  Para  espaciado (arriba y abajo por cada componente)

     16dp   Margen lateral

b) Fuentes recomendadas              

       Droid Sans

       Roboto  (fuente del emblema de Android)

       Neue Helvetica  (Clasico de iOS, presenta problemas en tamaño reducido)

       Segoe  UI  (de windows phone)

c) Colores  Usar color de fondo que contraste con la fuente

       Reservados:

       rojo: errores y alertas y

       amarillo: alertas ,

       verde: Éxito y confirmacion

d) Componentes widgets, TextFields, layouts Contenedores:

           

            - Utilizar el Layout  RelativeLayout como contenedor

            - Widgets para etiquetas, botones  y controles de seleccion

            - Text Fields para campos de captura de tipo cadena o numerico

       Ejemplo: Con un RelativeLayout

                  Si se utiliza RelativeLayout los componentes se alineann de acuerdo a la 

                  posicion de los demas componentes  Ejemplo:

ACTIVIDAD

1.- Agregar recursos de acuerdo a tu pantalla de captura
     al archivo strings.xml  
 Ejemplo 1: 

<string name="textVClaveDoc">Clave del Documento:</string>
<string name="textVTipoDoc">Nombre del Documento:</string>
<string name="editTCveDoc"> Aqui escribe la clave</string>
<string name="editTTipoDoc"> Aqui escribe el tipo de Doc</string>

ó 

 Ejemplo 2:   

<string name="textVProducto">Nombre del Producto:</string> 

<string name="textVCveProd">Clave del Producto:</string> 

<string name="editTCveProd"> Aqui escribe la clave</string 

<string name="editTProducto"> Aqui escribe el producto</string>

2.- En la carpeta de Layout:   Crear un archivo fragmento para tu pantalla de captura 

Ejemplo 1:
fragment_tipodoc.xml

por lo que se deberán usar los siguientes componentes:

Un <TextView>  con el id: textVClaveDoc

Un <EditText>  con el id: editTCveDoc

Un <TextView>  con el id: textVTipoDoc

Un <EditText>  con el id: editTTipoDoc

ó

Ejemplo 2: 
fragment_producto.xml

por lo que se deberán usar los siguientes componentes:

  Un <TextView>  con el id: tVCveProducto 

 Un <EditText>  con el id: edTCveProducto 

 Un <TextView>  con el id: tVProducto 

  Un <EditText>  con el id: edTProducto 

 



Ejemplo 1:  En modo texto quedaria asi

 

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textVClaveDoc"
        android:ems="20"
        android:id="@+id/textVClaveDoc" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editTCveDoc"
        android:ems="20"
        android:layout_gravity="center_horizontal"
        android:hint="@string/editTCveDoc" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textVTipoDoc"
        android:ems="20"
        android:id="@+id/textVTipoDoc" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="20"
        android:id="@+id/editTTipoDoc"
        android:hint="@string/editTTipoDoc" />

 Nota:   Si deseas usar los estilos guardados agregar la linea en cada componente (Para los editTexts)

                          style="@style/edits"

            o la linea(Para las etiquetas o textView)

                          style="@style/labels"  

3.- En la carpeta java: Crear el archivo clase del punto anterior

     Ejemplo 1:  TipoDocFragment.java  que extienda de Fragment

        ó



     Ejemplo 2:  ProductoFragment.java  que extienda de Fragment
 
 
           Nota: Si se usa  ProductoFragment  recordar sustituir el uso de 
        TipoDocFragment por ProductoFragment                              
 
 

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class TipoDocFragment extends Fragment {

    public TipoDocFragment () {

        // Required empty public constructor
    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_tipodoc, container, false);
    }
}







4.- Agregar las siguientes líneas en rojo al archivo  

InicioActivity.java




@Override
public boolean onNavigationItemSelected(MenuItem item) {

    Fragment fragment = null;
    // Handle navigation view item clicks here.
    int id = item.getItemId();

    if (id == R.id.capturaId) {
                fragment = new TipoDocFragment();

                getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame,fragment)
                .commit();
    } else if (id == R.id.documentoId) {

    } else if (id == R.id.AreaId) {

    } else if (id == R.id.asignaId) {

    } else if (id == R.id.imprimeId) {

    } else if (id == R.id.salirId) {
    }

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);
    return true;
}




Nota:  Se utiliza la librería : import android.support.v4.app.Fragment;
 
 

 5.- Repetir los 5 pasos anteriores para hacer los fragments para las
   diferentes opciones del menú lateral








 
oooooooooooooooooooooooooooooooooooooo   oooooooooooooooooooooooooooooooooooooooooooooo
oooooooooooooooooooooooooooooooooooooo   oooooooooooooooooooooooooooooooooooooooooooooo