TextView как индикатор прогресса с мини-настройкой цвета текста?

Я работаю над улучшением пользовательского интерфейса моего приложения. И в дизайне, который я использую, у меня есть TextView, который будет действовать как индикатор выполнения в определенное время. Ruslt должен выглядеть так:

Введите описание изображения здесь

Дело в том, что части текста меняют свой цвет, пока прогресс меняется

Я заглянул в spannablestring в android, это сработает, если я найду буквы, которые покрываются прогрессом (но я не думаю, что это было бы легко / точно)

Теперь я планирую использовать следующее:

  • FrameLayout с:
  • Фон textView с зеленым текстом и белом фоне.
  • Передний Linringayout, который меняет ширину при прогрессировании.
  • TextView с зеленым фоном и белым текстом, который соответствует ширине рамки.

Есть ли лучший подход?

Для более удобного подхода вам потребуется переопределить класс TextView. Вы можете использовать обрезку, разделить TextView и нарисовать две части разных цветов.

TextView tv = new TextView(this){ @Override public void draw(Canvas canvas) { int color1 = Color.WHITE; int color2 = Color.GREEN; canvas.save(); setTextColor(color1); setBackgroundColor(color2); canvas.clipRect(new Rect(0, 0, (int)(getWidth() * percent), getHeight())); super.draw(canvas); canvas.restore(); canvas.save(); setTextColor(color2); setBackgroundColor(color1); canvas.clipRect(new Rect((int)(getWidth() * percent), 0, getWidth(), getHeight())); super.draw(canvas); canvas.restore(); } }; 

Надеюсь, вы поняли

Самым простым решением было бы использовать ProgressBar и TextView для относительной компоновки. Вы предоставляете свой стиль для обоих и все. Нет смысла пытаться это сделать в TextView, когда ProgressBar имеет все, что вам нужно. Ваш макет будет выглядеть так:

 <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ProgressBar android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Doing something" android:gravity="center" android:layout_centerVertical="true"/> </RelativeLayout> 

Вам просто нужно играть с шириной и высотами, как вы хотите их 🙂

Я знаю, что это старый вопрос, но я публикую это, потому что он может помочь кому-то, кто смотрит в подобные ситуации, надеюсь, что это поможет кому-то пройти через это сейчас. Вот пример

123

Мое решение в основном рисует на холсте с помощью drawText . Трюк здесь состоит в том, что вы рисуете два текста: один внутри границ бара и один внутри границ обзора и используя следующий порядок Z-индекса (в соответствии с используемым примером):

  • Текст (белый)
  • Красная полоса
  • Текст (черный)
  • Смотреть фон

Я привел пример о том, как реализовать это, в этом примере / lib я использовал пользовательское изображение для этого. Не стесняйтесь использовать его так, как вам нравится: https://github.com/danilodanicomendes/InvertedTextProgressBar