This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 1 year has passed since last update.

【Android】グラデーションを作成してみる【<string-array>】

自分用メモ

Last updated at 2024-01-17Posted at 2023-12-14

arrays.xmlでこんなことできるのかってなったので共有します。　

arrays.xmlとは？

配列（Array）や文字列の配列などのリソースを定義することができます。
主に、UIに表示される文字列やリストデータ、選択肢などを効果的に管理するために使用されます。

普段は、文字列の配列だったり数列だったりを配置するイメージですが

使い方①（シンプル）

文字列の配列

<!-- res/values/arrays.xml -->
<resources>
    <string-array name="days_of_week">
        <item>Sunday</item>
        <item>Monday</item>
        <item>Tuesday</item>
        <item>Wednesday</item>
        <item>Thursday</item>
        <item>Friday</item>
        <item>Saturday</item>
    </string-array>
</resources>

<!-- res/values/arrays.xml -->
<resources>
    <integer-array name="prime_numbers">
        <item>2</item>
        <item>3</item>
        <item>5</item>
        <item>7</item>
        <item>11</item>
    </integer-array>
</resources>

取得の仕方

// リソースIDを使用して文字列配列を取得
val daysOfWeek: Array<String> = resources.getStringArray(R.array.days_of_week)

// 整数配列を取得する場合
val primeNumbers: IntArray = resources.getIntArray(R.array.prime_numbers)

Spinner（ドロップダウンリスト）

<!-- res/layout/main_activity.xml -->
<Spinner
    android:id="@+id/spinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:entries="@array/days_of_week"/>

レイアウトファイルのTextView

<!-- res/layout/main_activity.xml -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@array/days_of_week"/>

使い方②（応用）

色を入れる

<!-- res/values/arrays.xml -->
<resources>
    <color name="colorStart">#FF0000</color> <!-- 色の開始部分 -->
    <color name="colorEnd">#00FF00</color> <!-- 色の終了部分 -->
</resources>

<!-- res/layout/main_activity.xml -->
<TextView
    android:id="@+id/gradientTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Hello, Gradient!"
    android:textSize="24sp"
    android:gravity="center"
    android:background="@drawable/gradient_background"/>

<!-- res/drawable/gradient_background.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@color/colorStart"
        android:endColor="@color/colorEnd"
        android:angle="45"/>
</shape>

このXMLファイルでは、タグを使用して開始色 (colorStart) から終了色 (colorEnd) までのグラデーションを定義しています。angle 属性を調整することで、グラデーションの方向を変更できます。

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

arrays.xmlでこんなことできるのかってなったので共有します。　

arrays.xmlとは？

普段は、文字列の配列だったり数列だったりを配置するイメージですが
グラデーションを作るのに使えたりします。（一応）

やり方

colors.xmlに色を設定

グラデーションに使う色を指定したリソースファイルを設定します。
<color>タグの中にnameと色コードを指定します。

<!-- res/values/colors.xml -->
<resources>
    <color name="colorStart">#000000</color> <!-- 色の開始部分 -->
    <color name="colorMiddle1">#7B1FA2</color> <!-- 色の中間部分1 -->
    <color name="colorMiddle2">#76FF03</color> <!-- 色の中間部分2 -->
    <color name="colorEnd">#FFFFFF</color> <!-- 色の終了部分 -->
</resources>

カラーコード一覧

グラデーション用の要素を設定

グラデーションに使う色の要素をまとめたリソースファイルを設定します。
今回は、gradient_colors.xmlに色を設定します。
<string-array> タグを使用して定義することで、これらのリソースを一元管理できます！

<!-- res/valuesgradient_colors.xml -->
<resources>
    <string-array name="gradient_colors">
        <item>@color/colorStart</item>
        <item>@color/colorMiddle1</item>
        <item>@color/colorMiddle2</item>
        <item>@color/colorEnd</item>
    </string-array>
</resources>

Viewにグラデーションを適用させる

最後にViewにグラデーションを適用させます。
string-arrayを使用する場合、動的に配色を設定する必要があるようです。（XMLだと難しい）
もちろん、XML内でViewのattributeを直接変える方法もあります。
Viewの背景にgradientDrawableを指定することでグラデーションをつけることができます。

TIPS：
gradientDrawable は、Android プラットフォームで提供されるクラスで
シェイプ（形状）やビューの背景にグラデーションや塗りつぶしを設定するために使用されます。

//MainActivityのonCreate内で使用
//要素が格納された配列を取得
 val gradientColors = resources.obtainTypedArray(R.array.gradient_colors)

// GradientDrawableの作成
//第一引数：グラデーションの向きを指定
//第二引数：色の配列を取得（Int型）

//IntArray(gradientColors.length())
//要素分の配列を作成

// gradientColors.getColor(it, 0)
//配列の中に色をそれぞれ格納していきます。
//第一引数はインデックスで
//第二引数はデフォルトの色です

val gradientDrawable = GradientDrawable(
    GradientDrawable.Orientation.LEFT_RIGHT,
    IntArray(gradientColors.length()) { gradientColors.getColor(it, 0) }
)

// TypedArrayを解放
//メモリリークを防ぎます
gradientColors.recycle()

// Viewに背景として設定
binding.sampleView.background = gradientDrawable

実際にやってみるとこんな感じになります！

なんの配色はわかりますか。。？

最後に

あまり使用頻度は高くないですが、個人的に面白かったので記事にしてみました！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up