creando una vista Circular en android

Question

Estoy tratando de crear una vista donde los iconos se colocan en la vista circular en lugar de la vista existente como una cuadrícula o la vista de la galería. Intenté con el ejemplo de Carrusel pero luego descubrí que no cumpliría con mis requisitos porque es una aplicación 3D, pero estoy buscando una Vista 2D. Android 3D Carousel

Este es el ejemplo que estaba siguiendo. Pude obtener el tipo circular de cosas, pero para cumplir con mi requisito, debería seguir con 2D.

Mi único requisito más importante es vista interior circular también debo tener otra vista circular, algo así como debajo de la cifra

¿Puede alguien ayudarme en esto?

Answer 1

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

Suponiendo desea que la vista circular centrado en (x,y) y el radio r tener n artículos, 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 

Answer 2

Para la disposición de cada círculo que sugieren this answer a cuestionar diseño con botones en un círculo porque define las posiciones de sus artículos en relación con el centro del RelativeLayout que lo envuelve, independientemente de su tamaño. A continuación, puede superponer los dos diseños círculo así:

<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 siguiente this answer a cuestionar ** Girar vista de jerarquía de 90 grados"

Answer 3

usted está probablemente va a. desea crear su propio diseño CircularLayout para manejar el posicionamiento de los artículos. Consulte http://developer.android.com/guide/topics/ui/custom-components.html, especialmente la sección "Controles compuestos"

Personalmente, preferiría escribir un diseño único que maneje tanto el círculo interno como el externo en lugar de meterse con intentar escribir ite un diseño que manejaría correctamente el anidamiento de otro diseño personalizado. El caso que describió no parece demasiado complicado para esto.

Answer 4

Utilice el siguiente código XML para organizar los botones en el 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> 

Answer 5

Estoy un poco tarde para responder a esto, pero para cualquiera que todavía se enfrenta a este problema, echar un vistazo a esta Biblioteca:

https://github.com/sababado/CircularView

Editar:

configuración rápida

Adición de la vista a un diseño de

<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 "Agregar marcadores

Un marcador es un objeto que "flota" visual alrededor de la vista. Cada marcador puede representar datos o simplemente puede ser para efectos visuales. Los marcadores se deben personalizar a través de un adaptador CircularView.

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 clics se pueden recibir de CircularView.

Para recibir eventos de clic configure 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 incorporados en la biblioteca en el momento .

Animate destacado Grado

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

Un detector se puede configurar para recibir una devolución de llamada cuando finaliza esta animación, 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; arriba y abajo. Es puede repetir o puede suceder una vez.El CircularView puede activar la animación de rebote cuando se invoca animateHighlightedDegree (inicio, fin, duración) . La animación de rebote se puede desactivar llamando al mismo método con un indicador adicional. Por ejemplo:

animateHighlightedDegree (inicio, final, duración, shouldAnimateMarkers) Además hay control sobre si un marcador debe rebotar mientras se resalta y mientras que el valor en grados resaltado es constante (también conocido como no la animación).

// Permitir que los marcadores se activen de forma continua cuando la animación de resaltado no se está ejecutando. circularView.setAnimateMarkerOnStillHighlight (true); // Combina la línea anterior con lo siguiente para que el marcador en su posición sea animado 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 en . El grado resaltado está establecido en CircularView.HIGHLIGHT_NONE de manera predeterminada.

Proguard

Si se utiliza Proguard añada lo siguiente a su script Proguard para hacer animaciones seguro corren

# 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 

Cada propiedad que puede ser personalizado en un CircularViewObject también se puede personalizar en una Objeto marcador Un objeto Marker se extiende desde un CircularViewObject. El primero se usa como un objeto más pequeño que flota alrededor del objeto central. El objeto central es un 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 será parcialmente cubierto por el siguiente marcador. Se puede establecer una opción para dibujar el marcador resaltado encima de los marcadores junto a él con circularView.setDrawHighlightedMarkerOnTop (true) ;. La bandera es falsa por defecto. Cualquier CircularViewObject puede ocultarse y mostrarse independientemente de otros objetos usando setVisibility (int) En un editor de diseño use el atributo editMode_markerCount y editMode_markerRadius para ver el tamaño y el diseño de los marcadores. No que suministra un radio mostrará el radio predeterminado. Hace exactamente lo que se pide en la pregunta.

Espero que esto ayude.