Xamarin.Android 디자이너 사용

이 문서는 Xamarin.Android 디자이너의 연습입니다. 작은 색 브라우저 앱에 대한 사용자 인터페이스를 만드는 방법을 보여 줍니다. 이 사용자 인터페이스는 디자이너에서 완전히 만들어집니다.

개요

Android 사용자 인터페이스는 XML 파일을 사용하거나 코드를 작성하여 프로그래밍 방식으로 선언적으로 만들 수 있습니다. Xamarin.Android 디자이너를 사용하면 개발자가 XML 파일을 직접 편집하지 않고도 선언적 레이아웃을 시각적으로 만들고 수정할 수 있습니다. 또한 디자이너는 개발자가 디바이스 또는 에뮬레이터에 애플리케이션을 다시 배포하지 않고도 UI 변경 내용을 평가할 수 있는 실시간 피드백을 제공합니다. 이러한 디자이너 기능은 Android UI 개발 속도를 크게 높일 수 있습니다. 이 문서에서는 Xamarin.Android Designer를 사용하여 사용자 인터페이스를 시각적으로 만드는 방법을 보여 줍니다.

팁

최신 버전의 Visual Studio에서는 Android Designer 내에서 .xml을 여는 것을 지원합니다.

Android Designer에서는 .axml 파일과 .xml 파일이 모두 지원됩니다.

연습

이 연습에서는 Android Designer를 사용하여 예제 색 브라우저 앱에 대한 사용자 인터페이스를 만들기 위한 것입니다. 색 브라우저 앱은 색, 이름 및 RGB 값의 목록을 제공합니다. 디자인 화면에 위젯을 추가하는 방법과 이러한 위젯을 시각적으로 배치하는 방법을 알아봅니다. 그런 다음 디자인 화면에서 또는 디자이너의 속성 창을 사용하여 위젯을 대화형으로 수정하는 방법을 알아봅니다. 마지막으로 앱이 디바이스 또는 에뮬레이터에서 실행되면 디자인이 어떻게 보이는지 확인할 수 있습니다.

Visual Studio

새 프로젝트 만들기

첫 번째 단계는 새 Xamarin.Android 프로젝트를 만드는 것입니다. Visual Studio를 시작하고 새 프로젝트를 클릭한 다음 Visual C# > Android > 앱(Xamarin) 템플릿을 선택합니다. 새 앱 DesignerWalkthrough의 이름을 지정하고 확인을 클릭합니다.

새 Android 앱 대화 상자에서 빈 앱을 선택하고 확인을 클릭합니다.

레이아웃 추가

다음 단계는 사용자 인터페이스 요소를 보유하는 LinearLayout을 만드는 것입니다. 솔루션 탐색기 리소스/레이아웃을 마우스 오른쪽 단추로 클릭하고 새 항목 추가>...를 선택합니다. 새 항목 추가 대화 상자에서 Android 레이아웃을 선택합니다. 파일 이름을 list_item 지정하고 추가를 클릭합니다.

디자이너에 새 list_item 레이아웃이 표시됩니다. 두 개의 창이 표시됩니다. 오른쪽 창에 XML 원본이 표시되는 동안 list_item 디자인 화면이 왼쪽 창에 표시됩니다. 두 창 사이에 있는 창 바꾸기 아이콘을 클릭하여 디자인 화면 및 원본 창의 위치를 바꿀 수 있습니다.

보기 메뉴에서 다른 Windows > 문서 개요를 클릭하여 문서 개요를 엽니다. 문서 개요는 레이아웃에 현재 단일 LinearLayout 위젯이 포함되어 있음을 보여 줍니다.

다음 단계는 이 LinearLayout내에서 색 브라우저 앱에 대한 사용자 인터페이스를 만드는 것입니다.

목록 항목 사용자 인터페이스 만들기

도구 상자 창이 표시되지 않으면 왼쪽의 도구 상자 탭을 클릭합니다. 도구 상자에서 이미지 및 미디어 섹션까지 아래로 스크롤하고 다음을 ImageView찾을 때까지 더 아래로 스크롤합니다.

