viernes, 25 de mayo de 2018

Layouts







1. Contenido
ü  Definición
¿Qué es un layout?
Un layout es un objeto que representa el espacio contenedor de todas las vistas (Views) dentro de la actividad. En él se define la estructura y el orden de los elementos para que el usuario pueda interactuar con la interfaz. Lógicamente se representan con subclases Java que heredan de la clase ViewGroup.
Para definirlos escribiremos un documento XML que contenga como nodo raíz algún tipo de layout y luego incluir en su interior los elementos hijos. 

 Android Studio permite generar automáticamente el código de los archivos XML a través del panel de Diseño.
¿Qué tipos de layouts existen en el desarrollo android?
Existen varios y su uso depende de la necesidad de cada persona. Veamos la definición de los más populares y fáciles de usar:
LinearLayout: El Linear Layout es el más sencillo. Dentro de él los elementos son ubicados en forma linear a través de columnas o filas. Posee un atributo que permite modificar su orientación, ya sea para presentar los elementos horizontal o Verticalmente.
WebView: Este View fue creado para mostrar el contenido con formato web.
RelativeLayout: Este es el layout más recomendado a usar, ya que los componentes dentro de él se pueden organizar de forma relativa entre sí.
Construir interfaces con ConstraintLayout en Android Studio

ü  Tipos
·         FrameLayout
Es uno de los diseños más simples para organizar controles de vista. Están diseñados para bloquear un área en la pantalla. La disposición de fotogramas debe usarse para mantener la vista de niños, porque puede ser difícil mostrar vistas individuales en un área específica de la pantalla sin superponerse entre sí.
Gravedad
FrameLayout no realiza ninguna distribución de las vistas, simplemente las coloca unas encima de otras. Esto le evita tener que relacionar los tamaños de unas vistas con los de las demás, por lo que se ahorra recorridos del árbol de vistas, tardando menos en mostrar su contenido.
Tenemos un parámetro que nos permite controlar el alineamiento de las vistas contenidas en el diseño: la gravedad. Este parámetro, definido en FrameLayout.LayoutParams, y que se corresponde con el atributo android:layout_gravity no es exclusivo de FrameLayout. 

 LinearLayout también lo proporciona y, por herencia, también TableLayout, TableRow e incluso RadioGroup. Los valores disponibles para el parámetro y el resultado obtenido con cada uno de ellos son comunes para todos estos diseños, por lo que les será de aplicación lo que voy a explicar a continuación.
La gravedad permite indicar cómo se debe alinear la vista sobre la que se aplica, tanto horizontal como verticalmente, en relación a los límites del área disponible para el contenido del FrameLayout.
ATRIBUTOS
Veamos diferentes propiedades de Frame Layout que se utilizarán al diseñar la interfaz de usuario de la aplicación de Android:
android: id
Este es el ID único que identifica el diseño en el archivo R.java.
A continuación se muestra el ejemplo del atributo id con la explicación incluida en la que definimos el id para la disposición del cuadro.
<FrameLayout xmlns: android = "http://schemas.android.com/apk/res/android"
android: id = "@ + id / frameLayout"
android: layout_width = "fill_parent"
android: layout_height = "fill_parent" />
android: primer plano         
El primer plano define el dibujable para dibujar sobre el contenido y este puede ser un valor de color. Los posibles valores de color pueden tener la forma de "#rgb", "#argb", "#rrggbb" o "#aarrggbb". Este es un modelo diferente de código de color utilizado.
android:foregroundGravity
Esto define la gravedad para aplicar al primer plano dibujable. El valor predeterminado de la gravedad es el llenado. Podemos establecer valores en forma de "top", "center_vertical", "fill_vertical", "center_horizontal", "fill_horizontal", "center", "fill", "clip_vertical", "clip_horizontal", "bottom", "left " o hacia la derecha" . Se usa para establecer la gravedad del primer plano.
También podemos establecer valores múltiples usando "|". Ej: fill_horizontal | top. Tanto el fill_horizontal como la gravedad superior se establecen en framelayout. En el mismo ejemplo anterior de primer plano, también configuramos el primer plano Gravedad de FrameLayout para completar.
android:visibility
Esto determina si hacer que la vista sea visible, invisible o desaparezca.
visible: la vista está presente y también visible
invisible: la vista está presente pero no visible
ido - La vista no está presente ni es visible

Android desde Cero - Frame Layout


framelayout android studio


·         LinearLayout

