如何在 android 中的按钮顶部显示进度条

Question

好的，这是我在 iOS 内可以在五分钟内完成的事情..但我似乎无法在 android:

内完成

我只是想在按钮顶部显示一个进度条。我设法将进度条呈现得很好在按钮旁边，就像这样

使用此代码

<RelativeLayout
    android:id="@+id/readBookContainer"
    android:layout_below="@+id/image"
    android:layout_marginLeft="@dimen/margin_medium"
    android:layout_alignRight="@+id/ratingBar"
    android:gravity="center"
    android:layout_width="300dp"
    android:layout_height="40dp">

    <Button
            android:id="@+id/readBook"
            android:background="@drawable/button_read_now"
            android:elevation="@dimen/margin_xsmall"
            android:singleLine="true"
            android:textSize="14sp"
            android:text="@string/download"
            android:layout_width="200dp"
            android:gravity="left"
            android:layout_height="match_parent"
            android:textColor="@color/book_item_bg" />

    <me.zhanghai.android.materialprogressbar.MaterialProgressBar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/read_progress_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            android:visibility="visible"
            android:tint="#000000"
            android:layout_toLeftOf="@id/readBook"
            android:layout_marginRight="20dp"
            style="@style/Widget.MaterialProgressBar.ProgressBar.Small" />

但是我似乎做不到：

我试过这样的东西（框架布局，相对布局）..

<FrameLayout
    android:id="@+id/readBookContainer"
    android:layout_below="@+id/image"
    android:layout_marginLeft="@dimen/margin_medium"
    android:layout_alignRight="@+id/ratingBar"
    android:gravity="center"
    android:layout_width="100dp"
    android:layout_height="40dp">

    <android.support.v4.widget.ContentLoadingProgressBar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/read_progress_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            android:visibility="visible"
            android:tint="#000000"
            android:layout_gravity="right|center"
            style="@style/Widget.MaterialProgressBar.ProgressBar.Small" />



    <Button
            android:id="@+id/readBook"
            android:background="@drawable/button_read_now"
            android:elevation="@dimen/margin_xsmall"
            android:singleLine="true"
            android:textSize="14sp"
            android:text="@string/download"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textColor="@color/book_item_bg" />

但它不起作用..（我尝试用 android 替换库进度条但没有成功）..想法？

更新

这是最终的样子（基于下面的正确答案）：

    <LinearLayout
            android:id="@+id/readBook"
            android:background="@drawable/button_read_now"
            style="@style/Widget.AppCompat.Button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="20dp"
                android:text="@string/download"
                android:textAppearance="@style/TextAppearance.AppCompat.Button" android:textColor="#FFFFFF"/>

        <me.zhanghai.android.materialprogressbar.MaterialProgressBar
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/read_progress_bar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="5dp"
                android:indeterminate="true"
                android:visibility="invisible"
                android:tint="#ffffff"
                style="@style/Widget.MaterialProgressBar.ProgressBar.Small" />


    </LinearLayout>

Answer 1

问题出在 Button 样式中。您可以在此答案中找到更多信息

Answer 2

您可以将其包装到 RelativeLayout 中。创建与按钮背景相同的父 RelativeLayout。

使用按钮将添加要查看的边框，因此您可以将 Textview 与 selector.xml 一起使用，它将作为按钮使用。 check here.

将 Textview 放在 RelativeLayout 中，并将 ProgressBar 对齐到 Textview 的右侧。

  <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_read_now"
        >
    <TextView
        android:id="@+id/readBook"
        android:gravity="center"
        android:clickable="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:background="@drawable/selector"
        android:singleLine="true"
        android:textSize="14sp"
        android:text="download"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white" />


    <android.support.v4.widget.ContentLoadingProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/readBook"
        style="?android:attr/progressBarStyleSmall"
        android:visibility="visible"/>
    </RelativeLayout>

Answer 3

删除关注

android:layout_toLeftOf="@id/readBook"

来自

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/read_progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:visibility="visible"
        android:tint="#000000"
        android:layout_toLeftOf="@id/readBook"// remove this
        android:layout_marginRight="20dp"
        style="@style/Widget.MaterialProgressBar.ProgressBar.Small" />

android:layout_toLeftOf="@id/readBook"

Answer 4

从 API 级别 21 开始，默认 Button（在 Material 设计中称为凸起按钮）具有静止高度和按下高度。例如在API level 23 的值分别是2dp和6dp。

您的 ProgressBar 位置正确，但它低于 Button，因为它的海拔高度为 0。

因此，只需向 ProgressBar 添加大于 6dp 的高度，即可使其显示在按钮上方。

android:elevation="7dp"

或者，您可以创建一个布局来模仿按钮并为其指定按钮样式：

<LinearLayout
    style="@style/Widget.AppCompat.Button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Button"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"/>

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

第二种方法更向前兼容，因为在未来的版本中提升可能会改变。

例如，在 API 级别 21 中，值是 1dp 和 3dp

<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">1dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">2dp</dimen>

这是 API 级别 23

<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">2dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">4dp</dimen>

如何在 android 中的按钮顶部显示进度条

how to make a progress bar show on top of a button in android

java

layout

android

android-widget

android-relativelayout

更新