Android：切换按钮以使按钮单击动画？

Question

当您单击切换按钮上的按钮时，我想复制相同的动画。比如该区域变成灰色，中间有一个较深的灰色圆圈等。

目前，切换按钮在单击时不执行任何操作，除了更改文本（我希望它这样做）。

在布局中，我将顶部文本视图用作占位符，以检查下面的切换按钮是否与它相同。

是否可以复制按钮点击动画？

这里是Java代码：

package com.example.testttsactivity;
import android.os.Build;
import android.speech.tts.TextToSpeech;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;
import android.widget.ToggleButton;

import androidx.appcompat.app.AppCompatActivity;

import java.util.Locale;

public class MainActivity extends AppCompatActivity implements TextToSpeech.OnInitListener {
    TextView speakText;
    TextToSpeech textToSpeech;
    ToggleButton toggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        speakText = findViewById(R.id.txtToSay);
        toggle = findViewById(R.id.toggleButton);
        textToSpeech = new TextToSpeech(this, this);

        toggle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (toggle.isChecked()){
                    textToSpeak();
                } else {
                    silence();
                }
            }
        });
    }
    @Override
    public void onInit(int status) {
        if (status == TextToSpeech.SUCCESS) {
            int result = textToSpeech.setLanguage(Locale.US);
            if (result == TextToSpeech.LANG_MISSING_DATA || result == TextToSpeech.LANG_NOT_SUPPORTED) {
                Log.e("error", "This Language is not supported");
            }
        } else {
            Log.e("error", "Failed to Initialize");
        }
    }
    @Override
    public void onDestroy() {
        if (textToSpeech != null) {
            textToSpeech.stop();
            textToSpeech.shutdown();
        }
        super.onDestroy();
    }
    private void textToSpeak() {
        String text = speakText.getText().toString();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            textToSpeech.speak(text, TextToSpeech.QUEUE_FLUSH, null, null);
        }
        else {
            textToSpeech.speak(text, TextToSpeech.QUEUE_FLUSH, null);
        }
    }

    private void silence() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            textToSpeech.speak("", TextToSpeech.QUEUE_FLUSH, null, null);
        }
        else {
            textToSpeech.speak("", TextToSpeech.QUEUE_FLUSH, null);
        }
    }
}

和xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/txtToSay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text='"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."' />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView"
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:layout_marginStart="15dp"
            android:layout_marginEnd="15dp"
            android:layout_weight="1"
            android:background="?android:attr/selectableItemBackground"
            android:clickable="true"
            android:drawableTop="@android:drawable/ic_menu_call"
            android:focusable="true"
            android:text="listen"
            android:textAlignment="center" />

    </LinearLayout>

    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:drawableTop="@android:drawable/ic_menu_call"
        android:text="listen"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="#8A000000"
        android:textOff="listen"
        android:textOn="stop" />

</LinearLayout>

任何帮助将不胜感激，谢谢！

Answer 1

这种效果称为波纹。您需要制作自定义背景

例如，为 API 21+ 创建 bg_ripple.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/darker_gray">
    <item >
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" /> 
        </shape>
    </item>
</ripple>

或21岁以下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/darker_gray" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

并在切换按钮中使用它

<ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_ripple" // here
        android:drawableTop="@android:drawable/ic_menu_call"
        android:text="listen"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="#8A000000"
        android:textOff="listen"
        android:textOn="stop" />