在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提问**旋转视图层次结构90度“。

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：应用=＆＃34; HTTP：//schemas.android.com/apk/res-auto"添加标记

     

标记是视觉＆＃34;浮动＆＃34;在视图周围。每   标记可以代表数据，也可以简单地用于视觉效果。   必须通过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（1）。   例如：

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（开始，结束，持续时间）。   该方法采用度数开始和结束位置，以及长值   在动画的持续时间。突出程度指的是   哪个学位是＃34;突出显示＆＃34;或者＆＃34;专注＆＃34;。当学位集中时   它可以自动为标记触发辅助动画。

     

可以将侦听器设置为在此动画结束时接收回调，   以及它停在什么对象上。

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（start，end，duration，shouldAnimateMarkers）   此外，还可以控制标记是否应该反弹   突出显示，突出显示的度数值是常量（aka   没有动画）。

     

//允许标记在自己的时候连续动画   突出显示动画没有运行。       circularView.setAnimateMarkerOnStillHighlight（真）; //结合   在上面的行以下，以便标记在它的位置   一开始就有动画。       circularView.setHighlightedDegree（circularView.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对象上自定义。标记对象从a扩展   CircularViewObject。前者用作漂浮的较小物体   围绕中心物体。中心对象是CircularViewObject。   默认情况下，标记按照它们创建的顺序绘制;   意思是如果标记重叠则第一个标记将是部分标记   由下一个标记覆盖。可以设置一个选项来绘制   突出显示标记在它旁边的标记上   circularView.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>