Работаем с графикой. Основы
Цель нашего урока - понять основы графики. Мы напишем простую рисовалку - хотя это слишком громко сказано. Пока мы сами рисовать ничего не будем - за нас это будет делать глупая машина, т.е. Android. Но тем не менее некоторые полезные вещи мы узнаем, а значит повысим свой профессиональный уровень. Продолжить своё обучение можно в разделе Котошоп.
Создадим новый проект SimplePaint. Далее в нём создадим новый класс Draw2D, который будет наследоваться от View. Именно в нем мы и будем проводить графические опыты. Щелкаем правой кнопкой мыши на имени проекта и выбираем в меню New→Class. В открывшемся диалоговом окне устанавливаем имя для класса Draw2D и указываем свой пакет в поле Package. Остальные настройки можем не трогать. Щелкаем кнопку Finish. Появится заготовка для класса.
Удаляем содержимое заготовки и вставляем следующие строки
package ru.alexanderklimov.simplepaint; // у вас будет свой пакет
public class Draw2D extends View{
public Draw2D(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
}
}
В данном коде мы наследуемся от класса android.view.View и создаем свой метод onDraw(Canvac canvas). Все строчки, которые будет подчеркивать Eclipse, нужно проверить и импортировать необходимые пакеты самостоятельно.
Далее необходимо загрузить наш созданный класс при старте программы. Открываем основной java-файл и заменяем строчку после super.onCreate(savedInstanceState):
// эта строчка нам не нужна: setContentView(R.layout.main);
Draw2D d = new Draw2D(this);
setContentView(d);
Подготовительные работы закончены. Перейдем к графике. Весь дальнейший код мы будем писать в классе Draw2D. Совсем коротко о теории рисования. Для графики используется холст Canvas - некая графическая поверхность для рисования. Прежде чем что-то рисовать, нужно определить некоторые параметры - цвет, толщина, фигура. Представьте себе, что вы рисуете на бумаге и в вашем распоряжении есть цветные карандаши, фломастеры, циркуль и т.п. Например, вы берете толстый красный фломастер и рисуете жирную линию, затем берете циркуль с желтым карандашом и рисуете окружность. Улавливаете аналогию? Теория закончена.
Вся работа с графикой происходит в методе onDraw класса Draw2D. Для начала сделаем холст белым, для этого сразу после строчки super.onDraw(c) пишем:
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
// закрашиваем холст белым цветом
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);
Итак, холст готов. Далее начинается собственно рисование. Следуя описанному выше принципу мы задаем перед каждым рисованием свои настройки и вызываем нужный метод. Например, для того, чтобы нарисовать желтый круг мы включаем режим сглаживания, устанавливаем желтый цвет и вызываем метод drawCircle с нужными координатами и заливаем окружность выбранным цветом. У нас получилось симпатичное солнышко.
// Рисуем желтый круг
paint.setAntiAlias(true);
paint.setColor(Color.YELLOW);
canvas.drawCircle(450, 30, 25, paint);
Для рисования зеленого прямоугольника мы также задаем координаты и цвет. У нас получится красивая лужайка.
// Рисуем зеленый прямоугольник
paint.setColor(Color.GREEN);
canvas.drawRect(20, 200, 460, 230, paint);
Далее выведем текст поверх лужайки, чтобы все видели, что она предназначена только для котов. Устанавливаем синий цвет, стиль заливки, режим сглаживания и размер прямоугольника, в который будет вписан наш текст.
// Рисуем текст
paint.setColor(Color.BLUE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
paint.setTextSize(30);
canvas.drawText("Лужайка для котов", 30, 200, paint);
При желании можно вывести текст под углом. Пусть это будет лучик солнца.
// Текст под углом
int x = 310;
int y = 190;
paint.setColor(Color.GRAY);
paint.setTextSize(25);
String str2rotate = "Лучик солнца!";
// Создаем ограничивающий прямоугольник для наклонного текста
Rect rect = new Rect();
// поворачиваем холст по центру текста
canvas.rotate(-45, x + rect.exactCenterX(), y + rect.exactCenterY());
// Рисуем текст
paint.setStyle(Paint.Style.FILL);
canvas.drawText(str2rotate, x, y, paint);
// восстанавливаем холст
canvas.restore();
И завершим мы нашу композицию выводом стандартного значка приложения в нижнем углу экрана.
// Выводим значок из ресурсов
Resources res = this.getResources();
Bitmap bitmap = BitmapFactory.decodeResource(res, R.drawable.icon);
canvas.drawBitmap(bitmap, 415, 655, paint);
В данном примере я вручную подбирал размеры и координаты фигур для своего экрана. В реальных приложениях необходимо сначала вычислить размеры экрана у пользователя, а потом уже выводить фигуры в соответствии с полученными результатами.
Финальный рисунок выглядит следующим образом.
