Menu vòng kết nối Android Giống như ghi chú bắt đầu

Question

Tôi cố gắng làm menu vòng tròn như trong ứng dụng này.

Trong chế độ "mở rộng" tôi vẽ thành phần này như sau:

<RelativeLayout android:id="@+id/bigCircle"> 
<!--color full borders--> 
    <my.custom.component android:id="@+id/middleCircle"> 
    <!--circle for buttons--> 
     <RelativeLayout android:id="@+id/smallCircle"> 
      <!--minus button--> 
     </RelativeLayout> 
    </my.custom.component> 
</RelativeLayout> 

Trong onDraw phương pháp my.custom.component i chia vòng tròn trên 8 phần bằng cách sử dụng android.graphics.Path với android.graphics.Paint và một số toán học.
Trực quan tôi có chính xác như được hiển thị trong ảnh chụp màn hình. Nhưng khi tôi nhấn vào một phần của vòng tròn, tôi cần vẽ lại phần này trong một màu khác để cho người dùng biết điều gì đang diễn ra.

Cách tôi có thể vẽ lại một phần của canvas thành phần cắt từ một phần khác của canvas theo android.graphics.Path chẳng hạn.
Trong một từ khác, tôi biết những gì redraw canvas tôi nên làm trong onDraw phương pháp, tôi biết rằng tôi có thể hiển thị một số bitmap từ drawables sơn trong photoshop và có một số "multiscreen rắc rối", tôi biết làm thế nào tôi có thể xác định một phần mà người dùng ép. Nhưng tôi không biết làm thế nào tôi có thể chọn một phần của vải và vẽ lại nó.

Answer 1

Nhà phát triển Catch tại đây. Nếu tôi hiểu vấn đề của bạn, bạn đang gặp khó khăn khi hiểu cách vẽ cụ thể chỉ báo đánh dấu/lựa chọn trên một phần của menu hình tròn của mình.

Trong khi có rất nhiều cách khác nhau, người ta có thể thực hiện nó, những gì bạn đang hướng tới (sử dụng android.graphics.Path) là cách chúng tôi đã làm. Trong hệ thống phân cấp chế độ xem của nút chụp của chúng tôi, có một yếu tố đóng vai trò là canvas mà màu sắc lựa chọn làm nổi bật (nếu có là một lựa chọn đang hoạt động) được vẽ.

Nếu bạn có một tùy chỉnh tương tự View trong bố cục của mình, bạn có thể sao chép hành vi này như vậy. Trước tiên, bạn sẽ cần số Path xác định lựa chọn cho một phân khúc vòng kết nối cụ thể. Sử dụng Path.addArc(RectF, float, float) chúng ta có thể có được con đường bánh pizza-lát hình chúng ta cần:

private Path getPathForSegment(float startAngle, float sweep) { 
    Point center = new Point(getWidth()/2, getHeight()/2); 
    RectF rect = new RectF(0f, 0f, getWidth(), getHeight()); 
    Path selection = new Path(); 
    selection.addArc(rect, startAngle, sweep); 
    selection.lineTo(center.x, center.y); 
    selection.close(); 
    return selection; 
} 

Các getWidth() và getHeight() trên dành cho các kèm theo đối tượng giao diện tùy chỉnh, do đó họ xác định khung giới hạn có chứa các vòng tròn trên đó các lựa chọn là được vẽ.

Sau đó, trong tùy chỉnh quan điểm của onDraw(Canvas) của bạn, nếu mã của bạn đã xác định một lựa chọn nên được rút ra cho một phân đoạn:

@Override 
protected void onDraw(Canvas canvas) { 
    // Assume one has the rest of these simple helper functions defined 
    if (shouldDrawSelection()) { 
     float startAngle = getStartAngleOfSelectedSegment(); 
     float sweep = getSweepAngle(); 
     Paint paint = getPaintStyleForSelectedSegment(); 
     Path path = getPathForSegment(startAngle, sweep); 
     canvas.drawPath(path, paint); 
    } 

    // ... 

    super.onDraw(canvas); 
} 

Tại các khu vực khác của mã của bạn đang theo dõi chạm, chỉ cần gọi invalidate() trên chế độ xem tùy chỉnh sao cho nó sẽ vẽ lại (hoặc không) đường dẫn lựa chọn dựa trên các thay đổi trong đầu vào hoặc trạng thái.

Hãy nhớ rằng đó là thực hành tốt để tránh new đối tượng ing trong onDraw(), vì vậy hầu hết các khối xây dựng (Path s, Paint s, vv) có thể được xây dựng trước thời hạn (hoặc một lần, trên xuất hiện đầu tiên) và tái sử dụng.

Hy vọng điều này gần với những gì bạn đang yêu cầu!