これはコードです:
<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>
素敵な質問と画像を提供してくれた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>
<?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>