Slideshow con MIT App Inventor o Thunkable - Diseño 1

En este post vamos a detallar el diseño del Slideshow que creamos en el vídeo Slideshow con App Inventor o Thunkable - Parte 1. Nuestro ejemplo consta de dos pantallas llamadas Screen1 y Principal y está realizado usando Thunkable. También puedes hacerlo con MIT App Inventor o con Kodular.

Fig. 1 Componentes en Screen1

Solo se muestra aquellas propiedades con valor diferente al que tiene por defecto.

Componente Screen1

Align Horizontal=3, Align Vertical=2, Background Color=Orange, Screen Orientation=Portrait, Sizing=Responsive, Title=Slideshow. 

Componente Vertical Arrangement1

Align Horizontal=3, Align Vertical=2, Background Color=None, Height=Fill parent, Width=Fill parent, Visible=True.

Componente Horizontal Arrangement1

Align Horizontal=3, Align Vertical=2, Background Color=None, Height=Automatic, Width=Fill parent, Visible=True.

Componente Canvas (cnvSlideImage)

Background Image=1.png, Height=140 pixels, Width=140 pixels, Visible=True.

Componente TextBox (txtSlideTitle)

FontBold=True, Font Size=30, Height=Automatic, Width=Automatic, Text=Making comments, Text Alignment=1, Text Color=White, Visible=True.

Componente TextBox (txtSlideDescription)

Font Size=16, Font Typeface=roboto regular, HTMLFormat=True, Height=Automatic, Width=90%, Text=Add a note to blocks..., Text Alignment=1, Text Color=White, Visible=True.

Componente Slider (sldProgress)

Color Left=White, Enabled=True, Width=Fill parent, Max Value=0, Min Value=0, , Thumb Position=1, Visible=True.

Componente Button (btnSkip)

Background Color=None, Enabled=True, FontBold=True, Font Size=16, Height=Automatic, Width=Automatic, Text=SKIP, Text Alignment=1, Text Color=White, Visible=True.

Componente Canvas (cnvSpace)

Background Color=None, Height=Automatic, Width=Fill parent, Text Alignment=1, Visible=True.

Componente Button (btnNext)

Background Color=None, Enabled=True, FontBold=True, Font Size=16, Height=Automatic, Width=Automatic, Text=NEXT, Text Alignment=1, Text Color=White, Visible=True.

Recuerda que:

El título y la descripción de cada Slide los copiamos desde la página App Inventor Tips & Tricks. Las imágenes son iconos de Material Icons que hemos subido a los activos de la app (Descargar)

Puedes descargar el archivo .aia del diseño aquí.

Suscríbete a nuestro canal en YouTube AQUÍ

Deja tus comentarios aquí o en nuestro canal de YouTube. 

Trataremos de responder a todos.