Universidade Federal do Paraná

Tamanho: px

Começar a partir da página:

Download "Universidade Federal do Paraná"

Emanuel Aquino Paixão
5 Há anos
Visualizações:

1 Universidade Federal do Paraná Departamento de Informática Ciência da Computação Android Modificando Views: CompassView Prof. Eduardo Todt Adaptado para Kotlin por Bernardo Ferrari 2018

2 Objetivos Exercício criação de View com edição intensiva no Canvas Criar CompassView estendendo a classe View Entender uso de Paint e desenho de interfaces customizadas

3 CompassView: definição inicial Criar classe CompassView Lembrar de colocar construtores Experimente remover e executar class constructor( context: Context, attrs: AttributeSet? = null, defstyleattr: Int = 0 ) : View(context, attrs, defstyleattr) { init { initcompassview()

4 CompassView: dimensões private fun measure(measurespec: Int): Int { Que métodos são herdados da classe View? // Decode the measurement specifications. val specmode = View.MeasureSpec.getMode(measureSpec) val specsize = View.MeasureSpec.getSize(measureSpec) return if (specmode == View.MeasureSpec.UNSPECIFIED) 200 else specsize override fun onmeasure(widthmeasurespec: Int, heightmeasurespec: Int) { val measuredwidth = measure(widthmeasurespec) val measuredheight = measure(heightmeasurespec) val d = Math.min(measuredWidth, measuredheight) setmeasureddimension(d, d)

5 CompassView: layout Modifique o layout da MainActivity acrescentando uma view associada à CompassView: <com.todt.compass1.compassview android:id="@+id/compassview" android:layout_width="match_parent" android:layout_height="match_parent" />

6 CompassView: strings e cores <string name="cardinaln">n</string> <string name="cardinals">s</string> <string name="cardinale">e</string> <string name="cardinalw">w</string> <color name="colorcompassbackgnd">#000000</color> <color name="colorcompassmarker">#00ff00</color> <color name="colorcompasstext">#ffffff</color>

7 CompassView: orientação var bearing: Float = 0f

8 CompassView: propriedades Definir propriedades privadas da classe CompassView // um objeto paint para cada coisa private val markerpaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG) private val textpaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG) private val circlepaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG) private var northstring = "" private var eaststring = "" private var southstring = "" private var weststring = "" private var textheight = 0f var bearing: Float = 0f

9 CompassView: init private fun initcompassview() { isfocusable = true val r = this.resources circlepaint.color = r.getcolor(r.color.background_color) circlepaint.strokewidth = 1f circlepaint.style = Paint.Style.FILL_AND_STROKE northstring = r.getstring(r.string.cardinal_north) eaststring = r.getstring(r.string.cardinal_east) southstring = r.getstring(r.string.cardinal_south) weststring = r.getstring(r.string.cardinal_west) textpaint.color = r.getcolor(r.color.text_color) textheight = textpaint.measuretext("yy") markerpaint.color = r.getcolor(r.color.marker_color)

10 Jetzt kommt die scharfe Sache override fun ondraw(canvas: Canvas) { // centro e raio val px = measuredwidth / 2f val py = measuredheight / 2f val radius = Math.min(px, py) // desenha a base do mostrador canvas.drawcircle(px, py, radius, circlepaint) // rotacionar base conforme contrário da // orientação para desenhar itens canvas.save() canvas.rotate(-bearing, px, py) OnDraw é chamada quando: 1. a view é desenhada inicialmente 2. sempre que invalidate() é chamada na view - touch - EditText recebendo borda e cursor - button sendo pressionado...

11 Jetzt kommt die scharfe Sache override fun ondraw(canvas: Canvas) {... val textwidth = textpaint.measuretext("w").toint() val cardinalx = px - textwidth / 2 val cardinaly = py - radius + textheight // desenhar marcas a cada 16 graus e texto a cada 45 for (i in 0..23) {......

12 override fun ondraw(canvas: Canvas) {... for (i in 0..23) { canvas.drawline(px, py - radius, px, py - radius + 10, markerpaint) canvas.save() canvas.translate(0f, textheight) if (i % 6 == 0) { val dirstring = when (i) { 0 -> { val arrowy = 2 * textheight canvas.drawline(px, arrowy, px - 5, 3 * textheight, markerpaint) canvas.drawline(px, arrowy, px + 5, 3 * textheight, markerpaint) northstring 6 -> eaststring 12 -> southstring 18 -> weststring else -> "" canvas.drawtext(dirstring, cardinalx, cardinaly, textpaint)......

13 Jetzt kommt die scharfe Sache override fun ondraw(canvas: Canvas) { for (i in 0..23) { else if (i % 3 == 0) { val angle = (i * 15).toString() val angletextwidth = textpaint.measuretext(angle) val angletextx = (px - angletextwidth / 2).toInt() val angletexty = py - radius + textheight canvas.drawtext(angle, angletextx.tofloat(), angletexty, textpaint) canvas.restore() canvas.rotate(15f, px, py) canvas.restore()

14 Funcionou? Entenda o que faz cada parte Modifique aumentando caracteres e traços

$.23) { // Draw a marker. canvas.drawline(px, py - radius, px, py - radius + 30, markerpaint) canvas.save()... textpaint.color = r.getcolor(r.color.text_color) textheight = 48f // textpaint.$

15 Aumentando marcas e textos val arrowy = 2 * textheight canvas.drawline(px, arrowy, px - 8, 4 * textheight, markerpaint) canvas.drawline(px, arrowy, px + 8, 4 * textheight, markerpaint) for (i in 0..23) { // Draw a marker. canvas.drawline(px, py - radius, px, py - radius + 30, markerpaint) canvas.save()... textpaint.color = r.getcolor(r.color.text_color) textheight = 48f // textpaint.measuretext("yy") // na realidade mede a largura disso textpaint.textsize = 48f markerpaint.color = r.getcolor(r.color.marker_color) markerpaint.strokewidth = 8f

16 Referências Exemplos, listagens, conceitos, imagens, obtidos do livro texto Peter Meier (Professional Android 4 Application Development), do site do fórum e de outras fontes, quando indicado. ews-part-1-extending-standard-views-and-adding-new-xml-attri butes/

Documentos relacionados

Universidade Federal do Paraná

Universidade Federal do Paraná Departamento de Informática Ciência da Computação Tópicos em Sistemas Embarcados Android Prof. Eduardo Todt 2016 objetivos Com Android studio criar primeira app Projetar