Làm cách nào để tạo một thanh tiến trình tròn trong Android xoay trên nó?

Tôi đang cố gắng tạo một thanh tiến trình tròn. Đây là những gì tôi muốn đạt được

Có một vòng nền màu xám. Trên đầu nó, một thanh tiến độ màu xanh xuất hiện di chuyển theo đường tròn từ 0 đến 360 trong 60 hoặc bất cứ số giây nào.

Đây là mã ví dụ của tôi.

<ProgressBar
            android:id="@+id/ProgressBar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            style="?android:attr/progressBarStyleLarge"
            android:indeterminateDrawable="@drawable/progressBarBG"
            android:progress="50"
            />

Để làm điều này, trong "processBarBG" có thể vẽ được, tôi đang tạo một danh sách lớp và bên trong danh sách lớp đó tôi sẽ đưa ra hai mục như được hiển thị.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape
            android:shape="ring"
            android:innerRadius="64dp"
            android:thickness="8dp"
            android:useLevel="false">

        <solid android:color="@color/grey" />
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape
                android:shape="ring"
                android:innerRadius="64dp"
                android:thickness="8dp"
                android:useLevel="false">

            <solid android:color="@color/blue" />
        </shape>
    </clip>
</item>

Bây giờ, vòng màu xám đầu tiên được tạo ra tốt đẹp. Tuy nhiên, vòng màu xanh bắt đầu từ bên trái của drawable và đi sang bên phải giống như cách một thanh tiến trình tuyến tính hoạt động. Đây là cách nó hiển thị ở mức 50% với mũi tên màu đỏ hiển thị hướng.

Tôi muốn di chuyển thanh tiến trình màu xanh theo đường tròn như mong đợi.

Đây là hai giải pháp của tôi.

Câu trả lời ngắn:

Thay vì tạo một layer-list, tôi tách nó thành hai tệp. Một cho ProgressBarvà một cho nền tảng của nó.

Đây là ProgressDrawabletập tin (thư mục @drawable): circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="1dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

Và đây là cho background(thư mục @drawable) của nó: circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="1dp"
    android:useLevel="false">

    <solid android:color="#CCC" />

</shape>

Và cuối cùng, bên trong bố cục mà bạn đang làm việc:

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:background="@drawable/circle_shape"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:progress="65" />

Đây là kết quả:

Câu trả lời dài:

Sử dụng chế độ xem tùy chỉnh kế thừa android.view.View

Đây là dự án đầy đủ trên github

Tôi đã thực hiện một cách dễ dàng:

Vui lòng kiểm tra chụp màn hình cho cùng.

CustomProTHERBarActivity.java :

public class CustomProgressBarActivity extends AppCompatActivity {

    private TextView txtProgress;
    private ProgressBar progressBar;
    private int pStatus = 0;
    private Handler handler = new Handler();

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

        txtProgress = (TextView) findViewById(R.id.txtProgress);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);

        new Thread(new Runnable() {
            @Override
            public void run() {
                while (pStatus <= 100) {
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            progressBar.setProgress(pStatus);
                            txtProgress.setText(pStatus + " %");
                        }
                    });
                    try {
                        Thread.sleep(100);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    pStatus++;
                }
            }
        }).start();

    }
}

Activity_custom_proTHERbar.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.skholingua.android.custom_progressbar_circular.MainActivity" >


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content">

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_centerInParent="true"
            android:indeterminate="false"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/custom_progressbar_drawable"
            android:secondaryProgress="0" />


        <TextView
            android:id="@+id/txtProgress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/progressBar"
            android:layout_centerInParent="true"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </RelativeLayout>



</RelativeLayout>

custom_proTHERbar_drawable.xml :

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="270" >

    <shape
        android:shape="ring"
        android:useLevel="false" >
        <gradient
            android:centerY="0.5"
            android:endColor="#FA5858"
            android:startColor="#0099CC"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

Hy vọng điều này sẽ giúp bạn.

Tôi đã viết ví dụ chi tiết về thanh tiến trình tròn trong Android ở đây trên blog của tôi demuts.com . Bạn cũng có thể thích mã nguồn đầy đủ và giải thích ở đó.

