Я использую Xamarin.Forms для кроссплатформенного проекта, и мне нужно использовать нарисованные Google изображения из девяти патчей для моей кнопки входа в Google - PullRequest
Новая
       30

Я использую Xamarin.Forms для кроссплатформенного проекта, и мне нужно использовать нарисованные Google изображения из девяти патчей для моей кнопки входа в Google

0 голосов
/ 04 марта 2019

Дело в том, что я пытался использовать https://baskren.github.io/Forms9Patch/, но я чувствую, что не до конца понимаю.

Не поймите меня неправильно, инструмент великолепен, он растягивает изображения с 9 патчами.Просто я не могу заставить кнопки выглядеть должным образом в соответствии с рекомендациями бренда Google.

https://developers.google.com/identity/branding-guidelines

Как это должно выглядеть

И вот здесь я использую Drawables: https://developers.google.com/identity/images/signin-assets.zip.

Вот результаты разных попыток кнопок и размеров

Это код, который сделал меня ближе к кнопке, которую я хочу 

 <f9p:Button  Text = "Sign in with xxhdpi"
                     TextColor="White"
                     FontSize="14"
                     FontFamily="sans-serif-medium"
                     WidthRequest="60"
                     >
            <f9p:Button.BackgroundImage>
                <f9p:Image Source="{local:ImageMultiResource TestingApp.Resources.Images.btn_google_signin_dark_normal_xxhdpi}"/>
            </f9p:Button.BackgroundImage>


        </f9p:Button>

Iпопытался использовать сетку с изображением и кнопкой, но это не сработало.

Было бы здорово, если бы кто-то указал мне правильное направление.

1 Ответ

0 голосов
/ 24 апреля 2019

Я действительно делал это раньше.Вот общее описание того, что я сделал:

  1. Поместите файлы мультиплатформенных значков в ваш .NetStandard проект как Встроенные ресурсы .Это означает, что я нашел все различные разрешения, предоставленные Google (_xxhdpi, _xhdpi, _hdpi, _mdpi и т. Д.), А затем переименовал их в следующее:

    • icon@¾x.png
    • icon.png
    • icon@1½x.png
    • icon@2x.png
    • icon@3x.png
    • icon@4x.png

    А затем поместите их в папку Resources / Google в моем проекте ( FormsFirebase.Ui ).Так, например, EmbeddedResourceId для первого файла в приведенном выше списке равен FormsFirebase.Ui.Resources.Google.icon@¾x.png.

    . Как вы вскоре увидите, переименование этих файлов, как показано выше, позволит Forms9Patch.Buttonвыберите правильное изображение для правильного разрешения экрана (чтобы оно выглядело великолепно) - избавляя вас от необходимости управлять этим.Аналогично, включение их в проект .NetStandard означает, что они доступны для всех платформ - освобождая вас от необходимости разбираться в этом несколько раз!

  2. В вашем Forms9Patch.Button см.выше значок изображения в разрешении независимой моды.Это можно сделать несколькими способами.Один из более подробных способов: 

    var myButton = new Forms9Patch.Button
    {
        Text = "Sign in with xxhdpi",
        TextColor=Color.White,
        FontSize=14,
        FontFamily="sans-serif",
        WidthRequest=60,
        IconImage = new Forms9Patch.Image
        {
            Source = Forms9Patch.ImageSource.FromMultiResource("FormsFirebase.Ui.Resources.Google.icon", GetType().Assembly),
            Padding = 1,
        },
        Spacing = 4,
        TintIcon = false,
        BackgroundColor = Color.FromRGB(81,134,236)
    };

Несколько замечаний:

  1. Сначала я установил TintIcon вfalse, чтобы не подкрасить значок в тот же цвет, что и TextColor.Также я установил IconImage, а не BackgroundImage.Это необходимо для того, чтобы убедиться, что изображение равноценно тексту, а не слою под ним.

  2. Также обратите внимание, что я могу установить отступы IconImage, а также Forms9Patch.Button.Padding и Forms9Patch.Button.Spacing (расстояние между IconImage и Text или HtmlText, в зависимости от того, установлено ли для HasTightSpacing значение true).

  3. Вместо использования нескольких файлов .png (для каждого разрешения экрана), если у вас есть.svg версия вашего изображения доступна, вы можете использовать ее вместо этого.Гораздо меньше работы!

  4. Еще одна вещь, которая может вас заинтересовать: подобно тому, как Forms9Patch обрабатывает изображения независимо от платформы (помещая их в кроссплатформенный проект в качестве встроенных ресурсов),сделать то же самое со шрифтами.Это означает, что вы можете поместить файл шрифта (.ttf или .otf) в ваш кроссплатформенный проект и использовать его EmbeddedResourceId в качестве значения для FontFamily.И это поведение может быть расширено до элементов Xamarin.Forms с помощью Forms9Patch.EmbeddedResourceFontEffect.

Теперь немного прозелитизма (извините, если это не относится к вам):Я вижу, что вы использовали XAML для своего примера кода.Обратите внимание, что я не в своем ответе.Если вы новичок в .Net и / или Xamarin.Forms, я настоятельно рекомендую не использовать XAML.Не поймите меня неправильно, XAML великолепен - он просто не для начинающих.Зачем?Слишком много вещей происходит под одеялом, которые, как новичок, могут сбить вас с толку и замедлить.Скорее, я бы порекомендовал вам написать весь ваш пользовательский интерфейс на C #, чтобы вы могли научиться управлять своими свойствами и узнать, как на самом деле работает привязка.Как только вы освоите создание очень эффективных макетов с наилучшим «контекстно-зависимым» использованием связывания, тогда вы готовы к XAML.Для меня настоящим тестом была возможность сделать очень сложную разметку ячейки в большом списке в ListView плавно прокручивать на недорогом телефоне Android.После этого опыта я смог воспользоваться всеми преимуществами разработки на XAML (а их немало), не беспокоясь о том, что меня сковывают мои ошибки новичка.

...