하단에 메뉴가 있고 배경이 여러이미지로 슬라이딩되면서 변경되는 화면을 구성하는 방법을 소개한다.


우선 Grid 를 배치하고 Grid 안으로 CarouselView 를 위치하고 좌측 상단에 로고 이미지를

하단에는 메뉴 아이콘을 배치했으며 이미지가 가로로 스크롤이 되도록 CarouselView 의  ItemsLayout 속성을 "HorizontalList" 으로 설정한다.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:d="http://xamarin.com/schemas/2014/forms/design"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             mc:Ignorable="d"

             x:Class="SlideImage.MainPage">


    <StackLayout Margin="0" Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Black">

        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0" Padding="0" ColumnSpacing="0" RowSpacing="0" BackgroundColor="White">

            <CarouselView  x:Name="mainView" ItemsLayout="HorizontalList" Margin="0" BackgroundColor="LightYellow" HorizontalScrollBarVisibility="Always">

                <CarouselView.ItemTemplate>

                    <DataTemplate>

                        <Image Source="{Binding ImageSrc}" Aspect="Fill"/>

                    </DataTemplate>

                </CarouselView.ItemTemplate> 

            </CarouselView>


            <Image Source="keisoft_textlogo.png" WidthRequest="100" HeightRequest="30" VerticalOptions="Start" HorizontalOptions="Start" Margin="10,0,0,0"/>


            <StackLayout VerticalOptions="End" Padding="0,0,0,20" HorizontalOptions="Center" Orientation="Horizontal" Spacing="20">

                <Image Source="main_store.png" WidthRequest="60" HeightRequest="60" >

                    <Image.GestureRecognizers>

                        <TapGestureRecognizer Tapped="StoreButton_Clicked"></TapGestureRecognizer>

                    </Image.GestureRecognizers>

                </Image>

                <Image Source="main_menu.png" WidthRequest="60" HeightRequest="60" >

                    <Image.GestureRecognizers>

                        <TapGestureRecognizer Tapped="MenuButton_Clicked"></TapGestureRecognizer>

                    </Image.GestureRecognizers>

                </Image>

                <Image Source="main_order.png" WidthRequest="60" HeightRequest="60" >

                    <Image.GestureRecognizers>

                        <TapGestureRecognizer Tapped="CartButton_Clicked"></TapGestureRecognizer>

                    </Image.GestureRecognizers>

                </Image>

                <Image Source="main_member.png" WidthRequest="60" HeightRequest="60" >

                    <Image.GestureRecognizers>

                        <TapGestureRecognizer Tapped="PersonButton_Clicked"></TapGestureRecognizer>

                    </Image.GestureRecognizers>

                </Image>

            </StackLayout>

        </Grid>

    </StackLayout>

</ContentPage>


여기에 일정 시간 간격으로 이미지가 자동으로 스크롤이 되도록 Timer 를 이용해 처리하면 아래 와 같은 화면이 완성된다.

Device.StartTimer(TimeSpan.FromSeconds(3), (Func<bool>)(() =>
{
    this.mainView.Position = (this.mainView.Position + 1) % 3;
    return true;
}));


자동으로 가로로 스크롤 되며 터치로도 슬라이드 동작을 하면 스크롤 된다.


* 이미지는 저작권이 있으므로 마음대로 쓰면 안됨.


소스

https://github.com/kei-soft/Slide-Image

 
KCP 가입완료 후에는 아임포트관리자페이지 에서 KCP에서 발급받으신 실 상점정보로 PG설정후 KCP측으로 카드사 심사 진행 부탁 드립니다. 
  
[NHN KCP 테스트모드 - 일반결제 PG설정방법]
 
