Loại bỏ đệm dọc khỏi ProgressBar ngang

Theo mặc định, ProgressBar có một phần đệm nhất định ở trên và dưới chính thanh đó. Có cách nào để loại bỏ phần đệm này để cuối cùng chỉ có thanh?

Tôi sử dụng những điều sau đây làm giải pháp cho vấn đề này.

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

Đây là cách tôi sử dụng câu trả lời của Juozas:

chiều cao của tôi ProgressBarlà 4dp. Vì vậy, tôi đã tạo ra một FrameLayoutvới chiều cao 4dp và thiết lập layout_gravitycủa ProgressBarđể center. Nó hoạt động như một sự quyến rũ.

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

Tôi đã sử dụng một thư viện tùy chỉnh để giải quyết vấn đề này. Hầu hết các giải pháp khác đều hoạt động nhưng kết quả không nhất quán trên các thiết bị khác nhau.

MaterialProgressBar

• Xuất hiện nhất quán trên Android 4.0+.
• Pha màu chính xác trên các nền tảng.
• Có thể loại bỏ phần đệm bên trong của khung ProgressBar.
• Có thể ẩn dấu vết của ProgressBar ngang khung.
• Được sử dụng như một sự thay thế thả vào cho khung ProgressBar.

Để thêm dưới dạng phụ thuộc gradle:

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

Để thêm Thanh tiến trình không có phần đệm nội tại vào bố cục của bạn:

<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"thực hiện thủ thuật. Để biết thêm chi tiết, hãy xem trang GitHub .

Nếu ai đó vẫn cần trợ giúp, có thể thử cách này:

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

Ở đây, thanh tiến trình bên trong ConstraintLayout , và constraintTop_toTopOf và constraintBottom_toTopOf thuộc tính phải được áp dụng cho cùng một nguyên tố (trong trường hợp này, đó là phương châm).

*** GIẢI PHÁP HOÀN CHỈNH:***

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

Có thể vẽ ProgressBar căn giữa theo chiều dọc bên trong một trang cha để cắt bỏ phần đệm. Vì ProgressBar không thể tự vẽ chính nó lớn hơn cha mẹ, chúng ta phải tạo một cha mẹ lớn để đặt bên trong một khung nhìn cắt.

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

Để loại bỏ phần đệm đầu từ ProgressBar, bạn có thể thực hiện bằng cách

• cố định chiều cao của ProgressBar
• Sử dụng scaleY = "value" (value = height / 4) (4 là chiều cao mặc định của thanh tiến trình)

Ví dụ chứa 1 wrap_content ProgressBar, 1 8dp ProgressBar, 1 100dpProgressBar

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

Một giải pháp hoàn chỉnh cho vấn đề này sẽ như sau. Đề phòng nếu ai đó cần các đoạn mã, đây là những gì tôi đã làm.

1. Đã sao chép tất cả 8 ngăn kéo thanh tiến trình ngang không xác định
2. Đã chỉnh sửa các phần có thể kéo bằng cách sử dụng một số thao tác hình ảnh và xóa các phần đệm không cần thiết
3. Đã sao chép XML có thể vẽ được có tên là process_indetermina_horizontal_holo.xml từ nền tảng android
4. Đã sao chép kiểu Widget.ProgressBar.Horizontal và cha mẹ của nó
5. Đặt kiểu và min_height theo cách thủ công trong bố cục

Đây là process_indeterminat_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" />

Tài nguyên kiểu được sao chép vào tệp kiểu cục bộ của tôi.

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

Và cuối cùng, đặt chiều cao tối thiểu thành 4dp trong tệp bố cục cục bộ của tôi.

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

Tôi đã gặp vấn đề tương tự khi sử dụng thanh tiến trình với kiểu Ngang.

Nguyên nhân sâu xa là do 9-bản vá mặc định có thể vẽ được cho thanh tiến trình: (process_bg_holo_dark.9.png) có một số pixel trong suốt theo chiều dọc làm phần đệm.

Giải pháp cuối cùng phù hợp với tôi: tùy chỉnh tiến trình có thể vẽ, mã mẫu của tôi như sau:

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>

đoạn mã bố cục:

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

Một mẹo là thêm lợi nhuận âm vào thanh tiến trình của bạn.

Dưới đây là một ví dụ về mã XML, giả sử nó nằm trên màn hình của bạn:

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

Câu trả lời của Subin dường như là câu trả lời duy nhất (hiện tại) không phải là một bản hack mong manh có thể bị phá vỡ trong các bản phát hành Android ProgressBar trong tương lai.

Nhưng thay vì gặp khó khăn khi chia nhỏ tài nguyên, sửa đổi chúng và duy trì chúng vô thời hạn, tôi đã chọn sử dụng thư viện MaterialProgressBar , thư viện này thực hiện điều đó cho chúng tôi:

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

Trong build.gradle:

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

Dự án đó có một bản demo đẹp cho thấy sự khác biệt giữa nó và ProgressBar được tích hợp sẵn.

nếu ai đó vẫn đang tìm kiếm giải pháp - hãy kiểm tra nhận xét này

đặt chiều cao tối thiểu là 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" />

Tôi sử dụng minHeight và maxHeigh. Nó giúp ích cho các phiên bản Api khác nhau.

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

Nó cần phải sử dụng cả hai. Api 23 hoạt động tốt với

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

Nhưng các phiên bản Api thấp hơn sẽ tăng chiều cao thanh tiến trình lên maxHeight trong trường hợp đó.

Hãy thử những cách sau:

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

... và sau đó định cấu hình thanh tiến trình theo nhu cầu của bạn vì ban đầu nó sẽ hiển thị một thanh có kích thước trung bình với sắc thái tiến trình màu vàng với sắc thái nền tiến trình màu xám. Ngoài ra, hãy lưu ý rằng không có phần đệm dọc.

Sử dụng như thế này, bên trong 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>

thêm android: processDrawable vào danh sách lớp được xác định trong drawable đã khắc phục sự cố cho tôi. Nó hoạt động bằng cách che thanh progess trong một thanh kéo tùy chỉnh

triển khai ví dụ được mô tả tại https://stackoverflow.com/a/4454450/1145905

Tôi đang sử dụng style="@style/Widget.AppCompat.ProgressBar.Horizontal"và khá dễ dàng để loại bỏ các lề. Phong cách đó là:

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

Tôi vừa ghi đè chiều cao tối thiểu / tối đa:

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

Không cần thiết phải tải xuống bất kỳ mô-đun mới nào hoặc thậm chí đặt FrameLayout xung quanh Thanh tiến trình của bạn. Đây là tất cả chỉ là hack. Chỉ 2 bước:

Trong bất cứ điều gì của bạn.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, Thay đổi các giá trị theo ý bạn.

Không thích các góc tròn?
Xóa bán kính góc

Bạn không thích màu sắc? Thay đổi màu sắc, v.v. Đã xong!

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

Nói chung, đây là các bước để thay đổi mã của bất kỳ thứ gì bạn không thích. Chỉ cần tìm mã nguồn và tìm ra những gì cần thay đổi. Nếu bạn làm theo mã nguồn ProgressBar, bạn sẽ tìm thấy một tệp có tên là process_horizontal.xml mà nó tham chiếu. Về cơ bản cách tôi giải quyết tất cả các vấn đề về XML của mình.

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

Chỉ cần sử dụng Material ProgressIndicator không có lề ẩn.

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

Một giải pháp đơn giản không cần thủ thuật tương thích với mọi phiên bản Android và không cần thư viện bên ngoài là giả mạo ProgressBarvới hai Viewsbên trong LinearLayout. Đây là những gì tôi đã kết thúc với. Trông khá gọn gàng và cách tiếp cận này khá linh hoạt - bạn có thể tạo hoạt ảnh cho nó theo những cách thú vị, thêm văn bản, v.v.

Bố trí:

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

Mã:

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

}

Kết quả (có thêm một số độ cao):

Giải pháp tốt nhất nên là

android:minHeight="0dp"

Không có giải pháp thay thế và hoạt động như một sự quyến rũ.