Použití Xamarin.Android Designeru

Tento článek je návodem pro Xamarin.Android Designer. Ukazuje, jak vytvořit uživatelské rozhraní pro malou barevnou aplikaci prohlížeče; toto uživatelské rozhraní je vytvořeno zcela v Návrháři.

Přehled

Uživatelská rozhraní Androidu lze vytvořit deklarativní pomocí souborů XML nebo programově napsáním kódu. Xamarin.Android Designer umožňuje vývojářům vizuálně vytvářet a upravovat deklarativní rozložení bez nutnosti ruční úpravy souborů XML. Návrhář také poskytuje zpětnou vazbu v reálném čase, která vývojářům umožňuje vyhodnotit změny uživatelského rozhraní, aniž by musel aplikaci znovu nasadit do zařízení nebo do emulátoru. Tyto funkce Návrháře můžou výrazně urychlit vývoj uživatelského rozhraní Androidu. Tento článek ukazuje, jak pomocí Xamarin.Android Designer vizuálně vytvořit uživatelské rozhraní.

Tip

Novější verze sady Visual Studio podporují otevírání .xml souborů v android Designeru.

Android Designer podporuje soubory .axml i .xml.

Názorný postup

Cílem tohoto názorného postupu je použití Android Designeru k vytvoření uživatelského rozhraní pro ukázkovou aplikaci v prohlížeči barev. Aplikace v prohlížeči barev zobrazí seznam barev, jejich názvů a jejich hodnot RGB. Naučíte se přidávat widgety na návrhovou plochu a také vizuální rozložení těchto widgetů. Potom se dozvíte, jak interaktivně upravovat widgety na návrhové ploše nebo pomocí podokna Vlastnosti návrháře. Nakonec uvidíte, jak vypadá návrh, když aplikace běží na zařízení nebo emulátoru.

Visual Studio

Vytvoření nového projektu

Prvním krokem je vytvoření nového projektu Xamarin.Android. Spusťte Visual Studio, klikněte na Nový projekt... a zvolte šablonu aplikace Visual C# > pro Android > (Xamarin). Pojmenujte novou aplikaci DesignerWalkthrough a klikněte na OK.

V dialogovém okně Nová aplikace pro Android zvolte Prázdnou aplikaci a klikněte na OK:

Přidání rozložení

Dalším krokem je vytvoření LineárníLayout , který bude obsahovat prvky uživatelského rozhraní. V Průzkumník řešení klikněte pravým tlačítkem na Prostředky nebo rozloženía vyberte Přidat > novou položku.... V dialogovém okně Přidat novou položku vyberte Rozložení androidu. Pojmenujte soubor list_item a klikněte na Přidat:

Nové rozložení list_item se zobrazí v Návrháři. Všimněte si, že se zobrazí dvě podokna – návrhová plocha pro list_item je viditelná v levém podokně, zatímco je v pravém podokně zobrazený zdroj XML. Umístění podokna Návrhová plocha a Zdroj můžete přepínat kliknutím na ikonu Prohodit podokna umístěná mezi těmito dvěma podokny:

V nabídce Zobrazení klepněte na tlačítko Další osnova dokumentu systému Windows > a otevřete osnovu dokumentu. Osnova dokumentu ukazuje, že rozložení aktuálně obsahuje jeden widget LinearLayout :

Dalším krokem je vytvoření uživatelského rozhraní pro aplikaci v prohlížeči barev v tomto LinearLayoutprostředí .

Vytvoření uživatelského rozhraní položky seznamu

Pokud se podokno Panel nástrojů nezobrazuje, klikněte na kartu Sada nástrojů vlevo. V sadě nástrojů se posuňte dolů k části Obrázky a média a posuňte se dolů, dokud nenajdete ImageView:

Případně můžete do vyhledávacího panelu zadat ImageView a vyhledat :ImageView

Lze přetáhnout na ImageView návrhovou plochu (použije ImageView se k zobrazení vzorníku barev v aplikaci pro prohlížeč barev):

Potom přetáhněte LinearLayout (Vertical) widget ze sady nástrojů do Návrháře. Všimněte si, že modrý obrys označuje hranice přidaného LinearLayout. Osnova dokumentu ukazuje, že se jedná o podřízenou část LinearLayout, která se nachází v části imageView1 (ImageView):

