web-dev-qa-db-ja.com

水平ProgressBarから垂直パディングを削除します

デフォルトでは、ProgressBarにはバー自体の上下に特定のパディングがあります。最後にバーのみを持つように、このパディングを削除する方法はありますか？

androidandroid-progressbar
109
abergmeier

この問題の回避策として次を使用します。

Android:layout_marginBottom="-8dp"
Android:layout_marginTop="-4dp"
66
Stephen Wan

これは私がJuozasの答えをどのように使用したかです：

ProgressBarの高さは4dpです。そこで、高さ4dpのFrameLayoutを作成し、layout_gravity of ProgressBar〜center。それは魅力のような作品です。

<FrameLayout
    Android:layout_width="match_parent"
    Android:layout_height="4dp">

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        Android:layout_width="match_parent"
        Android:layout_height="4dp"
        Android:layout_gravity="center"
        Android:indeterminate="true"/>

</FrameLayout>
49
penduDev

この問題を解決するためにカスタムライブラリを使用することになりました。他のほとんどのソリューションは機能しますが、結果はさまざまなデバイス間で一貫していません。

MaterialProgressBar

  • Android 4.0+。
  • プラットフォーム間の色合いを修正します。
  • フレームワークProgressBarの組み込みパディングを削除できます。
  • フレームワークの水平ProgressBarのトラックを非表示にできます。
  • フレームワークProgressBarのドロップイン置換として使用されます。

Gradle依存関係として追加するには：

compile 'me.zhanghai.Android.materialprogressbar:library:1.1.7'

組み込みパディングなしでProgressBarをレイアウトに追加するには：

<me.zhanghai.Android.materialprogressbar.MaterialProgressBar
    Android:layout_width="wrap_content"
    Android:layout_height="4dp"
    Android:indeterminate="true"
    app:mpb_progressStyle="horizontal"
    app:mpb_useIntrinsicPadding="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />

app:mpb_useIntrinsicPadding="false"トリックを行います。詳細については、 GitHubページ を参照してください。

32
Binoy Babu

この問題の完全な解決策は次のとおりです。誰かがコードの断片を必要とする場合に備えて、これは私がやったことです。

  1. 8つの不確定な水平プログレスバーのドロアブルをすべてコピーしました
  2. 画像マニピュレーターを使用してドロアブルを編集し、不要なパディングを削除しました
  3. Android platformからprogress_indeterminate_horizo​​ntal_holo.xmlという名前の描画可能なXMLをコピーしました
  4. スタイルWidget.ProgressBar.Horizo​​ntalとその親をコピーしました
  5. レイアウトでスタイルとmin_heightを手動で設定します

これがprogress_indeterminate_horizo​​ntal_holo.xmlです

<animation-list
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:oneshot="false">
<item Android:drawable="@drawable/progressbar_indeterminate_holo1" Android:duration="50" />
<item Android:drawable="@drawable/progressbar_indeterminate_holo2" Android:duration="50" />
<item Android:drawable="@drawable/progressbar_indeterminate_holo3" Android:duration="50" />
<item Android:drawable="@drawable/progressbar_indeterminate_holo4" Android:duration="50" />
<item Android:drawable="@drawable/progressbar_indeterminate_holo5" Android:duration="50" />
<item Android:drawable="@drawable/progressbar_indeterminate_holo6" Android:duration="50" />
<item Android:drawable="@drawable/progressbar_indeterminate_holo7" Android:duration="50" />
<item Android:drawable="@drawable/progressbar_indeterminate_holo8" Android:duration="50" />

ローカルリソースファイルにコピーされたスタイルリソース。

<style name="Widget">
    <item name="Android:textAppearance">@Android:attr/textAppearance</item>
</style>

<style name="Widget.ProgressBar">
    <item name="Android:indeterminateOnly">true</item>
    <item name="Android:indeterminateBehavior">repeat</item>
    <item name="Android:indeterminateDuration">3500</item>
</style>

<style name="Widget.ProgressBar.Horizontal">
    <item name="Android:indeterminateOnly">false</item>
    <item name="Android:indeterminateDrawable">@drawable/progress_indeterminate_horizontal_holo</item>
</style>

最後に、ローカルレイアウトファイルで最小高さを4dpに設定します。

<ProgressBar
    Android:id="@+id/pb_loading"
    style="@style/Widget.ProgressBar.Horizontal"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:layout_centerHorizontal="true"
    Android:layout_centerVertical="true"
    Android:indeterminate="true"
    Android:minHeight="4dp"
    Android:minWidth="48dp"
    Android:progressDrawable="@drawable/progress_indeterminate_horizontal_holo" />