또는 검색 창에 ImageView를 입력하여 다음을 찾을 ImageView수 있습니다.

이를 ImageView 디자인 화면으로 끌어다 놓습니다( ImageView 색 브라우저 앱에서 색 견본을 표시하는 데 사용됩니다.)

그런 다음 도구 상자에서 디자이너로 위젯을 끕 LinearLayout (Vertical) 니다. 파란색 윤곽선은 추가 LinearLayout된 경계를 나타냅니다. 문서 개요는 다음 아래에 imageView1 (ImageView)있는 자LinearLayout식임을 보여줍니다.

디자이너에서 선택하면 ImageView 파란색 윤곽선이 이동하여 을 묶습니다 ImageView. 또한 선택 영역은 문서 개요로 이동합니다imageView1 (ImageView).

그런 다음 도구 상자에서 새로 추가LinearLayout된 위젯으로 위젯을 끕 Text (Large) 니다. 디자이너는 녹색 강조 표시를 사용하여 새 위젯을 삽입할 위치를 나타냅니다.

다음으로 위젯 아래에 위젯을 Text (Large) 추가 Text (Small) 합니다.

이 시점에서 디자이너 화면은 다음 스크린샷과 유사해야 합니다.

두 textView 위젯이 내부에 linearLayout1없는 경우 문서 개요로 끌어 linearLayout1 서 이전 스크린샷(아래 linearLayout1들여쓰기)에 표시된 것처럼 표시되도록 배치할 수 있습니다.

사용자 인터페이스 정렬

다음 단계는 두 위젯이 오른쪽ImageView에 쌓여 있는 왼쪽 TextView 에 표시 ImageView 되도록 UI를 수정하는 것입니다.

1. ImageView를 선택합니다.

2. 속성 창 검색 상자에 너비를 입력하고 레이아웃 너비를 찾습니다.

3. 레이아웃 너비 설정을 다음과 같이 wrap_content변경합니다.

설정을 변경하는 Width 또 다른 방법은 위젯의 오른쪽에 있는 삼각형을 클릭하여 너비 설정을 다음으로 토글하는 것입니다 wrap_content.

삼각형을 다시 클릭하면 설정이 Width .로 match_parent반환됩니다. 다음으로 문서 개요 창으로 이동하여 루트LinearLayout를 선택합니다.

루트 LinearLayout 를 선택한 상태에서 속성 창으로 돌아가서 검색 상자에 방향을 입력하고 방향 설정을 찾습니다. 방향을 다음으로 horizontal변경합니다.

이 시점에서 디자이너 화면은 다음 스크린샷과 유사해야 합니다. 위젯이 TextView 다음의 오른쪽으로 이동되었습니다.ImageView

간격 수정

다음 단계는 위젯 사이에 더 많은 공간을 제공하도록 UI에서 안쪽 여백 및 여백 설정을 수정하는 것입니다. ImageView 디자인 화면에서 선택합니다. 속성 창에서 검색 상자에 입력 min 합니다. 최소 높이 및 50dp 최소 너비에 대해 입력 70dp 합니다.

속성 창에서 검색 상자에 입력 padding 하고 안쪽 여백을 입력 10dp 합니다. 이러한 minHeight설정 minWidth 및 padding 설정은 안쪽 여백을 모든 면 주위에 ImageView 추가하고 세로로 길게 합니다. 이러한 값을 입력하면 레이아웃 XML이 변경됨을 확인합니다.

아래쪽, 왼쪽, 오른쪽 및 위쪽 안쪽 여백 설정은 각각 안쪽 여백 아래쪽, 안쪽 여백 왼쪽, 안쪽 여백 오른쪽 및 안쪽 여백 위쪽 필드에 값을 입력하여 독립적으로 설정할 수 있습니다. 예를 들어 안쪽 여백 왼쪽 필드를 다음으로 5dp설정하고 안쪽 여백 아래쪽, 안쪽 여백 오른쪽 및 안쪽 여백 위쪽 필드를 다음으로 10dp설정합니다.

다음으로, 두 TextView 위젯이 LinearLayout 포함된 위젯의 위치를 조정합니다. 문서 개요에서 .를 선택합니다linearLayout1. 속성 창에서 검색 상자에 입력 margin 합니다. 레이아웃 여백 아래쪽, 왼쪽 레이아웃 여백 및 레이아웃 여백 위쪽을 .로 5dp설정합니다. 레이아웃 여백을 다음으로0dp설정합니다.

기본 이미지 제거

ImageView 이미지가 아닌 색을 표시하는 데 사용되므로 다음 단계는 템플릿에서 추가한 기본 이미지 원본을 제거하는 것입니다.

1. ImageView디자이너 화면에서 선택합니다.

2. 속성에서 검색 상자에 src를 입력합니다.

3. Src 속성 설정의 오른쪽에 있는 작은 사각형을 클릭하고 다시 설정을 선택합니다.

이렇게 하면 원본 XML에서 제거됩니다 android:src="@android:drawable/ic_menu_gallery"ImageView.

ListView 컨테이너 추가

이제 list_item 레이아웃이 정의되었으므로 다음 단계는 주 레이아웃에 추가하는 ListView 것입니다. 여기에는 ListView list_item 목록이 포함됩니다.

솔루션 탐색기 Resources/layout/activity_기본.axml을 엽니다. 도구 상자에서 위젯을 ListView 찾아 디자인 화면으로 끕니다. ListView 디자이너의 테두리가 선택될 때 테두리를 윤곽선으로 표시하는 파란색 선을 제외하고는 비어 있습니다. 문서 개요를 보고 ListView가 올바르게 추가되었는지 확인할 수 있습니다.

기본적으로 값은 ListViewId .입니다 @+id/listView1. 문서 개요에서 여전히 선택되어 있는 동안 listView1 속성 창을 열고 정렬 기준, 범주를 차례로 선택합니다. Main을 열고 Id 속성을 찾은 다음 해당 값을 다음으로 @+id/myListView변경합니다.

이 시점에서 사용자 인터페이스를 사용할 준비가 된 것입니다.

애플리케이션 실행

MainActivity.cs 열고 해당 코드를 다음으로 바꿉다.

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; }
    }
}

이 코드는 사용자 지정 ListView 어댑터를 사용하여 색 정보를 로드하고 방금 만든 UI에 이 데이터를 표시합니다. 이 예제를 짧게 유지하기 위해 색 정보는 목록에서 하드 코딩되지만 데이터 원본에서 색 정보를 추출하거나 즉석에서 계산하도록 어댑터를 수정할 수 있습니다. 어댑터에 대한 ListView 자세한 내용은 ListView를 참조하세요.

애플리케이션을 빌드 및 실행합니다. 다음 스크린샷은 디바이스에서 실행할 때 앱이 표시되는 방법의 예입니다.

Mac용 Visual Studio

새 프로젝트 만들기

첫 번째 단계는 새 Xamarin.Android 프로젝트를 만드는 것입니다.

Mac용 Visual Studio 시작하고 새 프로젝트를 클릭합니다. Android 앱 템플릿을 선택하고 다음을 클릭합니다.

새 앱 의 이름을 DesignerWalkthrough로 지정합니다. 대상 플랫폼에서 최신 및 최대 항목을 선택하고 다음을 클릭합니다.

다음 대화 상자 화면에서 만들기를 클릭합니다.

레이아웃 추가

다음 단계는 사용자 인터페이스 요소를 보유하는 LinearLayout을 만드는 것입니다.

Mac용 Visual Studio 솔루션 패드에서 리소스/레이아웃을 마우스 오른쪽 단추로 클릭하고 새 파일 추가>...를 선택합니다. 새 파일 대화 상자에서 Android > 레이아웃을 선택합니다. 파일 list_item 이름을 지정하고 새로 만들기를 클릭합니다.

이 파일을 추가하면 새 list_item 레이아웃이 디자인 화면에 표시됩니다(메시지가 표시되면 이 프로젝트에 성공적으로 컴파일되지 않은 리소스가 포함되며 렌더링이 영향을 받을 수 있습니다. 빌드 > 빌드를 클릭하여 프로젝트를 빌드합니다.)

디자이너 아래쪽의 원본 탭을 클릭하여 이 레이아웃의 XML 원본을 봅니다. 오른쪽의 문서 개요 탭을 클릭하면 레이아웃에 현재 단일 LinearLayout 위젯이 포함됨이 표시됩니다.

다음 단계는 색 브라우저 앱에 대한 사용자 인터페이스를 만드는 것입니다.

목록 항목 사용자 인터페이스 만들기

화면 아래쪽의 디자이너 탭을 클릭하여 디자이너 화면으로 돌아갑니다. 오른쪽의 도구 상자 창에서 이미지 및 미디어 섹션까지 아래로 스크롤하여 다음을 찾ImageView습니다.

또는 검색 창에 ImageView를 입력하여 다음을 찾을 ImageView수 있습니다.

이를 ImageView 디자인 화면으로 끌어다 놓습니다(ImageView색 브라우저 앱에서 색 견본을 표시하는 데 사용됩니다.)

그런 다음 도구 상자에서 디자인 화면으로 위젯을 끕 LinearLayout (Vertical) 니다. 파란색 윤곽선은 추가 LinearLayout된 경계를 나타냅니다. 문서 개요는 아래imageView1 (ImageView)의 LinearLayout자식임을 보여줍니다.

디자이너에서 선택하면 ImageView 파란색 윤곽선이 이동하여 을 묶습니다 ImageView. 또한 선택 영역은 문서 개요로 이동합니다imageView1 (ImageView).

그런 다음 도구 상자에서 새로 추가LinearLayout된 위젯으로 위젯을 끕 Text (Large) 니다. 마우스를 디자인 화면으로 끌면 새 위젯이 삽입되는 위치가 강조 표시됩니다. 위젯은 Text (Large) 다음과 같이 내부에 linearLayout1 있어야 합니다.

다음으로 위젯 아래에 위젯을 Text (Large) 추가 Text (Small) 합니다. 이 시점에서 디자인 화면은 다음 스크린샷과 유사해야 합니다.

두 textView 위젯이 내부에 linearLayout1없는 경우 문서 개요로 끌어 linearLayout1 서 이전 스크린샷(아래 linearLayout1들여쓰기)에 표시된 대로 표시되도록 배치할 수 있습니다.

사용자 인터페이스 정렬

다음 단계는 두 위젯이 오른쪽ImageView에 쌓여 있는 왼쪽 TextView 에 표시 ImageView 되도록 UI를 수정하는 것입니다.

1. 선택한 상태에서 ImageView 속성 탭을 클릭합니다.

2. 속성 탭 바로 아래에서 레이아웃을 클릭합니다.

3. ViewGroup까지 아래로 스크롤하고 설정을 다음과 같이 wrap_content변경 Width 합니다.

설정을 변경하는 Width 또 다른 방법은 위젯의 오른쪽에 있는 삼각형을 클릭하여 너비 설정을 다음으로 토글하는 것입니다 wrap_content.

삼각형을 다시 클릭하면 설정이 Width .로 match_parent반환됩니다. 다음으로 문서 개요 창으로 이동하여 루트LinearLayout를 선택합니다.

루트 LinearLayout 를 선택한 상태에서 속성 탭으로 돌아가서 위젯을 클릭합니다. Orientation 아래와 같이 설정을 horizontal 변경합니다. 이 시점에서 디자인 화면은 다음 스크린샷과 유사해야 합니다. 위젯이 TextView 다음의 오른쪽으로 이동되었습니다.ImageView

간격 수정