Když vyberete ImageView v Návrháři, modrá osnova se přesune ohraničí ImageView. Kromě toho se výběr přesune do imageView1 (ImageView) osnovy dokumentu:

Dále přetáhněte Text (Large) widget z panelu nástrojů do nově přidaného LinearLayoutobjektu . Všimněte si, že Návrhář používá zelené zvýraznění k označení, kam se nový widget vloží:

Dále přidejte Text (Small) widget pod Text (Large) widget:

V tomto okamžiku by se plocha Návrháře měla podobat následujícímu snímku obrazovky:

Pokud tyto dva textView widgety nejsou uvnitř linearLayout1, můžete je přetáhnout do linearLayout1osnovy dokumentu a umístit je tak, aby se zobrazily jako na předchozím snímku obrazovky (odsazené pod linearLayout1).

Uspořádání uživatelského rozhraní

Dalším krokem je úprava uživatelského rozhraní tak, aby se zobrazovalo ImageView vlevo, přičemž dva TextView widgety jsou naskládané vpravo od ImageView.

1. Vyberte ImageView.

2. Do okno Vlastnosti zadejte šířku do vyhledávacího pole a vyhledejte Šířku rozložení.

3. Změňte nastavení Šířka rozložení nawrap_content:

Dalším způsobem, jak změnit Width nastavení, je kliknout na trojúhelník na pravé straně widgetu a přepnout jeho nastavení šířky na wrap_content:

Dalším kliknutím na trojúhelník se vrátí Width nastavení na match_parenthodnotu . Pak přejděte do podokna Osnova dokumentu a vyberte kořen LinearLayout:

Po výběru kořenového adresáře LinearLayout se vraťte do podokna Vlastnosti , zadejte orientaci do vyhledávacího pole a vyhledejte nastavení Orientace . Změnit orientaci na horizontal:

V tomto okamžiku by se plocha Návrháře měla podobat následujícímu snímku obrazovky. Všimněte si, že TextView widgety byly přesunuty napravo od ImageView:

Úprava mezer

Dalším krokem je úprava nastavení odsazení a okrajů v uživatelském rozhraní, aby bylo mezi widgety více místa. ImageView Vyberte na návrhové ploše. V podokně Vlastnosti zadejte min do vyhledávacího pole. Zadejte 70dp minimální výšku a 50dp minimální šířku:

V podokně Vlastnosti zadejte padding do vyhledávacího pole a zadejte 10dp odsazení. Tyto minHeighta minWidthpadding nastavení přidávají odsazení kolem všech stran ImageView a prodlužují jej svisle. Všimněte si, že se při zadávání těchto hodnot změní xml rozložení:

Nastavení dolního, levého, pravého a horního odsazení je možné nastavit nezávisle zadáním hodnot do polí Odsazení vlevo , Odsazení zleva, Odsazení vpravo a Odsazení nahoře . Například nastavte pole Odsazení doleva na 5dp pole Odsazení dolů, Odsazení vpravo a Odsazení horních polí na 10dp:

Dále upravte pozici widgetu LinearLayout , která obsahuje dva TextView widgety. V osnově dokumentu vyberte linearLayout1. V okně Vlastnosti zadejte margin do vyhledávacího pole. Nastavení dolního okraje rozložení, levého okraje rozložení a horního okraje rozložení na 5dp. Nastavit okraj rozložení vpravo na 0dp:

Odebrání výchozí image

ImageView Vzhledem k tomu, že se používá k zobrazení barev (nikoli obrázků), dalším krokem je odebrání výchozího zdroje obrázku přidaného šablonou.

1. ImageView Vyberte na zařízení Návrhář surface.

2. Do pole Vlastnosti zadejte src do vyhledávacího pole.

3. Klikněte na malý čtvereček napravo od nastavení vlastnosti Src a vyberte Obnovit:

Tím se odebere android:src="@android:drawable/ic_menu_gallery" ze zdrojového XML pro to ImageView.

Přidání kontejneru ListView

Teď, když je definované rozložení list_item , je dalším krokem přidání ListView do hlavního rozložení. Bude ListView obsahovat seznam list_item.

V Průzkumník řešení otevřete Resources/layout/activity_main.axml. V ToolBoxuListView vyhledejte widget a přetáhněte ho na návrhovou plochu. V ListView Návrháři bude prázdné s výjimkou modrých čar, které znázorňují jeho ohraničení při výběru. Osnovu dokumentu můžete zobrazit a ověřit, jestli byl ListView přidán správně:

