在circularMenu中添加圆形ImageView

Question

我想在 ciruclarMenu https://i.stack.imgur.com/MPXAA.png 中间添加圆形图像视图。这是 xml 代码：

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

            xmlns:circle="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".SampleActivity" >

            <com.example.logan.rotatingwheelcontrol.CircleLayout
                android:id="@+id/circle_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@+id/selected_textView"
                android:layout_gravity="center_horizontal" >

                <include layout="@layout/menu_items" />
            </com.example.logan.rotatingwheelcontrol.CircleLayout>

            <TextView
                android:id="@+id/selected_textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="50dp"
                android:textAppearance="?android:attr/textAppearanceLarge" />

        </RelativeLayout>

这里是 menu_items 代码：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:circle="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_calendar_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:src="@drawable/ic_calendar"
        circle:name="@string/calendar" />

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_cloud_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:src="@drawable/ic_cloud"
        circle:name="@string/cloud" />


    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_mail_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:src="@drawable/ic_mail"
        circle:name="@string/mail" />

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_key_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:src="@drawable/ic_key"
        circle:name="@string/key" />

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_profile_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:src="@drawable/ic_profile"
        circle:name="@string/profile" />

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_tap_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:src="@drawable/ic_tag"
        circle:name="@string/tag" />

</merge> 

我正在使用这个存储库来制作循环菜单“https://github.com/szugyi/Android-CircleMenu” 我需要在上面的代码中进行哪些更改才能做到这一点。 我是 android 新手，如有任何帮助，将不胜感激。

谢谢

Answer 1

这可以通过一个技巧来完成。只需通过将其与放置 CircleLayout 的相同位置对齐来为您的 xml 添加一个额外的相对布局。然后在这个相对布局的中心添加圆形图像视图。

通过此更改，您的 XML 布局将如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:circle="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SampleActivity">

<com.example.logan.rotatingwheelcontrol.CircleLayout
    android:id="@+id/circle_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/selected_textView"
    android:layout_gravity="center_horizontal" >

    <include layout="@layout/menu_items" />
</com.example.logan.rotatingwheelcontrol.CircleLayout>

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/circle_layout"
    android:layout_alignLeft="@id/circle_layout"
    android:layout_alignRight="@id/circle_layout"
    android:layout_alignTop="@id/circle_layout">

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/center_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:layout_centerInParent="true"
        android:elevation="2dp"
        android:src="@drawable/ic_cloud" />

</RelativeLayout>

<TextView
    android:id="@+id/selected_textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="50dp"
    android:textAppearance="?android:attr/textAppearanceLarge" />

要监听中心图片的点击事件，需要在activity中添加如下代码。

CircleImageView centerImageView = (CircleImageView) findViewById(R.id.center_image);
    centerImageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "Center Image View Clicked", Toast.LENGTH_SHORT).show();
        }
    });