Question

我有一个类似下面的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">

Answer 1

这是我的解决方案，

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

的FrameLayout

<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方法，所以请确保调用它，否则将不会分配。

Answer 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);
    }

Answer 3

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

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

3 个答案:

的FrameLayout

代码