Neste artigo, vou apresentar os conceitos básicos sobre o controle ScrollView do Xamarin Android usando o Visual Studio 2015 e a linguagem C#.
O controle ScrollView contém layouts e permite que eles rolem, sendo também usado para permitir que as views se movam automaticamente para a parte visível da tela quando o teclado está sendo exibido.
O controle ScrollView não pode ser aninhado com outros controles que fornecem rolagem, como ListView e WebView, e expõe a propriedade Content que pode ser definida para uma única view ou layout.
Para usar o controle em uma aplicação Android e assim permitir a rolagem da tela, basta envolver o layout e as respectivas views por um único controle ScrollView.
Neste artigo, veremos um exemplo básico de utilização do controle ScrollView.
Recursos usados:
- Visual Studio Community 2015 ou Xamarin Studio
- Xamarin
- Emulador Android virtual ou físico (veja como emular usando o Vysor)
Nota: Baixe e use a versão Community 2015 do VS; ela é grátis e é equivalente à versão Professional.
Criando o projeto no VS Community 2015
Abra o VS 2015 Community e clique em New Project.
Selecione a linguagem Visual C# e o template Android -> Blank App(Android).
Informe o nome Droid_ScrollView e clique no botão OK.
Abra o arquivo Main.axml na pasta Resources/layout e no modo Designer e, a seguir, vamos definir um questionário com duas perguntas e algumas opções que devem ser selecionadas. Ao final, vamos incluir dois botões de comando. Então, para obter esse resultado, inclua os seguintes controles:
- 1 TextView
- 1 RadioGroup
- 7 RadioButton
- 1 TextView
- 1 RadioGroup
- 6 RadioButton
- 2 Buttons
Abaixo, vemos o leiaute no emulador do Xamarin e o respectivo código XML gerado:
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/scrollView1"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:minWidth="25px" android:minHeight="25px" android:background="#1d1160"> <TextView android:text="Qual a sua linguagem preferida ?" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView1" /> <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radioGroup1"> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="Visual Basic" android:id="@+id/radioButton2" /> <RadioButton android:text="Java" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radioButton5" /> <RadioButton android:text="Visual Basic .NET" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radioButton6" /> <RadioButton android:text="Suite Android" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radioButton13" /> <RadioButton android:text="Pearl" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radioButton14" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Visual C#" android:id="@+id/radioButton3" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Phyton" android:id="@+id/radioButton4" /> </RadioGroup> <TextView android:text="Qual melhor linguagem para desenvolvimento Mobile ?" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView2" /> <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radioGroup2"> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="Xamarin Android" android:id="@+id/radioButton7" /> <RadioButton android:text="Xamarin iOS" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radioButton10" /> <RadioButton android:text="XCode" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radioButton12" /> <RadioButton android:text="PhoneGap" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radioButton11" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Xamarin Forms" android:id="@+id/radioButton8" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HTML 5" android:id="@+id/radioButton9" /> </RadioGroup> <Button android:text="Enviar" android:layout_width="385.0dp" android:layout_height="wrap_content" android:id="@+id/button1" /> <Button android:text="Cancelar" android:layout_width="383.5dp" android:layout_height="wrap_content" android:id="@+id/button2" /> </LinearLayout> </ScrollView>
No código usado, note que o controle ScrollView está declarado logo após a tag XML do arquivo e que envolve o layout LinearLayout e todos os controles usados.
Note também que a declaração dos namespaces, que inicialmente estavam no layout LinearLayout, agora estão definidos no ScrollView.
Executando o projeto usando o emulador Genymotion, iremos obter o seguinte resultado:
Na primeira tela, notamos que existem controles que não estão visíveis, mas como usamos o controle ScrollView podemos rolar a tela para cima e assim visualizá-los.
Sem usar o controle ScrollView, isso não seria possível (lembre-se de que o ScrollView suporta apenas uma view filha).
Pegue o projeto aqui: Droid_ScrollView.zip (sem as referências).