web-dev-qa-db-ja.com

水平プログレスバーのパディングを削除する

このアプリケーションでは、次のような不確定な進行状況バーが必要です。

progress bar how it should be

これを実現するには、次のようにProgressBarに負のマージンを設定します。

<ProgressBar
    Android:id="@+id/progressbar"
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:indeterminate="true"
    Android:marginTop="-7dp"
    Android:visibility="@{loading ? View.VISIBLE : View.GONE}" />

[〜＃〜] but [〜＃〜]ConstraintLayoutは負のマージンをサポートしていないため、次のようになります。

progress bar with padding

OK、負のマージンはハックでした。別のハックに置き換えましょうか。次のように、CustomProgressBarを拡張し、そのProgressBarメソッドをオーバーライドするカスタムビューonDrawを紹介しましょう。

@Override
protected void onDraw(Canvas canvas) {
    int marginTop = dpToPx(7);
    canvas.translate(0, -marginTop);
    super.onDraw(canvas);
}

しかし、これらすべては悪いコードのようなにおいがします。より良い解決策が必要です！あなたは何をお勧めします？

javaandroidandroid-studiolayoutandroid-constraintlayout
16
mreichelt

これを行う別の方法は、ガイドラインを使用して、親の上部とガイドラインの間にProgressBarを中央に配置することです。

<ProgressBar
    Android:id="@+id/progressBar2"
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="0dp"
    Android:paddingTop="-4dp"
    Android:layout_height="wrap_content"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent" />

<Android.support.constraint.Guideline
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:id="@+id/guideline"
    Android:orientation="horizontal"
    app:layout_constraintGuide_begin="4dp" />
11
hoford

ハックのように感じられない解決策：巨大なProgressBarを小さいFrameLayoutで囲みます。このように、FrameLayoutは高さを制限しますが、ProgressBarは完全に表示されます。

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

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

</FrameLayout>
18
0101100101

私が行ったdirtyの回避策は、次のようにストローク幅に近いProgressBarの高さを設定することでした。

プログレスバー：

<ProgressBar
    Android:id="@+id/pb_loading_progress"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    Android:layout_width="match_parent"
    Android:layout_height="2.1dp"
    Android:layout_below="@id/tb_browser"
    Android:max="100"
    Android:progressDrawable="@drawable/style_browser_progress_drawable"
    Android:visibility="invisible" />

ドローアブルの進行状況：

<?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="line">
            <stroke
                Android:width="2dp"
                Android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item Android:id="@Android:id/progress">
        <clip
            Android:clipOrientation="horizontal"
            Android:gravity="left">
            <shape Android:shape="line">
                <stroke
                    Android:width="2dp"
                    Android:color="@color/white" />
            </shape>
        </clip>
    </item>
</layer-list>

これはこのように見えました：

enter image description here

3
AL.

私も同じ問題に遭遇しました。そして、あなたが言ったように、私はすべてが別の何かを壊すかもしれないハックのように見える多くの解決策に出くわします。そうは言っても、プログレスバーの代わりにこれを使用する1つの解決策 library に出くわしました。

注意すべきことの1つは、次のように追加して統合するように指示することです。

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

ただし、これを使用すると、Androidフローティングアクションバーのサポートライブラリからエラーが発生しました。代わりにこれを使用することをお勧めします。

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

使用方法のサンプルコードスニペット：

<me.zhanghai.Android.materialprogressbar.MaterialProgressBar
    Android:id="@+id/reviewProgressBar"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"
    Android:layout_width="match_parent"
    Android:layout_height="6dp"
    Android:layout_below="@+id/my_toolbar"
    Android:indeterminate="false"
    app:mpb_progressStyle="horizontal"
    app:mpb_useIntrinsicPadding="false"/>

お役に立てれば！

2
Charles Li

Linearlayout内で使用すると、簡単な方法で成功します

 <LinearLayout
        Android:layout_width="match_parent"
        Android:background="#efefef"
        Android:layout_height="wrap_content">

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

    </LinearLayout>
1
alizulfuqar

明示的な高さなしでビューを宣言したため、高さは事前定義されたスタイルから選択されています。

<ProgressBar
    Android:id="@+id/progressbar"
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:indeterminate="true"
    Android:marginTop="-7dp"
    Android:visibility="@{loading ? View.VISIBLE : View.GONE}" />

「？android：attr/progressBarStyleHorizo​​ntal」は現在のテーマで検索され、attrs.xmlファイルに保存されます。これはプラットフォームによって定義されているため、そこから値を取得します。この回答を書いている時点で、私はAndroidプラットフォーム29にいて、「？android：attr/progressBarStyleHorizo​​ntal」を検索すると、次の結果が得られます

➜  values 
pwd
/Users/vihaanverma/Library/Android/sdk/platforms/Android-29/data/res/values
➜  values 
grep -rin "progressBarStyleHorizontal" . 
./themes_device_defaults.xml:126:        <item name="progressBarStyleHorizontal">@style/Widget.DeviceDefault.ProgressBar.Horizontal</item>
./themes_device_defaults.xml:857:        <item name="progressBarStyleHorizontal">@style/Widget.DeviceDefault.Light.ProgressBar.Horizontal</item>
./themes.xml:272:        <item name="progressBarStyleHorizontal">@style/Widget.ProgressBar.Horizontal</item>
./themes_holo.xml:263:        <item name="progressBarStyleHorizontal">@style/Widget.Holo.ProgressBar.Horizontal</item>
./themes_holo.xml:626:        <item name="progressBarStyleHorizontal">@style/Widget.Holo.Light.ProgressBar.Horizontal</item>
./public.xml:148:  <public type="attr" name="progressBarStyleHorizontal" id="0x01010078" />
./themes_material.xml:258:        <item name="progressBarStyleHorizontal">@style/Widget.Material.ProgressBar.Horizontal</item>
./themes_material.xml:635:        <item name="progressBarStyleHorizontal">@style/Widget.Material.Light.ProgressBar.Horizontal</item>
./styles_material.xml:1010:        <item name="progressBarStyle">?attr/progressBarStyleHorizontal</item>
./attrs.xml:684:        <attr name="progressBarStyleHorizontal" format="reference" />
➜  values

"progressBarStyleHorizo​​ntal"を含むファイルの1つを開くと、スタイルで定義された16dpのminHeightが表示されます。

<style name="Widget.Material.ProgressBar.Horizontal" parent="Widget.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>
</style>

これが、余分なパディングの原因です。以下のようにビューの高さとscaleY値を指定することで修正できます

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="match_parent"
    Android:layout_height="5dp"
    Android:indeterminate="true"
    Android:scaleY="5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

enter image description here

0
Vihaan Verma