在Android

Question

我想在Android中实现ProgressBar或Chart，如下所示：

那么是否有任何第三方库或我可以遵循的任何示例？实际上这个看法是什么？它是一个包含3个阶段或图表的进度条吗？

Answer 1

首先，您需要了解可绘制资源：

Drawable Resources | Android Developers

这是我们用来制作此图片的内容。

首先，我们将从绿色栏开始。绿色条形图将占据整个宽度，我们将用其他图形覆盖它。这将是形状 drawable。

/res/drawable/green_bar.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#FF009900"/>
    <size android:height="12dp" android:width="12dp"/>
    <corners android:radius="6dp"/>
</shape>

为了得到尖锐的部分，我们将使用九补丁图像。这是一个可以以您控制的方式伸展的图像。

/res/drawable-mdpi/pointy.9.png：

我在PhotoShop一起鞭打了这个。顶部中心的那个小点说中间可以伸展而不是伸展。并且您无法在白色网页背景中看到它，但图形的最末端有一个透明的角落。

所以我们必须控制九个补丁的伸展程度。为此，我们将使用 scale drawable。

/res/drawable/scalepointy.xml：

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/pointy"
    android:scaleGravity="left|fill_vertical"
    android:scaleWidth="100%"/>

scaleWidth表示我们将使用可绘制级别来更改九个补丁的宽度。 left的重力意味着它将从左向右扩展。 fill_vertical也可以防止等级改变高度。

现在我们必须把这些酒吧堆起来。我们将使用图层列表。

/res/drawable/pointybar.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/green_bar" android:gravity="fill_horizontal"/>
    <item android:id="@+id/secondary" android:drawable="@drawable/scalepointy"/>
    <item android:id="@+id/primary" android:drawable="@drawable/scalepointy"/>
</layer-list>

现在我们将使用它作为通用视图的背景：

（摘自/res/layout/activity_main.xml）

    <View
        android:id="@+id/bargraph"
        android:layout_width="match_parent"
        android:layout_height="12dp"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="32dp"
        android:background="@drawable/pointybar"/>

现在代码！每个drawable可以有一个级别，通过设置级别，我们可以更改drawable。可绘制级别从0到10000，因此对于百分比，您首先乘以100。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("Pointy Chart Demo");

        View view = findViewById(R.id.bargraph);

        LayerDrawable layerDrawable = (LayerDrawable) view.getBackground();

        Drawable d1 = layerDrawable.findDrawableByLayerId(R.id.primary);
        d1.setLevel(6000); // 60%

        Drawable d2 = layerDrawable.findDrawableByLayerId(R.id.secondary);
        d2.setLevel(8000);  // 80%
    }

这很重要：因为secondary列在primary pointybar.xml之前，我们必须确保始终在sscondary设置更高级别以及primary上的较低级别。如果较高级别位于primary，那么它将掩盖secondary，您将无法看到它。 （也许我应该更好地命名ids。我的速度太快了。）

这个是最终的结果！

了解我们如何在XML中完成大部分工作？这就是谷歌希望你这样做的方式。