Es un grupo de vista que alinea todos los campos secundarios en una única dirección, de manera vertical u horizontal. Puedes especificar la dirección del diseño con el atributo android:orientation.
Todos los campos secundarios de un LinearLayout se apilan uno detrás de otro, por cual una lista vertical solo tendrá un campo secundario por fila, independientemente del ancho que tengan, y una lista horizontal solo tendrá la altura de una fila (la altura del campo secundario más alto, más el relleno). Un LinearLayout respeta los márgenes entre los campos secundarios y la gravedad (alineación a la derecha, centrada o a la izquierda) de cada campo secundario.
ATRIBUTOS
Clases anidadas

clases
LinearLayout.LayoutParams
Información de diseño por niño asociada con ViewLinearLayout.
Constructores Públicos
LinearLayout(Context context)
LinearLayout(Context context, AttributeSet attrs)
LinearLayout(Context context, AttributeSet attrs, int defStyleAttr)
LinearLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)
Podemos recomendarle este link, para mayor entendimiento de los atributos; https://developer.android.com/reference/android/widget/LinearLayout

Linear Layout - Android Studio

Linear and Relative layout - Android Studio


·         RelativeLayout


Su principal característica es que los widgets que estén dentro de este contenedor basarán su posición en relación con los otros elementos. De esta forma, podemos definir que el widget X quede debajo del widget Y, y que a su vez éste se alinee verticalmente con el widget Z.
Además de posicionar un elemento con respecto a otro del mismo nivel, también podemos hacerlo con respecto al área que corresponde al RelativeLayout.

Este tipo de contenedor es una herramienta muy poderosa para cumplir con la tarea de diseñar interfaces de usuario ya que permite eliminar ViewGroups anidados, lo cual es útil para reemplazar un diseño en el que tenemos una gran cantidad de grupos dentro de un contenedor de tipo LinearLayout y hacerlo más eficiente utilizando un RelativeLayout.
Los atributos que nos sirven para posicionar los elementos con respecto a otros widgets son:

android:layout_above: Indica que el elemento se posicionará justo encima del elemento que tiene el ID definido como valor de este atributo.
android:layout_toLeftOf: Indica que el elemento se posicionará a la izquierda del elemento cuyo ID coincida con el definido en el valor de este atributo.
android:layout_toRightOf: Indica que el elemento se posicionará a la derecha del elemento cuyo ID coincida con el definido en el valor de este atributo.
android:layout_bottom: Posiciona al elemento debajo del que tenga la ID proporcionada en el valor del atributo.
En el lsitado anterior tendremos que proporcionar siempre un ID de otro elemento, ejemplo:

android:layout_toLeftOf=&quot;@id/ok&quot;

En este ejemplo el elemento cuyo id es “ok” ya se definió anteriormente en el XML.

También podemos encontrar una serie de atributos que admiten valores boolean (true o false), que nos permiten posicionar los widgets en función al propio layout contenedor:
android:layout_alignParentTop: Indica al widget que su borde superior deberá estar alineado con el borde superior del contenedor.
android:layout_alignParentBottom: Indica al widget que su borde inferior deberá estar alineado con el borde inferior del contenedor.
android:layout_alignParentLeft: Indica al widget que su borde izquierdo deberá estar alineado con el borde izquierdo del contenedor.
android_layout_alignParentRight: Indica al widget que su borde derecho deberá estar alineado con el borde izquierdo del contenedor.

ATRIBUTOS:

Clases anidadas

clases
RelativeLayout.LayoutParams
Especifica cómo se posiciona una vista dentro de RelativeLayout


Constructores Públicos
RelativeLayout(Context context)
RelativeLayout(Context context, AttributeSet attrs)
RelativeLayout(Context context, AttributeSet attrs, int defStyleAttr)
RelativeLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)

Constantes
int
 
ABOVE
Regla que alinea el borde inferior del niño con el borde superior de otro niño.
int
ALIGN_BASELINE
Regla que alinea la línea base de un niño con la línea base de otro niño.
int
ALIGN_BOTTOM
Regla que alinea el borde inferior del niño con el borde inferior de otro niño.
int
 
ALIGN_END
Regla que alinea el extremo de un niño con el borde final de otro niño.
int
 
ALIGN_LEFT
Regla que alinea el borde izquierdo de un niño con el borde izquierdo de otro niño.
int
 
ALIGN_PARENT_BOTTOM
Regla que alinea el borde inferior del niño con el borde inferior de su padre RelativeLayout.
int
 
ALIGN_PARENT_END
Regla que alinea el extremo del niño con el borde final de su padre RelativeLayout.
int
 
ALIGN_PARENT_LEFT
Regla que alinea el borde izquierdo del niño con el borde izquierdo de su padre RelativeLayout.
int
 
ALIGN_PARENT_RIGHT                                                                                            
Regla que alinea el borde derecho del niño con el borde derecho de su padre RelativeLayout.
int
 
ALIGN_PARENT_START
Regla que alinea el borde inicial del niño con el borde inicial de su padre RelativeLayout.
int
 
