圆形评级栏,看起来像进度条

时间:2019-05-31 14:48:02

标签: android geometry ratingbar

我正在寻找使用片段实现圆形等级栏的方法。目的是使圆形等级栏允许用户单击对应于100之外的值的点(非常类似于进度栏)。我已经找到了如何创建圆的方法,但是我正在寻找可以在用户单击的位置填充圆的方法。

中的任何指导
  
      
  1. 在100(不超过100)的圆圈内创建填充效果(如进度条)。
  2.   
  3. 调整圆的方向,使其圆角的朝向为0-北向,并在顺时针旋转时最多填充100。
  4.   

谢谢!

Circle.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="3.3"
        android:shape="ring"
        android:thickness="3.8sp"
        android:useLevel="false">
        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false"/>
    </shape>

</rotate>

CircleShaper.XML //在可绘制文件夹中

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

MiddleFragment.XML

<?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"
    tools:context=".Middle">

    <!-- TODO: Update blank fragment layout -->
    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:numStars="5"
        android:layout_centerInParent="true"
        android:background="@drawable/circle"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circle_shaper"/>
</RelativeLayout>

MiddleFragment.Class

public class Middle extends Fragment {
    OnRatingRecieveListener onRatingRecieveListener;


    public Middle() {
        // Required empty public constructor
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view= inflater.inflate(R.layout.fragment_middle, container, false);
        RatingBar ratingBar = (RatingBar)view.findViewById(R.id.ratingBar);

        ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {
                int value = (int)v;
                String toast = String.valueOf(value);
                Toast.makeText(getActivity(), toast, Toast.LENGTH_SHORT).show();
            }
        });

        return view;
    }

    public interface OnRatingRecieveListener{
        public void onRatingRecieve(int i);
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        Activity activity = (Activity)context;
        try{
            onRatingRecieveListener = (OnRatingRecieveListener)activity;
        } catch(ClassCastException e){
            throw new ClassCastException(activity.toString() + "implement onratingrecieve listener...");
        }
    }
}

1 个答案:

答案 0 :(得分:1)

解决方案是设置一个类,该类捕获相对于x轴的圆弧半径。

public int updateRotation(float x, float y) {
    r = Math.atan2(x - startX, y - startY);
    rotation = -(int) Math.toDegrees(r)+70;
    //radiusConverter.setPercent(rotation);
    //notifyAll();
    return rotation;
}

然后在运动事件开关的情况下,恢复该角度并将其报告为新的x,y点。

    endAngle = Float.valueOf(updateRotation(x, y));

    endAngleRadian = endAngle *((float)Math.PI / 180);
rotationUpdate.setRotation(endAngleRadian);

    pointX = (int) Math.round((startX + radius2 * Math.cos(endAngleRadian)));
    pointY = (int) Math.round((startY + radius2 * Math.sin(endAngleRadian)));