Xamarin Android - Relógio Analógico e Digital

Neste artigo vou mostrar como usar o controle AnalogClock  para exibir um relógio analógico no Xamarin Android usando o Visual Studio 2015 e a linguagem C#.

A widget AnalogClock exibe um relógio clássico ou analógico, contendo hora, minuto e segundos, com um círculo de marcas de escala que mostram minutos e horas.

Se você preferir pode usar a widget DigitalClock para exibir um relógio digital com as mesmas propriedades.

Vamos usar a propriedade Visibility para tornar o widget invisível/visível conforme a nossa necessidade.

Recursos usados:

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Criando o projeto no VS Community 2015 - Relógio Analógico

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 App_Relogios e clique no botão OK;

Abra o arquivo Main.axml na pasta Resources/layout e no modo Designer.

Primeiro remova o controle Button que vem definido por padrão e a seguir inclua o seguinte controle a partir da ToolBox:

Abaixo vemos o leiaute no emulador do Xamarin e ao lado o respectivo código XML gerado :

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:text="Relogio Analogico"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1" />
    <Button
        android:text="Exibir Relogio"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnExibir" />
    <AnalogClock
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/analogClock1" />
</LinearLayout>
 

Definimos apenas um controle TextView, um controle Button e o controle AnalogClock usando XML.

A seguir abra o arquivo MainActivity.cs e altere o código desse arquivo conforme abaixo:

using Android.App;
using Android.OS;
using Android.Widget;
namespace AppRelogiosAnalogicoDigital
{
    [Activity(Label = "AppRelogiosAnalogicoDigital", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            var relogioAnalogico = FindViewById<AnalogClock>(Resource.Id.analogClock1);
            relogioAnalogico.Visibility = Android.Views.ViewStates.Invisible;

            var btnAnalogico = FindViewById<Button>(Resource.Id.btnExibir);
            btnAnalogico.Click += (sender, e) =>
            {
                btnAnalogico.Text = "Relógio Analógico";
                relogioAnalogico.Visibility = Android.Views.ViewStates.Visible;
            };
        }
    }
}

Neste código criamos  uma instância da classe AnalogClock e definimos sua propriedade Visibility para Invisible de forma a ocultar o widget.

A seguir criamos uma instância do controle Button e definimos o evento Click onde alteramos o texto do Button e exibimos o relógio.

Executando o projeto usando o emulador do Visual Studio iremos obter o seguinte resultado:

Muito simples.

Criando o Relógio Digital

Para criar o relógio digital vamos incluir no arquivo Main.axml usado no projeto o widget DigitalClock.

Vamos incluir no arquivo os seguintes widget a partir da ToolBox:

Abaixo vemos o leiaute no emulador do Xamarin e ao lado o respectivo código XML gerado: (destaquei em azul o código que foi incluído)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
    .....
    <Button
        android:text="Exibir Relogio Digital"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnDigital"
        android:textSize="20" />
    <DigitalClock
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/digitalClock1"
        android:textSize="40"
        android:gravity="center" />
</LinearLayout>

 A seguir abra o arquivo MainActivity.cs e altere o código desse arquivo conforme o código em azul abaixo:

using Android.App;
using Android.OS;
using Android.Widget;
namespace AppRelogiosAnalogicoDigital
{
    [Activity(Label = "AppRelogiosAnalogicoDigital", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            var relogioAnalogico = FindViewById<AnalogClock>(Resource.Id.analogClock1);
            relogioAnalogico.Visibility = Android.Views.ViewStates.Invisible;
            var btnAnalogico = FindViewById<Button>(Resource.Id.btnExibir);
            btnAnalogico.Click += (sender, e) =>
            {
                btnAnalogico.Text = "Relógio Analógico";
                relogioAnalogico.Visibility = Android.Views.ViewStates.Visible;
            };
            var relogioDigital = FindViewById<DigitalClock>(Resource.Id.digitalClock1);
            var btnDigital = FindViewById<Button>(Resource.Id.btnDigital);
            relogioDigital.Visibility = Android.Views.ViewStates.Invisible;
            btnDigital.Click += (sender, e) =>
            {
                btnAnalogico.Text = "Relógio Digital";
                relogioDigital.Visibility = Android.Views.ViewStates.Visible;
            };
        }
    }
}
 

Executando o projeto usando o emulador do Visual Studio iremos obter o seguinte resultado:

Pegue o projeto aqui :   AppRelogiosAnalogicoDigital.zip  (sem as referências)

"Porque pela graça sois salvos, por meio da fé; e isto não vem de vós, é dom de Deus.
Não vem das obras, para que ninguém se glorie;"
Efésios 2:8,9

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti