在android中创建一个圆形视图

Question

我正在尝试创建一个视图，其中图标放置在圆形视图中，而不是像网格或画廊视图这样的现有视图。我尝试使用 Carousel 示例，但后来发现它不符合我的要求，因为它的 3D 应用程序，但我正在寻找 2D 视图。Android 3D Carousel

这是我遵循的示例。我能够得到圆形的东西，但为了满足我的要求，我应该坚持使用 2D。

我的另一个主要要求是在圆形视图中我还必须有另一个圆形视图，如下图

谁能帮我解决这个问题？

Answer 1

对于每个圆圈的布局，我建议this answer 质疑圆圈中的按钮布局，因为它定义了相对于封闭RelativeLayout 中心的项目位置，而不管其大小。然后，您可以叠加两个圆形布局：

<RelativeLayout ...>
    <RelativeLayout // outer circle
        android:layout_alignParentCenter>
        ...
    </RelativeLayout>
    <RelativeLayout // inner circle
        android:layout_alignParentCenter>
        ...
    </RelativeLayout>
</RelativeLayout>

要独立旋转每个圆圈，我建议关注this answer 来提问**Rotate View Hierarchy 90 Degrees”。

Answer 2

如果您不是在寻找动画圆形视图，您可以使用绝对布局，并使用算法在代码中定位它们，以检查各种 (x, y) 位置是否落在圆的圆周上。

假设您希望以(x,y) 和半径r 为中心的圆形视图具有n 项，那么坐标将为：

(x + r, y) // for the first element
....
(x + (r * (FloatMath.cos((p-1) * 2 * Math.PI / n))), y - (r * (FloatMath.sin((p-1) * 2 * Math.PI / n)))) // for the 'p'th element

Answer 3

我回答这个问题有点晚了，但是对于仍然面临这个问题的任何人，请看看这个库：

https://github.com/sababado/CircularView

编辑：

快速设置

将视图添加到布局中

<com.sababado.circularview.CircularView
android:id="@+id/circular_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:centerBackgroundColor="#33b5e5"
app:centerDrawable="@drawable/center_bg"/> Using the custom attributes requires the following in the layout file. Example

xmlns:app="http://schemas.android.com/apk/res-auto" 添加标记

标记是在视图周围视觉“浮动”的对象。每个 标记可以表示数据，也可以简单地用于视觉效果。 标记必须通过 CircularViewAdapter 进行自定义。

public class MySimpleCircularViewAdapter extends
SimpleCircularViewAdapter {
@Override
public int getCount() {
    // This count will tell the circular view how many markers to use.
    return 20;
}

@Override
public void setupMarker(final int position, final Marker marker) {
    // Setup and customize markers here. This is called every time a marker is to be displayed.
    // 0 >= position > getCount()
    // The marker is intended to be reused. It will never be null.
    marker.setSrc(R.drawable.ic_launcher);
    marker.setFitToCircle(true);
    marker.setRadius(10 + 2 * position);
} } 

一旦 CircularViewAdapter 实现准备就绪，就可以在 CircularView 对象上进行设置。

mAdapter = new MySimpleCircularViewAdapter(); circularView =
(CircularView) findViewById(R.id.circular_view);
circularView.setAdapter(mAdapter); Receiving click listeners

可以从 CircularView 接收点击事件。

要接收点击事件，请将 CircularView.OnClickListener 设置为 circularView.setOnCircularViewObjectClickListener(l)。 例如：

circularView.setOnCircularViewObjectClickListener(new
CircularView.OnClickListener() {
 public void onClick(final CircularView view) {
    Toast.makeText(MainActivity.this, "Clicked center", Toast.LENGTH_SHORT).show();
}

public void onMarkerClick(CircularView view, Marker marker, int position) {
    Toast.makeText(MainActivity.this, "Clicked " + marker.getId(), Toast.LENGTH_SHORT).show();
} }); Animation

在库中内置了一些简单的动画 时刻。

动画高亮度数

CircularView 有 animateHighlightedDegree(start, end, duration)。 该方法采用以度为单位的开始和结束位置，以及一个长值 在动画期间。突出显示的程度是指 哪个程度是“突出”或“重点”。当学位集中 它可以为 Marker 自动触发辅助动画。

可以设置监听器在动画结束时接收回调， 以及它停在什么物体上。

circularView.setOnHighlightAnimationEndListener(new
CircularView.OnHighlightAnimationEndListener() {
@Override
public void onHighlightAnimationEnd(CircularView view, Marker marker, int position) {
    Toast.makeText(MainActivity.this, "Spin ends on " + marker.getId(), Toast.LENGTH_SHORT).show();
} }); Marker Animation Options

标记有一个与之相关的简单动画；上和下。它 可以重复，也可以发生一次。 CircularView 可以触发 animateHighlightedDegree（开始，结束，持续时间）时弹跳动画 叫做。可以通过调用相同的方法来关闭弹跳动画 带有附加标志的方法。例如：

animateHighlightedDegree(开始、结束、持续时间、应该动画标记) 此外，还可以控制标记是否应该在标记时反弹 突出显示，而突出显示的度值是恒定的（又名 没有动画）。

// 允许标记在 高亮动画未运行。 circularView.setAnimateMarkerOnStillHighlight(true); // 结合 上面带有以下内容，以便其位置的标记将 动画在开始。 圆形视图.setHighlightedDegree（圆形视图.BOTTOM）；后者 线是必要的，以防反弹动画也应该运行 原来。突出显示的度数设置为 CircularView.HIGHLIGHT_NONE 默认情况下。

Proguard

如果使用 proguard，请将以下内容添加到您的 proguard 脚本中 确保动画运行

# keep setters in Views so that animations can still work.
# see http://proguard.sourceforge.net/manual/examples.html#beans
-keepclassmembers public class * extends android.view.View {    void set*(***);    *** get*(); }
# keep setters in CircularViewObjects so that animations can still work.
-keepclassmembers public class * extends com.sababado.circularview.CircularViewObject {    void set*(***);   
*** get*(); } Developer Hints

可以在 CircularViewObject 上自定义的每个属性也可以 在 Marker 对象上进行自定义。一个 Marker 对象从一个 圆形视图对象。前者用作漂浮的较小物体 围绕中心物体。中心对象是一个 CircularViewObject。 默认情况下，标记是按照它们创建的顺序绘制的； 意思是如果标记重叠，那么第一个标记将部分 被下一个标记覆盖。可以设置一个选项来绘制 在它旁边的标记顶部突出显示标记 圆形视图.setDrawHighlightedMarkerOnTop（真）；。标志是假的 默认。任何 CircularViewObject 都可以隐藏和显示 在布局中使用 setVisibility(int) 独立于其他对象 编辑器使用属性 editMode_markerCount 和 editMode_markerRadius 查看标记的大小和布局。不是 提供半径将显示默认半径。它究竟做了什么 在问题中提出。

我希望这会有所帮助。

Answer 4

您可能想要创建自己的布局CircularLayout 来处理项目的定位。看看http://developer.android.com/guide/topics/ui/custom-components.html，尤其是“复合控件”部分。

就个人而言，我更喜欢编写一个同时处理内圈和外圈的布局，而不是试图编写一个能够正确处理另一个自定义布局的嵌套的布局。您所描述的案例似乎并不过分复杂。

Answer 5

使用以下 XML 代码按循环顺序排列按钮：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".RoundBtn" >

<Button
    android:id="@+id/button1"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="222.08203dp"
    android:layout_marginTop="270.53426dp"

    android:text="1" />

<Button
    android:id="@+id/button2"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="162.08203dp"
    android:layout_marginTop="314.12678dp"

    android:text="2" />
<Button
    android:id="@+id/button3"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="87.917960dp"
    android:layout_marginTop="314.12678dp"

    android:text="3" />
<Button
    android:id="@+id/button4"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="27.917960dp"
    android:layout_marginTop="270.53423dp"

    android:text="4" />


<Button
    android:id="@+id/button5"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="5.0dp"
    android:layout_marginTop="200.00000dp"

    android:text="5" />
<Button
    android:id="@+id/button6"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="27.917960dp"
    android:layout_marginTop="129.46576dp"

    android:text="6" />
<Button
    android:id="@+id/button7"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="87.917960dp"
    android:layout_marginTop="85.873218dp"

    android:text="7" />

<Button
    android:id="@+id/button8"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="162.08203dp"
    android:layout_marginTop="85.873218dp"

    android:text="8" />
<Button
    android:id="@+id/button9"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="222.08203dp"
    android:layout_marginTop="129.46576dp"

    android:text="9" />
<Button
    android:id="@+id/button10"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_marginLeft="245.0dp"
    android:layout_marginTop="199.99999dp"

    android:text="0" />


</RelativeLayout>