Đây là cách tôi tạo thanh tiến trình tròn với tỷ lệ phần trăm bên trong vòng tròn trong mã thuần mà không cần bất kỳ thư viện nào.

đầu tiên tạo một tập tin có thể vẽ được gọi là circular.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/secondaryProgress">
        <shape
            android:innerRadiusRatio="6"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true">


            <gradient
                android:centerColor="#999999"
                android:endColor="#999999"
                android:startColor="#999999"
                android:type="sweep" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270">

            <shape
                android:innerRadiusRatio="6"
                android:shape="ring"
                android:thicknessRatio="20.0"
                android:useLevel="true">


                <rotate
                    android:fromDegrees="0"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="360" />

                <gradient
                    android:centerColor="#00FF00"
                    android:endColor="#00FF00"
                    android:startColor="#00FF00"
                    android:type="sweep" />

            </shape>
        </rotate>
    </item>
</layer-list>

Bây giờ trong activity_main.xml add của bạn sau đây:

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/dialog"
    tools:context="com.example.parsaniahardik.progressanimation.MainActivity">

    <ProgressBar

        android:id="@+id/circularProgressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:indeterminate="false"
        android:max="100"
        android:progress="50"
        android:layout_centerInParent="true"
        android:progressDrawable="@drawable/circular"
        android:secondaryProgress="100"
        />

    <ImageView
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:background="@drawable/whitecircle"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/tv"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:gravity="center"
        android:text="25%"
        android:layout_centerInParent="true"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="20sp" />

</RelativeLayout>

Trong activity_main.xmltôi đã sử dụng một hình ảnh tròn với nền trắng để hiển thị nền trắng xung quanh tỷ lệ phần trăm. Đây là hình ảnh:

Bạn có thể thay đổi màu của hình ảnh này để đặt màu tùy chỉnh xung quanh phần trăm văn bản.

Bây giờ cuối cùng thêm mã sau đây vào MainActivity.java:

import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.DecelerateInterpolator;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    int pStatus = 0;
    private Handler handler = new Handler();
    TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Resources res = getResources();
        Drawable drawable = res.getDrawable(R.drawable.circular);
        final ProgressBar mProgress = (ProgressBar) findViewById(R.id.circularProgressbar);
        mProgress.setProgress(0);   // Main Progress
        mProgress.setSecondaryProgress(100); // Secondary Progress
        mProgress.setMax(100); // Maximum Progress
        mProgress.setProgressDrawable(drawable);

      /*  ObjectAnimator animation = ObjectAnimator.ofInt(mProgress, "progress", 0, 100);
        animation.setDuration(50000);
        animation.setInterpolator(new DecelerateInterpolator());
        animation.start();*/

        tv = (TextView) findViewById(R.id.tv);
        new Thread(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                while (pStatus < 100) {
                    pStatus += 1;

                    handler.post(new Runnable() {

                        @Override
                        public void run() {
                            // TODO Auto-generated method stub
                            mProgress.setProgress(pStatus);
                            tv.setText(pStatus + "%");

                        }
                    });
                    try {
                        // Sleep for 200 milliseconds.
                        // Just to display the progress slowly
                        Thread.sleep(8); //thread will take approx 1.5 seconds to finish
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

Nếu bạn muốn tạo thanh tiến trình theo chiều ngang, hãy theo liên kết này, nó có nhiều ví dụ có giá trị với mã nguồn:
http://www.skholingua.com/android-basic/user-interface/form-widgets/proTHERbar

Tôi nhận ra một thư viện mã nguồn mở trên GitHub CircularProgressBar thực hiện chính xác những gì bạn muốn cách đơn giản nhất có thể:

SỬ DỤNG

Để thực hiện một ProgressBar tròn thêm CircularProgressBar trong cách bố trí XML của bạn và thêm thư viện CircularProgressBar trong máy chiếu của bạn hoặc bạn cũng có thể lấy nó thông qua Gradle:

compile 'com.mikhaellopez:circularprogressbar:1.0.0'

XML

<com.mikhaellopez.circularprogressbar.CircularProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:background_progressbar_color="#FFCDD2"
    app:background_progressbar_width="5dp"
    app:progressbar_color="#F44336"
    app:progressbar_width="10dp" />

Bạn phải sử dụng các thuộc tính sau trong XML của mình để thay đổi Thông tư của bạn.

Tính chất:

• app:progress (số nguyên) >> mặc định 0
• app:progressbar_color (màu) >> ĐEN mặc định
• app:background_progressbar_color (màu) >> GRAY mặc định
• app:progressbar_width (thứ nguyên) >> 7dp mặc định
• app:background_progressbar_width (thứ nguyên) >> 3dp mặc định

JAVA

CircularProgressBar circularProgressBar = (CircularProgressBar)findViewById(R.id.yourCircularProgressbar);
circularProgressBar.setColor(ContextCompat.getColor(this, R.color.progressBarColor));
circularProgressBar.setBackgroundColor(ContextCompat.getColor(this, R.color.backgroundProgressBarColor));
circularProgressBar.setProgressBarWidth(getResources().getDimension(R.dimen.progressBarWidth));
circularProgressBar.setBackgroundProgressBarWidth(getResources().getDimension(R.dimen.backgroundProgressBarWidth));
int animationDuration = 2500; // 2500ms = 2,5s
circularProgressBar.setProgressWithAnimation(65, animationDuration); // Default duration = 1500ms

Ngã ba hoặc Tải xuống thư viện này tại đây >> https://github.com/lopspower/CircularProTHERBar

Đây là một customview đơn giản cho tiến trình vòng tròn hiển thị. Bạn có thể sửa đổi và tối ưu hóa nhiều hơn để phù hợp với dự án của bạn.

class CircleProgressBar @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    private val backgroundWidth = 10f
    private val progressWidth = 20f

    private val backgroundPaint = Paint().apply {
        color = Color.LTGRAY
        style = Paint.Style.STROKE
        strokeWidth = backgroundWidth
        isAntiAlias = true
    }

    private val progressPaint = Paint().apply {
        color = Color.RED
        style = Paint.Style.STROKE
        strokeWidth = progressWidth
        isAntiAlias = true
    }

    var progress: Float = 0f
        set(value) {
            field = value
            invalidate()
        }

    private val oval = RectF()
    private var centerX: Float = 0f
    private var centerY: Float = 0f
    private var radius: Float = 0f

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        centerX = w.toFloat() / 2
        centerY = h.toFloat() / 2
        radius = w.toFloat() / 2 - progressWidth
        oval.set(centerX - radius,
                centerY - radius,
                centerX + radius,
                centerY + radius)
        super.onSizeChanged(w, h, oldw, oldh)
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.drawCircle(centerX, centerY, radius, backgroundPaint)
        canvas?.drawArc(oval, 270f, 360f * progress, false, progressPaint)
    }
}

Ví dụ sử dụng

xml

<com.example.androidcircleprogressbar.CircleProgressBar
    android:id="@+id/circle_progress"
    android:layout_width="200dp"
    android:layout_height="200dp" />

kotlin

class MainActivity : AppCompatActivity() {
    val TOTAL_TIME = 10 * 1000L

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        timeOutRemoveTimer.start()
    }

    private var timeOutRemoveTimer = object : CountDownTimer(TOTAL_TIME, 10) {
        override fun onFinish() {
            circle_progress.progress = 1f
        }

        override fun onTick(millisUntilFinished: Long) {
            circle_progress.progress = (TOTAL_TIME - millisUntilFinished).toFloat() / TOTAL_TIME
        }
    }
}

Kết quả

Tôi là người mới nên tôi không thể nhận xét nhưng nghĩ sẽ chia sẻ cách khắc phục lười biếng. Tôi cũng sử dụng cách tiếp cận ban đầu của Pedram và cũng gặp phải vấn đề Lollipop tương tự. Nhưng alanv trong bài viết khác đã sửa một dòng. Đây là một số loại lỗi hoặc giám sát trong API21. Nghĩa đen chỉ cần thêm android:useLevel="true"vào vòng tròn tiến độ xml của bạn. Cách tiếp cận mới của Pedram vẫn là cách khắc phục phù hợp, nhưng tôi chỉ nghĩ rằng mình cũng chia sẻ cách khắc phục lười biếng.

hãy thử phương pháp này để tạo một bitmap và đặt nó vào chế độ xem hình ảnh.