14
Subin Sebastian

垂直方向の中央にあるProgressBarを親の内側に描画して、パディングを切り取ることができます。 ProgressBarは親よりも大きく描画できないため、クリッピングビュー内に配置する大きな親を作成する必要があります。

<FrameLayout
    Android:id="@+id/clippedProgressBar"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="4dp"
    tools:ignore="UselessParent">

    <FrameLayout
        Android:layout_width="match_parent"
        Android:layout_height="16dp"
        Android:layout_gravity="center_vertical">

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:indeterminate="true"/>

    </FrameLayout>

</FrameLayout>
14
Juozas Kontvainis

誰かがまだ助けが必要な場合、これを試すことができます：

<androidx.core.widget.ContentLoadingProgressBar
                Android:id="@+id/progress"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/guideline" Android:indeterminate="true"
                Android:visibility="visible" app:layout_constraintBottom_toTopOf="@+id/guideline"/>

ここでは、進行状況バーはConstraintLayout内にあり、constraintTop_toTopOfおよびconstraintBottom_toTopOf属性は同じ要素に適用する必要があります（この場合は、ガイドラインです）。

9
Ali_Waris

水平スタイルのプログレスバーを使用中に同じ問題に遭遇しました。

根本的な原因は、プログレスバーのデフォルトの9パッチドロウアブル：（progress_bg_holo_dark.9.png）がパディングとしていくつかの垂直透明ピクセルを持っていることです。

私のために働いた最後のソリューション：次のようにプログレスドロアブル、私のサンプルコードをカスタマイズします：

custom_horizo​​ntal_progressbar_drawable.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 Android:shape="rectangle">
            <solid Android:color="#33ffffff" />
        </shape>
    </item>
    <item Android:id="@Android:id/secondaryProgress">
        <clip>
            <shape Android:shape="rectangle">
                <solid Android:color="#ff9800" />
            </shape>
        </clip>
    </item>
    <item Android:id="@Android:id/progress">
        <clip>
            <shape Android:shape="rectangle">
                <solid Android:color="#E91E63" />
            </shape>
        </clip>
    </item>
</layer-list>

レイアウトスニペット：

<ProgressBar
    Android:id="@+id/song_progress_normal"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    Android:layout_width="match_parent"
    Android:layout_height="5dp"
    Android:layout_alignParentBottom="true"
    Android:progressDrawable="@drawable/custom_horizontal_progressbar_drawable"
    Android:progress="0"/>
7
emotionfxxk

Subinの答えは、（=現在、）Android ProgressBar。の将来のリリースで壊れやすい脆弱なハックではありません。

しかし、リソースを分割して変更し、無期限に維持するというトラブルを経験するのではなく、 MaterialProgressBar library を使用することを選択しました。

<me.zhanghai.Android.materialprogressbar.MaterialProgressBar
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:indeterminate="true"
    Android:layout_gravity="bottom"
    custom:mpb_progressStyle="horizontal"
    custom:mpb_showTrack="false"
    custom:mpb_useIntrinsicPadding="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal.NoPadding"
/>

Build.gradleで：

// Android horizontal ProgressBar doesn't allow removal of top/bottom padding
compile 'me.zhanghai.Android.materialprogressbar:library:1.1.6'

そのプロジェクトには Nice demo があり、プロジェクトと組み込みのProgressBarの違いを示しています。

5
Stephen Talley

ProgressBarの垂直パディングを削除するには、次のようにします。

  • ProgressBarの高さを修正
  • ScaleY = "value"（value = height/4）を使用します（4は進行状況バーのデフォルトの高さです）

例には、1 wrap_content ProgressBar、1 8dp ProgressBar、1 100dp ProgressBarが含まれます

enter image description here

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    ...
    Android:layout_height="8dp"
    Android:scaleY="2" />
5
Phan Van Linh

1つの秘isは、プログレスバーにマイナスのマージンを追加することです。

以下は、画面の上部にあると仮定したXMLコードの例です。

<ProgressBar
    Android:id="@+id/progressBar"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_marginTop="-7dp"
    Android:layout_marginBottom="-7dp"
    Android:indeterminate="true" />

result of code

4
chinmay.d

MinHeightとmaxHeighを使用します。さまざまなApiバージョンに役立ちます。

<ProgressBar
    Android:id="@+id/progress_bar"
    style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:maxHeight="3dp"
    Android:minHeight="3dp" />

両方を使用する必要があります。 API 23は、

