進行状況バーはアンドロイドの両側に丸められています -- android フィールド と user-interface フィールド と progress-bar フィールド と android-progressbar フィールド と material-components-android フィールド 関連 問題

Progress bar rounded on both sides in android












14
vote

問題

日本語

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>

これは私の努力の結果です。リンクテキスト < / P>

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

英語

I am trying to create a custom progress bar in android. I have used the following xml file for it (progress_bar_horizontal.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> 

Everything works great apart from the fact I would like to have the progress in my progress bar rounded on both sides. The aforementioned code makes a progress bar to be rounded on the left hand side and simply cut (not rounded) on the right hand side. It is because of the clip tag probably. Could you please help me on that? What should i change to have the progress in my progress bar rounded on both sides?

The full layout goes below:

<?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> 

Here is the result of my effort: link text

I would like the red bar to have rounded edges on the right hand side as well. Thank you so much for your comments.

</div
              
   
   

回答リスト

32
 
vote
vote
ベストアンサー
 

これは時代の更新された答えです:

Androidソースコードは、パッチ9ファイルを使用して効果を達成します。 http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.4_r1/frameworks/base/core/res/res/drawable/progress_horizo​​ntal_poro_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を使う必要はありません - たとえば、ここに1dpの枠線を持つシンプルな白い背景があります:

<事前> <コード> <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には、パッチ9ファイルを生成するのに役立つ素晴らしいツールがあります。 http://android-ui-utils.googlecode.com/hg/ ASTET-STUDIO / DIST / NINE-PARTES.HTML

例ツールの前にパディングを伴うプライマリXDPI PNG: プライマリプログレスバー
ツールの前にパディングを備えたセカンダリXDPI PNGの例 「二次進捗バー」SRC

と最終出力: カスタムプログレスバー

 

Here's an updated answer for the times:

The Android source code uses Patch 9 files to achieve the effect: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.4_r1/frameworks/base/core/res/res/drawable/progress_horizontal_holo_dark.xml/

So start in your layout 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" /> 

You can move a lot of this to a style xml but that's beside the point. What we really care about is android:progressDrawable="@drawable/custom_progress_bar_horizontal" - which is going to allow us to specify our own custom progress bars:

<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> 

Or you don't have to use a Patch 9 for your background- for example here's a simple white background with a 1dp border:

<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 has an awesome tool to help you generate Patch 9 files: http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

Example primary xdpi png with padding before the tool: Primary progress bar
Example secondary xdpi png with padding before the tool: Secondary progress bar

And the final output: Custom progress bar

</div
 
 
   
   
24
 
vote

このようなラベル<コード> <clip> <コード> 99887665

<事前> <コード> <scale android:scaleWidth="100%">
 

Just change the label <clip> to <scale> like this:

<scale android:scaleWidth="100%"> 
</div
 
 
     
     
3
 
vote

私が知っている限り、これは不可能です。 ClipDrawable (すなわちCLIP TAG)は、<コード> canvas.clipRect() を使用して、与えられた形状/描画可能なためです。 BTW、 ClipDrawable ソースからコピーできます。ここにと進行レベルに基づいて特定のパスをクリップします。

 

As far as I know, this is not possible. Because internally ClipDrawable (i.e. clip tag) cuts the given shape/drawable using canvas.clipRect(). Btw, you can copy the ClipDrawable source from here and clip a particular path based on the progress level.

</div
 
 
     
     
2
 
vote

マテリアルコンポーネントライブラリーと android:progressDrawable="@drawable/custom_progress_bar_horizontal"1 属性で提供されている 99887776610 を使用できます。何かのようなもの:

<事前> <コード> android:progressDrawable="@drawable/custom_progress_bar_horizontal"2

イメージの説明を入力します。ここで

注:少なくともバージョン android:progressDrawable="@drawable/custom_progress_bar_horizontal"3

 

You can use the LinearProgressIndicator provided by the Material Components Library and the app:trackCornerRadius attribute.

Something like:

    <com.google.android.material.progressindicator.LinearProgressIndicator         android:indeterminate="true"         app:indicatorSize="xxdp"         app:trackCornerRadius="xdp"/> 

enter image description here

Note: it requires at least the version 1.3.0-alpha04.

</div
 
 
 
 
0
 
vote

進捗が非常に低いときにエンドグラフィックが自分自身と重なっている問題を解決するために、私はプログレスバーに固定の開始オフセットを追加するプログレスバークラスに拡張子を書きました。<正常として機能します。< / P>

進捗バーへの開始オフセットとして追加したい値を渡す 'setMax()'を渡すより 'setMaxWithPercentOffset()'または 'setMax()'を呼び出すだけではなく、 'setmax()'を呼び出します。

スタートオフセットを必要とせずに誰かがこの問題を解決した場合、私に知らせてください!

<事前> <コード> android:progressDrawable="@drawable/custom_progress_bar_horizontal"4

 

In order to solve the problem where the end graphics overlap themselves when the progress is very low, I've written an extension to the ProgressBar class that adds a fixed start offset to the progress bar, while otherwise functioning as normal.

Just call 'setMaxWithPercentOffset()' or 'setMaxWithOffset()' rather than 'setMax()' passing in the value you want to add as a start offset to the progress bar.

If anyone has solved this problem without requiring the start offset let me know!

/**  * This progress bar can be used when the progress bar end graphics are styled in some way.  * In this case, the progress bar must always have a small percentage of progress, otherwise  * the styled ends of the progress overlap each other.  *  */ public class EndStyledProgressBar extends ProgressBar {     private static final int DEFAULT_START_OFFSET_PERCENT = 5;      private int mStartOffset;     private int mRealMax;      public EndStyledProgressBar(Context context) {         super(context);         commonConstructor();     }      public EndStyledProgressBar(Context context, AttributeSet attrs) {         super(context, attrs);         commonConstructor();     }      public EndStyledProgressBar(Context context, AttributeSet attrs, int defStyle) {         super(context, attrs, defStyle);         commonConstructor();     }      private void commonConstructor() {         mRealMax = super.getMax();         mStartOffset = 0;          setMaxWithPercentOffset(DEFAULT_START_OFFSET_PERCENT, mRealMax);          super.setProgress(super.getProgress() + mStartOffset);         super.setSecondaryProgress(super.getSecondaryProgress() + mStartOffset);     }      public void setProgress(int progress) {         super.setProgress(progress + mStartOffset);     }      public void setSecondaryProgress(int secondaryProgress) {         super.setSecondaryProgress(secondaryProgress + mStartOffset);     }      public int getProgress() {         int realProgress = super.getProgress();         return isIndeterminate() ? 0 : (realProgress - mStartOffset);     }       public  int getSecondaryProgress() {         int realSecondaryProgress = super.getSecondaryProgress();         return isIndeterminate() ? 0 : (realSecondaryProgress - mStartOffset);     }      public int getMax() {         return mRealMax;     }       /**      * Don't call this, instead call setMaxWithPercentOffset() or setStartOffsetInPercent()      *      * @param max      */     public void setMax(int max) {         super.setMax(max);     }      /**      * Sets a new max with a start offset (in percent) included.      *      * @param startOffsetInPercent start offset for the progress bar to avoid graphic errors.      */     public void setMaxWithPercentOffset(int startOffsetInPercent, int max) {         mRealMax = max;         int startOffset = (mRealMax * startOffsetInPercent) / 100;          setMaxWithOffset(startOffset, max);     }      /**      * Sets a new max with a start offset included.      *      * @param startOffset start offset for the progress bar to avoid graphic errors.      */     public void setMaxWithOffset(int startOffset, int max) {         mRealMax = max;          super.setMax(startOffset + max);          setStartOffset(startOffset);          super.setMax(startOffset + max);     }       /**      * Sets a new start offset different from the default of 5%      *      * @param startOffset start offset for the progress bar to avoid graphic errors.      */     private void setStartOffset(int startOffset) {         int newStartOffset = startOffset;          // Ensure the start offset is not outside the range of the progress bar         if (newStartOffset < 0) newStartOffset = 0;         if (newStartOffset >= super.getMax()) newStartOffset = super.getMax();          // Apply the start offset difference         if (mStartOffset != newStartOffset) {             int diff = newStartOffset - mStartOffset;             super.setMax(super.getMax() + diff);             super.setProgress(super.getProgress() + diff);             super.setSecondaryProgress(super.getSecondaryProgress() + diff);             mStartOffset = newStartOffset;         }     } } 
</div
 
 
0
 
vote

最終丸みを帯びた両側の進捗バーが9パッチなしである。 <コード> android:progressDrawable="@drawable/custom_progress_bar_horizontal"5

<事前> <コード> <scale android:scaleWidth="100%"> 16

 

Final rounded both sides progress bar without 9-patch is: android:progressDrawable="@drawable/progress_horizontal_green"

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/progress">     <scale android:scaleWidth="100%">         <shape>             <corners android:radius="5dip"/>             <solid android:color="#33FF33"/>         </shape>     </scale> </item> 

</div
 
 

関連する質問

2  イメージのようなコード付きのAndroid Studioで丸みを帯びたツールバー/ ActionBarを実行できますか? [閉まっている]  ( How can i do a rounded toolbar actionbar in android studio with code like this i ) 
閉鎖。この質問はもっと焦点を絞ったにする必要があります。現在答えを受け付けていません。 この質問を改善したいですか? ...

1  ボタンは正しい色を表示しません - Android Studio  ( Button doesnt show correct color android studio ) 
私のAndroid Studioアプリケーションでは、背景として描画可能なボタンがあります。描画可能な角は角を丸めてボタンの色を変えます。 ただし、結果として得られる活動のデザインを見ると、私が欲しい色は表示されません。代わりに、ボタンはColorprimar...

1  Android:ButtonStyleとAndroid:imageButtonStyleはTheme.MaterialComponentsに使用できますか?  ( Can androidbuttonstyle and androidimagebuttonstyle be used for theme materialc ) 
theme.appcompatの場合、 android:buttonStyle 、および<コード> android:imageButtonStyle を使用して、<コード> Button 、<コード>および<コード> ImageButton に使用できます...

-1  マテリアル依存関係を追加した後のTextInputLayoutでエラーを表示します  ( Showing errors with textinputlayout after adding material dependency ) 
私のすべてのTextInputLayoutは、材料の依存関係を追加した後に概説されたスタイルを適用していない理由を知りたいだけです。実際に私はマイプロジェクトでバッジ描画可能でタブメディエータの重要な依存関係を実装しているので、その依存関係を削除すると、Tab...

34  com.google.android.matial.chip.chip.chipを選択しました  ( Set com google android material chip chip selected color ) 
選択したcom.google.android.matial.chip.chipカラーを設定する方法デフォルトの灰色になりたくないです。これは単一の選択チップグループです。 オリジナルドキュメントここ <事前> <コード> <com.google.and...

6  AndroidXでFabの上のスナックバーを表示します  ( Show snack bar above fab in androidx ) 
AndroidXを使用してアプリを作成しようとしています。 私のレイアウト <事前> <コード> <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.Constra...

3  Androidの材料のDaterangepickerの色を変更するにはどうすればいいですか?  ( How can i change material daterangepicker color in android ) 
<事前> <コード> dateLI.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v...

0  材料デートPickerのタイトルは場所がありません  ( Material date picker title is out of place ) 
MatileDatePickerを使用するとき、私はこの奇妙な問題を抱えています。 works が、タイトルと現在の日付が必要な場合は表示されていません。 何が起こっているのかというアイデア? 材料部品ライブラリーバージョン1.2.0 を使用しています こ...

0  MDCボタンはTouchMoveで選択されたままです  ( Mdc button remains selected on touchmove ) 
私はMDC-RPLPLEと一緒に使用しているこの単純なMDCボタンを持っています。 <コード> <button type="button" class="mdc-button mdc-button--plain">Hello</button> 私はこのような...

0  スイッチマテリアルカラーディナミカルを変更します  ( Change switchmaterial color dinamicaly ) 
私のアプリでは、最初のアクティビティは3つのボタンから選択できるセレクタです。赤、緑、黄色。 1つのボタンを選択すると、新しいアクティビティがスイッチマテリアルで表示されます。これで、緑色のボタンなどの赤いボタンを選択した場合は、スイッチの色が赤色になるように...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有