본문 바로가기

XAMARIN

[Xamarin] iOS SafeArea 자연스럽게 반영해주는 CustomEffect iOS SafeArea 자연스럽게 반영해주는 CustomEffect Android 기기와 달리 iOS 기기는 화면 상단에 위치하는 Status bar 가 Application 화면 크기에 포함되어 있어서 UI 를 만들 때 최상단에 위치한 View 의 Padding 에 20 을 추가해야 화면과 Status bar 가 겹치는 불상사를 피할 수 있습니다. 그래서 대체로 아래와 같이 iOS 에서만 따로 Padding 값을 적용하는 코드를 작성하게 됩니다. 기기를 회전하지 않으면 이대로 사용해도 문제가 없었는데, 만약 기기를 회전시키면 Status bar 의 위치가 달라지게 되니Padding 값도 회전에 맞춰서 다시 조정해야 합니다. 따라서 기기의 Orientation 의 변화를 감지해서 Padding 의 어느 ..
[Xamarin] Renderer 를 만들었더니 BackgroundColor 가 적용되지 않을 때 해결하는 방법 Renderer 를 만들었더니 BackgroundColor 가 적용되지 않을 때 해결하는 방법 Xamarin 으로 개발하다가 특정 Layout 의 CustomRenderer 를 만들었더니 View.BackgroundColor 에 적용한 배경색이 사라지는 버그를 만났고, 해결 과정을 공유합니다. 해결방법은 의외로 간단했습니다. CustomRenderer를 ViewRenderer가 아닌 VisualElementRenderer 로 상속받아 아래와 같이 구현하면됩니다. [assembly: ExportRenderer(typeof(MyView), typeof(MyViewRenderer))] namespace Solution.iOS { public class MyViewRenderer : VisualElementRe..
[Xamarin] View 안에 View 를 주입할 수 있는 View 를 작성해보자 View 안에 View 를 주입할 수 있는 View 를 작성해보자 View 안에 여러 View 를 주입하고 속성에 따라 교체하는 ContainerView 를 구현하거나, NavigationBar 의 크기와 모양만 잡아두고 Button 을 추가하는 등 활용하는 방법이 많으니 알아두시면 유용합니다. 예제 코드 ContainerView // ContentView.Content 를 Views 속성으로 연결하는 Attribute [ContentProperty(nameof(Views))] public class ContainerView : ContentView { // 주입된 View 를 배치하는게 사용할 Layout private StackLayout _layout; // 외부에서 주입할 View 를 저장할 자료..
[Xamarin] BindableProperty 를 Override 해보자 BindableProperty 를 Override 해보자 Xamarin 으로 View 를 개발하다보면 재활용성을 높이기 위해 기존의 View 를 상속받아서 개발하게 됩니다. 특히 특정 스타일의 View 를 반복적으로 사용할 때 아래와 같이 작성하게 됩니다. public class MyFrame : Frame { private readonly Label _title; public string Title { set => _title.Text = value; } public MyFrame() { BackgroundColor = Color.LightPink; _title = new Label { TextColor = Color.Black, FontSize = 16, }; Content = _title; } } ..
[Xamarin] Item 이 Layout 에 따라 자동으로 배치되도록 해보자 Item 이 Layout 에 따라 자동으로 배치되도록 해보자 ItemsView 개발 배경 ListView 나 CollectionView 는 Xamarin 팀에서 제공하는 Layout 만 사용해야 하는 단점이 있습니다. 저는 이를 극복해보고자 CollectionView.ItemsLayout 에 저만의 레이아웃을 추가해보려고 했지만 실패했고, Custom Layout 을 활용해서 Item 을 배치할 수 있는ItemsView를 만들게 되었습니다. 글 순서는 프로젝트에 바로 사용하실 수 있도록 배치했습니다. 소스코드 활용방법 설명 ItemsView 소스코드 [ContentProperty(nameof(ItemsLayout))] public abstract class ItemsView : ContentView, I..
[Xamarin] 화면 크기에 따라 변화하는 ResponsiveLayout 을 만들어 보자 화면 크기에 따라 변화하는 ResponsiveLayout 을 만들어 보자 먼저 이 글의 목적은 두 가지입니다. 먼저 공식 문서의 엉성한 번역으로 고생하시는 개발자 분들에게 친절한 설명을 제공하는게 목적입니다. 그리고 추가적으로 이 글 이후에 작성할 ItemsView 에 대한 글을 이해하기 위한 기초 지식을 제공하고자 합니다. Layout 을 직접 구현해야 할까? Xamarin 에서 기본적을 제공하는 Layout 은 아래와 같이 5 가지가 제공됩니다. 각 Layout 마다 특징도 다르고 앱을 만들 때 5 가지 이외 레이아웃이 필요한 상황도 드물기 때문에, Layout 을 직접 구현하게 되는건 드뭅니다. 하지만 Layout 구현에 대한 기초적인 지식을 가지고 있으면 View 의 크기와 배치가 어떻게 결정되는..
[Xamarin] BindableProperty 구현하고 관리하는 방법 BindableProperty 구현하고 관리하는 방법 마이크로소프트 공식 문서 에서 BindableProperty 를 구현하는 방법을 소개하고 있습니다. 다만 아쉽게도 공식문서엔 BindalbeProperty 코드를 재사용하거나 관리하는 측면에 대한 디테일한 설명이 없어서 글을 작성하게 되었습니다. 먼저 공식 문서대로 하면 BindableProperty 는 기본적으로 아래와 같이 구현하게 됩니다. public class MyContentView : ContentView { public static readonly BindableProperty NameProperty = BindableProperty.Create ("Name", typeof(string), typeof(MyContentView), null..
[Xamarin] Effects 로 Platform-Specific 하게 구현하기 Effects 로 Platform-Specific 하게 구현하기 Xamarin 에서 UI 를 플랫폼 별로 커스터마징할 때는 Effect 와 Custom Renderer 을 사용합니다. 이 글에서는 Effect 를 사용하는 방법을 설명하겠습니다. Effect Effect 는 Custom Renderer 을 단순하게 구현하는 방법이라고 이해하시면 됩니다. Effect 를 구현하는 순서는 아래와 같습니다. 지원하고자 하는 플랫폼 프로젝트마다 PlatformEffect 를 상속받는 클래스를 만듭니다. PlatformEffect 를 상속받은 클래스의 OnAttached, OnDetached 메서드를 오버라이딩합니다. ResolutionGroupName 속성과 ExportEffect 속성을 등록합니다. 공통 프로젝..