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

Posted 2023-04-15

【中文标题】如何在android中的按钮顶部显示进度条

【英文标题】：how to make a progress bar show on top of a button in android

【发布时间】：2016-08-24 08:56:51

【问题描述】：

好的，这是我在 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_
    android:layout_>

    <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_
            android:gravity="left"
            android:layout_
            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_
            android:layout_
            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_
    android:layout_>

    <android.support.v4.widget.ContentLoadingProgressBar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/read_progress_bar"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            android:orientation="horizontal">

        <TextView
                android:layout_
                android:layout_
                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_
                android:layout_
                android:paddingLeft="5dp"
                android:indeterminate="true"
                android:visibility="invisible"
                android:tint="#ffffff"
                style="@style/Widget.MaterialProgressBar.ProgressBar.Small" />


    </LinearLayout>

【问题讨论】：

是微调器还是进度条？

您是否尝试将PorgressBar 放在Button 之后的FrameLayout 中？

这是一个微调器github.com/DreaminginCodeZH/MaterialProgressBar

是的@Alex 我做了，也没有用

@abbood 这是进度条，因为微调器的意思类似于 android 中的下拉菜单。那么您是否希望此进度条显示在按钮上以指示某些加载过程？

【参考方案1】：

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

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

因此，只需将大于 6dp 的高度添加到您的 ProgressBar，您就可以使其显示在按钮上方。

android:elevation="7dp"

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

<LinearLayout
    style="@style/Widget.AppCompat.Button"
    android:layout_
    android:layout_
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:gravity="center"
        android:text="Button"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"/>

    <ProgressBar
        android:layout_
        android:layout_/>

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

【参考方案2】：

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

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

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

  <RelativeLayout
        android:layout_
        android:layout_
        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_
        android:layout_
        android:textColor="@color/white" />


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

【讨论】：

@abbood 这个有用吗？如果与 upvote 一起使用，请更新。谢谢！

【参考方案3】：

问题在于 Button 样式。您可以在此答案中找到更多信息https://***.com/a/32898915/1554094

【参考方案4】：

删除关注

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_
        android:layout_
        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"

【讨论】：

@abbood 告诉我这样做后发生了什么