Crear una vista circular en android

Para la disposición de cada círculo sugiero esta respuesta a la disposición de la pregunta con los botones en un círculo porque define sus posiciones del artículo con respecto al centro de la RelativeLayout encerrando sin importar su tamaño. A continuación, puede superponer los dos diseños de círculos de la siguiente manera:

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

Para girar cada uno de los círculos de forma independiente, sugiero seguir esta respuesta a la pregunta ** Rotación Ver Jerarquía 90 grados ".

Si no está buscando una vista circular animada, puede usar el diseño absoluto y colocarlos en código usando un algoritmo para comprobar si las distintas posiciones (x, y) caen en la circunferencia de un círculo.

Suponiendo que desea que la vista circular centrada en (x,y) y el radio r tenga n elementos, entonces las coordenadas serían:

 (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 

Estoy un poco tarde para responder a esto, pero para cualquiera que todavía se enfrenta a este problema, por favor, eche un vistazo a esta biblioteca:

https://github.com/sababado/CircularView

Editar:

Configuración rápida

Adición de la vista a un diseño

 <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" Adición de marcadores

Un Marcador es un objeto que visual "flota" alrededor de la vista. Cada marcador es puede representar datos o puede ser simplemente para el efecto visual. Los marcadores deben personalizarse a través de un 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); } } 

Una vez que la implementación de CircularViewAdapter esté lista, se puede establecer en un objeto CircularView.

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

Los eventos de clic se pueden recibir desde CircularView.

Para recibir eventos de clic, establezca un CircularView.OnClickListener en circularView.setOnCircularViewObjectClickListener (l). Por ejemplo:

 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 

Hay algunas animaciones simples incorporadas en la biblioteca en este momento.

Animate Highlighted Degree

El CircularView tiene animateHighlightedDegree (inicio, fin, duración). El método toma una posición inicial y final en grados, y un valor largo para la duración de la animación. El grado resaltado se refiere a qué grado está "resaltado" o "enfocado". Cuando se enfoca un grado, puede activar automáticamente una animación secundaria para un Marcador.

Un oyente puede ser configurado para recibir una devolución de llamada cuando esta animación termina y en qué objeto se detuvo.

 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 

Los marcadores tienen una animación simple asociada con ellos; arriba y abajo. Puede repetirse o puede suceder una vez. El CircularView puede activar la animación de rebote cuando se llama animateHighlightedDegree (inicio, fin, duración). La animación de rebote se puede desactivar llamando al mismo método con un indicador adicional. Por ejemplo:

Además, hay control sobre si un marcador debe rebotar mientras se resalta y mientras el valor de grado resaltado es constante (aka no animar).

// Permite que los marcadores se animen continuamente por sí mismos cuando la animación de resaltado no se está ejecutando. CircularView.setAnimateMarkerOnStillHighlight (true); // Combine la línea anterior con la siguiente para que el marcador en su posición se animará al inicio. CircularView.setHighlightedDegree (circularView.BOTTOM); La última línea es necesaria en caso de que la animación de rebote también se ejecute inicialmente. El grado resaltado se establece en CircularView.HIGHLIGHT_NONE de forma predeterminada.

Proguard

Si utiliza proguard, añada lo siguiente a su script proguard para asegurarse de que las animaciones se ejecutan

 # 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 

Todas las propiedades que se pueden personalizar en un objeto CircularViewObject también se pueden personalizar en un objeto Marcador. Un objeto Marcador se extiende desde un objeto CircularViewObject. El primero se utiliza como un objeto más pequeño que flota alrededor del objeto central. El objeto central es un objeto CircularViewObject. De forma predeterminada, los marcadores se dibujan en el orden en que se crean; Lo que significa que si los marcadores se superponen, el primer marcador estará parcialmente cubierto por el siguiente marcador. Se puede establecer una opción para dibujar el marcador resaltado en la parte superior de los marcadores junto a él con circularView.setDrawHighlightedMarkerOnTop (true) ;. El indicador es falso por defecto. Cualquier objeto CircularViewObject se puede ocultar y mostrar independientemente de otros objetos usando setVisibility (int). En un editor de planos, utilice el atributo editMode_markerCount y editMode_markerRadius para ver el tamaño y el diseño de los marcadores. Si no proporciona un radio, aparecerá el radio predeterminado. Hace exactamente lo que se pregunta en Pregunta.

Espero que esto ayude.

Probablemente va a querer crear su propio diseño CircularLayout para manejar el posicionamiento de los elementos. Echa un vistazo a http://developer.android.com/guide/topics/ui/custom-components.html , especialmente la sección "Controles compuestos".

Personalmente, prefiero escribir un solo diseño que maneja el círculo interno y externo en lugar de jugar con intentar escribir un diseño que manejaría correctamente el anidamiento de otro diseño personalizado. El caso que usted ha descrito no parece demasiado complicado para esto.

Utilice el siguiente código XML para organizar los botones en orden circular:

 <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>