Google Developers Indonesia Blog: Menggambar latar belakang sudut membulat pada teks

Local blog for Indonesian speaking developers

Menggambar latar belakang sudut membulat pada teks

25 August 2018

code { background-color: transparent }

Ilustrasi oleh Virginia Poltrack

membulat

Menyetel latar belakang pada satu baris teks

Teks pada satu baris dengan latar belakang sudut membulat

Menyetel latar belakang pada dua atau beberapa baris teks

Teks pada beberapa baris dengan latar belakang sudut membulat

Menyetel latar belakang pada format teks kanan-ke-kiri

Format teks kanan ke kiri dengan latar belakang sudut membulat

kode contoh Berdurasi atau tidak? Inilah pertanyaannya!artikelsebelumnyateks yang diinternasionalisasikanBackgroundColorSpan

Teks menggunakan BackgroundColorSpan

ReplacementSpanChip Solusi: TextView khusus

Teks muat dalam satu baris: kita hanya membutuhkan satu drawable

Teks muat dalam 2 baris: kita membutuhkan drawable untuk awal dan akhir teks

Teks mencakup beberapa baris: kita membutuhkan drawable untuk awal, tengah, dan akhir teks.

Keempat drawable yang perlu digambar bergantung pada posisi teks

Tentukan apakah teks mencakup beberapa baris

Temukan baris awal dan akhir

Temukan offset awal dan akhir tergantung pada arah paragraf

Layout

Menandai posisi latar belakang dilakukan dalam sumber daya XML dengan durasi Annotation dan kemudian, dalam kode, kami menghitung posisi pada TextRoundedBgHelper

Menyediakan drawable latar belakang sebagai atribut TextView — diimplementasikan pada TextRoundedBgAttributeReader

Merender drawable tergantung pada apakah teks termuat dalam satu atau beberapa baris — antarmuka TextRoundedBgRenderer dan implementasinya: SingleLineRenderer dan MultiLineRenderer

Mendukung gambar khusus pada TextView — RoundedBgTextView, class yang memperluas AppCompatTextView, membaca atribut dengan bantuan TextRoundedBgAttributeReader, mengganti onDraw dengan menggunakan TextRoundedBgHelper untuk menggambar latar belakang.

Mencari tahu di mana latar belakang harus digambarAnnotationartikel iniTextRoundedBgHelper

Memungkinkan kita memosisikan latar belakang berdasarkan arah teks: kiri-ke-kanan atau kanan-ke-kiri

Merender latar belakang, berdasarkan drawable serta padding horizontal dan vertikal

TextRoundedBgHelper.drawfun draw(canvas: Canvas, text: Spanned, layout: Layout) { // ideally the calculations here should be cached since // they are not cheap. However, proper // invalidation of the cache is required whenever // anything related to text has changed. val spans = text.getSpans(0, text.length, Annotation::class.java) spans.forEach { span -> if (span.value.equals("rounded")) { val spanStart = text.getSpanStart(span) val spanEnd = text.getSpanEnd(span) val startLine = layout.getLineForOffset(spanStart) val endLine = layout.getLineForOffset(spanEnd) // start can be on the left or on the right depending // on the language direction. val startOffset = (layout.getPrimaryHorizontal(spanStart) + -1 * layout.getParagraphDirection(startLine) * horizontalPadding).toInt() // end can be on the left or on the right depending // on the language direction. val endOffset = (layout.getPrimaryHorizontal(spanEnd) + layout.getParagraphDirection(endLine) * horizontalPadding).toInt() val renderer = if (startLine == endLine) singleLineRenderer else multiLineRenderer renderer.draw(canvas, layout, startLine, endLine, startOffset, endOffset) } }} Menyediakan drawable sebagai atributmenetapkanTextRoundedBgAttributeReader Merender drawable latar belakang