En la lección anterior , creó un nuevo proyecto para un diseño de prueba. En esta lección, comenzará a agregar los widgets.
Ya tienes una Vista de texto en tu superficie de diseño, la predeterminada Hello World que obtienes cada vez que creas un nuevo proyecto. Haga clic en esto para seleccionarlo. Ahora presione la tecla Suprimir en su teclado para deshacerse de él. Busque la Vista de texto en la Paleta y arrastre una nueva a su diseño. Su pantalla se verá así (sin el área azul en la parte superior en versiones posteriores de Android Studio):
Lo que queremos hacer ahora es cambiar a la vista de planos. Entonces, en versiones anteriores de Android Studio, haga clic en el ícono Blueprint en la barra de herramientas, el medio de los tres íconos en la imagen a continuación:
En versiones posteriores, haga clic en el icono azul en la barra de herramientas y seleccione Blueprint en el menú:
Use las herramientas de zoom para acercar un poco, y su pantalla debería verse así:
Eche un vistazo al área de Propiedades a la derecha del Plano. Busque la propiedad Text y cámbiela a ¿Cómo se llama este puente? (Verá una forma diferente de agregar texto, en un tutorial posterior).
Presione la tecla Intro en su teclado para actualizar el plano:
Eche un vistazo a la barra de herramientas de diseño y busque el icono Márgenes predeterminados . Haga clic en él para ver una lista desplegable:
Estos valores establecen los márgenes alrededor de los bordes de su aplicación. El 8 predeterminado está bien para nosotros. Pero si necesita cambiar sus márgenes, este es el lugar para venir.
Lo que queremos hacer es fijar la Vista de texto en la parte superior de la pantalla y a la izquierda y derecha de los bordes de la pantalla. Haces esto con Restricciones .
Asegúrese de que el icono del ojo en la barra de herramientas de diseño no tenga una cruz. Si es así, significa que las restricciones están ocultas. Haga clic en el ojo para mostrar las restricciones:
Restricciones ocultas:
Restricciones mostradas:
El icono junto al de Restricciones se llama AutoConexión . Quieres que este se apague, en este tutorial. Haga clic en él y verá una línea a través del imán invertido:
AutoConnect intenta adivinar qué tipo de restricciones desea. Esto está bien para un diseño simple, pero puede interferir. Por eso lo apagamos. Agregaremos nuestras restricciones manualmente.
Eche un vistazo a la vista de texto nuevamente:
Los círculos se denominan Anclas de restricción . Si desea fijar un control en la parte superior de la pantalla, haga clic en el círculo del medio. Mantenga presionado el botón izquierdo del mouse y arrástrelo hasta la parte superior:
Suelte el botón izquierdo del mouse y verá una flecha que va desde la parte superior central de la Vista de texto hasta la parte superior de la pantalla de la aplicación. Ésta es una limitación. (El 8 es el margen que establecemos). No importa si su aplicación está en orientación vertical u horizontal, la Vista de texto se mantendrá a 8 unidades de la parte superior.
Haga lo mismo con los círculos izquierdo y derecho de la Vista de texto: haga clic y arrastre una flecha hacia el borde izquierdo del círculo izquierdo, y haga clic y arrastre una flecha hacia el borde derecho. Su pantalla se verá así:
Observe las líneas dentadas. Esto indica que tiene una restricción adjunta a un control.
Para deshacerse de la restricción, eche un vistazo al área de propiedades, en la parte superior. Verá esto en versiones anteriores de Android Studio:
Y esto en versiones posteriores:
Mantenga el mouse sobre uno de los círculos azules (o grises) en el medio. Verás aparecer una X. Haga clic en una X para eliminar esa restricción. En la imagen de arriba, si se hace clic en el círculo azul con la x blanca, la restricción se eliminará desde el borde izquierdo de la Vista de texto hasta el borde izquierdo de la pantalla.
Observe el control deslizante en la parte inferior, el que tiene 50 en él. Esto se puede utilizar para colocar la Vista de texto a lo largo del eje horizontal. (Un valor de 50 es la posición intermedia). Pruébelo. Mantenga presionado el botón izquierdo del mouse en el 50. Mantenga presionado el botón izquierdo del mouse y arrastre hacia la derecha y hacia la izquierda. Observe lo que sucede con su Vista de texto en el plano.
En la siguiente lección, aprenderá cómo agregar un ImageView y cómo importar una imagen en Android Studio.
No hay comentarios:
Publicar un comentario