1. ホーム
  2. android

[解決済み] 角丸のプログレスバー?

2022-09-26 08:27:27

質問

このようなプログレスバーのデザインを実現しようとしています。

現在持っているコードでは、このようになります。

これがそのコードです。

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </clip>
</item>

私のプログレスバー

 <ProgressBar
            android:id="@+id/activeProgress"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:progress="10"
            android:progressDrawable="@drawable/rounded_corners_progress_bar"/>

を追加してみました。 <size> 属性を追加してみました。 <shape><clip で進捗の形を少し小さくしたのですが、うまくいきませんでした。また、プログレスバーが平らなので、デザイン通り曲線にしたいのです。デザインを実現するためには、何を変更すればいいのでしょうか?

どのように解決するのですか?

進捗の形状をもう少し小さくするには?

このように、進捗の項目に少しパディングを与える必要があります。

<item android:id="@android:id/progress"
    android:top="2dp"
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp">

プログレスバーをデザイン通りに湾曲させるには?

を置き換える <clip></clip> 要素を <scale android:scaleWidth="100%"></scale> . これによって、シェイプが成長してもその形を維持し、切断されることがなくなります。 残念ながら、最初のうちは、シェイプの角が描画するのに十分なスペースがないため、少し望ましくない視覚効果が生じます。しかし、ほとんどの場合、これで十分でしょう。

完全なコード。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
 </item>

 <item android:id="@android:id/progress"
    android:top="1dp"
    android:bottom="1dp"
    android:left="1dp"
    android:right="1dp">

    <scale android:scaleWidth="100%">
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </scale>
 </item>
</layer-list>