ALIGN_PARENT_TOP
Regla que alinea el borde superior del niño con el borde superior de su pariente RelativeLayout.
int
 
ALIGN_RIGHT
Regla que alinea el borde derecho del niño con el borde derecho de otro niño.
int
 
ALIGN_START
Regla que alinea el borde de inicio del niño con el borde inicial de otro niño.
int
 
ALIGN_TOP
Regla que alinea el borde superior de un niño con el borde superior de otro niño.
int
 
CENTER_HORIZONTAL
Regla que centra al hijo horizontalmente con respecto a los límites de su padre RelativeLayout
int
 
END_OF
Regla que alinea el borde inicial de un niño con el borde final de otro niño.
int
 
TRUE

¿ Qué es el RelativeLayout en Android ?


·         TableLayout

Es un componente que facilita el cambio entre un contenido y otro, a por separado y no se liga a la Action Bar directamente.

Contiene un conjunto de componentes de tipo TableRow que es el que agrupa componentes visuales por cada fila (cada fila puede tener distinta cantidad de componentes visuales)
Cuando disponemos un control de Layouts de tipo TableLayout automáticamente crea cuatro componentes de tipo TableRow que los podemos ver en la ventana "Outline". 

Podemos borrar o agregar componentes de tipo TableRow según las necesidades de nuestro TableLayout:



ATRIBUTOS

Clases anidadas

clases
TableLayout.LayoutParams
Este conjunto de parámetros de diseño impone el ancho de cada elemento secundario a MATCH_PARENT y el alto de cada elemento secundario a WRAP_CONTENT, pero solo si no se especifica la altura.
Constructores Públicos
TableLayout (Context context)
Crea un nuevo TableLayout para el contexto dado.
TableLayout(Context context, AttributeSet attrs)
Crea un nuevo TableLayout para el contexto dado y con los atributos de conjunto especificados.
Podemos recomendarle este link, para mayor entendimiento de los atributos; https://developer.android.com/

En definición Xml simplemente incluyes dentro de la etiqueta AppBarLayout el componente TabLayout:

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    ...>
 
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        .../>
 
    <android.support.design.widget.TabLayout
   android:id="@+id/tabs"
       android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>

El código anterior es para crear tabs(pestañas) predefinidas debajo de la toolbar.

¿Como Crear Pestañas En Android?


Pestañas (Tabs)

·         WebView
¿Qué Es Un View?
Es un componente que permite controlar la interacción del usuario con la aplicación. Estos son muy similares a los controles SWING de Java, como Labels, Buttons, TextFields, Checkboxes, etc.

  Los Views son organizados dentro de los Layouts para que el usuario comprenda los objetivos de la actividad.
Atributos De Un View
Veamos los propósitos de los atributos usados con mayor frecuencia al diseñar un layout:
layout:height: Representa la dimensión de longitud vertical de un View. Puedes asignarle valores absolutos en dps, si dependiendo de las métricas de diseño que tengas ó usar los valores match_parent y wrap_content. El primero ajusta la dimensión a las medidas del contenedor padre y el segundo lo ajusta al contenido del View.
layout:width: Representa el ancho de un view.
layout:layout_margin: Especifica las márgenes del view con respecto a otros componentes. Podemos definir los valores individualmente para la margen izquierda, derecha, superior e inferior. O si deseas puedes especificar un mismo valor para todos los margenes.
layout:alignComponent: Indica la adyacencia de las margenes entre componentes. Por ejemplo, esto permitiría ubicar el margen izquierdo de un botón justo al lado del margen izquierdo de otro botón. Si en algún momento el botón cambia entonces su compañero cambiará con él. Este atributo muestra el poder de un Relative layout.
layout:alignParent: Con este atributo especificamos que un view estará ubicado hacia uno de los lados de su padre.
layout:centerInParent: Permite centrar horizontal y verticalmente un View con respecto a su padre.
id: Es un nombre que diferencia los views entre si. Es de utilidad cuando vayamos a referenciar los controles en el código Java. Así que elige nombres representativos y de fácil interpretación.

Android WebView


Mostrar pagina web en WebView y abrir vinculo sin abrir el navegador en Android Studio


Como crear un WebView


Ejemplo1 de LinearLayout
 
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingLeft="16dp"

    android:paddingRight="16dp"

    android:orientation="vertical" >

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="@string/to" />

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="@string/subject" />

    <EditText

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:gravity="top"

        android:hint="@string/message" />

    <Button

        android:layout_width="100dp"

        android:layout_height="wrap_content"

        android:layout_gravity="right"

        android:text="@string/send" />

</LinearLayout>