private void circularImageBar(ImageView iv2, int i) {


    Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(b); 
    Paint paint = new Paint();

        paint.setColor(Color.parseColor("#c4c4c4"));
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(150, 150, 140, paint);

        paint.setColor(Color.parseColor("#FFDB4C"));
        paint.setStrokeWidth(10);   
        paint.setStyle(Paint.Style.FILL);
        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.STROKE);
        oval.set(10,10,290,290);

        canvas.drawArc(oval, 270, ((i*360)/100), false, paint);
        paint.setStrokeWidth(0);    
        paint.setTextAlign(Align.CENTER);
        paint.setColor(Color.parseColor("#8E8E93")); 
        paint.setTextSize(140);

        canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint); 

        iv2.setImageBitmap(b);
}

https://github.com/passsy/android-HoloCircularProTHERBar là một ví dụ về thư viện thực hiện việc này. Như Tenfour04 đã nêu, nó sẽ phải được tùy chỉnh một chút , trong đó điều này không được hỗ trợ trực tiếp ngoài hộp. Nếu thư viện này không hoạt động như bạn muốn, bạn có thể rẽ nhánh và sửa đổi các chi tiết để làm cho nó hoạt động theo ý thích của bạn. Nếu bạn thực hiện một cái gì đó mà người khác có thể sử dụng lại, bạn thậm chí có thể gửi yêu cầu kéo để đưa nó được hợp nhất trở lại!

@Pedram, giải pháp cũ của bạn cũng hoạt động tốt trong kẹo mút (và tốt hơn giải pháp mới vì nó có thể sử dụng ở mọi nơi, kể cả trong chế độ xem từ xa) chỉ cần thay đổi circular_progress_bar.xmlmã của bạn thành điều này:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="1dp"
        android:useLevel="true"> <!-- Just add this line -->
        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

package com.example.ankitrajpoot.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;


public class MainActivity extends Activity {

    private ProgressBar spinner;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        spinner=(ProgressBar)findViewById(R.id.progressBar);
        spinner.setVisibility(View.VISIBLE);
    }
}

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/loadingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

<ProgressBar
    android:id="@+id/progressBar"

    android:layout_width="48dp"
    style="?android:attr/progressBarStyleLarge"
    android:layout_height="48dp"
    android:indeterminateDrawable="@drawable/circular_progress_bar"
    android:indeterminate="true" />
</RelativeLayout>





<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="1080">
    <shape
        android:shape="ring"
        android:innerRadiusRatio="3"
        android:thicknessRatio="8"
        android:useLevel="false">

        <size
            android:width="56dip"
            android:height="56dip" />

        <gradient
            android:type="sweep"
            android:useLevel="false"
            android:startColor="@android:color/transparent"
            android:endColor="#1e9dff"
            android:angle="0"
            />

    </shape>
</rotate>

Với Thư viện Thành phần Vật liệu, bạn có thể sử dụng ProgressIndicatorvới một Widget.MaterialComponents.ProgressIndicator.Circular.Determinatekiểu.

Cái gì đó như:

<com.google.android.material.progressindicator.ProgressIndicator
    style="@style/Widget.MaterialComponents.ProgressIndicator.Circular.Determinate"
    app:indicatorColor="@color/...."
    app:trackColor="@color/...."
    app:circularRadius="64dp"/>

Bạn có thể sử dụng các thuộc tính sau:

• circularRadius: xác định bán kính của chỉ báo tiến trình tròn
• trackColor: màu được sử dụng cho theo dõi tiến độ. Nếu không được xác định, nó sẽ được đặt thành indicatorColorvà áp dụngandroid:disabledAlpha từ chủ đề.
• indicatorColor: màu đơn được sử dụng cho chỉ báo ở chế độ xác định / không xác định. Theo mặc định, nó sử dụng màu chính của chủ đề

Sử dụng progressIndicator.setProgressCompat((int) value, true); để cập nhật giá trị trong chỉ báo.

Lưu ý: nó yêu cầu ít nhất là phiên bản 1.3.0-alpha01.

Thay đổi

android:useLevel="false"

đến

android:useLevel="true"

cho sahpe thứ hai với id="@android:id/progress

hy vọng nó hoạt động