Ve výchozím nastavení ListView je daná Id hodnota @+id/listView1. I když listView1 je v osnově dokumentu stále vybraná, otevřete podokno Vlastnosti, klikněte na Uspořádat podle a vyberte Kategorii. Otevřete Main, vyhledejte vlastnost ID a změňte její hodnotu na @+id/myListView:

V tuto chvíli je uživatelské rozhraní připravené k použití.

Spouštění aplikace.

Otevřete MainActivity.cs a nahraďte jeho kód následujícím kódem:

using Android.App;
using Android.Widget;
using Android.Views;
using Android.OS;
using Android.Support.V7.App;
using System.Collections.Generic;

namespace DesignerWalkthrough
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        List<ColorItem> colorItems = new List<ColorItem>();
        ListView listView;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);
            listView = FindViewById<ListView>(Resource.Id.myListView);

            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.DarkRed,
                ColorName = "Dark Red",
                Code = "8B0000"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.SlateBlue,
                ColorName = "Slate Blue",
                Code = "6A5ACD"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.ForestGreen,
                ColorName = "Forest Green",
                Code = "228B22"
            });

            listView.Adapter = new ColorAdapter(this, colorItems);
        }
    }

    public class ColorAdapter : BaseAdapter<ColorItem>
    {
        List<ColorItem> items;
        Activity context;
        public ColorAdapter(Activity context, List<ColorItem> items)
            : base()
        {
            this.context = context;
            this.items = items;
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override ColorItem this[int position]
        {
            get { return items[position]; }
        }
        public override int Count
        {
            get { return items.Count; }
        }
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var item = items[position];

            View view = convertView;
            if (view == null) // no view to re-use, create new
                view = context.LayoutInflater.Inflate(Resource.Layout.list_item, null);
            view.FindViewById<TextView>(Resource.Id.textView1).Text = item.ColorName;
            view.FindViewById<TextView>(Resource.Id.textView2).Text = item.Code;
            view.FindViewById<ImageView>(Resource.Id.imageView1).SetBackgroundColor(item.Color);

            return view;
        }
    }

    public class ColorItem
    {
        public string ColorName { get; set; }
        public string Code { get; set; }
        public Android.Graphics.Color Color { get; set; }
    }
}

Tento kód používá vlastní ListView adaptér k načtení informací o barvě a k zobrazení těchto dat v uživatelském rozhraní, které bylo právě vytvořeno. Aby byl tento příklad krátký, informace o barvě jsou pevně zakódované v seznamu, ale adaptér může být upraven tak, aby extrahovali informace o barvě ze zdroje dat nebo aby je vypočítali za běhu. Další informace o ListView adaptérech naleznete v tématu ListView.

Sestavte a spusťte aplikaci. Následující snímek obrazovky ukazuje, jak se aplikace zobrazí při spuštění na zařízení:

Visual Studio pro Mac

Vytvoření nového projektu

Prvním krokem je vytvoření nového projektu Xamarin.Android.

Spusťte Visual Studio pro Mac a klikněte na Nový projekt.... Zvolte šablonu aplikace pro Android a klikněte na Další:

Pojmenujte novou aplikaci DesignerWalkthrough. V části Cílové platformy vyberte Nejnovější a Největší a klikněte na Další:

Na další obrazovce dialogového okna klikněte na Vytvořit.

Přidání rozložení

Dalším krokem je vytvoření LineárníLayout , který bude obsahovat prvky uživatelského rozhraní.

V Visual Studio pro Mac klikněte pravým tlačítkem na Prostředky/rozložení v oblasti Řešení a vyberte Přidat > nový soubor.... V dialogovém okně Nový soubor vyberte Rozložení androidu>. Pojmenujte soubor list_item a klikněte na Tlačítko Nový:

Po přidání tohoto souboru se na návrhové ploše zobrazí nové rozložení list_item (pokud se zobrazí zpráva, tento projekt obsahuje prostředky, které nebyly úspěšně zkompilovány, vykreslení může být ovlivněno, klikněte na Sestavit sestavit > vše a sestavte projekt):

Kliknutím na kartu Zdroj v dolní části Návrháře zobrazíte zdroj XML pro toto rozložení. Když kliknete na kartu Osnova dokumentu na pravé straně, zobrazí se, že rozložení aktuálně obsahuje jeden widget LinearLayout :