Ejemplo 2 RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">



    <EditText

        android:id="@+id/txtempleado"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="46dp"

        android:ems="10"

        android:inputType="textPersonName"

        tools:layout_editor_absoluteX="68dp"

        tools:layout_editor_absoluteY="34dp" />



    <RadioGroup

        android:layout_width="238dp"

        android:layout_height="127dp"

        android:layout_alignParentTop="true"

        android:layout_alignStart="@+id/txtempleado"

        android:layout_marginTop="160dp"

        tools:layout_editor_absoluteX="68dp"

        tools:layout_editor_absoluteY="102dp">



        <RadioButton

            android:id="@+id/rbsoltero"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="Soleto" />



        <RadioButton

            android:id="@+id/rbcasado"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="Casado" />



        <RadioButton

            android:id="@+id/rbdivorciado"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="Divorciado" />



        <RadioButton

            android:id="@+id/rbviudo"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="Viudo" />

    </RadioGroup>



    <Button

        android:id="@+id/btnobtener"

        android:layout_width="238dp"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:layout_marginBottom="124dp"

        android:text="OBTENER"

        tools:layout_editor_absoluteX="68dp"

        tools:layout_editor_absoluteY="250dp" />



    <TextView

        android:id="@+id/lblbono"

        android:layout_width="311dp"

        android:layout_height="37dp"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:layout_marginBottom="41dp"

        tools:layout_editor_absoluteX="32dp"


 Ejemplo 3 de RelativeLayout y LinearLayout
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity"

    android:background="@drawable/ju">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"



        android:layout_alignParentTop="true"

        android:orientation="vertical"

        android:paddingTop="100dp">



        <EditText

            android:id="@+id/txtnombre"

            android:layout_width="300dp"

            android:layout_height="60dp"

            android:layout_gravity="center"

            android:background="@drawable/edittexstyle"

            android:hint="Usuario"

            android:paddingTop="10dp"

            android:textColorHint="#fff" />



        <EditText

            android:id="@+id/txtcontraseña"

            android:layout_width="300dp"

            android:layout_height="60dp"

            android:layout_gravity="center"

            android:background="@drawable/edittexstyle"

            android:hint="Contreseña"

            android:textColorHint="#fff" />



        <Button

            android:id="@+id/btningresar"

            android:layout_width="300dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_marginTop="50dp"

            android:background="@drawable/buttonstyleelector"

            android:text="INGRESAR"

            android:textColor="#fff" />


    </LinearLayout>



2. Resumen
Hemos visto que es un layout, estos definen la estructura y el orden de los elementos para que el usuario pueda interactuar con la interfaz.
Dentro de los layout tenemos: FrameLayout, LinearLayout, RelativeLayout, TableLayout, WebView. Cada uno esta definido para que se debe usar,cómo  y cuándo los utilizaremos, entre ellos los mas usados están; LinearLayout,  WebView y RelativeLayout. Cada uno tiene sus atributos.
3. Summary


We have seen that it is a layout, these define the structure and the order of the elements so that the user can interact with the interface.

Within the layout we have: FrameLayout, LinearLayout, RelativeLayout, TableLayout, WebView. Each one is defined so that it should be used, how and when we will use them, among them the most used are; LinearLayout, WebView and RelativeLayout. Each one has its attributes.

4. Recomendaciones
Los atributos que nos sirven para posicionar los elementos con respecto a otros widgets son: android:layout_above, android:layout_toLeftOf, android:layout_toRightOf, android:layout_bottom.

 Recomendariamos usar RelativeLayout, porque es mas fácil de utilizar.
5. Apreciación del Equipo
FrameLayout: Es uno de los diseños más simples para organizar controles de vista. Están diseñados para bloquear un área en la pantalla. Así como crear mejores modelos de diseño, además nos facilita la creación del menù, porque ya viene creado.

RelativeLayout: Es una herramienta muy poderosa para cumplir con la tarea de diseñar interfaces de usuario. Por eso nuestro punto de vista es mejor utilizar este layout.
6. Glosario de Términos
FrameLayout: Diseño de marco.

LinearLayout: Diseño lineal

 RelativeLayout: Disposición relativa

TableLayout: Diseño de pestañas

WebView: vista web

Match_parent: Emparejar padre

Wrap_content: Resumir contenido

Toolbar:Barra de herramientas usadas en tabs.

android:layout_alignParentTop: Indica al widget que su borde superior deberá estar alineado con el borde superior del contenedor.

android:layout_alignParentBottom: Indica al widget que su borde inferior deberá estar alineado con el borde inferior del contenedor.

android:layout_alignParentLeft: Indica al widget que su borde izquierdo deberá estar alineado con el borde izquierdo del contenedor.

android_layout_alignParentRight: Indica al widget que su borde derecho deberá estar alineado con el borde izquierdo del contenedor.

 Diapositivas de Layouts.





Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)