Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gitfrandu4/android-view-binding
https://github.com/gitfrandu4/android-view-binding
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/gitfrandu4/android-view-binding
- Owner: gitfrandu4
- Created: 2022-10-09T16:56:42.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-10T00:03:19.000Z (about 2 years ago)
- Last Synced: 2023-12-09T19:42:38.839Z (about 1 year ago)
- Language: Kotlin
- Size: 2.63 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UI Elements
* [Elementos visuales](https://github.com/gitfrandu4/android-view-binding#elementos-visuales)
* [Layouts](https://github.com/gitfrandu4/android-view-binding#layouts)
* [LinearLayout](https://github.com/gitfrandu4/android-view-binding#linearlayout)
* [RelativeLayout](https://github.com/gitfrandu4/android-view-binding#relativelayout)
* [ConstraintLayout](https://github.com/gitfrandu4/android-view-binding#constraintlayout)
* [Scrolls](https://github.com/gitfrandu4/android-view-binding#constraintlayout)
* [Vinculación de vista](https://github.com/gitfrandu4/android-view-binding#vinculaci%C3%B3n-de-vista)
* [Eventos y Referencias](https://github.com/gitfrandu4/android-view-binding#eventos-y-referencias)
* [Styles y Themes](https://github.com/gitfrandu4/android-view-binding#styles-y-themes)
* [Drawables](https://github.com/gitfrandu4/android-view-binding#drawables)
* [ImageView](https://github.com/gitfrandu4/android-view-binding#drawables)
* [Weight](https://github.com/gitfrandu4/android-view-binding#weight)
* [Espacios](https://github.com/gitfrandu4/android-view-binding#espacios)
* [Mover contenedores por la vista](https://github.com/gitfrandu4/android-view-binding#mover-contenedores-por-la-vista)
* [Resources](https://github.com/gitfrandu4/android-view-binding#resources)
* [Material Design](https://github.com/gitfrandu4/android-view-binding#material-design)
* [Mostrar imágenes al usuario](https://github.com/gitfrandu4/android-view-binding#material-design)
* [Final result 🙈](https://github.com/gitfrandu4/android-view-binding#final-result-)
Un vistazo a lo que viene:
## Elementos visuales
**TextView**: muestra texto al usuario
```xml
```
**EditText**: Permite al usuario editar un campo de texto
```xml
```
**Button**: control con texto o imagen que realiza una acción cuando el usuario lo presiona
```xml
```
## Layouts
Si queremos combinar varios elementos de tipo vista tendremos que utilizar un objeto de tipo Layout.
Es un contenedor que alberga varias vistas y controla su posición.
Hay que destacar que un Layout puede tener varios contenedores dentro y que es un descendiente
de la clase ViewGroup.
La siguiente lista describe los Layout más utilizados en Android:
* **`LinearLayout`**: Dispone los elementos en una fila o en una columna.
* **`TableLayout`**: Distribuye los elementos de forma tabular.
* **`RelativeLayout`**: Dispone los elementos en relación a otro o al padre.
* **`FrameLayout`**: Permite el cambio dinámico de los elementos que contiene.
* **`ConstraintLayout`**: Versión mejorada de `RelativeLayout`, que permite una edición visual desde el editor y trabajar con porcentajes.
### `LinearLayout`
**LinearLayout**: 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`
```xml
```
### `RelativeLayout`
Docu: https://developer.android.com/develop/ui/views/layout/relative
**RelativeLayout**: Muestra vistas secundarias en posiciones relativas. La posición de cada vista puede especificarse como relativa a elementos hermanos (como a la izquierda o debajo de otra vista) o en posiciones relativas al área de `RelativeLayout` principal (como alineada a la parte inferior, izquierda o centro.
```xml
```
### `ConstraintLayout`
**ConstraintLayout**: Permitirá simplificar las interfaces en anidamiento, para hacerlas lo más complejas posibles a nivel de diseño. Este layout, similar al RelativeLayout nos permitirá establecer relaciones entre todos los elementos y la propia vista padre, permitiendo así ser mucho más flexible que los demás.
```xml
```
## Scrolls
También podemos utilizar otras clases de Vistas, que son descritas a continuación:
* **ScrollView**: Visualiza una columna de elementos; cuando estos no caben en pantalla se permite un deslizamiento vertical.
* **NestedScrollView**: es lo mismo que el scrollview, pero soporta comportamientos anidados.
* **HorizontalScrollView**: Visualiza una fila de elementos; cuando estos no caben en pantalla se permite un deslizamiento horizontal.
## Vinculación de vista
1. Kotlin extensions (actualmente desaconsejado)
2. `findViewById`
* Hay que escribir más, y no es tan completa como el binding
````kotlin
findViewById(R.id.textView)
````
3. Binding: https://developer.android.com/topic/libraries/view-binding
```kotlin
class MainActivity : AppCompatActivity() {
// activity_main.xml => ActivityMainBinding
private lateinit var binding: ActivityMainBinding;
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
val view = binding.root
// Forma por defecto de obtener vistas:
// setContentView(R.layout.activity_main) // Comentamos ya que vamos a utilizar binding
setContentView(view)
Log.i("MainActivity", "Ejecutando on create")
val name = "Francisco Javier"
val textView = findViewById(R.id.textView)
Log.i("MainActivity", textView.text.toString())
}
}
```
## Eventos y Referencias
**Ids:**
Para poder acceder en nuestro Activity a los elementos visuales que hemos creado en el layout (xml)
todos tienen que tener un id referenciado de esta manera:
```xml
```
Ahora desde nuestro Activity podremos acceder a los datos que contiene o modificarlos:
```kotlin
btEnviar.setOnClickListener {
// Aquí podemos establecer lo que hará nuestro código una vez pulsado el botón con id Button
}
```
**Eventos y Referencias**
Si queremos acceder al texto introducido por el usuario en un `EditText`:
```kotlin
val text = editText.text.toString()
```
## Styles y Themes
Styles y Themes en android te permiten separar los detalles del diseño de tu app de la UI, similar a una hoja de estilos (CSS) en la web.
Un style es una coleccioón de atributos que especifican la apariencia de una vista. Un style puede cambiar los atributos de color, fuentes, tamaños, fondos y mucho más.
## Drawables
Recursos de elementos de diseño.
Un drawable es un tipo de recurso que puede ser dibujado en pantalla. Podremos utilizarlos para especificar el aspecto que van a tener los diferentes componentes de la interfaz, o partes de éstos. Estos drawables podrán ser definidos en XML o de forma programática.
En la carpeta drawable con el botón derecho podemos crear un icono para utilizar en la app o importarlo desde nuestro ordenador.
## ImageView
Un ImageView nos permite mostrar una imagen y tiene propiedades que nos ayudan a adaptarlo a lo que nos interesa.
```xml
```
Si queremos que se pueda pulsar usamos clickable = true y el background indicado en el xml:
```xml
android:background="?selectableItemBackgroundBorderless"
```
## Weight
Podemos utilizar el peso en un componente para separarlo porcentualmente.
Para hacer esto dentro de un ´LinearLayout` (esto solo lo podemos utilizar dentro de un `LinearLayout`) utilizando el peso es así:
```xml
```
Y jugando con los valores del peso obtenemos lo siguiente:
```xml
```
## Espacios
* **margin** - Distancia entre los 4 lados
* **marginLeft** - Distancia en el lado izquierdo
* **marginRight** - Distancia en el lado derechpo
* **marginTop** - Distancia en el lado de arriba
* **marginBottom** - Distancia en el lado de abajo
* **padding** - Distancia entre los 4 lados desde dentro
* **paddingLeft** - Distancia en el lado izquierdo desde dentro
* **paddingRight** - Distancia en el lado derechpo desde dentro
* **paddingTop** - Distancia en el lado de arriba desde dentro
* **paddingBottom** - Distancia en el lado de abajo desde dentro
## Mover contenedores por la vista
```xml
```
## Resources
```xml
strings.xml / strings-es.xml
My Application
MainActivity
colors.xml
#6200EE
#3700B3
#03DAC5
dimens.xml
16dp
styles.xml
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
```
## Material Design
### Diseño en Android
Docu: https://material.io/components?platform=android
Material design contiene la mayoría de componentes nativos de android con los que están hechas todas las apps y una guia de estilos.
### Botones
Docu: https://material.io/develop/android/components/buttons/
También tenemos los recursos oficiales aquí, aunque pueden ser complicados de entender a la primera.
Hay que importar siempre esta librería (con su correspondiente versión):
`implementation 'com.google.android.material:material:1.6.0'`
Y en `styles.xml` cambiamos el theme de la app:
```xml
```
## Mostrar mensajes al usuario
**Toast**:
Muestra feedback sobre alguna operación realizada. Idealmente debe mostrar mensajes cortos. Aparece por un periodo corto o largo.
```Kotlin
Toast.makeText(this, "Boton pulsado!", Toast.LENGTH_SHORT).show()
Snackbar.make(view, "Boton pulsado!", Snackbar.LENGTH_SHORT).show()
```
**Snackbar**:
Muestra feedback sobre alguna operación realizada, y es similar a un toast aunque podemos hacer que no desaparezca tras un periodo de tiempo. Hay que usar una vista para poder llamarlo, puede ser el contenedor del activity o cualquier otra.
Puede contener un botón de texto de acción
## Final result 🙈
