如何像进度条一样填充imageview的背景颜色？答案

【问题标题】：How to fill imageview's background color like a progressbar?如何像进度条一样填充imageview的背景颜色？
【发布时间】：2016-03-17 22:28:49
【问题描述】：

我有一个类似下面的 png 图像，我需要根据它的容量填充它的背景颜色。

例如，如果油箱有 %100% 容量的油，则背景应为黄色，如果有 %25，则背景应为 %25% 黄色和 %75 透明。

假设这是游戏中的血条。

这就是我的布局中的内容，只是线性布局中的一个简单的图像视图。有没有办法使用动画、剪辑或其他东西来实现这一点？

 <ImageView
            android:id="@+id/ivOilTank"
            android:layout_width="0dp"
            android:src="@mipmap/oilTank"
            android:layout_height="match_parent"
            android:layout_weight="1">

【问题讨论】：

标签： android android-layout android-animation

【解决方案1】：

这是我的解决方案，

由于我对将 dp 用于 width 属性不感兴趣，因此我寻找了另一种解决方案。 如果您想直接使用 dp，请查看 Shadab Ansari 的回答，这给了我一个线索。

框架布局

<FrameLayout
            android:id="@+id/flOil"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            >
            <View
                android:id="@+id/progress_view"
               android:background="#fc12d108"
                android:layout_width="55dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"/>

            <ImageView
            android:id="@+id/ivOil"
            android:layout_width="match_parent"
            android:src="@mipmap/oilTank"
            android:layout_height="match_parent"
            >

            </ImageView>
        </FrameLayout>

代码

                ViewTreeObserver vto = ivRate.getViewTreeObserver();
                vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener(){
                    public boolean onPreDraw() {
                        ivRate.getViewTreeObserver().removeOnPreDrawListener(this);
                        widthTank = ivRate.getMeasuredWidth();//get the width of the imageView which has oilTank image as dp.
                        ViewGroup.LayoutParams layoutParams = prgrs.getLayoutParams();
                        layoutParams.width = (int) (widthTank / (new Random().nextInt(4) + 2));//calculate a width for view which is going to fill background color, random was user for testwill be using desired value.
                        prgrs.setLayoutParams(layoutParams);
                        return true;
                    }
                });

在使用 widthTank 变量之前，onPreDraw 方法必须被调用所以确保它被调用否则它不会被分配。

【讨论】：

【解决方案2】：

将您的布局 xml 更改为包含-

 <FrameLayout
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        >
        <View
            android:id="@+id/percent_highlight"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            />
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@mipmap/oilTank"
            />
    </FrameLayout>

现在无论您想突出显示图像的特定百分比 -

View highlight = findViewById(R.id.percent_highlight);

highlight.setBackgroundResource(<Color_id>);//Any color you want to set

        ViewGroup.LayoutParams layoutParams = highlight.getLayoutParams();
        layoutParams.width = (int) (dpToPixel(150) * 25 / 100.0f);//If you want to set 25%
        highlight.setLayoutParams(layoutParams);

dpToPixel() 将 dp 转换为像素 -

public int dpToPixel(float dp) {
        final float scale = getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }

【讨论】：

我需要为 framelayout 使用 match_parent 属性，我不想使用 android:layout_width="150dp"。但我想我可以用你的公式。我需要以编程方式获取视图的宽度 dp 吗？然后我可能会使用它而不是 150。
当然。你可以这样做。

【解决方案3】：

请查看此示例 https://github.com/fanrunqi/WaveProgressView 或 https://github.com/rathodchintan/Percentage-wise-Image-Filling 这是填充图像的最佳方式

【讨论】：