Xóa đệm theo chiều ngang thanh tiến trình

Question

Trong ứng dụng của chúng tôi, chúng ta cần một thanh tiến trình không xác định, như vậy:

Chúng ta có thể đạt được điều này bằng cách thiết lập một biên độ tiêu cực đối với ProgressBar, như thế này:

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

NHƯNG vì ConstraintLayout không hỗ trợ lợi nhuận tiêu cực, nó sẽ giống như thế này:

OK, lợi nhuận âm là một hack. Hãy thay thế nó bằng một hack khác, phải không? Hãy giới thiệu giao diện tùy chỉnh của chúng tôi CustomProgressBar, kéo dài ProgressBar và ghi đè phương pháp onDraw của nó, như thế này:

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

Nhưng tất cả điều này có mùi như mã xấu. Phải có một giải pháp tốt hơn! Bạn sẽ đề xuất điều gì?

Answer 1

Một cách khác để thực hiện việc này là sử dụng Hướng dẫn và tiến trình giữa thanh công cụ giữa đầu cha và hướng dẫn.

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

Answer 2

Tôi cũng gặp phải vấn đề tương tự. Và như bạn đã nói, tôi đi qua nhiều giải pháp mà tất cả dường như là một hack có thể phá vỡ một cái gì đó khác xuống dòng. Thay vào đó, tôi đã xem qua một giải pháp để sử dụng số library này cho thanh tiến trình.

Một điều cần lưu ý là, nó cho bạn biết để tích hợp nó bằng cách thêm:

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

Tuy nhiên, khi tôi sử dụng này, nó đã cho tôi một lỗi từ một thư viện hỗ trợ Android cho Floating Action Bar. Vì vậy, tôi sẽ khuyên bạn nên sử dụng điều này thay vì: đoạn mã

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

Một mẫu về cách tôi sử dụng nó:

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

Hope this helps!

Answer 3

Một workaround bẩn tôi đã được thiết lập chiều cao của ProgressBar chặt chẽ với chiều rộng đột quỵ như vậy:

Progress bar:

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

Progress drawable:

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

Có dạng như sau:

Answer 4

Giải pháp cảm thấy ít bị hack hơn: Hãy bọc một số lớn ProgressBar trong số FrameLayout nhỏ hơn. Bằng cách đó, FrameLayout hạn chế chiều cao của nó, nhưng ProgressBar vẫn hiển thị đầy đủ.

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