Удалить заполнение или принудительную подгонку или удалить пустое пространство из квадратного векторного актива для кнопки «Подогнать прямоугольник angular»? - PullRequest
Новая
       102

Удалить заполнение или принудительную подгонку или удалить пустое пространство из квадратного векторного актива для кнопки «Подогнать прямоугольник angular»?

5 голосов
/ 31 января 2020

Я пытаюсь настроить all_inclusive svg image на мою прямоугольную кнопку angular. Сама фигура также прямоугольная angular, но векторное свойство является квадратным (24x24) с пробелами над и под формой. Эти пространства заставляют саму форму быть очень маленькой. Как сделать все включено svg rect angular, удалив этот отступ сверху и снизу?

annoying_infinity

На этом рисунке изображение соответствует указанным слева, сверху и справа сторонам: 

    <ImageView
        android:id="@+id/imgInfinity"
        app:srcCompat="@drawable/ic_infinity"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="0.75"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="0.75"
        app:layout_constraintEnd_toEndOf="0.25" />

Вещи, которые не работали:

  • актив векторного направления с группой -> Я просто не могу определить размеры, не испортив исходную форму. То же самое со шкалой X / Y или translateX / Y. Я заставил его работать с другими кнопками с более простыми формами
  • настройка android: viewportheight или android: высота -> это превращает изображение в странную форму
  • обрезать SVG онлайн -> так как Googles оригинальный SVG pathData уже имеет 580 символов инструменты обрезки увеличивают его только до android для обработки (более 1000 символов)
  • обрезать изображение SVG со словом и извлекать его из zip-файла -> оно не сжимает изображения SVG, поэтому оно остается прямоугольным angular с пробелами сверху и снизу.
  • Установите отдельную горизонтальную направляющую для верхней части изображения. Это делает трюк, но одно или несколько указаний для каждого изображения становятся очень грязными. Должен быть лучший способ, верно? ..

ПРИНЯТОЕ РЕШЕНИЕ (редактировать с помощью InkShape):

  • Установить InkShape
  • Открыть SVG
  • Нажмите один раз на изображение, чтобы выбрать его
  • Go, выберите Файл-> Свойства документа и нажмите «Изменить размер пейджера для чертежа или выделения» (эта кнопка скрыт на первой вкладке, нажмите + Изменить размер страницы, чтобы отобразить параметр);
  • Сохранить
  • извлечь pathData и (viewport) ширину / высоту из сохраненного файла.

Ответы [ 3 ]

2 голосов
/ 18 февраля 2020

Вот новое обновление для этой топи c:

https://code.google.com/p/android/issues/detail?id=202019

Похоже, использование android: scaleType = "fitXY" сделает он правильно масштабируется на Lollipop.

От инженера Google:

Привет, Дайте мне знать, если scaleType = 'fitXY' может быть для вас обходным путем, чтобы получить изображение Выглядите остро.

Зефир против леденцов из-за специальной обработки масштабирования, добавленной в зефир.

Кроме того, для ваших комментариев: «Правильное поведение: вектор рисования должен масштабироваться без потери качества. если мы хотим использовать один и тот же актив в 3 разных размерах в нашем приложении, нам не нужно дублировать vector_drawable. xml 3 раза с разными жестко заданными размерами. "

Даже если я полностью согласен, это должно быть в действительности, платформа Android имеет проблемы производительности, так что мы еще не достигли идеального мира. Поэтому на самом деле рекомендуется использовать 3 различных вектора vector_drawable. xml для лучшей производительности, если вы уверены, что хотите нарисовать 3 различных размера на экране одновременно.

Техническая деталь в основном используется растровое изображение под хуком, чтобы кэшировать сложный рендеринг пути, так что мы можем получить лучшую производительность перерисовки, наравне с перерисовкой растрового изображения.

2 голосов
/ 13 февраля 2020

Используйте редактор изображений, который может обрабатывать файлы SVG для обрезки изображения. Я использовал InkScape, но есть и другие. Как только изображение обрезается, вы можете импортировать его в Android Studio как файл XML.

Вот результирующий файл обрезанного изображения: 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="10.76dp"
    android:viewportWidth="24"
    android:viewportHeight="10.76">
  <path
      android:fillColor="#FF000000"
      android:pathData="M18.6,0C17.16,0 15.8,0.56 14.83,1.53L12,4.04 10.48,5.38h0.01L7.8,7.77C7.16,8.41 6.31,8.76 5.4,8.76 3.53,8.76 2.01,7.25 2.01,5.38 2.01,3.51 3.53,2 5.4,2 6.31,2 7.16,2.35 7.84,3.03l1.13,1L10.48,2.69 9.22,1.58C8.2,0.56 6.84,0 5.4,0 2.42,0 0,2.42 0,5.38c0,2.96 2.42,5.38 5.4,5.38 1.44,0 2.8,-0.56 3.77,-1.53L12,6.73 12.01,6.74 13.52,5.38H13.51L16.2,2.99C16.84,2.35 17.69,2 18.6,2c1.87,0 3.39,1.51 3.39,3.38 0,1.87 -1.52,3.38 -3.39,3.38 -0.9,0 -1.76,-0.35 -2.44,-1.03l-1.14,-1.01 -1.51,1.34 1.27,1.12c1.02,1.01 2.37,1.57 3.82,1.57 2.98,0 5.4,-2.41 5.4,-5.38C24,2.4 21.58,0 18.6,0Z"/>
</vector>
1 голос
/ 18 февраля 2020

Атрибут viewportHeight определяет размер "холста", на котором рисуется путь (т. Е. Он определяет, что на самом деле означают координаты в данных пути).

* height Атрибут определяет intrinsi c размер отрисовки.

Исходный вектор имеет 6,5 единиц (в области просмотра) пустого пространства сверху и снизу. Это означает, что вы можете найти любую команду pathData, которая использует заглавную букву, и вычесть 6.5 из координаты y. Это оставляет вас с этим: 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="13dp"
        android:viewportWidth="24.0"
        android:viewportHeight="13.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M18.6,0.12c-1.44,0 -2.8,0.56 -3.77,1.53L12,4.16 10.48,5.5h0.01L7.8,7.89c-0.64,0.64 -1.49,0.99 -2.4,0.99 -1.87,0 -3.39,-1.51 -3.39,-3.38S3.53,2.12 5.4,2.12c0.91,0 1.76,0.35 2.44,1.03l1.13,1 1.51,-1.34L9.22,1.7C8.2,0.68 6.84,0.12 5.4,0.12 2.42,0.12 0,2.54 0,5.5s2.42,5.38 5.4,5.38c1.44,0 2.8,-0.56 3.77,-1.53l2.83,-2.5 0.01,0.01L13.52,5.5h-0.01l2.69,-2.39c0.64,-0.64 1.49,-0.99 2.4,-0.99 1.87,0 3.39,1.51 3.39,3.38s-1.52,3.38 -3.39,3.38c-0.9,0 -1.76,-0.35 -2.44,-1.03l-1.14,-1.01 -1.51,1.34 1.27,1.12c1.02,1.01 2.37,1.57 3.82,1.57 2.98,0 5.4,-2.41 5.4,-5.38s-2.42,-5.37 -5.4,-5.37z"/>
</vector>

Затем, когда вся фигура была перемещена "вверх" на 6,5 единиц, вы можете вычесть 11 (6,5 * 2) как из области просмотра, так и из внутренней части c высота.

Конечным результатом является форма 24x13dp, которая должна масштабироваться намного лучше при широком просмотре.

...