2017-12-29 8 views
6

Xamarin 양식이 처음이므로 그리드가있는 간단한 XAML 페이지를 만들고 다른 그리드와 일부 텍스트, 단추 및 이미지를 만들면 묻고 싶습니다. Xamarin은 다른 장치 크기 사이의 배율을 처리합니까?Xamarin Forms의 다른 장치 크기에 대한 배율 조정

내 이미지는 svg이므로 크기는 조정해야하지만 나머지 페이지는 그렇지 않습니다. 7 인치 및 9 인치 태블릿과 같은 대형 기기에서는 문제가 없지만 소형 휴대 전화에서는 성능이 떨어집니다.

모든 장치에서이 현상이 동일하게 나타나게하려면 어떻게해야합니까? 기록을 위해 그것은 단지 안드로이드에만 있으며 현재 수동으로 코드 크기를 조정해야합니다. 나는이 방법을 사용하는 것이 가장 좋다고 생각하지 않으므로 조언을 환영합니다.

감사

<?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="CCGT.SimpleLoginPage" 
      xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared" 
      xmlns:local="clr-namespace:CCGT;assembly=CCGT" Title="{ artina:Translate PageTitleSimpleLogin }" BackgroundColor="{DynamicResource BasePageColor}" 
      xmlns:controls="clr-namespace:TwinTechsForms.NControl;assembly=TwinTechsForms.NControl.SvgImageView"> 

    <ContentPage.Content> 
     <RelativeLayout HorizontalOptions="CenterAndExpand"> 
      <Grid x:Name="outerGrid" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0" BackgroundColor="Teal"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="300" /> 
        <RowDefinition Height="*" /> 
        <RowDefinition Height="200" /> 
       </Grid.RowDefinitions> 
       <!-- inner grid 1--> 
       <Grid x:Name="innerGrid" Grid.Row="0" BackgroundColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="1200" /> 
        </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="1000" /> 
       </Grid.ColumnDefinitions> 
        <controls:SvgImageView x:Name="logo" BackgroundColor="White" 
          SvgAssembly="{Binding SvgAssembly}" 
          SvgPath="CCGT.images.brandSketchArtboard.svg" 
          WidthRequest="320" 
          HeightRequest="320" HorizontalOptions="CenterAndExpand" 
          Grid.Row="0" /> 
       </Grid> 

      <!-- inner grid 2 - triangle and controls --> 
       <Grid x:Name="innerGrid2" Grid.Row="1" BackgroundColor="Teal" Padding="0,-10,0,0"> 
        <Grid x:Name="controlsGrid" Grid.Row="0" Grid.Column="0" > 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
         </Grid.RowDefinitions> 

         <controls:SvgImageView 
          SvgAssembly="{Binding SvgAssembly}" 
          SvgPath="CCGT.images.base2.svg" 
          WidthRequest="1400" 
          HeightRequest="250" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" 
          Grid.Row="0" /> 
        </Grid> 
       </Grid> 
       <!--inner grid 3 - button --> 
       <Grid x:Name="buttonsGrid" Grid.Row="2" BackgroundColor="Teal" Padding="0,-8,0,20" HorizontalOptions="FillAndExpand"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <Entry Grid.Row="0" HeightRequest="40" Placeholder="{ artina:Translate StringEmail }" TextColor="WhiteSmoke" BackgroundColor="Teal" PlaceholderColor="White" AutomationId="LoginPage-EmailEntry" HorizontalOptions="{ artina:OnOrientationLayoutOptions 
           PortraitPhone=Fill, 
           LandscapePhone=Center, 
           PortraitTablet=Fill, 
           LandscapeTablet=CenterAndExpand }" WidthRequest="{ artina:OnOrientationDouble 
           LandscapePhone=200, 
           LandscapeTablet=750 }" /> 
        <Label Text="Verify by using your email address" HorizontalOptions="Center" VerticalOptions="Center" TextColor="WhiteSmoke" Grid.Row="1"/> 

        <artina:Button Grid.Row="2" BackgroundColor="White" TextColor="Teal" VerticalOptions="End" Text="{ artina:Translate StringLogin }" WidthRequest="{ artina:OnOrientationDouble 
           LandscapePhone=200, 
           LandscapeTablet=750 }" HorizontalOptions="{ artina:OnOrientationLayoutOptions 
           PortraitPhone=Fill, 
           LandscapePhone=Center, 
           PortraitTablet=Fill, 
           LandscapeTablet=Center }" AutomationId="LoginPage-SubmitButton" 
            HeightRequest="40"/> 
        <Label Grid.Row="3" Text="{ artina:Translate Trademark }" FontSize="13" HorizontalOptions="Center" VerticalOptions="End" TextColor="WhiteSmoke" AutomationId="LoginPage-Trademark"/> 
       </Grid> 
      </Grid> 
     </RelativeLayout> 
    </ContentPage.Content> 
</ContentPage> 

내가

+0

Xamarin.Android에서 우리는 자동 적응을 달성하기 위해''또는''를 사용할 수 있습니다. –

+0

Android 또는 iOS 용으로 만 개발 되었습니까? –

답변

4

별표 비율을 사용하면 여러 장치에서 확장 성을 제공 할 수 있습니다. 당신이 중간에 10 %의 상단과 하단 80 %를 차지하기를 원한다면

예를 들어,이

<RowDefinition Height="*" /> 
<RowDefinition Height="8*" /> 
<RowDefinition Height="*" /> 

당신은 왼쪽과 오른쪽 열 정의와 같은 일을 할 수 할 수 있습니다.

또한 관련 레이아웃 래퍼를 제거합니다. It is not recommended.

관련 문제