2013-01-05 12 views
13

Sto cercando un modo per impaginare una serie di viste attorno a un cerchio, in modo tale che ciascuna vista sia ruotata per essere rivolta verso l'esterno dal cerchio. L'immagine qui sotto è uno schizzo approssimativo di ciò che sto cercando. Il blocco esterno è il layout/viewgroup, i quadrati rossi rappresentano le viste che voglio ruotare.Viste di layout Android ruotate e distanziate attorno a un cerchio?

Rough Sketch of what I want to do

ho familiarità con le proprietà della vista PivotX, PivotY e rotazione e sospettano Sarò fare uso di questi in qualche modo, ma non sono sicuro di come utilizzare questi in concerto con una layout appropriato per ottenere l'effetto desiderato.

risposta

24

Ecco un esempio che fa questo. Ho creato un nuovo progetto Android e sostituito lo RelativeLayout già presente, con uno FrameLayout. E '> = 11 API solo per chiamate tradurre e ruotare in View:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity" > 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:text="@string/hello_world" /> 
</FrameLayout> 

creerò alcuni punti di vista rapidi nel codice, basta sostituirli con qualsiasi vista che avete. Li sto posizionando tutti al centro del layout, impostando la gravità del loro LayoutParams su Gravity.CENTER. Poi, sto traducendo e ruotandole alle loro posizioni corrette:

@Override 
protected void onCreate(Bundle savedInstanceState) 
{ 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    final FrameLayout main = (FrameLayout)findViewById(R.id.main); 

    int numViews = 8; 
    for(int i = 0; i < numViews; i++) 
    { 
     // Create some quick TextViews that can be placed. 
     TextView v = new TextView(this); 
     // Set a text and center it in each view. 
     v.setText("View " + i); 
     v.setGravity(Gravity.CENTER); 
     v.setBackgroundColor(0xffff0000); 
     // Force the views to a nice size (150x100 px) that fits my display. 
     // This should of course be done in a display size independent way. 
     FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(150, 100); 
     // Place all views in the center of the layout. We'll transform them 
     // away from there in the code below. 
     lp.gravity = Gravity.CENTER; 
     // Set layout params on view. 
     v.setLayoutParams(lp); 

     // Calculate the angle of the current view. Adjust by 90 degrees to 
     // get View 0 at the top. We need the angle in degrees and radians. 
     float angleDeg = i * 360.0f/numViews - 90.0f; 
     float angleRad = (float)(angleDeg * Math.PI/180.0f); 
     // Calculate the position of the view, offset from center (300 px from 
     // center). Again, this should be done in a display size independent way. 
     v.setTranslationX(300 * (float)Math.cos(angleRad)); 
     v.setTranslationY(300 * (float)Math.sin(angleRad)); 
     // Set the rotation of the view. 
     v.setRotation(angleDeg + 90.0f); 
     main.addView(v); 
    } 
} 

E questo è il risultato:

Image of 8 views in a circle

+1

@ Daniel ho dato tutti i valori hardcoded in DP, ma ancora il cerchio non è la stessa su dispositivi con diverse dimensioni e risoluzioni – Naruto

+0

@ Daniel Johansson: invece di TextView, ho usato Button. Ho un problema con il tuo codice all'indirizzo http://stackoverflow.com/questions/39489343/how-to-detect-a-button-in-framelayout-when-swipe-buttons – Jame

+0

Questo è stato molto utile, grazie! – mmmyum

1

La risposta da @ Daniel è grande.

Se avete bisogno di più funzionalità è possibile utilizzare questo bella libreria su GitHub chiamato Android-CircleMenu

enter image description here

Problemi correlati