Android

26 dez, 2016

Xamarin Android – Apresentando o controle ScrollView

Publicidade

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:

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:

xamand_scrollview1

<?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:

xamand_scrollview2xamand_scrollview3

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).