2017-04-12 10 views
5

我想創建這樣一個繪製了我的進度條如何使色片的Android XML環形

ring shape color slice

,我已經試過這個代碼,但我沒有得到我想要的

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:id="@android:id/progress"> 
     <shape 
      android:innerRadiusRatio="3" 
      android:shape="ring" 
      android:useLevel="false"> 
      <gradient 
       android:centerColor="#ffff00" 
       android:endColor="#00ff00" 
       android:startColor="#fb0000" 
       android:type="sweep" /> 
     </shape> 
    </item> 
</layer-list> 

這是我有什麼

gradient

是否有可能只用xml做到這一點? 或者這應該用java代碼來完成?

+1

你得到了一個看起來更好,說實話:d – Vucko

+0

這應該與Java代碼來完成。 –

+0

@Vucko,但當某些部分是空的/透明的時候,進度條看起來很奇怪。 – fadeltd

回答

0

這裏是爲您的問題的解決方案。

DifferentColorCircularBorder.java

public class DifferentColorCircularBorder { 
    private RelativeLayout parentLayout; 

    public DifferentColorCircularBorder(RelativeLayout parentLayout) { 
     this.parentLayout = parentLayout; 
    } 

    public void addBorderPortion(Context context, int color, int startDegree, int endDegree) { 
     ProgressBar portion = getBorderPortion(context, color, startDegree, endDegree); 
     parentLayout.addView(portion); 
    } 

    private ProgressBar getBorderPortion(Context context, int color, int startDegree, int endDegree) { 
     LayoutInflater inflater = LayoutInflater.from(context); 

     ProgressBar portion = (ProgressBar) inflater.inflate(R.layout.border_portion, parentLayout, false); 
     portion.setRotation(startDegree); 
     portion.setProgress(endDegree - startDegree); 

     portion.getProgressDrawable().setColorFilter(color, PorterDuff.Mode.SRC_ATOP); 

     RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) portion.getLayoutParams(); 
     params.addRule(RelativeLayout.CENTER_IN_PARENT); 
     portion.setLayoutParams(params); 

     return portion; 
    } 
} 

border_portion.xml

<?xml version="1.0" encoding="utf-8"?> 
<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android" 
    style="?android:attr/progressBarStyleHorizontal" 
    android:layout_width="220dp" 
    android:layout_height="220dp" 
    android:progressDrawable="@drawable/circle_exterior" 
    android:layout_centerInParent="true" 
    android:max="360"/> 

circle_exterior.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="ring" 
    android:innerRadius="100dp" 
    android:thickness="10dp" > 

    <solid android:color="#ff111111" /> 
</shape> 

MainActivity.java

public class MainActivity extends AppCompatActivity { 

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

     RelativeLayout interiorLayout = (RelativeLayout) findViewById(R.id.interior); 

     DifferentColorCircularBorder border = new DifferentColorCircularBorder(interiorLayout); 
     border.addBorderPortion(getApplicationContext(), ContextCompat.getColor(com.diffcolorborder.MainActivity.this, R.color.colorGoogleBlue), 0, 50); 
     border.addBorderPortion(getApplicationContext(), ContextCompat.getColor(com.diffcolorborder.MainActivity.this, R.color.colorGoogleGreen), 50, 120); 
     border.addBorderPortion(getApplicationContext(), ContextCompat.getColor(com.diffcolorborder.MainActivity.this, R.color.colorGoogleYellow), 120, 220); 
     border.addBorderPortion(getApplicationContext(), ContextCompat.getColor(com.diffcolorborder.MainActivity.this, R.color.colorGoogleRed), 220, 360); 
    } 

activity_main.xml中

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#2d2d2d"> 

    <RelativeLayout 
     android:id="@+id/interior" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <View 
      android:layout_width="200dp" 
      android:layout_height="200dp" 
      android:layout_centerInParent="true" 
      android:background="@drawable/profilepic" /> 
    </RelativeLayout> 
</RelativeLayout> 

enter image description here