2013-01-05 7 views
13

私は、円の周りに一連のビューをレイアウトする方法を理解しようとしています。つまり、各ビューが円から外側に向かって回転するようにします。下の写真は私が探しているものの大まかなスケッチです。外側のブロックはレイアウト/ビューグループ、赤い四角は回転したいビューを表します。Androidレイアウトビューは回転して円の周りに配置されていますか?

Rough Sketch of what I want to do

は私がPivotX、Pivo​​tY、および回転ビューのプロパティに精通していると私はいくつかの方法で、これらの使用を作ることになります疑いがあるが、私はと協調してこれらを使用するかどうかはわかりません所望の効果を得るための適切なレイアウト。

答えて

24

これはこれを行う例です。私は新しいAndroidプロジェクトを作成し、既にあるRelativeLayoutFrameLayoutに置き換えました。それが唯一の理由Viewで翻訳し、回転のコール> = API 11です:

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

私はちょうどあなたが持っているものは何でも景色と交換し、コード内でいくつかの簡単なビューを作成します。 の重力をGravity.CENTERに設定してレイアウトの中心に配置します。その後、私は翻訳とその正しい位置にそれらを回転させています:

@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); 
    } 
} 

そして、これが結果です:

Image of 8 views in a circle

+1

と呼ばれます – Naruto

+0

@ Daniel Johansson:TextViewの代わりにButtonを使用しました。私はあなたのコードに関する問題をhttp://stackoverflow.com/questions/39489343/how-to-detect-a-button-in-framelayout-when-swipe-buttons – Jame

+0

に掲載しました。これは非常に役に立ちました、ありがとう! – mmmyum

1

@Danielによって答えは素晴らしいです。

あなたはより多くの機能が必要な場合は、GitHubの上で、この素敵なライブラリを使用することができますが、私はDP内のすべてのハードコードされた値を与えているが、それでも円がデバイス上で同じではありません@daniel Android-CircleMenu

enter image description here

関連する問題