android - 使用进度条作为 ImageView 的边框

Question

我想给 imageview 添加一个进度条。我尝试使用以下代码:

<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/image"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="3dp"
    android:src="@drawable/defaultprofile" />
<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:indeterminate="false"
    android:progressDrawable="@drawable/circular_progress_bar"
    android:background="@drawable/circle_shape"
    style="?android:attr/progressBarStyleHorizontal"
    android:max="100"
    android:progress="65"
    android:layout_alignParentTop="true"
    android:layout_alignLeft="@+id/image"
    android:layout_alignStart="@+id/image" />

circular_progress_bar.xml:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="1dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

circle_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="1dp"
    android:useLevel="false">

    <solid android:color="#CCC" />

</shape>

结果:

我该如何解决？进度条应该看起来像 imageview 的边框。我必须删除填充。

Answer 1

所以你的 View 现在看起来像这样:

您不需要做的就是改变两个 View 的高度和重量 - 它们是不同的

编辑:现在你有了这个:

根据 http://developer.android.com/intl/es/guide/topics/resources/drawable-resource.html

删除这一行

android:innerRadiusRatio="2.5"

---

解决方案:我已经更改了一些文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:padding="10dp"
                android:id="@+id/mainLayout">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/image"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:src="@color/colorAccent"/>

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:padding="1dp"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:background="@drawable/circle_shape"
        android:style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:progress="65"
        android:layout_alignLeft="@+id/image"
        android:layout_alignTop="@+id/image"        />
</RelativeLayout>

循环进度条:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="270"
        android:toDegrees="270">
    <shape
        android:innerRadius="32dp"
        android:shape="ring"
        android:thickness="1dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

圆形

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:thickness="1dp"
    android:innerRadius="32dp"
    android:useLevel="false">

    <solid android:color="#CCC" />

</shape>

它看起来像:

希望对你有帮助