【Android Studio&Kotlin】「GradientDrawable」コードで動的に生成する

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
xmlファイルではなく、kotlinのコードで動的に色を変えることはできますか?

よしたか
学んだことをアウトプットしていきます。

 

この記事を読むことで
  • xmlファイルではなく、kotlinのコードで動的に色を変える方法がわかります。

xmlファイルではなく、kotlinのコードで動的に色を変える方法

対象者

大前提
  • kotlinのコードで動的に色を変える方法がまだわからない人向けです。

xmlファイルで色や丸の大きさを指定

レイアウトファイルで作成すると次のように色や大きさ、角丸に変更することができる。

シェイプ ドローアブルを作成します。

シェイプ ドローアブルはXML 内で定義される一般的な図形です。

見本の紹介

ファイルの場所:
res/drawable/filename.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <stroke android:width="3dp" android:color="#FF0000FF" />
  <corners android:radius="3dp" />
  <solid android:color="#660000FF" />
</shape>

 

見本2

公式サイトから属性の型を明記したものを提示しています。

”integer”の部分は数字と単位を入力して調整してみてください。

もちろんすべて細かく設定する必要はありません。

構文:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

 

 

必須のコード

要素:

<shape>
スケール ドローアブル。

ルート要素でなければなりません。

属性:

xmlns:android
文字列。必須です。

XML 名前空間を “http://schemas.android.com/apk/res/android” として定義します。

android:shape
キーワード。

図形タイプを定義します。

 

有効な値は次のとおりです。

説明
"rectangle" 四角形。これはデフォルトの図形です。
"oval" 楕円形
"line"

水平線

この図形には線の太さを指定する <stroke> 要素が必要です。

"ring" 同心円

よく使う要素

自分がよく使った要素を紹介しておきます。

属性でよく使う属性は書いておきますが、公式サイトで確認してみてください。

公式サイトはこちらになります。

※属性は詳細を設定するための文字列になります。

要素 <corners>

形の角を丸くします。

四角形にのみ適用できます。

 

属性:

android:radius
ディメンション。大きさを指定します。

すべての角の半径を、ディメンション値またはディメンション リソースで指定します。

 

要素 <gradient>

図形のグラデーション色を指定します。

属性:

android:startColor
開始の色。

開始色を 16 進値またはカラーリソースで指定します。

android:centerColor

中央の色。

グラデーションの開始色と終了色の間の中間色を、16 進値またはカラーリソースで指定します(任意)。

android:endColor

端の色。

終了色を 16 進値またはカラーリソースで指定します。

 

要素 <solid>

図形に使用する単色。

属性:

android:color

図形の色。

形に適用する色を 16 進値またはカラーリソースで指定します。

要素 <stroke>

図形の枠線。

属性:

android:width
ディメンション。大きさを設定します。

線の太さをディメンション値またはディメンション リソースで指定します。

android:color

枠線の色。

線の色を 16 進値またはカラー リソースで指定します。

レイアウトしたコードを動的に変更する

以下のように指定して、色を変更していく。

//基本的な使い方
val drawable = GradientDrawable()
drawable.setStroke(3, Color.parseColor("#FF0000FF")) //枠線の太さと色の変更
drawable.cornerRadius = 3f //コーナーの設定方法
drawable.setColor(Color.parseColor("#660000FF")) //背景色の変更方法1
drawable.setColor(100)//背景色の変更方法2 お好きな方法で色を選択

 

応用で使用したのは次のようにしました。

lateinitで遅延して設定するようにしています。

setColorは随時指定された色を入れました。
(今回は割愛しています。)

//応用 コールバック関数を利用した時に次のように設定しました。
//コールバック関数でリアルタイムに指定する時は、セットカラーの値も変数にして変更します。
lateinit var colorBackground: ImageView
(colorBackground.drawable as GradientDrawable).setColor(0)

 

まとめ

今回はxmlファイルではなく、kotlinのコードで動的に色を変える方法についてお伝えしました。

 

※プログラミングは習得中ですので、参考程度に記事を読んでください。

 

参考はこちら

https://qiita.com/guchio/items/bebc13db0d2c0ae03363

https://developer.android.com/guide/topics/resources/drawable-resource#Shape

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事