web-dev-qa-db-ja.com

角が丸いプログレスバー？

このプログレスバーの設計を達成しようとしています： enter image description here

私が持っている現在のコードはこれを生成します： enter image description here

これはコードです：

<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属性を追加して、進行状況を少し小さくすることを試みましたが、機能しませんでした。また、進行状況バーはフラットであり、デザインごとに湾曲させたいと考えています。設計を達成するために何を変更する必要がありますか？

androidandroid-drawableandroid-progressbar
42
Georgi Koemdzhiev

進行状況を少し小さくする方法

次のように、プログレスアイテムに小さなパディングを与える必要があります。

<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>
99
Eyal Biran

素敵な質問と画像を提供してくれたGeorgi Koemdzhievに感謝します。彼に似たものを作りたい人のために、次のことをしてください。

1）ProgressBarの背景を作成します。

progress_bar_background.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle"
    >
    <corners Android:radius="3dp" />
    <stroke Android:color="@color/white" Android:width="1dp" />
</shape>

2）ProgressBarのスケールを作成します。

curve_progress_bar.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:id="@Android:id/background">
        <shape>
            <corners Android:radius="2dp" />
            <solid Android:color="@color/transparent" />
        </shape>
    </item>

    <item Android:id="@Android:id/progress">
        <clip>
            <shape>
                <corners Android:radius="2dp" />
                <solid Android:color="#ffff00" />
            </shape>
        </clip>
    </item>
</layer-list>

3）レイアウトファイルにProgressBarを追加します。

<FrameLayout
    Android:layout_width="match_parent"
    Android:layout_height="6dp"
    Android:layout_marginStart="20dp"
    Android:layout_marginTop="10dp"
    Android:layout_marginEnd="20dp"
    Android:background="@drawable/progress_bar_background"
    >

    <ProgressBar
        Android:id="@+id/progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        Android:layout_width="match_parent"
        Android:layout_height="4dp"
        Android:layout_margin="1dp"
        Android:indeterminate="false"
        Android:progressDrawable="@drawable/curved_progress_bar"
        />

</FrameLayout>
2
CoolMind

The code produce following progress bar
。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:id="@Android:id/background">
    <shape>
        <corners Android:radius="15dip" />
        <stroke Android:width="1dp" Android:color="@color/black" />
    </shape>
</item>

<item Android:id="@Android:id/secondaryProgress">
    <clip>
        <shape>
            <corners Android:radius="5dip" />
            <gradient
                Android:startColor="@color/black"
                Android:centerColor="@color/trans"
                Android:centerY="0.75"
                Android:endColor="@color/black"
                Android:angle="270"

                />
        </shape>
    </clip>
 </item>


 <item
    Android:id="@Android:id/progress"
    >
    <clip>
        <shape>
            <corners
                Android:radius="5dip" />
            <gradient
                Android:startColor="@color/black"
                Android:endColor="@color/black"
                Android:angle="270" />
        </shape>
    </clip>
 </item>
 </layer-list>
0
Ravichandra S V