Android:layout_height="wrap_content"
Android:minHeight="0dp"

ただし、Apiのバージョンが低いと、プログレスバーの高さがmaxHeightに増加します。

2
Andrii Volynets

drawableで定義されたレイヤーリストにAndroid：progressDrawableを追加すると、問題が修正されました。カスタムドロウアブルのプログレスバーをマスクすることで動作します

https://stackoverflow.com/a/4454450/1145905 で説明されている実装例

1
kip2

以下を試してください：

<ProgressBar
    Android:id="@+id/progress_bar"
    style="@Android:style/Widget.ProgressBar.Horizontal"
    Android:progress="25"
    Android:progressTint="@color/colorWhite"
    Android:progressBackgroundTint="@color/colorPrimaryLight"
    Android:layout_width="match_parent"
    Android:layout_height="4dp" />

...次に、進行状況バーをニーズに合わせて構成します。最初は、進行状況バーが黄色で表示され、背景が灰色がかった中間サイズのバーが表示されるためです。また、垂直方向のパディングがないことに注意してください。

1
DaveNOTDavid

私はstyle="@style/Widget.AppCompat.ProgressBar.Horizontal"を使用していますが、マージンを取り除くのはかなり簡単でした。そのスタイルは：

    <item name="progressDrawable">@drawable/progress_horizontal_material</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item>
    <item name="minHeight">16dip</item>
    <item name="maxHeight">16dip</item>

私はちょうど最小/最大高さを上書きしました：

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        Android:layout_width="match_parent"
        Android:layout_height="2dp"
        Android:indeterminate="true"
        Android:minHeight="2dp"
        Android:maxHeight="2dp" />
1
Anthony

最善の解決策は

Android:minHeight="0dp"

回避策はなく、魅力のように機能します。

0
Alex Fan
 <ProgressBar
        Android:layout_marginTop="-8dp"
        Android:layout_marginLeft="-8dp"
        Android:layout_marginRight="-8dp"
        Android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        Android:layout_width="match_parent"
        Android:layout_height="4dp"
        Android:indeterminate="false"
        Android:indeterminateTint="@color/white"
        Android:max="100"
        Android:paddingStart="8dp"
        Android:paddingRight="0dp"
        Android:progressDrawable="@drawable/progress_bg" />
0
mallem mahesh

新しいモジュールをダウンロードしたり、プログレスバーにFrameLayoutを配置したりする必要はありません。これらはすべてハックです。わずか2ステップ：

Whatever.xmlで

<ProgressBar
    Android:id="@+id/workoutSessionGlobalProgress"
    Android:layout_width="match_parent"
    Android:layout_height="YOUR_HEIGHT"
    Android:progressDrawable="@drawable/progress_horizontal"
    Android:progress="0"
    <!-- High value to make ValueAnimator smoother -->
    Android:max="DURATION * 1000"
    Android:indeterminate="false"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"/>

progress_horizo​​ntal.xml、必要に応じて値を変更します。

丸い角が好きではありませんか？
コーナー半径を削除

色が好きではありませんか？色などを変更します。

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item Android:id="@Android:id/background">
        <shape>
            <corners Android:radius="5dip" />
            <gradient
                    Android:startColor="#ff9d9e9d"
                    Android:centerColor="#ff5a5d5a"
                    Android:centerY="0.75"
                    Android:endColor="#ff747674"
                    Android:angle="270"
                    />
        </shape>
    </item>

    <item Android:id="@Android:id/secondaryProgress">
        <clip>
            <shape>
                <corners Android:radius="5dip" />
                <gradient
                        Android:startColor="#80ffd300"
                        Android:centerColor="#80ffb600"
                        Android:centerY="0.75"
                        Android:endColor="#a0ffcb00"
                        Android:angle="270"
                        />
            </shape>
        </clip>
    </item>

    <item Android:id="@Android:id/progress">
        <clip>
            <shape>
                <corners Android:radius="5dip" />
                <gradient
                        Android:startColor="#ffffd300"
                        Android:centerColor="#ffffb600"
                        Android:centerY="0.75"
                        Android:endColor="#ffffcb00"
                        Android:angle="270"
                        />
            </shape>
        </clip>
    </item>

</layer-list>

一般的に、これらはあなたが好きではないもののコードを変更する手順です。ソースコードを見つけて、何を変更するかを考えてください。 ProgressBarのソースコードに従うと、それが参照するprogress_horizo​​ntal.xmlというファイルが見つかります。基本的に、すべてのXML問題を解決する方法。

0
Daniel Kim