Embedded Files
図形の描画
図形の描画
アプリ上で図形などを描画したいときは、自分でViewコンポーネントを作成し、onDraw()メソッドを使うことで実現することができます。
この例では基本的な図形の描画、色/太さの変更を行っています。
class MyCanvasView(context: Context) : View(context) { // 描画色の初期設定 private val paint = Paint().apply { setARGB(255, 255, 0, 0) } override fun onDraw(canvas: Canvas) { // 背景色を設定 canvas.drawColor(Color.BLUE) // Viewの幅/高さはそれぞれwidth/heightで取得できます val radius = min(width, height) / 2f // 円を描画 canvas.drawCircle(width / 2f, height / 2f, radius, paint) // 描画色を変更 paint.color = Color.MAGENTA // 長方形を描画 canvas.drawRect(width/2f, height/2f, width.toFloat(), height.toFloat(), paint) paint.color = Color.CYAN // 線の太さを変更 paint.strokeWidth = 5f // 線分を描画 canvas.drawLine(0f, 0f, width/4f, width/4f, paint) }}作成したViewはActivityからsetContentView()で表示させることができます。
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // 作成したViewの表示 val myCanvasView = MyCanvasView(this) setContentView(myCanvasView) }}
画像の描画
画像の描画
画像を使用するには、まずres/drawable/ディレクトリに画像ファイルを配置する必要があります。これにより、コードから画像を参照できるようになります。
実際に画像を表示させるにはImageViewコンポーネントを使うのが簡単です。
xmlデザインのパレットからImageViewを貼り付ければ、リソースを選択する画面が表示され、srcCompatが自動的に設定されます。
上記の方法が一番簡単ですが、もちろんコードベースでもImageViewを作成することはできます。
この例では上記と同様のレイアウトをコードベースで実現しています。
class MainActivity : AppCompatActivity() { private lateinit var constraintLayout: ConstraintLayout override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ImageViewを生成 val imageView = ImageView(this).apply { // 画像の設定 setImageResource(R.drawable.pic) // アスペクト比の維持 adjustViewBounds = true // 幅/高さをできるだけ画面に合わせる（上のアスペクト比の設定を保持しながら） layoutParams = ViewGroup.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT) } // レイアウトの作成（xmlファイルの代わり） constraintLayout = ConstraintLayout(this).apply { // ImageViewをレイアウトに追加 addView(imageView) } // レイアウトの表示 setContentView(constraintLayout) }}
文責 若園 (2020.6.29)
Google Sites
Report abuse