Question

我需要创建一个进度条，其中将进度分为5个相等的部分，并且我的应用程序与RestApi进行通信，其中我有一个字段作为风险程度，例如，如果风险程度为1图像将位于进度的第一部分的顶部，依此类推。

我是android开发的新手，他们能为我提供一个很好的答案吗？

我将非常感谢。

example of progress

如上图所示，我需要做类似图的操作。

更新：我的api返回1到5之间的整数。

Answer 1

创建一个内部包含5个视图的自定义视图，并创建一个setter方法以设置进度并相应地更改颜色。

自定义视图xml： custom_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5">

<View
    android:id="@+id/v1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="#ea3030" />

<View
    android:id="@+id/v2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="#ea7e30" />

<View
    android:id="@+id/v3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="#ea9630" />

<View
    android:id="@+id/v4"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="#bfea30" />

<View
    android:id="@+id/v5"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="#4fea30" />

</LinearLayout>

在值下创建 attrs.xml ，以直接从xml设置进度

<?xml version="1.0" encoding="utf-8"?>  
<resources>  
 <declare-styleable name="MyProgressView">  
 <attr name="progress" format="integer" />  
 </declare-styleable>
</resources>

自定义视图类： MyProgressView

public class MyProgressView extends LinearLayout {  
 private int progress;  
 private View v1, v2, v3, v4, v5;  

 public MyProgressView(Context context) {  
        super(context);  
  init();  
  }  

    public MyProgressView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
 final TypedArray attributes = getContext().obtainStyledAttributes(attrs, R.styleable.MyProgressView, 0, 0);  
 this.progress = attributes.getInt(R.styleable.MyProgressView_progress, 0);  
  attributes.recycle();  
  init();  
  }  

    public MyProgressView(Context context, AttributeSet attrs, int defStyleAttr) {  
        super(context, attrs, defStyleAttr);  
 final TypedArray attributes = getContext().obtainStyledAttributes(attrs, R.styleable.MyProgressView, defStyleAttr, 0);  
 this.progress = attributes.getInt(R.styleable.MyProgressView_progress, 0);  
  attributes.recycle();  
  init();  
  }  

    private void init() {  
        inflate(getContext(), R.layout.custom_progress, this);  
  }  

    @Override  
  protected void onFinishInflate() {  
        super.onFinishInflate();  
  v1 = findViewById(R.id.v1);  
  v2 = findViewById(R.id.v2);  
  v3 = findViewById(R.id.v3);  
  v4 = findViewById(R.id.v4);  
  v5 = findViewById(R.id.v5);  

  setProgress(progress);  
  }  

    public void setProgress(int progress) {  
        resetColor();  

 if (progress >= 1) {  
            setV1Color();  
  }  

        if (progress >= 2) {  
            setV2Color();  
  }  
        if (progress >= 3) {  
            setV3Color();  
  }  
        if (progress >= 4) {  
            setV4Color();  
  }  
        if (progress >= 5) {  
            setV5Color();  
  }  

    }  

    private void resetColor() {  
        v1.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.white));  
        v2.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.white));  
        v3.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.white));  
        v4.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.white));  
        v5.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.white));  
  }  


    public void setV1Color() {  
        v1.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.color1));  
  }  

    public void setV2Color() {  
        v2.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.color2));  
  }  

    public void setV3Color() {  
        v3.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.color3));  
  }  

    public void setV4Color() {  
        v4.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.color4));  
  }  

    public void setV5Color() {  
        v5.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.color5));  
  }  
}

现在如何使用此视图：

MainActivity

public class MainActivity extends AppCompatActivity {
 int progress = 0;

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

  final MyProgressView myProgress = findViewById(R.id.myProgress);

  new Handler().post(new Runnable() {
   @Override
   public void run() {
    myProgress.setProgress(progress);
    progress++;
    if (progress <= 5)
     new Handler().postDelayed(this, 2000);
    else {
     Toast.makeText(MainActivity.this, "Finished", Toast.LENGTH_SHORT).show();
    }
   }
  });
 }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  xmlns:app="http://schemas.android.com/apk/res-auto"  
  xmlns:tools="http://schemas.android.com/tools"  
  android:layout_width="match_parent"  
  android:layout_height="match_parent"  
  android:gravity="center"  
  tools:context=".MainActivity">  


 <io.github.sp4rx.customprogress.MyProgressView  android:id="@+id/myProgress"  
  android:layout_width="match_parent"  
  android:layout_height="10dp"  
  app:progress="5" />  

</LinearLayout>

演示： Custom Progress

如何以编程方式移动图像android

1 个答案:

现在如何使用此视图：