Как сделать градиент с белого на прозрачный в андроид?
Вроде бы похожие темы есть, но конкретно этот вариант не рассматривается. Между тем, получаю все что угодно, но не переход из белого в нулевой. Какие координаты цветов надо указывать?
Отслеживать
задан 10 дек 2015 в 23:56
Dolce Vita Dolce Vita
31 4 4 бронзовых знака
Приведите минимальный код, демонстрирующий ваши попытки реализовать это. Вы же в XML это делать пытаетесь?
11 дек 2015 в 0:02
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Да так элементарно же, создаем в drawable какой нить gradient.xml со следующим содержанием:
Отслеживать
ответ дан 11 дек 2015 в 6:33
4,233 9 9 золотых знаков 26 26 серебряных знаков 35 35 бронзовых знаков
строка android:startColor=»@color/white» дает ошибку (цвет вообще не принимается), если android:startColor=»@android:color/white» то ошибка рендеринга.
11 дек 2015 в 10:51
@DolceVita ну так это было указано в качестве примера @color/white . заведите данный цвет в colors.xml
11 дек 2015 в 11:10
понял. завел. но в том и вся фишка — так или иначе появляется некий темноватый фон, так как если бы я делал градиент из черного в прозрачный.
11 дек 2015 в 11:17
может это какие-то проблемы рендеринга в принципе? сейчас я замечаю что любое изменение цвета вообще не происходит сразу, а где-то через 3-4 минуты (в течении которых я пытаюсь понять почему ничего не работает).
TextView с градиентом
Для создания текстовой метки с градиентом воспользуемся классом LinearGradient.
Конструктор класса имеет семь аргументов. Первые четыре аргумента задают координаты линии, вдоль которой идёт рисование градиента. Следующие два аргумента задают цвета градиентов, а последний аргумент показывает способ рисования за пределами прямоугольника.
Создадим новый класс GradientTextView, наследующий от TextView:
package ru.alexanderklimov.fortest; import android.content.Context; import android.graphics.Color; import android.graphics.LinearGradient; import android.util.AttributeSet; import android.graphics.Shader; import android.widget.TextView; public class GradientTextView extends TextView < public GradientTextView(Context context) < super(context, null, -1); >public GradientTextView(Context context, AttributeSet attrs) < super(context, attrs, -1); >public GradientTextView(Context context, AttributeSet attrs, int defStyle) < super(context, attrs, defStyle); >@Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) < super.onLayout(changed, left, top, right, bottom); if (changed) < getPaint().setShader( new LinearGradient(0, 0, 0, getHeight(), Color.WHITE, Color.BLACK, Shader.TileMode.CLAMP)); >> >
Параметр Shader.TileMode.CLAMP означает, что цвет районах за пределами прямоугольника (0, 0) — (0, 100) будет совпадать с цветом ближайшей стороны прямоугольника.
Так как метод onDraw() слишком затратный, то закраску текста градиентом сделаем в методе onLayout(), который вызывается при изменении размеров текста. Этого вполне достаточно.
Добавляем новый компонент в разметку активности и настраиваем размеры, фон, текст. Результат на экране.
Используя ту же технику, можно использовать другие виды градиентов (LinearGradient, RadialGradient, SweepGradient), заполнить текст картинкой (BitmapShader) или даже комбинировать шейдеры (ComposeShader).
Создание градиентов в Flutter
Цветовой градиент – это такой тип заливки, которая принимает начальный и конечный цвет и создает плавную цветовую растяжку, автоматически определяя промежуточные точки. Если верить теории цвета, градиенты могут сделать приложение визуально более интересным.
В этой статье мы научим вас использовать пакеты LinearGradient и gradient_app_bar от BoxDecoration для создания градиентов в приложении Flutter.
Требования
Для выполнения этого урока нужно:
- Скачать и установить Flutter.
- Загрузить и установить Android Studio или Visual Studio Code.
- Рекомендуется также установить плагины для вашего редактора кода:
- Flutter и Dart для Android Studio.
- Flutter для Visual Studio Code.
Это руководство было проверено на версиях Flutter v1.22.2, Android SDK v30.0.2 и Android Studio v4.1.
1: Создание тестового проекта
Подготовив среду Flutter, вы можете запустить следующую команду, чтобы создать новое приложение:
flutter create flutter_gradient_example
Перейдите в каталог нового проекта:
Команда flutter create создаст демонстрационное приложение, которое будет отображать количество нажатий кнопки.
2: Использование LinearGradient
Откройте файл main.dart в редакторе кода и отредактируйте его, чтобы добавить BoxDecoration:
import 'package:flutter/material.dart'; void main() < runApp(MyApp()); >class MyApp extends StatelessWidget < @override Widget build(BuildContext context) < return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(), ); > > class MyHomePage extends StatelessWidget @override Widget build(BuildContext context) return Scaffold( appBar: AppBar( title: Text('Flutter Gradient Example'), ), body: Center( child: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topRight, end: Alignment.bottomLeft, colors: [ Colors.blue, Colors.red, ], ) ), child: Center( child: Text( 'Hello Gradient!', style: TextStyle( fontSize: 48.0, fontWeight: FontWeight.bold, color: Colors.white, ), ), ), ), ), ); > >
Мы добавили decoration и BoxDecoration к виджету Container. Это позволяет нам определить LinearGradient, которому можно присвоить цвета, а также настроить выравнивание при помощи параметра Alignment и значений begin и end.
Скомпилируйте свой код и запустите его в эмуляторе.
Вы увидите линейный градиент: синий цвет в верхней части экрана постепенно переходит в красный цвет в нижней части экрана.
3: Управление градиентом с помощью stops
Также в градиенте можно использовать дополнительные цвета и более точно контролировать переход цветов.
Вернемся в файл main.dart в редакторе кода и добавим в него раздел stops:
class MyHomePage extends StatelessWidget < @override Widget build(BuildContext context) < return Scaffold( appBar: AppBar( title: Text('Flutter Gradient Example'), ), body: Center( child: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topRight, end: Alignment.bottomLeft, stops: [ 0.1, 0.4, 0.6, 0.9, ], colors: [ Colors.yellow, Colors.red, Colors.indigo, Colors.teal, ], ) ), child: Center( child: Text( 'Hello Gradient!', style: TextStyle( fontSize: 48.0, fontWeight: FontWeight.bold, color: Colors.white, ), ), ), ), ), ); > >Скомпилируйте свой код и запустите его в эмуляторе.
Вы получите линейный градиент, который начинается в верхней точке экрана 0,0 желтым цветом, затем он переходит в красный цвет, опускаясь вниз на 0,4, далее в цвет индиго на 0,6 вниз по экрану; на 1,0 по мере продвижения вниз по экрану он становится бирюзовым.
4: Использование GradientAppBar
BoxDecoration нельзя применить к AppBar. Для добавления цветовых градиентов в AppBar можно использовать пакет GradientAppBar.
Откройте файл pubspec.yaml в редакторе кода и добавьте gradient_app_bar:
dependencies: flutter: sdk: flutter gradient_app_bar: ^0.1.3
Вернитесь в файл main.dart и импортируйте gradient_app_bar:
import 'package:flutter/material.dart'; import 'package:gradient_app_bar/gradient_app_bar.dart';
Теперь в файле main.dart можно заменить AppBar на GradientAppBar и последующие цвета:
appBar: GradientAppBar( title: Text('Flutter Gradient Example'), gradient: LinearGradient( colors: [ Colors.cyan, Colors.indigo, ], ), ),В этом примере мы используем LinearGradient с голубым и индиго.
Примечание: В более ранней версии GradientAppBar использовались параметры backgroundColorStart и backgroundColorEnd, которые устарели с версии 0.1.0.
Скомпилируйте свой код и запустите его в эмуляторе.
Обратите внимание на панель в верхней части экрана: вы увидите линейный градиент, который начинается в левой части экрана с голубого цвета и постепенно переходит в цвет индиго в правой части экрана.
Заключение
В этой статье вы научились использовать пакеты LinearGradient и GradientAppBar для настройки градиентов в приложении Flutter.
Урок 165. Графика. BitmapShader, LinearGradient, RadialGradient, SweepGradient
Используя подклассы класса Shader мы получаем возможность «рисовать рисунком». Для этого необходимо передать объект Shader в метод кисти setShader и кисть будет использовать рисунок шейдера для рисования объектов. Рассмотрим существующих наследников класса Shader.
Примеры я буду делать в Activity. Вся графика будет реализована в классе DrawView.
public class MainActivity extends Activity < @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(new DrawView(this)); >class DrawView extends View < public DrawView(Context context) < super(context); >@Override protected void onDraw(Canvas canvas) < canvas.drawARGB(80, 102, 204, 255); >> >
Для создания этого шейдера необходимо передать ему Bitmap и указать вертикальный и горизонтальный TileMode. Подробно про режимы TileMode можно посмотреть в Уроке 163.
Перепишем класс DrawView:
class DrawView extends View < Paint paint; Bitmap bitmap; Bitmap scaledBitmap; public DrawView(Context context) < super(context); Shader shader = createShader(); paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setShader(shader); >@Override protected void onDraw(Canvas canvas) < canvas.drawARGB(80, 102, 204, 255); canvas.drawRect(100, 100, 400, 300, paint); canvas.drawCircle(300, 400, 100, paint); >private Shader createShader() < bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher); BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT); return shader; >>
Читаем ic_launcher в Bitmap, создаем шейдер и передаем этот шейдер в метод кисти setShader. И используя эту кисть рисуем квадрат и круг.
Мы использовали TileMode.REPEAT, поэтому изображение повторяется по всему доступному пространству.
К шейдеру можно применить преобразования, используя матрицу (о матрицах был Урок 144).
Перепишем метод createShader:
private Shader createShader()
В матрице настраиваем растяжение и поворот и передаем ее в шейдер методом setLocalMatrix. Смотрим результат
Можно растянуть Bitmap на всю канву
private Shader createShader()
Методом createScaledBitmap создаем копию bitmap размером с канву.
Этот шейдер позволяет нам получить градиент. У его класса есть два конструктора. Оба просят от нас указать им TileMode и координаты линии, которая будет задавать одновременно направление, начало и размер градиента.
Разница заключается в способе указания цветов для градиента. Один конструктор просит от нас указать ему два цвета. По ним он и нарисует градиент.
private Shader createShader()
Указываем красный и зеленый цвета. Линию указываем (0,0)-(100,20). Градиент будет идти в направлении линии и будет размером с длину этой линии. В качестве TileMode передаем MIRROR.
Другой конструктор позволяет задать массив цветов и их положений в градиенте.
private Shader createShader() < LinearGradient shader = new LinearGradient(0, 0, 100, 20, new int[] < Color.RED, Color.BLUE, Color.GREEN >, null, Shader.TileMode.MIRROR); return shader; >
Передаем массив цветов, а вместо массива позиций передаем null – градиент сам равномерно распределит цвета..
Теперь попробуем задать позиции вручную.
private Shader createShader() < LinearGradient shader = new LinearGradient(120, 0, 380, 0, new int[] < Color.RED, Color.BLUE, Color.GREEN >, new float[] < 0f, 0.5f, 1f >, Shader.TileMode.REPEAT); return shader; >
Обратите внимание, что я здесь использовал TileMode REPEAT. В таком режиме лучше будет видно распределение цветов по градиенту. Также, я немного изменил координаты линии, чтобы градиент стал побольше и чисто горизонтальным.
В массиве позиций передаем три позиции (соответственно количеству цветов). Чтобы понять, что означают эти позиции, давайте примем за единицу размер градиента (в нашем случае это ширина). А позиции будут обозначать в каком месте градиента будет максимальное насыщение соответствующим цветом.
В нашем примере три цвета: красный синий, зеленый. И три позиции: 0, 0.5, 1. Т.е. красный будет располагаться в начале градиента (0), синий – в середине (0.5), а зеленый – в конце (1). Пространство между цветами будет заполнено соответствующим градиентом.
Немного изменим позиции и сместим синий правее, тем самым увеличивая зону красно-синего градиента и уменьшая зону сине-зеленого.
private Shader createShader() < LinearGradient shader = new LinearGradient(120, 0, 380, 0, new int[] < Color.RED, Color.BLUE, Color.GREEN >, new float[] < 0f, 0.7f, 1f >, Shader.TileMode.REPEAT); return shader; >
Для синего позиция стала равной 0.7 и он ушел правее.
Для класса RadialGradient указываем центр и радиус и градиент пойдет от центра к краям. А SweepGradient – градиент, который идет по кругу вокруг центра. У этих двух классов, аналогично LinearGradient, есть простой конструктор, где можно указать два цвета, а есть посложнее — с возможностью указания массива цветов и их соотношений.
Примеры использования xml-вариантов RadialGradient и SweepGradient можно посмотреть в уроке 162.
Присоединяйтесь к нам в Telegram:
— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.
— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Compose, Kotlin, RxJava, Dagger, Тестирование, Performance
— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня