Question

我的客户想要一个菱形的进展，如下所示：

我的第一次尝试是使用图书馆，但我找不到存在的图书馆

我的下一次尝试是学习如何使用android附带的ProgressBar视图，并使用this回答设置我自己的drawable（最接近堆栈溢出的答案），但是答案仅适用于ring形状，而不适用于矩形。

创建菱形进度视图的最佳方法是什么？（无论如何：自定义视图，progressDrawable）以及我该如何做？

Answer 1

经过一些更多的测试后，我想出了一个hacky的回答。它只有4个进度条与相对布局的边缘对齐，并且在它们顶部有CardView。旋转整个东西，并将它包装在一个班级和bam中，你有一个钻石进度条。（使用数学计算每个条的进度）

在角落（进度条重叠的地方）可能有点奇怪但整体上它运作良好

用法：

ViewGroup background;
int count = 1;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Something to add the progress bar to
    background = (ViewGroup) findViewById(R.id.relative);

    //initializing the progress bar
    final DiamondProgress diamondProgress = new DiamondProgress(this);
    diamondProgress.setMax(1000);

    //adding the progress bar
    background.addView(diamondProgress.getView());

    /* Sample Code for animating the progress bar*/
    new Timer().scheduleAtFixedRate(new TimerTask() {
        @Override
        public void run() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    diamondProgress.setProgress(count++);
                }
            });
        }
    }, 0, 25);


}

代码：

XML：layout / diamond_view

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:rotation="45"
    android:padding="43dp"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="200dp"
        android:layout_height="200dp">
        <RelativeLayout
            android:layout_width="wrap_content"
            android:rotation="90"
            android:layout_height="wrap_content">
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="8dp"
                android:layout_alignParentBottom="true"
                android:rotation="180">
                <ProgressBar
                    android:layout_width="match_parent"
                    android:layout_height="8dp"
                    android:layout_marginLeft="3dp"
                    android:id="@+id/dp_progress4"
                    style="?android:attr/progressBarStyleHorizontal"
                    android:progressDrawable="@drawable/progress_drawable"
                    android:layout_alignParentBottom="true" />
            </RelativeLayout>
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="8dp"
            android:layout_alignParentBottom="true"
            android:rotation="180">
            <ProgressBar
                android:layout_width="match_parent"
                android:layout_height="8dp"
                android:layout_marginLeft="3dp"
                android:progress="50"
                android:id="@+id/dp_progress3"
                android:progressDrawable="@drawable/progress_drawable"
                style="?android:attr/progressBarStyleHorizontal"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:rotation="90"
            android:layout_height="match_parent">
            <ProgressBar
                android:layout_width="match_parent"
                android:layout_height="8dp"
                android:layout_marginLeft="3dp"
                android:progress="100"
                android:id="@+id/dp_progress2"
                android:progressDrawable="@drawable/progress_drawable"
                style="?android:attr/progressBarStyleHorizontal" />
        </RelativeLayout>

        <ProgressBar
            android:layout_width="match_parent"
            android:layout_height="8dp"
            android:layout_marginLeft="3dp"
            android:progress="100"
            android:progressDrawable="@drawable/progress_drawable"
            style="?android:attr/progressBarStyleHorizontal"
            android:id="@+id/dp_progress1"/>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_margin="4dp"
            android:id="@+id/dp_card"
            android:elevation="10dp"
            android:layout_height="match_parent">
            <RelativeLayout
                android:layout_width="wrap_content"
                android:rotation="-45"
                android:id="@+id/dp_addView"
                android:layout_height="wrap_content">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="Sample Inside Content"
                    android:id="@+id/dp_text"
                    android:gravity="center"
                    android:textSize="24sp"/>
            </RelativeLayout>
        </android.support.v7.widget.CardView>
    </RelativeLayout>


</RelativeLayout>

＆＃13;

XML：drawable / progress_drawable

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--  background -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="3dp"/>
            <solid android:color="#f2f2f2" />
        </shape>

    </item>


    <!-- for the actual progress bar -->
    <item android:id="@android:id/progress">
        <clip android:gravity="left">
            <shape>
                <corners android:radius="3dp"/>
                <solid android:color="@color/colorAccent" />
            </shape>
        </clip>
    </item>

</layer-list>

＆＃13;

Java类

＆＃13;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;

/**
 * Created by Pythogen on 9/27/2017.
 */

public class DiamondProgress {

    Context context;
    View view;
    RelativeLayout addView;
    int progress = 0;
    int max = 100;
    ProgressBar p1;
    ProgressBar p2;
    ProgressBar p3;
    ProgressBar p4;


    public DiamondProgress(Context context) {
        this.context = context;
        view = LayoutInflater.from(context).inflate(R.layout.diamond_view, null);
        addView = ((RelativeLayout) view.findViewById(R.id.dp_addView));
        p1 = (ProgressBar) view.findViewById(R.id.dp_progress1);
        p2 = (ProgressBar) view.findViewById(R.id.dp_progress2);
        p3 = (ProgressBar) view.findViewById(R.id.dp_progress3);
        p4 = (ProgressBar) view.findViewById(R.id.dp_progress4);

    }

    public View getView() {
        return view;
    }

    public RelativeLayout getHostOfInsideContent() {
        return addView;
    }

    public void setProgress(int progress) {
        this.progress = progress;
        updateProgressBar();
    }

    public void setMax(int max) {
        this.max = max;
        p1.setMax(max);
        p2.setMax(max);
        p3.setMax(max);
        p4.setMax(max);
    }

    public void updateProgressBar() {
        double prog = ((double)progress)/max;
        if (prog<.25) {
            p1.setProgress(this.progress*4);
            p2.setProgress(0);
            p3.setProgress(0);
            p4.setProgress(0);
        } else {
            p1.setProgress(max);
            if (prog<.5) {
                p2.setProgress((this.progress*4)-max);
                p3.setProgress(0);
                p4.setProgress(0);
            } else {
                p2.setProgress(max);
                if (prog<.75) {
                    p3.setProgress((this.progress*4)-max*2);
                    p4.setProgress(0);
                } else {
                    p3.setProgress(max);
                    p4.setProgress((this.progress*4)-max*3);
                }
            }
        }
    }
}

＆＃13;

哦，如果您打算使用它，请务必将CardView依赖项添加到build.grade compile 'com.android.support:cardview-v7:25.1.1'

如何创建Diamond Progress Bar Android

1 个答案: