Cihaz Yönü

Örneği indirme

Kullanıcı deneyimini geliştirmek için, uygulamanın nasıl ve yatay yönlendirmenin nasıl birikebilir olduğunu göz önünde bulundurabilirsiniz. Tek tek düzenler, birden çok yönü barındıracak ve kullanılabilir alanı en iyi şekilde kullanmak üzere tasar kullanılabilir. Uygulama düzeyinde döndürme devre dışı bırakılabilir veya etkinleştirilebilir.

Yönlendirmeyi Denetleme

kullanırken, Xamarin.Forms cihaz yönlendirmesini denetlemenin desteklenen yöntemi, her bir projenin ayarlarını kullanmaktır.

iOS

iOS'ta cihaz yönlendirmesi, Info.plist dosyası kullanılarak uygulamalar için yapılandırılır. Görmek istediğiniz yönergeleri seçmek için bu belgenin üst kısmında yer alan IDE seçeneklerini kullanın:

Android

Android'de yönlendirmeyi kontrol etmek için MainActivity.cs'yi açın ve sınıfını dekore etmek için özniteliğini kullanarak yönlendirmeyi ayarlayın:

namespace MyRotatingApp.Droid
{
    [Activity (Label = "MyRotatingApp.Droid", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation, ScreenOrientation = ScreenOrientation.Landscape)] //This is what controls orientation
    public class MainActivity : FormsAppCompatActivity
    {
        protected override void OnCreate (Bundle bundle)
...

Xamarin.Android, yönlendirme belirtmek için çeşitli seçenekleri destekler:

• Landscape: sensör verisi ne olursa olsun uygulama yönlendirmesini yatay olarak hareketye güç sağlar.
• Portrait: sensör verisi ne olursa olsun uygulama yönlendirmesini dikey olarak güçler.
• Kullanıcı – uygulamanın kullanıcının tercih ettiği yönlendirme kullanılarak sun uzlarak sun uzer.
• Behind: uygulamanın yönlendirmesini, arkasındaki etkinliğin yönlendirmesi ile aynı olmasına neden olur.
• Algılayıcı– kullanıcı otomatik döndürmeyi devre dışı bıraksa bile uygulamanın yönünün algılayıcı tarafından belirlenerek karara varmalarını sağlar.
• SensorLandscape: ekranın yönünü değiştirmek için sensör verilerini kullanırken uygulamanın yatay yönlendirme kullanmasine neden olur (böylece ekranın baş aşağı olarak görülmez).
• SensorPortrait: ekranın yönünü değiştirmek için sensör verilerini kullanırken uygulamanın dikey yönlendirme kullanmalarını sağlar (böylece ekranın baş aşağı olarak görülmez).
• ReverseLandscape: uygulamanın normalden ters yöne bakarak yatay yönlendirme kullanmasine neden olur, böylece "baş aşağı" görünür.
• ReversePortrait: uygulamanın her zamanki ters yöne bakarak dikey yönlendirmeyi kullanması ve böylece "baş aşağı" görünmesine neden olur.
• FullSensor: uygulamanın doğru yönlendirmeyi (olası 4'te) seçmek için algılayıcı verilerine güvenmesini sağlar.
• FullUser– uygulamanın kullanıcının yönlendirme tercihlerini kullanmalarını sağlar. Otomatik döndürme etkinleştirilirse 4 yönlendirmenin hepsi kullanılabilir.
• UserLandscape – [Desteklenmiyor], kullanıcının otomatik döndürmeyi etkinleştirmediği sürece uygulamanın yatay yönlendirme kullanmasine neden olur; bu durumda yönlendirmeyi belirlemek için algılayıcıyı kullanır. Bu seçenek derlemeyi bozacak.
• UserPortrait – [Desteklenmiyor], kullanıcının otomatik döndürmeyi etkinleştirmediği sürece uygulamanın dikey yönlendirmeyi kullanmasına neden olur; bu durumda yönlendirmeyi belirlemek için algılayıcıyı kullanır. Bu seçenek derlemeyi bozacak.
• Kilitli – [Desteklenmiyor], uygulamanın başlatmada ne olursa olsun, cihazın fiziksel yönlendirmesinde değişikliklere yanıt vermeden ekran yönlendirmesini kullanmalarına neden olur. Bu seçenek derlemeyi bozacak.

Yerel Android API'lerinin, kullanıcının ifade tercihleri ile açıkça çelişen seçenekler de dahil olmak üzere yönlendirmenin nasıl yönetiliyor üzerinde büyük bir denetime sahip olduğunu unutmayın.

Evrensel Windows platformu

Universal Windows Platformu'na (UWP) desteklenen yönlendirmeler Package.appxmanifest dosyasında ayarlanır. Bildirimin açılması, desteklenen yönlendirmelerin seçill olduğu bir yapılandırma panelini gösterir.

Yönlendirmede Değişikliklere Tepki Verme

Xamarin.Forms , uygulamanıza paylaşılan kodda yönlendirme değişikliklerini bildirmek için herhangi bir yerel olay sunmaz. Ancak, Xamarin.Essentials yönlendirme DeviceDisplay değişikliklerinin bildirimlerini sağlayan bir [ ] sınıfı içerir.

olmadan yönlendirmeleri algılamak için, değişikliklerinin genişliği veya yüksekliği ne zaman etkin Xamarin.EssentialsSizeChanged hale Page geldiğinde, 'nin durumunu Page izleyebilirsiniz. genişliği yükseklikten Page büyük olduğunda cihaz yatay moddadır. Daha fazla bilgi için bkz. Ekran Yönüne Göre Görüntü Görüntüleme.

Alternatif olarak, bir üzerinde yöntemini geçersiz kılmak ve herhangi OnSizeAllocated bir düzen değiştirme mantığı eklemek de Page mümkündür. yöntemi, OnSizeAllocated yeni bir Page boyuta her ayrılırsa çağrılır ve bu durum cihaz her döndüründe gerçekleşir. temel uygulamasının önemli düzen OnSizeAllocated işlevlerini gerçekleştirdiğine, bu nedenle geçersiz kılmada temel uygulamanın çağrılma açısından önemli olduğunu unutmayın:

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height); //must be called
}

Bu adımın atılamama durumu, çalışmayan bir sayfayla sonuçlandır.

Bir cihaz OnSizeAllocated döndürülürken yöntemin birçok kez çağrılyabilirsiniz. Düzeninizi her değiştirerek kaynaklarınızı boşa harcayabilirsiniz ve titreşime yol açabilirsiniz. Yönlendirmenin yatay mı yoksa dikey mi olduğunu izlemek ve yalnızca bir değişiklik olduğunda yeniden çizim yapmak için sayfanız içinde bir örnek değişkeni kullanmayı düşünün:

private double width = 0;
private double height = 0;

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height); //must be called
    if (this.width != width || this.height != height)
    {
        this.width = width;
        this.height = height;
        //reconfigure layout
    }
}

Cihaz yönlendirmesinde bir değişiklik algılandığında, kullanılabilir alanda yapılan değişikliği tepki olarak almak için kullanıcı arabiriminize/arabiriminize ek görünümler eklemek veya bu görünümden görünüm kaldırmak istiyor olabilirsiniz. Örneğin, her platformda dikey olarak yerleşik hesaplayıcıyı düşünün:

ve yatay:

Uygulamaların, yatay alanda daha fazla işlev ekleyerek kullanılabilir alandan yararlanan uygulamalara dikkat edin.

Duyarlı Düzen

Yerleşik düzenleri kullanarak arabirimler tasarlamak, böylece cihaz döndürünca uygun şekilde geçiş yapmak mümkündür. Yönlendirmede değişikliklere yanıt vermede cazip olmaya devam edecek arabirimler tasarlarken aşağıdaki genel kuralları göz önünde bulundurabilirsiniz:

• Oranlara dikkat etmek– Oranlar ile ilgili bazı varsayımlar yapılırken yönlendirme değişiklikleri sorunlara neden olabilir. Örneğin dikey ekran dikey boşluğun 1/3'sinde yer alan bir görünüm, yatay alanda yer alan dikey boşluğun 1/3'lerine sığmayabilirsiniz.
• Mutlak değerlere dikkat edin. Dikeyde anlamlı olan mutlak (piksel) değerler yatay olarak anlamlı olmaz. Mutlak değerler gerektiğinde, etkilerini yalıtmak için iç içe geçmiş düzenleri kullanın. Örneğin, öğe şablonunun garantili tekdüz yüksekliğe sahip olduğu bir içinde mutlak değerleri TableViewItemTemplate kullanmak mantıklı olabilir.

Yukarıdaki kurallar, birden çok ekran boyutu için arabirimler uygulanırken de geçerlidir ve genellikle en iyi yöntem olarak kabul edilir. Bu kılavuzun geri kalanında, içinde birincil düzenlerin her biri kullanılarak yanıt veren düzenlerin belirli örnekleri Xamarin.Forms açıklayacak.

StackLayout

Dikey olarak görüntülenen aşağıdaki uygulamayı düşünün:

ve yatay:

