如何创建一个带有滑动取消的录音按钮的whatsapp

Question

就像在 whatsapp 中一样，我需要一个重新编码按钮和一个幻灯片来取消和淡入淡出动画，我搜索了类似的代码但没有找到。我是 android 编程的新手，任何帮助或链接都可能有所帮助。

原文由 Ranjith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我已经创建了一个 github 项目。你可以看看它 https://github.com/sarathnk/Audio

 audioSendButton.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
                    FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) slideText
                            .getLayoutParams();
                    params.leftMargin = dp(30);
                    slideText.setLayoutParams(params);
                    ViewProxy.setAlpha(slideText, 1);
                    startedDraggingX = -1;
                    // startRecording();
                    startrecord();
                    audioSendButton.getParent()
                            .requestDisallowInterceptTouchEvent(true);
                    recordPanel.setVisibility(View.VISIBLE);
                } else if (motionEvent.getAction() == MotionEvent.ACTION_UP
                        || motionEvent.getAction() == MotionEvent.ACTION_CANCEL) {
                    startedDraggingX = -1;
                    stoprecord();
                    // stopRecording(true);
                } else if (motionEvent.getAction() == MotionEvent.ACTION_MOVE) {
                    float x = motionEvent.getX();
                    if (x < -distCanMove) {
                        stoprecord();
                        // stopRecording(false);
                    }
                    x = x + ViewProxy.getX(audioSendButton);
                    FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) slideText
                            .getLayoutParams();
                    if (startedDraggingX != -1) {
                        float dist = (x - startedDraggingX);
                        params.leftMargin = dp(30) + (int) dist;
                        slideText.setLayoutParams(params);
                        float alpha = 1.0f + dist / distCanMove;
                        if (alpha > 1) {
                            alpha = 1;
                        } else if (alpha < 0) {
                            alpha = 0;
                        }
                        ViewProxy.setAlpha(slideText, alpha);
                    }
                    if (x <= ViewProxy.getX(slideText) + slideText.getWidth()
                            + dp(30)) {
                        if (startedDraggingX == -1) {
                            startedDraggingX = x;
                            distCanMove = (recordPanel.getMeasuredWidth()
                                    - slideText.getMeasuredWidth() - dp(48)) / 2.0f;
                            if (distCanMove <= 0) {
                                distCanMove = dp(80);
                            } else if (distCanMove > dp(80)) {
                                distCanMove = dp(80);
                            }
                        }
                    }
                    if (params.leftMargin > dp(30)) {
                        params.leftMargin = dp(30);
                        slideText.setLayoutParams(params);
                        ViewProxy.setAlpha(slideText, 1);
                        startedDraggingX = -1;
                    }
                }
                view.onTouchEvent(motionEvent);
                return true;
            }
        });

原文由 luttu android 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以使用我制作 RecordView 的库

它易于设置，并且模拟与 WhatsApp 相同的行为。

只需添加视图 RecordView 和 RecordButton

 <RelativeLayout 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:id="@+id/parent_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.devlomi.recordview.MainActivity">

<com.devlomi.record_view.RecordView
    android:id="@+id/record_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_toLeftOf="@id/record_button"
    app:slide_to_cancel_arrow="@drawable/ic_keyboard_arrow_left"
    app:slide_to_cancel_text="Slide To Cancel"
    app:slide_to_cancel_margin_right="10dp"/>

<com.devlomi.record_view.RecordButton
    android:id="@+id/record_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:background="@drawable/bg_mic"
    android:scaleType="centerInside"
    app:src="@drawable/ic_mic_white"
    />

然后在你的活动中

    RecordView recordView = (RecordView) findViewById(R.id.record_view);
    RecordButton recordButton = (RecordButton)
     findViewById(R.id.record_button);

    //IMPORTANT
    recordButton.setRecordView(recordView);

最后你可以处理记录状态

• onStart 开始录制时
• onCancel 滑动取消时
• onFinish 完成记录并返回以毫秒为单位的记录时间
• onLessThanSecond 当记录时间 <= 1 秒

  recordView.setOnRecordListener(this);


      @Override
      public void onStart() {
          //Start Recording..
          Log.d("RecordView", "onStart");
      }

      @Override
      public void onCancel() {
          //On Swipe To Cancel
          Log.d("RecordView", "onCancel");

      }

      @Override
      public void onFinish(long recordTime) {
          //Stop Recording..
          String time = getHumanTimeText(recordTime);
          Log.d("RecordView", "onFinish");

          Log.d("RecordTime", time);
      }

      @Override
      public void onLessThanSecond() {
          //When the record time is less than One Second
          Log.d("RecordView", "onLessThanSecond");
      }

原文由 3llomi 发布，翻译遵循 CC BY-SA 3.0 许可协议