ลบช่องว่างแนวตั้งออกจาก ProgressBar แนวนอน

ตามค่าเริ่มต้น ProgressBar จะมีช่องว่างด้านบนและด้านล่างของแถบ มีวิธีลบช่องว่างภายในนี้เพื่อให้มีแถบปิดท้ายเท่านั้นหรือไม่?

ฉันใช้สิ่งต่อไปนี้เป็นวิธีแก้ปัญหาสำหรับปัญหานี้

android:layout_marginBottom="-8dp"
android:layout_marginTop="-4dp"

นี่คือวิธีที่ฉันใช้คำตอบของ Juozas:

ความสูงของฉันProgressBarคือ 4dp ดังนั้นผมจึงสร้างFrameLayoutมีความสูง 4DP และการตั้งค่าlayout_gravityของการ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>

ฉันลงเอยด้วยการใช้ไลบรารีที่กำหนดเองเพื่อแก้ปัญหานี้ โซลูชันอื่น ๆ ส่วนใหญ่ใช้ได้ผล แต่ผลลัพธ์ไม่สอดคล้องกันในอุปกรณ์ต่างๆ

MaterialProgressBar

• รูปลักษณ์ที่สอดคล้องกันบน Android 4.0+
• แก้ไขการย้อมสีข้ามแพลตฟอร์ม
• สามารถลบช่องว่างภายในของกรอบ ProgressBar
• สามารถซ่อนแทร็กของกรอบแนวนอน ProgressBar
• ใช้แทนดรอปอินสำหรับเฟรมเวิร์ก ProgressBar

ในการเพิ่มการพึ่งพาการไล่ระดับสี:

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

หากยังมีใครต้องการความช่วยเหลือสามารถลองทำสิ่งนี้:

<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คุณลักษณะที่จะต้องนำไปใช้กับองค์ประกอบเดียวกัน (ในกรณีนี้มันเป็นแนวทาง)

*** วิธีแก้ปัญหาที่สมบูรณ์: ***

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="48dp">

<View
    android:id="@+id/guideline"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:visibility="invisible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<ProgressBar
    android:id="@+id/progress_bar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline" />
</androidx.constraintlayout.widget.ConstraintLayout>

เป็นไปได้ที่จะวาด 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>

หากต้องการลบช่องว่างในแนวตั้งProgressBarคุณสามารถทำได้โดย

• แก้ไขความสูงของ ProgressBar
• ใช้ scaleY = "value" (value = height / 4) (4 คือความสูงเริ่มต้นของแถบความคืบหน้า)

ตัวอย่างประกอบด้วย 1 wrap_content ProgressBar, 1 8dp ProgressBar, 1 100dpProgressBar

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    ...
    android:layout_height="8dp"
    android:scaleY="2" />

วิธีแก้ปัญหาที่สมบูรณ์สำหรับปัญหานี้จะเป็นดังนี้ ในกรณีที่มีคนต้องการเศษรหัสนี่คือสิ่งที่ฉันทำ

1. คัดลอกแถบเลื่อนแถบความคืบหน้าแนวนอนที่ไม่ระบุทั้งหมด 8 รายการ
2. แก้ไขสิ่งที่วาดได้โดยใช้โปรแกรมปรับแต่งภาพและลบพายที่ไม่จำเป็นออก
3. คัดลอก XML ที่วาดได้ชื่อ progress_indeterminate_horizontal_holo.xml จากแพลตฟอร์ม Android
4. คัดลอกสไตล์ Widget.ProgressBar.Horizontal และผู้ปกครอง
5. ตั้งค่าสไตล์และ min_height ด้วยตนเองในเค้าโครง

นี่คือ progress_indeterminate_horizontal_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" />

ฉันพบปัญหาเดียวกันขณะใช้แถบความคืบหน้ากับสไตล์แนวนอน

สาเหตุที่แท้จริงคือ 9 แพตช์เริ่มต้นที่วาดได้สำหรับแถบความคืบหน้า: (progress_bg_holo_dark.9.png) มีพิกเซลโปร่งใสในแนวตั้งเป็นช่องว่างภายใน

โซลูชันสุดท้ายที่ใช้ได้ผลสำหรับฉัน: ปรับแต่งความคืบหน้าที่วาดได้โค้ดตัวอย่างของฉันดังต่อไปนี้:

custom_horizontal_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"/>

เคล็ดลับอย่างหนึ่งคือการเพิ่มระยะขอบลบในแถบความคืบหน้าของคุณ

ด้านล่างนี้เป็นตัวอย่างของโค้ด 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" />

