Рисование графических примитивов (линий, кругов etc) и вывод текста при программировании android приложений

 

Эта статья представляет собой базовую инструкцию по программировании двумерной графики в android приложениях. Здесь описано, как:

-создать свой графический компонент

-поместить его на экран устройства

-выводить на компоненте примитивы двумерной графики — линии, круги, др.

Создадим проект, как в этой статье, назовем его GraphTest (имя пакета пусть будет com.gt)

Для того, чтобы написать компонент, нужно создать класс для него:

Пусть будет называться Test.

Чтобы класс был графическим компонентом, это нужно унаследовать от класса какого-либо графического компонента. Предком всех классов типа кнопок, текстовых полей, слайдеров и т. д. Является класс View. Поэтому при создании компонента, который должен выводить простую двумерную графику, следует наследоваться от него.

package com.gt;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Paint.Style;

import android.util.AttributeSet;

import android.view.View;

public class Test extends View {

     //код класса

}

Вот что у нас должно в итоге получиться — после того, как мы напишем компонент и нарисуем на нем двумерную графику:

Сначала объявим поля класса:

1)длину и ширину компонента, которые мы будем использовать в расчетах кординат при рисовании

2)объект класса paint : paint. Экземпляры класса Paint хранят различные аттрибуты рисования: толщины линий, цвета, стили и другое. 
 

private int height;  private int width;  Paint paint=new Paint();

Теперь нужно в коде класса объявить 3 метода: 2 конструктора экземпляра класса, и метод onMeasure, который принимает извне данные о ширине и длине объекта, позволяя нам проинициалировать 2 наших поля. Этот метод выполняются сразу после создания объекта. В его теле мы занесем в наши поля длину и ширину объекта:

    public Test(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
  
    public Test(Context context){
        this(context, null);
    }
   
    @Override
    protected void onMeasure(int widthSpecId, int heightSpecId)
    {
        this.height = View.MeasureSpec.getSize(heightSpecId);
        this.width = View.MeasureSpec.getSize(widthSpecId);
       
        setMeasuredDimension(width, height);
    }

Теперь приступим к написанию самого важного метода — onDraw(). Он вызывается тогда, когда компоненту дается команда о перерисовке своего содержимого. Это можно сделать командой invelidate(). Кроме того, компонент перерисовывается сразу после совего создания. Метод принимает Canvas – виртуальный холст для рисования, на котором мы и будет делать чертежи

protected void onDraw(Canvas canvas){

   super.onDraw(canvas);

   //команды рисования

}

Начинаем рисовать. Сначала начертим 2 синии линии в форме креста.

Чтобы установить у объекта класса Paint цвет и толщину линии используем следующие команды:

paint.setColor(Color.BLUE); //цвет также можно было записать 16-ричной формулой, но мы просто взяли константу

paint.setStrokeWidth(2);

С помощью команды drawLine класса Canvas(x1, y1, x2, y2, paint), имеющего 4 параметра, можно начертить линию из пункта 1 в пункт 2, применяя атрибуты рисования объекта paint. Вот так мы рисует крест (обратите внимание, координатная ось y направлена вниз):

canvas.drawLine(0, 0, width, height, paint);

canvas.drawLine(width, 0, 0, height, paint);

Теперь нужно нарисовать красный прямой крест. Аналогично :

paint.setColor(Color.RED);

canvas.drawLine(width/2, 0, width/2, height, paint);

canvas.drawLine(width, height/2, 0, height/2, paint);

Нужно вывести текст. Для этого существует команда canvas.drawText(text, x, y, paint). Кроме того, чтоб задать кегль, используют canvas.setTextSize(size):

paint.setColor(Color.GREEN);
paint.setTextSize(height/10);
canvas.drawText("green", width/4, height/8, paint);

Для того, чтобы нарисовать круг, используется метод canvas.dtawCircle(X, Y, radius, paint). X и Y – координаты цента круга:

paint.setColor(Color.CYAN);

canvas.drawCircle(width/2, height/2, width/4, paint);

Таким образом, полный код класса Test такой:

package com.gt;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;

public class Test extends View  {
    private int height;
    private int width;
    Paint paint=new Paint();
   
   
    public Test(Context context, AttributeSet attrs) {
    super(context, attrs);
    }
  
    public Test(Context context){
        this(context, null);
    }
   
    @Override
    protected void onMeasure(int widthSpecId, int heightSpecId)
    {
        this.height = View.MeasureSpec.getSize(heightSpecId);
        this.width = View.MeasureSpec.getSize(widthSpecId);
       
        setMeasuredDimension(width, height);
    }
   
   
    @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        paint.setColor(Color.BLUE);
        paint.setStrokeWidth(2);
        canvas.drawLine(0, 0, width, height, paint);
        canvas.drawLine(width, 0, 0, height, paint);
       
        paint.setColor(Color.RED);
        canvas.drawLine(width/2, 0, width/2, height, paint);
        canvas.drawLine(width, height/2, 0, height/2, paint);
       
       
       
        paint.setColor(Color.GREEN);
        paint.setTextSize(height/10);
        canvas.drawText("green", width/4, height/8, paint);
       
       
        paint.setColor(Color.CYAN);
        canvas.drawCircle(width/2, height/2, width/4, paint);
    }
}

Теперь нужно поместить наш компонент на экран. Для этого зайдем в main.хml и отредактируем этот файл до следующего состояния:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="It's a drawing sample"
    />
<Button android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
  
<com.gt.Test
    android:layout_width="100dp"
    android:layout_height="200dp"
/>
</LinearLayout>

Здесь мы можем задать длину и ширину нашему компоненту. Для примера — 100*200 единиц.

Запускаем эмулятор, любуемся проделанным.