1. 아임포트관리페이지( https://admin.iamport.kr) 회원가입(로그인) 후 > 시스템 설정 > PG설정(일반결제 및 정기결제) > PG사 "NHN KCP(엔에이치엔한국사이버결제)" 선택하시고,
    테스트모드 [ON] 상태에서 [전체저장] 버튼을 클릭 해 주세요. 

  <설정 화면 예시>   

2. 아임포트 웹훅(Notification URL) 설정방법(자체 개발시) 

    - 아임포트 Webhook을 사용함으로써 아임포트 서버에 저장된 데이터를 서버에 동기화하고 네트워크 불안정성을 보완할 수 있습니다.
    - 설정 방법 : 웹훅 설정 매뉴얼 https://docs.iamport.kr/tech/webhook 링크 내용 참고하시어
                         아임포트관리자페이지 > 시스템설정 > 웹훅(Notification) 설정 메뉴에서 "웹훅(Notification) 발송 공통 URL" 항목에 설정 해 줍니다. 
  <설정 화면 예시>  
  

 

3. 결제 연동(API개발시) 
 - 결제연동 매뉴얼(통합) : https://docs.iamport.kr/ 
 - 일반 인증결제 연동 매뉴얼 : https://docs.iamport.kr/implementation/payment
 - API 문서 : https://api.iamport.kr/   
 - 참고 : 워드프레스 플러그인으로 이용중이신 경우 https://docs.iamport.kr/wordpress/introduction 참고하시기 바랍니다.




 
[NHN KCP 테스트모드 - 정기결제 PG설정방법]  

 1. 아임포트관리페이지( https://admin.iamport.kr)  > 시스템 설정 > PG설정(일반결제 및 정기결제) >  PG사 "NHN KCP 빌링결제 (엔에이치엔한국사이버결제)" 선택하고 테스트모드 [ON] 상태에서 [전체저장] 버튼을 클릭 해 주세요.  
 
 - 참고 : 일반인증결제와 정기결제 모두 이용하시는 경우 기본PG 아래 탭 "+PG사추가"를 클릭하시어 추가PG로 설정 하시기 바랍니다.
             (동일PG사를 이용하셔도 아임포트에 PG설정을 2개 이상하게 되므로 아임포트 복수PG서비스로 적용되어 비용(부가세포함 11만원/최초 1회) 발생되니 이용에 참고 부탁 드립니다.
 - 복수PG이용시 속성 사용 방법 : https://docs.iamport.kr/tech/pg-parameter
 - KCP 테스트용 빌링(정기)결제 사이트코드 : BA001
 
<설정 화면 예시>

 
2. 아임포트 웹훅(Notification URL) 설정방법(자체 개발시)
 - 일반인증결제 방법 과 동일하게 설정 해 주시면 됩니다.

3. 결제 연동
 - 빌링키 발급을 위한 결제창 호출은 일반결제시와 동일하나 customer_uid파라메터만 하나 추가된다고 이해하시면 됩니다.  
 
 - API 문서 : https://api.iamport.kr/
 - 참고 : 워드프레스 플러그인으로 이용중이신 경우 https://docs.iamport.kr/wordpress/woocommerce-subscription 참고하시기 바랍니다.  


WebView 를 쓰게되면 iOS 배포시 에서 아래와 같은 메일이 온다.

(Renderer 를 사용할때 WkWebViewRenderer 을 사용해도 마찬가지)

Dear Developer,

We identified one or more issues with a recent delivery for your app, "***" 1.0.0 (12). Your delivery was successful, but you may wish to correct the following issues in your next delivery:

ITMS-90809: Deprecated API Usage - Apple will no longer accept submissions of new apps that use UIWebView as of April 30, 2020 and app updates that use UIWebView as of December 2020. Instead, use WKWebView for improved security and reliability. Learn more (https://developer.apple.com/documentation/uikit/uiwebview).

After you’ve corrected the issues, you can upload a new binary to App Store Connect.

Best regards,

The App Store Team


우선 이내용이 있다고해서 배포가 안되는건 아니다.

App Store 에 배포는 가능하지만 거슬린다면 아래처럼 진행하면 된다


iOS 프로젝트 속성 > iOS 빌드에서 링커동작을 'Link All' 로 선택하고

추가  mtouch 인수에 '--optimize=experimental-xforms-product-type

값을 넣고 배포하면 문제가 해결된다.




참고

https://devblogs.microsoft.com/xamarin/uiwebview-deprecation-xamarin-forms/


1. POPUP – RG.PLUGINS.POPUP
A lot of times when developing your applications, you are required to create a kind of popup as a message box or confirmation dialog. The best plugin I have seen and used over time is the Rg.Plugins.Popup.

This plugin is a cross platform plugin that allows you to open pages as popup in your Android, iOS and UWP projects.

Before you can use this plugin, you have to do some initialization in each platform you are targeting. This initialization must come before the initialization of Xamarin.Forms.

To see how to implement this plugin, click here.

2. ESSENTIALS – XAMARIN.ESSENTIALS
There are basic and essential implementations that are required for your application to work seamlessly such as checking for connectivity, getting device information, geolocation and lots more.

The folks at Microsoft have made all these possible in a single plugin called Xamarin Essentials. You get this plugin by default every time you create a new project.

For example, see how easy it is to get geolocation from the device with few lines of code. The only extra step is to set the permission required for the features you are implementing.

try
{
var location = await Geolocation.GetLastKnownLocationAsync();
if (location != null)
{
Console.WriteLine($"Latitude: {location.Latitude}, Longitude: {location.Longitude}, Altitude: {location.Altitude}");
}
}
catch (Exception ex)
{
// Unable to get location
}
view rawgeolocation.cs hosted with ❤ by GitHub

To see how implement geolocation and use it with a map, click here.

3. MODEL-VIEW-VIEWMODEL – MVVM HELPER
The Model-View-ViewModel (MVVM) pattern helps to cleanly separate the business and presentation logic of an application from its user interface (UI).

Maintaining a clean separation between application logic and the UI helps to address numerous development issues and sometimes implementing this pattern can prove difficult and mundane for both new and experience developers.

MVVM Helpers make the implementation of MVVM pattern easy and less time consuming so that you can focus more on the business logic.

An example of the helper I commonly use is the is the SetPropery & GetProperty helpers which takes away the stress of implementing INotifyPropertyChanged.

Check out this video here detailing how to implement MVVM Helpers.

4. IMAGE LOADING – FFIMAGELOADING
FFImageLoading is a cross platform image library for loading images quickly and easily. It supports image file formats such as GIF, SVG and WebP.

One interesting feature of this plugin is caching. If you have multiple image controls that are using the same image source, the plugin will load the source image once and use the cached version for the rest thereby reducing data consumption of the app.

You can perform some fade-in animations with your images and also apply transformations such as crop, blur, grayscale, round corner, flip and rotation.

5. MONETIZATION – IN-APP BILLING PLUGIN
Often times you need to integrate monetization into your mobile apps in order to generate revenue. This is usually by introducing in-app purchases in form of remove ads feature, buying in-game currency or upgrading to the Pro version of the app.

The In-App Billing Plugin supports three types of in-app purchase. Consumables, Non-Consumables and Subscriptions.
 Consumables can be described as any one-time service within the app. For example, in-game currency or extra health.
• Non-Consumables are items that can only be purchased once such as removing ads, books, game levels, and additional app functionality
• Subscriptions are auto-renewable payments which can be monthly or yearly and non-renewable subscription that expires after a set amount of time.

6. CRASH REPORT – APP CENTER
App Center contains a lot of features to help you with your mobile app development. The two major features I have used over the years are App Center Crashes and App Center Analytics.

App Center Crashes will automatically generate a crash log every time your app crashes. Collecting crashes work for apps in beta and live apps.

To implement crash reporting and analytics, you need app secrets which you can get by registering on App Center Website. Note that if you are targeting more than one platform, you will need to create the application for each platform to get app secrets for each platform.

In order to use App Center Plugin, you have to install the plugin into your projects and then proceed to your App.xaml.cs to initialize the plugin by supplying the app secret for each platform.
You can start tracking errors like this within your code.

7. CACHING – MONKEY CACHE
Monkey Cache provides easy ways to cache any data structure for a specific amount of time. For example, you are making a web request and you get some response back from the server, you want the ability to cache this data in case you go offline, but also you need it to expire after a certain number of minutes or hours. Monkey Cache provides you with these capabilities.

To set up Monkey Cache, first, select an implementation of Monkey Cache that you would like (LiteDB, SQLite, or FileStore). Install the specific NuGet for that implementation, which will also install the base MonkeyCache library.

You will require to set a custom Application ID for your application so that the Cache engine can uniquely identify your application.

8. AUDIO & VIDEO – MEDIA MANAGER PLUGIN
Media content is the future of content and there is a need to put this into consideration when developing mobile applications.

MediaManager Plugin is a cross platform Xamarin plugin that simplifies access to the device’s native media functions and make it easy for your user to interact with audio and video in your mobile apps.

The features include native playback of media files from both local and remote sources, notifications, media controls and playback status. It also allows you to add multiple media items for sequential playback.

This plugin requires initialization in each of the platform you are targeting.

9. ANIMATION – XAMARIN.FORMS.LOTTIE
Lottie is a cross platform library, which allows you to run animations within your applications.

These animations are defined in a JSON file containing all the details of colors, shapes and transforms. You need Adobe After Effects in order to create these JSON files, however, there are lots of free lottie animation out there that are shared by designers.

To get started, first install the Nuget package to your projects and then initialize it in your respective projects. In order to show an animation, you need to put the After Effects JSON file in your Assets (Android) or Resources (iOS) folder and then load it into the animation view.

10. GRADIENT & CURVED LAYOUT – PANCAKE VIEW
App designs usually contain views with gradients, borders, rounded corners and shadows. Developers implementing these designs in Xamarin Forms require layouts that support these specifications.

Pancake View is a plugin that supports gradients, borders, rounded corners and shadows. Implementing Pancake View is very simple and straightforward. First, install the plugin in your projects and then tell your XAML page where it can find the Pancake View by adding the namespace to your XAML code.

You can now call the Pancake View Control and add properties the suits the design you are working with.

11. CONTENT ANIMATION – SHARED TRANSITION ANIMATION
Animation has a way of spicing up the user experience of your mobile application. Micro-interactions, transitions, and in-app animations are usually used to explain the logic of an app to a user and improve the overall app usability.

Shared Transition Plugin allows you to implement shared element transitions by connecting common elements from one page to another. A shared element transition determines how elements that are present in two pages transition between them.

12. FILE PICKER
Your application may require the use of file from the user’s device for viewing, editing and other file operations.

File Picker Plugin is a simple cross platform plugin that allows you to pick files and work with them. You can select any file type or set the allowed type in order to limit the files that can be selected.

13. FINGERPRINT AUTHENTICATION – FINGERPRINT PLUGIN
Fingerprint authentication provide applications with an alternative to the conventional username and password method used for user authentication and makes it possible for your application to implement security that is less intrusive.

A fingerprint must already be enrolled with the device for the user to be authenticated successfully.

Xamarin Fingerprint Plugin is a cross platform plugin that allows you to authenticate users with the enrolled fingerprint on their devices. To start using the plugin, you must initialize and request the necessary permissions in all the platforms you are targeting.

14. CHARTS – MICROCHARTS PLUGIN
Chart in mobile applications is a great way to present a clear overview of numerical data and show the relationship of such data. Microcharts is a selection of common charts that are easy to use, visually pleasing, and provides ready-to-use charts in your Xamarin Forms Applications.

There is a wide range of charts included in Microcharts Plugin for you to choose from such as the Bar Chart, Pie Chart, Line Chart, Point Chart and others. You can select the chart that best fit your data within your application.

BONUS: MATHEMATICS – CSHARP MATH
Has there ever been a need to display mathematical formulae in your application but cannot find any tool to help you? CSharp Math is what you are looking for. This is a library that allows you to display mathematical expressions within your mobile applications.

It makes use of LaTeX engine to convert plain text into high-quality mathematical expression for display on your mobile app screen.

It works perfectly in both XAML and C# code.

15. GRAPHICS – SKIASHARP PLUGIN
Many apps require special controls that are not part of the native kit and to achieve this, there is a need to render 2D graphics directly and natively on the app.

SkiaSharp is a cross platform library that allows to directly draw on the UI canvas and makes it possible to create complete custom controls. It is a 2D graphics library that provides a rich API to basically draw fancy things on the UI canvas.

Questions of the Day.
1. What other nuget packages do you use that are not mentioned? Let me know in the comments below.
2. Which of these nuget package would you like me to implement in a future video? Let me know in the comments below.

출처 : https://devcrux.com/blog/15-nuget-packages-for-xamarin-forms-and-net/

iOS 프로젝트를 정리하고 재 빌드하면 된다. 끝.

도대체 왜 이런건지 알수가 없네..;;

윈도우에서 작업하던 소스를 갑사에서 mac 에서 소스를 열어서 테스트 하는데
이미지 탭한 경우 이벤트 발생이 안되는 현상 발생되었다

일단 결론부터 말하면 원인은 4월2일 xCode 11.4 로 업데이트 되었는데 
이전에 배포되었던 Xamarin.iOS 13.16 버전이 문제가 있어 이미지 탭한 경우 
탭 이벤트가 발생안되는 현상이었다.

[아래 링크 참고 (모든 탭 이벤트 먹통됨)]

언제인지 모르겠으나 이후 MS 에서 문제점을 알고 버그 픽스 버전을 출시예정이라고 한다.
(현시점 2주안에 해결해 준다고 하는데.....)

Xamarin.iOS 이전 버전을 설치하여 해결가능하다고 하여 아래링크의 pkg 를 받아 설치해보았다.

설치하고 정상동작 되는 걸 확인.


윈도우에서 개발을 하여 테스트를 하고 있었는데 
윈도우에서 비쥬얼 스튜디오를 이용해 작업하는경우 mac 연결 시
자동으로 Xamain.iOS 버전을 13.16.0.11 을 설치했었는데 그땐 에뮬 동작이 제대로 동작된다.;
하지만 iOS 에서 솔루션 열면 또 안되는.. 머 이런 .

하필 갑한테 보여주는날.. ㅜㅠ

결론 
이전버전으로 돌리거나 
좀 기다렸다가 최신으로 업데이트 받으면 된다.


* 추가

mac 에서는 preview 버전 13.18 을 설치하면 정상 동작 된다고 한다.

아래는 주문 이력 화면 예시로 

CollectionView 에서 Header 가 있는 경우 처리하는 방법입니다.

        <CollectionView
                x:Name="historyCollectionView"
                Margin="5"
                SelectionMode="Single"
                EmptyView="주문이력이 없습니다."
                SelectionChanged="OnCollectionViewSelectionChanged" >
            <CollectionView.Header>
                <StackLayout>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="90" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="70" />
                            <ColumnDefinition Width="70" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="주문일자" TextColor="Black" FontSize="15" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="1" Text="주문매장" TextColor="Black" FontSize="15" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="2" Text="주문상태" TextColor="Black" FontSize="15" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="3" Text="주문가격" TextColor="Black" FontSize="15" VerticalTextAlignment="Center" HorizontalTextAlignment="End"/>
                    </Grid>
                    <BoxView HeightRequest="1" HorizontalOptions="FillAndExpand" Color="Black"/>
                </StackLayout>
            </CollectionView.Header>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0,10,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="90" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="70" />
                            <ColumnDefinition Width="70" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="{Binding ORDER_DATE}" TextColor="Black" FontSize="12" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="1" Text="{Binding STORE_NAME}" TextColor="Black" FontSize="13" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="2" Text="{Binding ORDER_STATUS}" TextColor="Black" FontSize="12" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        <Label Grid.Column="3" Text="{Binding PRICE, StringFormat='{0:N0}'}" TextColor="#B32026" FontSize="15" VerticalTextAlignment="Center" HorizontalTextAlignment="End"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

* EmptyView 는 항목이 없는 경우 중간에 Text 로 표시가 필요할 때 사용한다.

위 내용을 데이터를 체우면 아래 처럼 표시 된다.

 

 

 

애플 개발자 계정에 아이폰 기기를 등록하는 과정을 설명합니다.


1. 앱개발자 사이트 접속 (https://developer.apple.com/account/#/welcome) 하여 Certificates, Identifiers & Profiles 선택


2. 죄측메뉴 중 Devices 메뉴 선택후 우측의 파란바탕의 + 버튼 클릭


3. Device Name 을 입력하고 DeviceID(UDID) 입력

UDID 확인은 iTune 를 연결하여 확인하거나 아래 작성글을 참고해서 폰에서도 확인 가능

(https://kjcoder.tistory.com/985)


4. Register 버튼을 클릭


5. Done 버튼 클릭하여 등록 완료


* 여기 까지만 하면 맥과 폰을 연결해도 비쥬얼 스튜디오에서 목록이 나타나지 않는다.


6. 맥과 폰을 연결하여 iTune 를 실행하여 아래처럼 화면이 뜨면 신뢰 클릭 (폰에서도 신뢰 선택)


7. 비쥬얼 스튜디오에서 기기 목록이 뜨는지 확인


NavigationPage.SetHasNavigationBar(this, false);

NavigationPage  를 쓰면서 메인 페이지에서 백버튼 눌렀을 경우

DisplayAlert (종료확인창)을 띄우는 방법은 아래와 같다.


        protected override bool OnBackButtonPressed() 
        {
            if (Navigation.NavigationStack.LastOrDefault() == null)
            {
                Device.BeginInvokeOnMainThread(new Action(async () =>
                {
                    if (await DisplayAlert("종료확인", "종료하시겠습니까?", "네", "아니오"))
                    {
                        System.Diagnostics.Process.GetCurrentProcess().CloseMainWindow();
                    }
                }));
            }

            return true; 
        }


Navigation.NavigationStack 을 확인하여 메인 페이지 인지 확인한 후 Device.BeginInvokeOnMainThread 를 이용하여 await DisplayAlert 를 이용해 팝업 창을 띄우고 종료한다.

+ Recent posts