Dalším krokem je vytvoření uživatelského rozhraní pro aplikaci v prohlížeči barev.

Vytvoření uživatelského rozhraní položky seznamu

Kliknutím na kartu Návrhář v dolní části obrazovky se vrátíte na plochu Návrháře. V podokně Panel nástrojů vpravo se posuňte dolů do části Obrázky a média a vyhledejteImageView:

Případně můžete do vyhledávacího panelu zadat ImageView a vyhledat :ImageView

Lze přetáhnout na ImageView návrhovou plochu (použije ImageView se k zobrazení vzorníku barev v aplikaci pro prohlížeč barev):

Potom přetáhněte LinearLayout (Vertical) widget ze sady nástrojů na návrhovou plochu. Všimněte si, že modrý obrys označuje hranice přidaného LinearLayout. Osnova dokumentu ukazuje, že se jedná o podřízenou část LinearLayout, která se nachází nížeimageView1 (ImageView):

Když vyberete ImageView v Návrháři, modrá osnova se přesune ohraničí ImageView. Kromě toho se výběr přesune do imageView1 (ImageView) osnovy dokumentu:

Dále přetáhněte Text (Large) widget z panelu nástrojů do nově přidaného LinearLayoutobjektu . Všimněte si, že při přetažení myši na návrhovou plochu se zvýrazní místo, kam se nový widget vloží. Widget Text (Large) by se měl nacházet uvnitř linearLayout1 , jak je vidět tady:

Dále pod widget přidejte Text (Small) widget Text (Large) . V tomto okamžiku by se návrhová plocha měla podobat následujícímu snímku obrazovky:

Pokud tyto dva textView widgety nejsou uvnitř linearLayout1, můžete je přetáhnout do linearLayout1osnovy dokumentu a umístit je tak, aby se zobrazovaly jako na předchozím snímku obrazovky (odsazené pod linearLayout1).

Uspořádání uživatelského rozhraní

Dalším krokem je úprava uživatelského rozhraní tak, aby se zobrazovalo ImageView vlevo, přičemž dva TextView widgety jsou naskládané vpravo od ImageView.

1. ImageView Po výběru klikněte na kartu Vlastnosti.

2. Přímo pod kartou Vlastnosti klikněte na Rozložení.

3. Posuňte se dolů na ViewGroup a změňte Width nastavení na wrap_content:

Dalším způsobem, jak změnit Width nastavení, je kliknout na trojúhelník na pravé straně widgetu a přepnout jeho nastavení šířky na wrap_content:

Dalším kliknutím na trojúhelník se vrátí Width nastavení na match_parenthodnotu . Pak přejděte do podokna Osnova dokumentu a vyberte kořen LinearLayout:

Po výběru kořenového adresáře LinearLayout se vraťte na kartu Vlastnosti a klikněte na Widget. Orientation Změňte nastavení tak, jak horizontal je znázorněno níže. V tomto okamžiku by se návrhová plocha měla podobat následujícímu snímku obrazovky. Všimněte si, že TextView widgety byly přesunuty napravo od ImageView:

Úprava mezer

Dalším krokem je úprava nastavení odsazení a okrajů v uživatelském rozhraní, aby bylo mezi widgety více místa. Vyberte kartu ImageView Rozložení a v části Vlastnosti klikněte na kartu Rozložení. Min Width Změňte na 50dp, Min Height na 70dpa Padding na 10dp To platí pro odsazení po všech stranách ImageView a prodlužuje ho svisle:

Nastavení odsazení do horního, pravého, dolního a levého odsazení lze nastavit nezávisle zadáním hodnot do Toppolí , Right, Bottoma Left odsazení. Například nastavte Left hodnotu odsazení na 5dp hodnotu Topa hodnotu , Righta Bottom odsazení na 10dphodnotu . Všimněte si, že Padding nastavení se změní na čárkami oddělený seznam těchto hodnot:

Dále upravte pozici widgetu LinearLayout , která obsahuje dva TextView widgety. V osnově dokumentu vyberte linearLayout1. V podokně Vlastnosti vyberte kartu Rozložení. Posuňte se dolů do oddílu ViewGroup a nastavte Left, TopRight, a Bottom okraje na 5dp, 5dp0dpa 5dp v uvedeném pořadí:

Odebrání výchozí image