คำตอบของ Subin ดูเหมือนจะเป็นคำตอบเดียว (ในปัจจุบัน) ที่ไม่ใช่การแฮ็กที่เปราะบางซึ่งอาจทำให้เกิดความเสียหายในอนาคตของ Android ProgressBar

แต่แทนที่จะต้องเผชิญกับปัญหาในการทำลายทรัพยากรออกแก้ไขและบำรุงรักษาอย่างไม่มีกำหนดฉันเลือกที่จะใช้ไลบรารี MaterialProgressBarซึ่งทำเพื่อเรา:

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

โครงการนั้นมีการสาธิตที่ดีที่แสดงความแตกต่างระหว่างโปรเจ็กต์และ ProgressBar ในตัว

หากยังมีคนค้นหาวิธีแก้ปัญหา - ตรวจสอบความคิดเห็น

ตั้งค่าความสูงต่ำสุดเป็น4 dp

   android:minHeight="4dp"

-

  <ProgressBar
    android:id="@+id/web_view_progress_bar"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="false"
    android:max="100"
    android:min="0"
    android:progress="5"
    android:minHeight="4dp"
    android:progressTint="@color/vodafone_red"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:progress="60" />

ฉันใช้ 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 ในกรณีนั้น

ลองทำดังต่อไปนี้:

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

... จากนั้นกำหนดค่าแถบความคืบหน้าตามความต้องการของคุณเนื่องจากในตอนแรกจะแสดงแถบขนาดกลางที่มีสีความคืบหน้าสีเหลืองพร้อมกับสีพื้นหลังความคืบหน้าสีเทา นอกจากนี้โปรดสังเกตว่าไม่มีช่องว่างในแนวตั้ง

ใช้แบบนี้ภายใน 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>

การเพิ่ม android: progressDrawable ไปยังรายการเลเยอร์ที่กำหนดไว้ใน drawable ได้แก้ไขปัญหาให้ฉัน ทำงานโดยการกำบังแถบ progess ในแบบ drawable ที่กำหนดเอง

ตัวอย่างการใช้งานที่อธิบายไว้ที่https://stackoverflow.com/a/4454450/1145905

ฉันใช้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" />

ไม่จำเป็นต้องดาวน์โหลดโมดูลใหม่หรือแม้แต่ใส่ FrameLayout รอบ Progress Bar ของคุณ ทั้งหมดนี้เป็นเพียงการแฮ็ก เพียง 2 ขั้นตอน:

ใน what.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_horizontal.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_horizontal.xml ซึ่งอ้างอิงถึง โดยทั่วไปฉันจะแก้ปัญหา XML ทั้งหมดของฉันได้อย่างไร

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

<androidx.core.widget.ContentLoadingProgressBar
                    android:id="@+id/progressBar"
                    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:indeterminate="true"
                    android:paddingTop="2dp"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toTopOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"/>

เพียงแค่ใช้ Material ProgressIndicator ซึ่งไม่มีขอบซ่อนอยู่

<com.google.android.material.progressindicator.ProgressIndicator
        android:id="@+id/progressBar"
        style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Indeterminate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicatorColor="@color/colorPrimary"
        app:trackColor="@color/colorAccent" />

วิธีแก้ปัญหาง่ายๆที่เข้ากันได้กับ Android เวอร์ชันใดก็ได้และไม่จำเป็นต้องมีไลบรารีภายนอกที่แกล้งทำเป็นProgressBarสองอันViewsภายในLinearLayoutภายในนี่คือสิ่งที่ฉันลงเอยด้วย ดูเรียบร้อยและวิธีนี้ค่อนข้างยืดหยุ่น - คุณสามารถทำให้เคลื่อนไหวได้ในรูปแบบที่ขี้ขลาดเพิ่มข้อความและอื่น ๆ

เค้าโครง:

<LinearLayout
    android:id="@+id/inventory_progress_layout"
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/inventory_progress_value"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/inventory_progress_remaining"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

รหัส:

public void setProgressValue(float percentage) {
    TextView progressValue = (TextView) findViewById(R.id.inventory_progress_value);
    TextView progressRemaining = (TextView) findViewById(R.id.inventory_progress_remaining);

    LinearLayout.LayoutParams paramsValue = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    LinearLayout.LayoutParams paramsRemaining = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

    paramsValue.weight = (100 - percentage);
    paramsRemaining.weight = percentage;

    progressValue.setLayoutParams(paramsValue);
    progressRemaining.setLayoutParams(paramsRemaining);

}

ผลลัพธ์ (มีการเพิ่มระดับความสูง):

ทางออกที่ดีที่สุดควรเป็น

android:minHeight="0dp"

ไม่มีวิธีแก้ปัญหาและใช้งานได้อย่างมีเสน่ห์