14

Android でカスタム プログレス バーを作成しようとしています。次のxmlファイルを使用しました(progress_bar_horizo​​ntal.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="8dip" />
    <stroke android:width="2dip" android:color="#FFFF"/>
    <solid android:color="#FFFF"/>              
   </shape>
  </item>
  <item android:id="@android:id/secondaryProgress">
   <clip>
    <shape>
     <corners android:radius="8dip" />
     <stroke android:width="2dip" android:color="#FFFF"/>
     <solid android:color="#FF00"/> 
    </shape>
   </clip>
  </item>
  <item android:id="@android:id/progress">
   <clip>
    <shape>
     <corners android:radius="8dip" />
     <stroke android:width="2dip" android:color="#FFFF"/>
     <solid android:color="#FF00"/> 
    </shape>
   </clip>
  </item>
 </layer-list>

プログレスバーの進行状況を両側で丸めたいという事実を除けば、すべてがうまく機能します。前述のコードは、進行状況バーを左側で丸め、右側で単純にカット (丸めない) するようにします。クリップタグのせいでしょう。それについて私を助けてもらえますか？プログレス バーの進行状況が両側で丸くなるようにするには、何を変更すればよいですか?

完全なレイアウトは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:background="@drawable/gradient_progress"
  android:padding="10dip"
  >
   <LinearLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   >
    <TextView
     android:id="@+id/progress_header"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textColor="#FF000000"
     android:textAppearance="?android:attr/textAppearanceMedium"
     android:textStyle="bold"
     android:text="Uploading"               
    />
    <TextView
     android:id="@+id/progress_percent"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textColor="#FF000000"
     android:textAppearance="?android:attr/textAppearanceMedium"
     android:textStyle="bold"
     android:text="55%"         
     android:paddingLeft="10dip"
    />      
   </LinearLayout>          
   <ProgressBar
    android:id="@+id/progress_bar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_gravity="center"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/progress_bar_horizontal"
    android:maxHeight="12dip"    
    android:minHeight="12dip"    
    android:max="100" 
   />
  </LinearLayout>
 </LinearLayout>

これが私の努力の結果です：リンクテキスト

赤いバーの右側も丸みを帯びたエッジにしたいと思います。コメントありがとうございます。

4

6 に答える 6

32

時間の更新された回答は次のとおりです。

Android ソース コードでは、 Patch 9 ファイルを使用して効果を実現しています。 res/res/drawable/progress_horizo​​ntal_holo_dark.xml/

レイアウト xml から始めます。

<ProgressBar
    android:id="@+id/custom_progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:indeterminateOnly="false"
    android:progressDrawable="@drawable/custom_progress_bar_horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:minHeight="13"
    android:progress="33"
    android:secondaryProgress="66" />

これの多くをスタイル xml に移動できますが、それは重要ではありません。私たちが本当に気にかけているのはandroid:progressDrawable="@drawable/custom_progress_bar_horizontal"、独自のカスタム プログレス バーを指定できるようにすることです。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
          android:drawable="@android:drawable/custom_progress_bg" />
    <item android:id="@android:id/secondaryProgress">
        <scale android:scaleWidth="100%"
               android:drawable="@android:drawable/custom_progress_secondary" />
    </item>
    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%"
               android:drawable="@android:drawable/custom_progress_primary" />
    </item>
</layer-list>

または、背景にパッチ 9 を使用する必要はありません。たとえば、1 dp の境界線を持つ単純な白い背景は次のとおりです。

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="6.5dp" />

        <solid android:color="@android:color/white" />

        <stroke
            android:width="1dp"
            android:color="@android:color/darker_gray" />
    </shape>
</item>

Android Asset Studio には、Patch 9 ファイルの生成に役立つ素晴らしいツールがあります: http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

ツールの前にパディングがあるプライマリ xdpi png の例: ツールの プライマリ プログレス バー
前にパディングがあるセカンダリ xdpi png の例: 二次進行状況バー

そして最終的な出力： カスタム プログレス バー

于 2014-02-21T02:15:25.000 に答える
25

ラベル<clip>を<scale>次のように変更するだけです。

<scale android:scaleWidth="100%">
于 2016-12-27T09:24:09.490 に答える
3

私の知る限り、これは不可能です。内部的にClipDrawable（つまり、クリップタグ）が を使用して指定されたシェイプ/ドローアブルをカットするためcanvas.clipRect()です。ところで、ここClipDrawableからソースをコピーして、進行状況に基づいて特定のパスをクリップできます。

于 2011-03-18T15:55:14.573 に答える