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.
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 LinearLayout
prostř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 LinearLayout
objektu . 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 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
.
Vyberte
ImageView
.Do okno Vlastnosti zadejte šířku do vyhledávacího pole a vyhledejte Šířku rozložení.
Změňte nastavení Šířka rozložení 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_parent
hodnotu . 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 minHeight
a 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í:
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.
ImageView
Vyberte na zařízení Návrhář surface.Do pole Vlastnosti zadejte src do vyhledávacího pole.
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í:
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ů.