Bu, aşağıdaki XAML ile başarılı olur:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ResponsiveLayout.StackLayoutPageXaml"
Title="Stack Photo Editor - XAML">
    <ContentPage.Content>
        <StackLayout Spacing="10" Padding="5" Orientation="Vertical"
        x:Name="outerStack"> <!-- can change orientation to make responsive -->
            <ScrollView>
                <StackLayout Spacing="5" HorizontalOptions="FillAndExpand"
                    WidthRequest="1000">
                    <StackLayout Orientation="Horizontal">
                        <Label Text="Name: " WidthRequest="75"
                            HorizontalOptions="Start" />
                        <Entry Text="deer.jpg"
                            HorizontalOptions="FillAndExpand" />
                    </StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="Date: " WidthRequest="75"
                            HorizontalOptions="Start" />
                        <Entry Text="07/05/2015"
                            HorizontalOptions="FillAndExpand" />
                    </StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="Tags:" WidthRequest="75"
                            HorizontalOptions="Start" />
                        <Entry Text="deer, tiger"
                            HorizontalOptions="FillAndExpand" />
                    </StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Button Text="Save" HorizontalOptions="FillAndExpand" />
                    </StackLayout>
                </StackLayout>
            </ScrollView>
            <Image  Source="deer.jpg" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Cihazın yönüne bağlı olarak yönünü değiştirmek için bazı C# outerStack kullanılır:

protected override void OnSizeAllocated (double width, double height){
    base.OnSizeAllocated (width, height);
    if (width != this.width || height != this.height) {
        this.width = width;
        this.height = height;
        if (width > height) {
            outerStack.Orientation = StackOrientation.Horizontal;
        } else {
            outerStack.Orientation = StackOrientation.Vertical;
        }
    }
}

Şunlara dikkat edin:

• outerStack , kullanılabilir alandan en iyi şekilde yararlanmak için görüntüyü ve denetimleri yönlendirmeye bağlı olarak yatay veya dikey bir yığın olarak sunmak için ayarlanır.

AbsoluteLayout

Dikey olarak görüntülenen aşağıdaki uygulamayı düşünün:

ve yatay:

Bu, aşağıdaki XAML ile başarılı olur:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ResponsiveLayout.AbsoluteLayoutPageXaml"
Title="AbsoluteLayout - XAML" BackgroundImageSource="deer.jpg">
    <ContentPage.Content>
        <AbsoluteLayout>
            <ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1"
                AbsoluteLayout.LayoutFlags="PositionProportional,SizeProportional">
                <AbsoluteLayout>
                    <Image Source="deer.jpg"
                        AbsoluteLayout.LayoutBounds=".5,0,300,300"
                        AbsoluteLayout.LayoutFlags="PositionProportional" />
                    <BoxView Color="#CC1A7019" AbsoluteLayout.LayoutBounds=".5
                        300,.7,50" AbsoluteLayout.LayoutFlags="XProportional
                        WidthProportional" />
                    <Label Text="deer.jpg" AbsoluteLayout.LayoutBounds = ".5
                        310,1, 50" AbsoluteLayout.LayoutFlags="XProportional
                        WidthProportional" HorizontalTextAlignment="Center" TextColor="White" />
                </AbsoluteLayout>
            </ScrollView>
            <Button Text="Previous" AbsoluteLayout.LayoutBounds="0,1,.5,60"
                AbsoluteLayout.LayoutFlags="PositionProportional
                    WidthProportional"
                BackgroundColor="White" TextColor="Green" BorderRadius="0" />
            <Button Text="Next" AbsoluteLayout.LayoutBounds="1,1,.5,60"
                AbsoluteLayout.LayoutFlags="PositionProportional
                    WidthProportional" BackgroundColor="White"
                    TextColor="Green" BorderRadius="0" />
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

Şunlara dikkat edin:

• Sayfanın ortaya konma yolu nedeniyle, yanıt verme hızını ortaya çıkaracak yordam koduna gerek yoktur.
• , ekranın yüksekliği düğmelerin ve görüntünün sabit yüksekliklerinin toplamından küçük olsa bile etiketin görünür olmasına ScrollView izin vermek için kullanılır.

RelativeLayout

Dikey olarak görüntülenen aşağıdaki uygulamayı düşünün:

ve yatay:

