【问题标题】:translate view to the same position regardless of screen size xamarin.forms无论屏幕大小如何,都将视图转换到相同的位置 xamarin.forms
【发布时间】:2021-11-20 06:03:59
【问题描述】:

我正在尝试像这样为我的标签设置动画:https://1drv.ms/v/s!ApO-CpoDPS4ikX5sxW4QWn8_rdxF?e=L3s2AB 所以我编写了以下代码:

xaml:

<?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="alphatrial.MainPage"
             BackgroundColor="#ffc40c"
             xmlns:local="clr-namespace:alphatrial.Effects">
    <ContentPage.Effects>
        <local:StatusBarEffect 
        BackgroundColor="#ffc40c"/>
    </ContentPage.Effects>
    <StackLayout >
        <Label  Text="ISC - Alpha" TextColor="Black" FontSize="Large" FontAttributes="Bold" FontFamily="MyAwesomeCustomFont" HorizontalOptions="End" Margin="0,50,50,-14" />
        <BoxView HorizontalOptions="FillAndExpand" Color="Black" HeightRequest="2" Margin="0,0,10,0"/>
       
        <Label Text="App" TextColor="White" FontSize="Large" FontAttributes="Bold" FontFamily="MyAwesomeCustomFont" HorizontalOptions="End" Margin="0,-12,15,0"/>

        <Frame Margin="0,80,0,0" BackgroundColor="Transparent">
            <StackLayout  >
                <Label Text="Email" TextColor="Black" FontSize="16" Margin="25,0,20,0" x:Name="emailAnimate" />
                <Entry Margin="20,-40,20,0" x:Name="email" />
                
            </StackLayout>

        </Frame>

        <Frame Margin="0,-10,0,0" BackgroundColor="Transparent">
            <StackLayout  >
                <Label Text="Password" TextColor="Black" FontSize="16" Margin="25,0,20,0" x:Name="PassAnimate" />
                <Entry Margin="20,-40,20,0" x:Name="password" IsPassword="True"/>
                <ImageButton Source="hidePass.png" WidthRequest="25" HeightRequest="25" HorizontalOptions="End" BackgroundColor="Transparent" Margin="0,-40,20,0"  x:Name="show"/>

            </StackLayout>

        </Frame>

        <Button CornerRadius="20" Text="Login" FontSize="Medium" BackgroundColor="#3d3d3d" TextColor="White" Margin="50" FontFamily="MyAwesomeCustomFont"/>
        <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
            <Switch  HeightRequest="40" WidthRequest="50" OnColor="Black" ThumbColor="White"/>
            <Label Text="Remember Me" TextColor="Black" FontAttributes="Bold" Margin="10"/>
        </StackLayout>
    </StackLayout>

</ContentPage>

xaml.cs

 public MainPage()
        {
            
            InitializeComponent();

            username = this.FindByName<Entry>("email");
            pass = this.FindByName<Entry>("password");
            anime_user = this.FindByName<Label>("emailAnimate");
            anime_pass = this.FindByName<Label>("PassAnimate");
            username.Focused += Email_Focused;
            username.Unfocused += Email_Unfocused;
            pass.Focused += Password_Focused;
            pass.Unfocused += Password_Unfocused;
           
        }
   private void Password_Unfocused(object sender, FocusEventArgs e)
        {
            if (string.IsNullOrEmpty(pass.Text))
            {
                anime_pass.ScaleTo(1, 100);
                anime_pass.TranslateTo(0, 0, 100);
              
            }
        }

        private void Password_Focused(object sender, FocusEventArgs e)
        {
            if (pass.IsFocused)
            {
                anime_pass.ScaleTo(0.8, 150);
                anime_pass.TranslateTo(-28, -30, 150);

            }

        }


        private void Email_Unfocused(object sender, FocusEventArgs e)
        {
            if (username.IsFocused == false)
            {
                if (string.IsNullOrEmpty(username.Text) )
                {
                  
                    anime_user.ScaleTo(1, 100);
                    anime_user.TranslateTo(0, 0, 100);
                }
            }
         
           
            
        }

        private void Email_Focused(object sender, FocusEventArgs e)
        {
            if (username.IsFocused)
            {
                anime_user.ScaleTo(0.8,150);
                anime_user.TranslateTo(-28, -30,150);
               

            }



        }
    }
}

这在我用来调试和设计应用程序的我自己的手机上运行良好,但是当我在另一部屏幕较小的手机上尝试它时,标签的翻译超出了需要,它们并没有停在预期的位置。当我水平旋转手机屏幕时也发生了同样的情况。无论屏幕大小如何,我如何将视图转换到相同的位置? 提前致谢。

【问题讨论】:

    标签: xamarin.forms android-animation translate-animation


    【解决方案1】:

    当我水平旋转手机屏幕时也发生了同样的情况。如何 无论屏幕如何,我都可以将视图翻译到相同的位置吗 尺寸?

    重要的是要考虑如何使用您的应用程序以及如何结合横向方向来改善用户体验。可以设计单独的布局以适应多个方向并充分利用可用空间。

    Xamarin.Forms 不提供任何本机事件来通知您的应用共享代码中的方向更改。但是,Xamarin.Essentials 包含一个 [DeviceDisplay] 类,它提供方向更改的通知。

    若要在没有 Xamarin.Essentials 的情况下检测方向,请监视 Page 的 SizeChanged 事件,该事件会在 Page 的宽度或高度发生变化时触发。当Page的宽度大于高度时,设备处于横向模式。

    或者,可以覆盖Page 上的OnSizeAllocated 方法,在其中插入任何布局更改逻辑。每当为Page 分配新大小时,都会调用OnSizeAllocated 方法,每当设备旋转时都会发生这种情况。请注意,OnSizeAllocated 的基本实现执行重要的布局功能,因此在覆盖中调用基本实现很重要:

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

    更多详情可以查看:https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/device-orientation?tabs=windows。

    【讨论】:

    • 非常感谢您的回复,我会试试这个屏幕旋转案例。但是当应用程序最初部署在比我的屏幕更小的手机上时呢?有没有办法为不同的屏幕尺寸将标签动画到相同的位置?
    • Xamarin.Forms 使用 xaml 作为其用于渲染显示的基本标记语言,并在运行时将其转换为本机对应物。通常,您不必关心分辨率,它会根据您的布局和约束调整视图。您可以查看this thread了解更多信息。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-02-05
    • 2017-03-26
    • 2021-08-01
    • 2015-11-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多