如何在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,相对布局)..

<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

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