如何使进度条显示在android中的按钮顶部 [英] how to make a progress bar show on top of a button in android

问题描述

好吧，这是我可以在iOS上大约五分钟内完成的操作..但是我似乎无法在android上获得它:

Ok this is something I can do in iOS in like five minutes.. but I can't seem to get it for android:

我只想在按钮顶部显示进度条.我设法在按钮旁边 如此精确地绘制进度条，

i simply want to show a progress bar ontop of a button. I managed to render the progress bar just fine beside the button like so

使用此代码

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

但是我似乎无法做到这一点:

however i can't seem to be able to do this:

我尝试了类似的方法(框架布局，相对布局).

i tried stuff like this (framelayout, relative layout)..

<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的库进度条代替android但没有运气)..想法?

but it doesn't work.. (i tried substituting the library progress bar with android's but no luck).. ideas?

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

this is what the final thing looks like (based on the correct answer below):

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

推荐答案

从API级别21开始，默认的Button(在Material Design中称为升高的按钮")具有静止的高程和按下的高程. 例如在API级别23中，值分别为2dp和6dp.

Starting from API level 21, a default Button (which is called a raised button in Material Design) has a resting elevation and a pressed elevation. For example in API level 23 The values are 2dp and 6dp respectively.

您的ProgressBar处在正确的位置，但是由于其标高为0，因此它位于Button之下.

Your ProgressBar is in the correct position, however it's below the Button because its elevation is 0.

因此，只需在您的ProgressBar中添加一个大于6dp的高程，就可以使其显示在按钮上方.

So by simply adding an elevation greater than 6dp to your ProgressBar you can make it appear above the button.

android:elevation="7dp"

另外，您可以创建一个布局来模仿按钮并为其赋予按钮样式:

Alternatively, you can create a layout to mimic a button and give it a button style:

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

第二种方法更向前兼容，因为在将来的版本中海拔可能会发生变化.

The second approach is more forward compatible since the elevation might change in a future release.

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

For example in API level 21 the values were 1dp and 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中的按钮顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！