2017-06-13 117 views
-1

我想创建一个内部发光的圆形进度条,我似乎无法使用渐变开始,中间和结束颜色绘制进度。圆形进度条中的渐变

This is what i want to create

This is what i could create

我会分享我目前的做法。

background.xml

<shape 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="ring" 
android:innerRadiusRatio="2.5" 
android:thickness="10dp" 
android:useLevel="false"> 

<gradient 

    android:startColor="#b6b6b6" 
    android:centerColor="#eeeeee" 
    android:endColor="#b6b6b6" 
/> 
</shape> 

progress.xml

<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="10dp" 
    android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 --> 

    <gradient 
     android:angle="0" 
     android:startColor="#082a55" 
     android:centerColor="#0a3973" 
     android:endColor="#082a55" 

     android:useLevel="false" /> 
</shape> 
</rotate> 

mainactivity.xml

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

检查我答,问我的情况下,任何的查询 –

回答

0

遵循这个步骤

1.创建亲这样

<ProgressBar 
      android:id="@+id/circularProgressBar" 
      style="?android:attr/progressBarStyleHorizontal" 
      android:layout_width="40dip" 
      android:layout_height="40dip" 
      android:layout_centerInParent="true" 
      android:layout_marginLeft="5dp" 
      android:layout_toRightOf="@+id/txt_continue" 
      android:indeterminate="false" 
      android:padding="2dp" 
      android:progressDrawable="@drawable/progressbar" /> 

     <TextView 
      android:id="@+id/textView1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignBottom="@id/circularProgressBar" 
      android:layout_alignLeft="@id/circularProgressBar" 
      android:layout_alignRight="@id/circularProgressBar" 
      android:layout_alignTop="@id/circularProgressBar" 
      android:gravity="center" 
      android:text="30" 
      android:textSize="16sp" /> 

现在2.在您的活动文件中的布局文件gressbar.xml在drawblw文件夹

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:id="@android:id/background"> 
    <shape 
     android:innerRadiusRatio="3" 
     android:shape="ring" 
     android:thicknessRatio="10.0" 
     android:useLevel="false"> 
     <solid android:color="@color/colorWhite" /> 
     <stroke android:color="@color/colorPrimary" /> 
    </shape> 
</item> 
<item android:id="@android:id/progress"> 
    <rotate 
     android:fromDegrees="270" 
     android:pivotX="50%" 
     android:pivotY="50%" 
     android:toDegrees="270"> 
     <shape 
      android:innerRadiusRatio="3" 
      android:shape="ring" 
      android:thicknessRatio="10.0" 
      android:useLevel="true"> 
      <solid android:color="@color/colorAccent" /> 
     </shape> 
    </rotate> 
</item> 

</layer-list> 

2.添加本

_progressBar = (ProgressBar) findViewById(R.id.circularProgressBar); 
    _progressBar.setProgress(0); 
    _progressBar.setMax(K); 
    txtTime = (TextView) findViewById(R.id.textView1); 
    final Calendar calendar = Calendar.getInstance(); 

    long cur = calendar.getTimeInMillis(); 
    long goal = (cur + (30 * 1000)); 

    doSomethingRepeatedly(goal); 

4.创建一个这样的方法

private void doSomethingRepeatedly(final long goal) { 

    timer = new Timer(); 
    timer.scheduleAtFixedRate(new TimerTask() { 
     public void run() { 

      try { 
       final Calendar calendar = Calendar.getInstance(); 

       if (goal > calendar.getTimeInMillis()) { 
        Log.e("CHK", "CAlled"); 
        runOnUiThread(new Runnable() { 
         @Override 
         public void run() { 

          Log.d("Time Plus", "Time Plus" + K--); 
          _progressBar.setProgress(K); 
          txtTime.setText(String.valueOf(K)); 
         } 
        }); 
       } else { 
        runOnUiThread(new Runnable() { 
         @Override 
         public void run() { 

          //Log.d("Time Plus", "Time Plus" + K--); 
          _progressBar.setProgress(K); 
          txtTime.setText(String.valueOf(K)); 
          btnNotnow.setVisibility(View.VISIBLE); 
          txtContinue.setVisibility(View.GONE); 
          _progressBar.setVisibility(View.GONE); 
          txtTime.setVisibility(View.GONE); 
         } 
        }); 
        Log.e("CHK", "Reached Limit"); 
        cancel(); 
       } 

       //Your code 

      } catch (Exception e) { 
       runOnUiThread(new Runnable() { 
        @Override 
        public void run() { 
         // Do some stuff 
         //ivGIF.setVisibility(View.INVISIBLE); 
         //Log.d("Time Plus", "Time Plus" + K++); 
        } 
       }); 

       Log.e("CHK", "Exception"); 
       // TODO: handle exception 
      } 
     } 
    }, 0, 1000); 
} 
+0

感谢您的答复,背景仍然是纯色的,因为我需要它不会产生渐变效果。 – user2955425

+0

@ user2955425检查我更新的ans –

+0

我不想要梯度填充进度完成,我想要进度水平填充。请看我想要的附加图像,以更好地了解我想要什么。 – user2955425