【问题标题】:Android Layout views rotated and spaced around a circle?Android 布局视图围绕一个圆圈旋转和间隔?
【发布时间】:2013-01-05 15:00:12
【问题描述】:

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

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

【问题讨论】:

    标签: android layout graphics rotation


    【解决方案1】:

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

    <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,我将它们全部放置在布局的中心。然后,我将它们翻译并旋转到正确的位置:

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

    结果如下:

    【讨论】:

    • @daniel 我已经给出了 DP 中的所有硬编码值,但在具有不同尺寸和分辨率的设备上,圆圈仍然不一样
    • @Daniel Johansson:我没有使用 TextView,而是使用了 Button。我在stackoverflow.com/questions/39489343/… 对您的代码有疑问
    【解决方案2】:

    @Daniel 的回答很棒。

    如果您需要更多功能,可以使用 GitHub 上名为 Android-CircleMenu

    的漂亮库

    【讨论】:

      猜你喜欢
      • 2019-04-25
      • 2011-10-13
      • 2019-03-03
      • 2021-07-30
      • 1970-01-01
      • 2020-10-02
      • 2018-07-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多