다음 단계는 위젯 사이에 더 많은 공간을 제공하도록 UI에서 안쪽 여백 및 여백 설정을 수정하는 것입니다. 속성을 ImageView 선택하고 [속성] 아래에서 [레이아웃] 탭을 클릭합니다. toMin Width, to 50dpMin Height 및 Padding to를 70dp변경합니다10dp. 그러면 안쪽 여백이 모든 면에 ImageView 적용되고 세로로 늘어나게 됩니다.

위쪽, 오른쪽, 아래쪽 및 왼쪽 안쪽 여백 설정은 각각 , Right, Bottom및 Left 안쪽 여백 필드에 값을 Top입력하여 독립적으로 설정할 수 있습니다. 예를 들어 안쪽 여백 값을 5dpTopLeft/>로 설정하고 , Right패 Bottom 딩 값을 .로 10dp설정합니다. 이러한 값의 Padding 쉼표로 구분된 목록으로 설정이 변경됩니다.

다음으로, 두 TextView 위젯이 LinearLayout 포함된 위젯의 위치를 조정합니다. 문서 개요에서 .를 선택합니다linearLayout1. [속성] 창에서 [레이아웃] 탭을 선택합니다. [보기 그룹] 섹션까지 아래로 스크롤하고 , Top, Right여백5dp을 Bottom 각각 , 및 0dp5dp5dp 로 설정합니다Left.

기본 이미지 제거

ImageView 이미지가 아닌 색을 표시하는 데 사용되므로 다음 단계는 템플릿에서 추가한 기본 이미지 원본을 제거하는 것입니다.

1. ImageView를 선택합니다.

2. 속성 아래의 위젯 탭을 클릭합니다.

3. 비워 Src 두도록 설정을 지웁다.

이렇게 하면 원본 XML에서 제거됩니다 android:src="@android:drawable/ic_menu_gallery"ImageView.

ListView 컨테이너 추가

이제 list_item 레이아웃이 정의되었으므로 다음 단계는 주 레이아웃에 추가하는 ListView 것입니다. 여기에는 ListView list_item 목록이 포함됩니다.

솔루션 탐색기 Resources/layout/Main.axml을 엽니다. Button 위젯(있는 경우)을 클릭하고 삭제합니다. 도구 상자에서 위젯을 ListView 찾아 디자인 화면으로 끕니다. ListView 디자이너의 테두리가 선택될 때 테두리를 윤곽선으로 표시하는 파란색 선을 제외하고는 비어 있습니다. 문서 개요를 보고 ListView가 올바르게 추가되었는지 확인할 수 있습니다.

기본적으로 값은 ListViewId .입니다 @+id/listView1. 문서 개요에서 여전히 선택되어 있는 동안 listView1 속성 창을 열고 정렬 기준, 범주를 차례로 선택합니다. Main을 열고 Id 속성을 찾은 다음 해당 값을 다음으로 @+id/myListView변경합니다.

이 시점에서 사용자 인터페이스를 사용할 준비가 된 것입니다.

애플리케이션 실행

MainActivity.cs 열고 해당 코드를 다음으로 바꿉다.

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; }
    }
}

이 코드는 사용자 지정 ListView 어댑터를 사용하여 색 정보를 로드하고 방금 만든 UI에 이 데이터를 표시합니다. 이 예제를 짧게 유지하기 위해 색 정보는 목록에서 하드 코딩되지만 데이터 원본에서 색 정보를 추출하거나 즉석에서 계산하도록 어댑터를 수정할 수 있습니다. 어댑터에 대한 ListView 자세한 내용은 ListView를 참조하세요.

애플리케이션을 빌드 및 실행합니다. 다음 스크린샷은 디바이스에서 실행할 때 앱이 표시되는 방법의 예입니다.

요약

이 문서에서는 Visual Studio에서 Xamarin.Android Designer를 사용하여 기본 앱에 대한 사용자 인터페이스를 만드는 과정을 안내했습니다. 목록에서 단일 항목에 대한 인터페이스를 만드는 방법을 설명했으며 위젯을 추가하고 시각적으로 배치하는 방법을 설명했습니다. 또한 리소스를 할당한 다음 해당 위젯에 다양한 속성을 설정하는 방법을 설명했습니다.