Bu, aşağıdaki XAML ile başarılı olur:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ResponsiveLayout.RelativeLayoutPageXaml"
Title="RelativeLayout - XAML"
BackgroundImageSource="deer.jpg">
    <ContentPage.Content>
        <RelativeLayout x:Name="outerLayout">
            <BoxView BackgroundColor="#AA1A7019"
                RelativeLayout.WidthConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=1}"
                RelativeLayout.HeightConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=1}"
                RelativeLayout.XConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=0,Constant=0}"
                RelativeLayout.YConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=0,Constant=0}" />
            <ScrollView
                RelativeLayout.WidthConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=1}"
                RelativeLayout.HeightConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=1,Constant=-60}"
                RelativeLayout.XConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=0,Constant=0}"
                RelativeLayout.YConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=0,Constant=0}">
                <RelativeLayout>
                    <Image Source="deer.jpg" x:Name="imageDeer"
                        RelativeLayout.WidthConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Width,Factor=.8}"
                        RelativeLayout.XConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Width,Factor=.1}"
                        RelativeLayout.YConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Height,Factor=0,Constant=10}" />
                    <Label Text="deer.jpg" HorizontalTextAlignment="Center"
                        RelativeLayout.WidthConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Width,Factor=1}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Height,Factor=0,Constant=75}"
                        RelativeLayout.XConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Width,Factor=0,Constant=0}"
                        RelativeLayout.YConstraint="{ConstraintExpression
                            Type=RelativeToView,ElementName=imageDeer,Property=Height,Factor=1,Constant=20}" />
                </RelativeLayout>

            </ScrollView>

            <Button Text="Previous" BackgroundColor="White" TextColor="Green" BorderRadius="0"
                RelativeLayout.YConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=1,Constant=-60}"
                RelativeLayout.XConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=0,Constant=0}"
                RelativeLayout.HeightConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=0,Constant=60}"
                RelativeLayout.WidthConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=.5}"
                 />
            <Button Text="Next" BackgroundColor="White" TextColor="Green" BorderRadius="0"
                RelativeLayout.XConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=.5}"
                RelativeLayout.YConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=1,Constant=-60}"
                RelativeLayout.HeightConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=0,Constant=60}"
                RelativeLayout.WidthConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=.5}"
                />
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

Şunlara dikkat edin:

• Sayfanın ortaya konma yolu nedeniyle, yanıt verme hızını ortaya çıkaracak yordam koduna gerek yoktur.
• , ekranın yüksekliği düğmelerin ve görüntünün sabit yüksekliklerinin toplamından küçük olsa bile etiketin görünür olmasına ScrollView izin vermek için kullanılır.

Kılavuz

Dikey olarak görüntülenen aşağıdaki uygulamayı düşünün:

ve yatay:

Bu, aşağıdaki XAML ile başarılı olur:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ResponsiveLayout.GridPageXaml"
Title="Grid - XAML">
    <ContentPage.Content>
        <Grid x:Name="outerGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="60" />
            </Grid.RowDefinitions>
            <Grid x:Name="innerGrid" Grid.Row="0" Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="deer.jpg" Grid.Row="0" Grid.Column="0" HeightRequest="300" WidthRequest="300" />
                <Grid x:Name="controlsGrid" Grid.Row="0" Grid.Column="1" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Label Text="Name:" Grid.Row="0" Grid.Column="0" />
                    <Label Text="Date:" Grid.Row="1" Grid.Column="0" />
                    <Label Text="Tags:" Grid.Row="2" Grid.Column="0" />
                    <Entry Grid.Row="0" Grid.Column="1" />
                    <Entry Grid.Row="1" Grid.Column="1" />
                    <Entry Grid.Row="2" Grid.Column="1" />
                </Grid>
            </Grid>
            <Grid x:Name="buttonsGrid" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Previous" Grid.Column="0" />
                <Button Text="Save" Grid.Column="1" />
                <Button Text="Next" Grid.Column="2" />
            </Grid>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Döndürme değişikliklerini işlemek için aşağıdaki yordam koduyla birlikte:

private double width;
private double height;

protected override void OnSizeAllocated (double width, double height){
    base.OnSizeAllocated (width, height);
    if (width != this.width || height != this.height) {
        this.width = width;
        this.height = height;
        if (width > height) {
            innerGrid.RowDefinitions.Clear();
            innerGrid.ColumnDefinitions.Clear ();
            innerGrid.RowDefinitions.Add (new RowDefinition{ Height = new GridLength (1, GridUnitType.Star) });
            innerGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });
            innerGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });
            innerGrid.Children.Remove (controlsGrid);
            innerGrid.Children.Add (controlsGrid, 1, 0);
        } else {
            innerGrid.RowDefinitions.Clear();
            innerGrid.ColumnDefinitions.Clear ();
            innerGrid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (1, GridUnitType.Star) });
            innerGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Auto) });
            innerGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
            innerGrid.Children.Remove (controlsGrid);
            innerGrid.Children.Add (controlsGrid, 0, 1);
        }
    }
}

Şunlara dikkat edin:

• Sayfanın yerleşimi nedeniyle denetimlerin kılavuz yerleşimini değiştirme yöntemi vardır.

İlişkili Bağlantılar

• Düzen (örnek)
• BusinessTumble Örneği (örnek)
• Duyarlı Düzen (örnek)
• Ekran Yönüne Göre Görüntü Görüntüleme