225. Xamarin Toolbar (II)

Continuemos con la construcción de nuestra barra de acciones, esta vez es momento de agregar botones (para eso queremos el menu) y acciones a estos.

El proceso es realmente sencillo:

1. Agreguemos un nuevo recurso, de tipo xml en la carpeta llamada menu

2. Ahora establezcamos que es lo que contendrá el menu, en mi caso yo coloque lo siguiente:


<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

<item
android:id="@+id/Informacion"
android:icon="@drawable/ic_launcher"
app:showAsAction="ifRoom"
android:title="Info"/>

<item
android:id="@+id/menuof1"
app:showAsAction="never"
android:title="Menu 1"/>

<item
android:id="@+id/menuof2"
app:showAsAction="never"
android:title="Menu 2"/>

    <item
android:id="@+id/menuof3"
app:showAsAction="never"
android:title="Menu 3"/>

</menu>

¿Que hace?

<item
android:id="@+id/Informacion"
android:icon="@drawable/ic_launcher"
app:showAsAction="ifRoom"
android:title="Info"/>

Establece un icono, de acceso a una acción, aquí es muy importante el indicar la propiedad que se encuentra en negrita, eso nos permite que siempre se muestre en la barra.

<item
android:id="@+id/menuof1"
app:showAsAction="never"
android:title="Menu 1"/>

<item
android:id="@+id/menuof2"
app:showAsAction="never"
android:title="Menu 2"/>

    <item
android:id="@+id/menuof3"
app:showAsAction="never"
android:title="Menu 3"/>

Crea un conjunto de menus, dentro del menu con los tres puntos.

3. Ahora es necesario que este menu se muestre dentro del layout, para ello vamos a agregar a nuestro activity el siguiente código:

        public override bool OnCreateOptionsMenu(IMenu menu)
        {
            MenuInflater.Inflate(Resource.Menu.menutool, menu);
            return base.OnCreateOptionsMenu(menu);
        }

4. Por ultimo tenemos que asignar una acción a cada uno de los botones

        public override bool OnOptionsItemSelected(IMenuItem item)
        {
            string textToShow;

            if(item.ItemId == Resource.Id.Informacion)
            {
                textToShow = "Informacion";
            }
            else
            {
                textToShow = "Menu XX";
            }

            Android.Widget.Toast.MakeText(this, item.TitleFormatted + ":" + textToShow,
                Android.Widget.ToastLength.Long).Show();

            return base.OnOptionsItemSelected(item);
        }
   
Al probar en el emulador

Felices lineas

El Alien de México

224. Xamarin ToolBar (I)

Haremos un breve tutorial de Xamarin para Android, la mision poner una barra de actividades en la parte superior, otra en la parte inferior, y que estas puedan activar el menu.

Para hacer eso, debemos hacer lo siguiente:

Primero vamos a sustituir la barra de actividades, por una que tenga mucho mayor funcionalidad para esto es necesario que instalemos el siguiente paquete de nuget.

Vamos a agregar un nuevo estilo

Abrimos el archivo, y agregamos lo siguiente:

    <style name="AppBarra" parent="Theme.AppCompat">

        <item name="windowNoTitle">true</item>

        <item name="windowActionBar">false</item>

        <item name="colorPrimary">#F6F6AA</item>

    </style>

Con esto vamos a quitar el Action Bar predeterminado, y podremos colocar el nuestro,

Ahora vamos a crear nuestro layout

Y agregaremos lo siguiente

<?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">
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</LinearLayout>

Con esto estamos agregando el nuevo toolbar

Ahora creemos el Activity que le dará vida a nuestro toolbar

Agregemos el siguiente código:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Support.V7.App;
using Android.Views;
using Android.Widget;

namespace MenuTool
{
    [Activity(Label = "Menuly", MainLauncher = true, Theme = "@style/AppBarra")]
    public class Menuly : AppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            SetContentView(Resource.Layout.Menuly);

            var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            SetSupportActionBar(toolbar);
            SupportActionBar.Title = "Titulo!!!";

            // Create your application here
        }
    }
}

El código, aplica un tema, y busca la nueva toolbar, para poder comenzar a manipularla, si ejecutamos nuestro código tendremos lo siguiente:

El Alien de México