如何在Android中让进度条显示在按钮之上

Question

好的，这是我可以在iOS上做到的事情，大约只需要五分钟时间。但是在安卓上似乎无法实现：

我只是想在按钮上方显示一个进度条。我成功地将进度条渲染在按钮旁边，如下所示：

使用此代码。

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

但它不起作用..(我试图用安卓的代替库进度条，但没有成功)..有什么想法？

更新

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

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

- abbood

---

你是否尝试在FrameLayout中将ProgressBar放在Button之后？ - Alex

这是一个旋转器：https://github.com/DreaminginCodeZH/MaterialProgressBar - abbood

是的，@Alex，我试过了，也不行。 - abbood

@abbood 这是进度条，因为在Android中，spinner的意思类似于下拉菜单。所以你想要这个进度条显示在按钮上，以指示某些加载过程吗？ - Parsania Hardik

尝试将高程添加到进度条中。 - Alex

Answer 1

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

您的ProgressBar处于正确的位置，但它在Button下面，因为它的高度为0。

因此，通过简单地将大于6dp的高度添加到您的ProgressBar中，您可以使其出现在按钮上方。

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>

- Benito Bertoli

---

谢谢。当第一次显示时，高度>0就足够了，但由于我隐藏和显示进度条，1不起作用了。高度=7效果很好！谢谢。 - Nk54

Answer 2

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

使用按钮会向视图添加边框，因此您可以使用带有selector.xml的TextView来代替Button。 在此处查看。

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

- Nilesh Deokar

---

@abbood 这个有用吗？如果有用请更新并点赞。谢谢！ - Nilesh Deokar

Answer 3

问题出在按钮样式上。您可以在此答案https://dev59.com/Aorda4cB1Zd3GeqPJTaN#32898915中找到更多信息。

- Alexander

Answer 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_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"

- Parsania Hardik

---

@abbood 告诉我在执行这个操作之后发生了什么。 - Parsania Hardik