Sdílet prostřednictvím


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.

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.

Android blank app

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

Selecting the Android Blank App template

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:

New layout

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:

Designer view

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 :

Document outline

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:

Locate ImageView

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

ImageView search

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

ImageView on canvas

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

Blue outline

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:

Select ImageView

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ží:

Green highlights

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

Add small text widget

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

Screenshot shows the Designer surface with Toolbox, Document Outline, and layout area with small text selected.

Pokud tyto dva textView widgety nejsou uvnitř linearLayout1, můžete je přetáhnout do linearLayout1 osnovy 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:

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

Drag to set width

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:

Select root 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:

Select horizontal orientation

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:

Screenshot shows the Designer surface with Toolbox, Document Outline, and layout area.

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

Set height and width

V podokně Vlastnosti zadejte padding do vyhledávacího pole a zadejte 10dp odsazení. Tyto minHeighta minWidth padding 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í:

Set padding

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:

Custom padding settings

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:

Set margins

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:

Clear the ImageView src setting

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

New ListView

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:

Rename id to 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í:

Final screenshot

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