按钮 3个可旋转的圆形按钮

Question

我研究 Android 问题已有一段时间了。我在互联网上没有找到任何可以推进这个问题的东西...

我想制作一个圆圈内的 3 个按钮（见图）

最后objective是我可以在每个按钮中插入一个图像，当我点击一个按钮时，后者会围绕中心点旋转。

但目前我已经阻止了 3 个按钮的创建。我测试了这个：

<shape
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:innerRadiusRatio="20"
 android:shape="ring"
 android:thicknessRatio="0"
 android:useLevel="false">
 <solid android:color="@android:color/holo_green_dark"/>
</shape>

但是： 1.点击总是在最后一个有意义的按钮上...... 2. 我不知道如何在这里添加图片

我也尝试过在Paint中画出3个圆圈，然后将它们用作不同高度的背景按钮。它可以工作，但按钮的形状仍然是一个矩形。所以没有优化。

有人有解决办法吗？我知道这是可能的，因为我在不同的应用程序中看到过。我只是不知道如何意识到...

提前致谢

编辑：我想要那样的东西。 X "independant" 个环，我可以单独旋转每个环。

编辑 2：区域点击按钮显示为一个圆圈 --> OK

但是点击区域的形状还是正方形。在我的情况下，我需要精确度，当用户单击按钮 2 时，我无法应用按钮 1 的侦听器。

不知道我是否理解...如果不理解请说。

Answer 1

编辑 - 重写形状代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="100dp" />
    <stroke
        android:width="3dp"
        android:color="#808080" />
    <solid android:color="@color/colorPrimaryDark" />
</shape>

将其设置为按钮的背景并为按钮添加手动高度和宽度。您的按钮将会出现。

编辑
使用 Framelayout 将您的按钮相互叠加。根据您的喜好更改按钮的大小。单击按钮时动画按钮（旋转）。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="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=".MainActivity">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginBottom="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <Button
            android:id="@+id/button"
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:layout_gravity="center"
            android:background="@drawable/oval_green"
            android:text="Button" />

        <Button
            android:id="@+id/button1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="@drawable/oval_blue"
            android:text="Button" />
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

按钮在 FrameLayout 下。现在将代码附加到它们并进行测试。两个按钮都工作正常。我希望这能让你走上正确的道路。

编辑 - 使用 ImageView 确保将图像切割成适当的部分。
你的 layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="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=".MainActivity">

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginBottom="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/ivLarge"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:focusableInTouchMode="false"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/large" />

        <ImageView
            android:id="@+id/ivMedium"
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:layout_gravity="center"
            android:focusableInTouchMode="false"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/medium" />

        <ImageView
            android:id="@+id/ivSmall"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:focusableInTouchMode="false"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/small" />
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

你的MainActivity.java

package com.auvitronics.testing;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity
{

    public static final String TAG = "TransparentButton";

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

        final ImageView ivLarge = findViewById(R.id.ivLarge);
        final ImageView ivMedium = findViewById(R.id.ivMedium);
        ImageView ivSmall = findViewById(R.id.ivSmall);

        ivLarge.setDrawingCacheEnabled(true);
        ivMedium.setDrawingCacheEnabled(true);
        ivSmall.setDrawingCacheEnabled(true);

        ivLarge.setOnTouchListener(new View.OnTouchListener()
        {

            @Override
            public boolean onTouch(View view, MotionEvent event)
            {

                Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
                int pixel = bitmap.getPixel((int) event.getX(),(int) event.getY());

                if (pixel == Color.TRANSPARENT)
                {
                    System.out.println("Large Transparent Color");
                    return false;
                }else {
                    view.setRotation(view.getRotation() + 90);
                    System.out.println("Large Colored Area");
                    return true;
                }
            }
        });

        ivMedium.setOnTouchListener(new View.OnTouchListener()
        {

            @Override
            public boolean onTouch(View view, MotionEvent event)
            {

                Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
                int pixel = bitmap.getPixel((int) event.getX(),(int) event.getY());

                if (pixel == Color.TRANSPARENT)
                {
                    System.out.println("Medium Transparent Color");
                    return false;
                }else {
                    view.setRotation(view.getRotation() - 90);
                    System.out.println("Medium Colored Area");
                    return true;
                }
            }
        });

        ivSmall.setOnTouchListener(new View.OnTouchListener()
        {
            @Override
            public boolean onTouch(View view, MotionEvent event)
            {
                Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
                int pixel = bitmap.getPixel((int) event.getX(),(int) event.getY());

                if (pixel == Color.TRANSPARENT)
                {
                    System.out.println("Small Transparent Color");
                    return false;
                }else {
                    view.setRotation(view.getRotation() + 45);
                    System.out.println("Small Colored Area");
                    return true;
                }
            }
        });

    }
}

结果是

按钮 3个可旋转的圆形按钮

Button 3 circle button that can rotate

android

button

shapes