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


우선 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

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 를 이용해 팝업 창을 띄우고 종료한다.

QrMemo 앱을 만들었다


아이폰

https://apps.apple.com/app/id1493547282


안드로이드

https://play.google.com/store/apps/details?id=kr.kjun.QrMemo


아들 책에 큐알코드로 유투브 동영상 링크가 있는데

가끔 다시 찾을때 책을 찾아 스캔해야하는 불편함에 만들게 되었다.


큐알코드 이외 바코드도 스캔이 가능하다.

또한 웹링크 저장용으로도 쓸수 있다.


좌측 우측 슬라이드를 통해 수정 및 삭제, 링크이동 및 공유가 가능하다.

  


스캔하기 버튼을 클릭하면 스캔화면이 나오고 영역안으로 바코드나 큐알코드 를 찍으면

  


저장 할껀지 링크이동을 할껀지 묻는다.

저장 시 필요한 그룹과 제목을 넣고 저장하면 된다.

  


처음 사용 시에는 그룹이 없기때문에 그룹을 추가해야한다.


그룹은 설정 버튼을 통해 편집이 가능하다.


그룹명과 제목으로 조회할 수 있다.



<application

    android:usesCleartextTraffic="true">

            ...

</application>```


android 의 AndroidManifest.xml 쪽에 android:usesCleartextTraffic="true" 항목을 추가해주면 된다.

예전에 빌드 했던 앱을 열어서 Nuget 을 모두 업데이트 했는데 

아래 처럼 에러가 발생되었다.



unable to get provider com.google.android.gms.ads.mobileadsinitprovider: java.lang.illegalstateexception


해결방법은 AndroidManifest.xml 파일에

아래처럼 AdMob 에서 할당된 앱의 고유 ID 를 넣으면 해결된다.


<application android:label="UnitConversion" android:icon="@drawable/module48">

    <meta-data

        android:name="com.google.android.gms.ads.APPLICATION_ID"

        android:value="ca-app-pub-4681470946279796~5708961527"/>

</application>


앱의 ID 는 AdMob 사이트에서 아래 처럼 확인 할 수 있다.


이전에는 저 항목이 없어도 광고 표시에 문제가 없었는데 버전업이 되면서 필수 항목으로 바뀐듯하다.



+ Recent posts