ImageView Vzhledem k tomu, že se používá k zobrazení barev (nikoli obrázků), dalším krokem je odebrání výchozího zdroje obrázku přidaného šablonou.

1. Vyberte ImageView.

2. Klikněte na kartu Widget v části Vlastnosti.

3. Src Vymažte nastavení tak, aby bylo prázdné:

Tím se odebere android:src="@android:drawable/ic_menu_gallery" ze zdrojového XML pro to ImageView.

Přidání kontejneru ListView

Teď, když je definované rozložení list_item , je dalším krokem přidání ListView do hlavního rozložení. Bude ListView obsahovat seznam list_item.

V Průzkumník řešení otevřete Prostředky/layout/Main.axml. Klikněte na Button widget (pokud existuje) a odstraňte ho. V ToolBoxuListView vyhledejte widget a přetáhněte ho na návrhovou plochu. V ListView Návrháři bude prázdné s výjimkou modrých čar, které znázorňují jeho ohraničení při výběru. Osnovu dokumentu můžete zobrazit a ověřit, jestli byl ListView přidán správně:

Ve výchozím nastavení ListView je daná Id hodnota @+id/listView1. I když listView1 je v osnově dokumentu stále vybraná, otevřete podokno Vlastnosti, klikněte na Uspořádat podle a vyberte Kategorii. Otevřete Main, vyhledejte vlastnost ID a změňte její hodnotu na @+id/myListView:

V tuto chvíli je uživatelské rozhraní připravené k použití.

Spouštění aplikace.

Otevřete MainActivity.cs a nahraďte jeho kód následujícím kódem:

using Android.App;
using Android.Widget;
using Android.Views;
using Android.OS;
using System.Collections.Generic;

namespace DesignerWalkthrough
{
    [Activity(Label = "@string/app_name", MainLauncher = true)]
    public class MainActivity : Activity
    {
        List<ColorItem> colorItems = new List<ColorItem>();
        ListView listView;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            listView = FindViewById<ListView>(Resource.Id.myListView);

            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.DarkRed,
                ColorName = "Dark Red",
                Code = "8B0000"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.SlateBlue,
                ColorName = "Slate Blue",
                Code = "6A5ACD"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.ForestGreen,
                ColorName = "Forest Green",
                Code = "228B22"
            });

            listView.Adapter = new ColorAdapter(this, colorItems);
        }
    }

    public class ColorAdapter : BaseAdapter<ColorItem>
    {
        List<ColorItem> items;
        Activity context;
        public ColorAdapter(Activity context, List<ColorItem> items)
            : base()
        {
            this.context = context;
            this.items = items;
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override ColorItem this[int position]
        {
            get { return items[position]; }
        }
        public override int Count
        {
            get { return items.Count; }
        }
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var item = items[position];

            View view = convertView;
            if (view == null) // no view to re-use, create new
                view = context.LayoutInflater.Inflate(Resource.Layout.list_item, null);
            view.FindViewById<TextView>(Resource.Id.textView1).Text = item.ColorName;
            view.FindViewById<TextView>(Resource.Id.textView2).Text = item.Code;
            view.FindViewById<ImageView>(Resource.Id.imageView1).SetBackgroundColor(item.Color);

            return view;
        }
    }

    public class ColorItem
    {
        public string ColorName { get; set; }
        public string Code { get; set; }
        public Android.Graphics.Color Color { get; set; }
    }
}

Tento kód používá vlastní ListView adaptér k načtení informací o barvě a k zobrazení těchto dat v uživatelském rozhraní, které bylo právě vytvořeno. Aby byl tento příklad krátký, informace o barvě jsou pevně zakódované v seznamu, ale adaptér může být upraven tak, aby extrahovali informace o barvě ze zdroje dat nebo aby je vypočítali za běhu. Další informace o ListView adaptérech naleznete v tématu ListView.

Sestavte a spusťte aplikaci. Následující snímek obrazovky ukazuje, jak se aplikace zobrazí při spuštění na zařízení:

Shrnutí

Tento článek si prošl procesem použití Xamarin.Android Designeru v sadě Visual Studio k vytvoření uživatelského rozhraní pro základní aplikaci. Ukázalo se, jak vytvořit rozhraní pro jednu položku v seznamu a ukazuje, jak přidat widgety a vizuálně je rozložit. Vysvětluje také, jak přiřadit prostředky a pak nastavit různé vlastnosti těchto widgetů.