首页 > 解决方案 > 按钮 3 可旋转的圆形按钮

问题描述

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

我希望在一个圆圈中制作 3 个按钮,一个在另一个里面(见图)

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

但目前我已经阻止了 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个“独立”环,我可以分别旋转每个环。

3个按钮圈

编辑2:区域单击 在此处输入图像描述 按钮显示为圆形->确定

但是点击区域的形状仍然是正方形。就我而言,我需要精确,当用户单击按钮 2 时,我无法应用按钮 1 的侦听器。

如果我可以理解的话,不知道……如果不是,请说。

标签: androidbuttonshapes

解决方案


编辑- 重新设计的形状代码

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

    }
}

结果是 在此处输入图像描述


推荐阅读