Android Layout 视图围绕一个圆圈旋转和间隔? [英] Android Layout views rotated and spaced around a circle?

问题描述

我正在尝试找出一种方法来围绕一个圆圈布置一系列视图，以使每个视图都旋转为从圆圈向外.下面的图片是我正在寻找的粗略草图.外面的块是布局/视图组，红色方块代表我要旋转的视图.

I'm trying to figure out a way to layout a series of views around a circle, in such a way that each view is rotated to be facing outward from the circle. The picture below is a rough sketch of what I'm looking for. The outside block is the layout/viewgroup, the red squares represent the views I want to rotate.

我熟悉 PivotX、Pivo​​tY 和 Rotation 视图属性，并怀疑我会以某种方式使用这些属性，但我不确定如何将它们与适当的布局结合使用以获得所需的效果.

I'm familiar with the PivotX, PivotY, and Rotation view properties and suspect I will be making use of these in some way, but I'm not sure how to use these in concert with an appropriate layout to get the desired effect.

推荐答案

这里有一个例子.我创建了一个新的 Android 项目并将已有的 RelativeLayout 替换为 FrameLayout.它 >= API 11 只是因为 View 中的 translate 和 rotate 调用:

Here's an example that does this. I created a new Android project and replaced the RelativeLayout that's already there, with a FrameLayout. It's >= API 11 only because of translate and rotate calls 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>

我将在代码中创建一些快速视图，只需将它们替换为您拥有的任何视图即可.通过将它们的 LayoutParams 的重力设置为 Gravity.CENTER，我将它们全部放置在布局的中心.然后，我将它们翻译并旋转到正确的位置:

I'll create some quick views in code, just replace them with whatever views you have. I'm placing them all in the center of the layout, by setting the gravity of their LayoutParams to Gravity.CENTER. Then, I'm translating and rotating them to their correct positions:

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

结果如下:

这篇关于Android Layout 视图围绕一个圆圈旋转和间隔?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！