最近、大まかにこんなプロジェクトのニーズがありました 一見、
普通のシークバーで実現できそうですが、かなり謎が多く、まず経歴が普通ではありません。また、影をクリックすると、ボタンの近くに影があり、背景と進行状況バーの角が丸くなっているため、この要件を次のいくつかに絞り込むことができます。
- 背景の影 + 角丸
- プログレスバーの角が丸い
- ボタンの影
最初に実装が簡単なプログレス バーについて説明します。これは非常に単純で、形状の塗りつぶしを直接追加し、角の丸い属性を追加するだけです。
2 つ目はボタンの実現です。このボタンは普通のボタンではないので、影を描くのが非常に面倒です。アーティストに独自の影を付けた絵を依頼して貼り付けるのが最も便利で早い方法です。その上で。
最後に背景画像をどうやって実現したかというと、
まず3つの方法を考えました。
- ボタンと同じ方法で影のあるデザインを探し、drawable属性を使って追加します。これは簡単ですが、適応に大きな問題があります。画面サイズの変更に伴い、シークバーは引き伸ばされて、背景が非常にぼやけてしまいます。それで諦めたのですが、後で.9.png形式を使えばこの状況を回避できると聞きましたが、まだ試していません(ピットを残しておいてください)
- カスタムシークバーメソッドを使用し、ペイントを使用してグラデーションを描画することは可能ですが、Android初心者にとっては非常に不親切で、ある程度の描画の熟練が必要であり、そうでないと独自のプロセスがありません。
- 最後の方法は最も便利で柔軟です。これは、シェイプのグラデーションを使用して背景を描画し、開始色、終了色、中心色を調整して影のスタイルを制御し、次に角度を使用して角度を制御します。 centerY はグラデーションの中心位置を制御し、大まかな影のスタイルを示します。
コードを置くのではなく、使用するシェイプ属性を入れましょう
<?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>
<!--这里是背景-->
<gradient
android:startColor="#F1E8E8"
android:centerColor="#ffffff"
android:endColor="#FBF7F7"
android:angle="270"
android:centerY="0.4"
/>
<corners android:radius="30dp" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<!--这里是进度条-->
<shape>
<solid android:color="@color/red_primary" />
<corners android:radius="30dp" />
</shape>
</clip>
</item>
</layer-list>
最後に完成スタイルの写真を最後に載せます