2016-02-10 5 views
2

Я ищу пользовательский виджет, чтобы нарисовать круг с несколькими цветами границ.Как представить границу круга с несколькими цветами в android

Скажите, например, если мой общий круг представляет 0-360, мне нужно покрасить границу круга разными цветами.

Например, мне нужно отметить 0-60 красным цветом, 61-120 с зеленым, 121-300 с пурпуром и 301-360 с желтым цветом границы.

, пожалуйста, предложите мне, как я могу это сделать в android.

+0

вы ищете что-то связано с этим http://i.stack.imgur.com/SxCXt.png, но полный круг? – sector11

ответ

1

для этого вы можете попробовать эту библиотеку, с которой я столкнулся. https://github.com/mucahitsidimi/GaugeView может быть вам полезна.

использует пользовательский вид фиксированной длины, чтобы сделать круг, используя холст

4

Вы приложение очень просто. Я не рекомендую использовать внешнюю библиотеку. Вы можете быстро реализовать класс, который рисует и управляет вашей желаемой формой. Приведен пример:

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, Mode.SRC_ATOP); 

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

     return portion; 
    } 

} 

border_portion определяется следующим образом:

<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 определяется здесь:

<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 класс определяется следующим образом:

public class MainActivity extends Activity { 

    @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(), Color.RED, 0, 40); 
     border.addBorderPortion(getApplicationContext(), Color.GREEN, 40, 90); 
     border.addBorderPortion(getApplicationContext(), Color.BLUE, 90, 270); 
     border.addBorderPortion(getApplicationContext(), 0xFF123456, 270, 360); 

    } 
} 

наконец activity_main макет:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    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" > 

    <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:background="@drawable/circle_interior_bg" 
      android:layout_centerInParent="true" /> 

    </RelativeLayout> 

</RelativeLayout> 

Пояснение о размерах: Это пример. Здесь я выбрал размеры, чтобы они идеально соответствовали кругу. Измените их на основе вашего приложения.

Изображение образца: This is the output of my code.

+0

Это не работает – kelvincer

+0

Могу ли я применять цвета градиента таким образом? – venky

+0

@venky да вы можете применять градиентные цвета. Bt единственная проблема заключается в том, что вы можете применять только три цвета: – MashukKhan

Смежные вопросы