Подписаться на получение новых статей на почту:

Android — SVG — XML. Альтернатива текстового вектора. Шаг №93

Всем привет. В этой записи мы с Вами вернемся к разработке Android-приложения: SmartHouse. А именно подготовим векторное изображение к приему данных. Т.е. вывод информации с привязкой к конкретному элементу рисунка. Проведем обзор возможных методов для реализации данной возможности. Мы уже познакомились с основами управления векторной графики в Android, а именно с классом VectorDrawable и преобразовании SVG and XML, поэтому на этом останавливаться не будем. Ниже я распишу поэтапно испытанные методы, от начала до конца.

Для начала давайте посмотрим чем отличается вышеприведенные форматы. У меня была необходимость сделать обратное преобразование XML in SVG. Что делается достаточно легко. В android xml необходимо заменить следующие строки:
android:pathData замените на d
android:fillColor заменен на fill
И в заголовках получается следующие различия:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="297"
android:viewportWidth="210">
надо
<svg xmlns="http://www.w3.org/2000/svg"
width="210mm"
height="297mm"
viewBox="0 0 210 297" >
Ниже рисунок преобразований и отличий.
conversion_xml_svg

В ходе всех этих манипуляций стояла цель просто добавить текстовый элемент в редакторе SVG. В ходе обратного преобразования в формат XML мы получаем ошибку. Оказывается что текстовый вектор в ОС не поддерживается.

error-text-svg-android

Вариант использования рисунка в самом текстовом элементе (с помощью виджета AppCompatTextView), также не подходит, т.к. мы теряем управляемость объектами элемента. Ниже код и рисунок
picture_textview

<android.support.v7.widget.AppCompatTextView
android:id="@+id/appCompatTextView"
  android:layout_width="163dp"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
 android:layout_marginBottom="60dp"
android:layout_weight="0.04"
android:drawableBottom="@drawable/ic_drawing"
 android:gravity="center_horizontal"
 android:text="TextView with Vector Drawable" />

Все что можно “выкрутить” , то это преобразование текста как рисунок, т.е . “ 1” в результате получится как геометрическая фигура. Преобразовываем SVG in XML с помощью ресурса  http://a-student.github.io/SvgToVectorDrawableConverter.Web/

SvgToVectorDrawableConverter
И код для нашей ” 1” будет выглядеть следующим образом:
draw.xml:
<?xml version=«1.0» encoding=«utf-8»?>
<vector xmlns:android=«http://schemas.android.com/apk/res/android»
android:viewportWidth=«210»
android:viewportHeight=«297»
android:width=«744.09447dp»
android:height=«1052.362179dp»>
<path
android:pathData=«M39.63769 50.559521l-3.054421 0 0 -0.57602 1.174777 0 0 -3.782026 -1.174777 0 0 -0.515386q0.238745 0 0.511596 -0.0379 0.272852 -0.04169 0.413067 -0.117478 0.174322 -0.09474 0.272852 -0.238745 0.102319 -0.147795 0.117478 -0.394119l0.587388 0 0 5.08565 1.15204 0 0 0.57602z»
android:fillColor=«#000000» />
</vector>
И далее налаживаем, уже, фигуру поверх других слоев. Рис. ниже.
figure_on_android

Вышеприведенные варианты нам не подходят, нам нужна динамичность. Может быть и можно как то расширить класс Drawable, что бы добавлять текст, но я пока как это сделать не знаю.
В общем я остановился на том что добавил поверх изображения TextView, можно также выводить кнопку. Но пока остановимся на тексте. Ниже код и рисунок привязки. Здесь мы использовали ConstraintLayout.

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_weight="0.78"
  android:layout_height="0dp">
     <android.support.constraint.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent">
           <ImageView………………………………………………………………………………………../>
           <TextView
               android:id="@+id/textView3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="+24"
               android:textColor="#000000"
               android:layout_marginLeft="64dp"
               app:layout_constraintLeft_toLeftOf="parent"
               app:layout_constraintTop_toTopOf="parent"
               android:layout_marginTop="172dp"
               android:layout_marginRight="8dp"
               app:layout_constraintRight_toRightOf="parent"
               app:layout_constraintBottom_toBottomOf="parent"
               android:layout_marginBottom="8dp
               app:layout_constraintHorizontal_bias="0.329"
               app:layout_constraintVertical_bias="0.0" />
          <TextView………………
               android:layout_marginTop="140dp" />
          <TextView……………………………………………..
               android:layout_marginTop="140dp" />
      </android.support.constraint.ConstraintLayout>
</RelativeLayout>
link_picture_textview
Picture

Все друзья привязываемся программно к нашим текстовым элементам, по аналогии приема данных Android STM. Следующим шагом будет подключение к сайту и считывание данных в приложение. На этом сегодня и остановимся. В этой статье мы с Вами рассмотрели варианты вывода информации на рисунок, а именно элемента TextView и наоборот. Как видим отсутствие поддержки текстового вектора в xml в Android создает некоторые неудобства в создании информативного рисунка. Выходом из ситуации стало применение элементов поверх изображения. По крайне мере я так это увидел. Жду критики, замечаний и предложений. Всем пока.

Просмотрено 246 раз.

Я на Google+

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting