自定义View实现支付宝芝麻信用页面功能

今天在使用支付宝的事后,突然发现了一个叫做芝麻信用的一个功能,打开看了一下,感觉效果挺好的,就想自己跟着实现一下,首先看支付宝的原图 , 这是支付宝中的原有界面,下面是我实现的效果,请不要吐槽我的审美好么,啊喂! 虽然有点差距,但是效果还是实现了的,主要就是中间那一坨的绘制,其他的根本不够我看的,哈哈哈(整理一下发型),好了下面开始重头戏了,如何绘制这样的一个图形以及实现动态的效果(想看效
摘要由CSDN通过智能技术生成

此篇文章布局有些问题,调整后的请看这篇:http://blog.csdn.net/anny_lin/article/details/50507608

今天在使用支付宝的事后,突然发现了一个叫做芝麻信用的一个功能,打开看了一下,感觉效果挺好的,就想自己跟着实现一下,首先看支付宝的原图
这里写图片描述

这是支付宝中的原有界面,下面是我实现的效果,请不要吐槽我的审美好么,啊喂!

这里写图片描述
虽然有点差距,但是效果还是实现了的,主要就是中间那一坨的绘制,其他的根本不够我看的,哈哈哈(整理一下发型),好了下面开始重头戏了,如何绘制这样的一个图形以及实现动态的效果(想看效果的请直接拉到最底下好么)?

分析:
首先我们要画出这样的一个图案的一般思路是从简单到复杂,这个不会我们先画一个圆盘不就完了,圆盘画完不就是再画一个外圆环么,没难度,最后再标刻度以及写文字,好了我们一步一步来。

1.绘制圆环
初始化一个CustomView继承View并重写构造方法

public class CustomView extends View {
   
    Paint paint;
    int radius;
    String resultString="啊啊啊啊";
    int rateEnd=0;
    public CustomView(Context context) {
        super(context);
        init(context);
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

init()方法初始化一些作案工具

 int result;
    Paint paint1,paint2,paint3;
    Paint ratePaint;
    String[] stringArray=new String[]{
  
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现一个收音机需要用到 Android 中的音频处理 API。下面是实现收音机的简单步骤: 1. 创建一个自定义 View,用于显示收音机的样式。 2. 使用 AudioRecord 类从麦克风中录制音频数据。 3. 使用 FFT(快速傅里叶变换)将音频数据转换为频谱图。 4. 将频谱图绘制到自定义 View 中。 下面是实现收音机的详细步骤: 1. 创建一个自定义 View,用于显示收音机的样式。可以使用 Canvas 在 View 中绘制收音机的外观。 2. 使用 AudioRecord 类从麦克风中录制音频数据。可以在自定义 View 的构造函数中初始化 AudioRecord: ```java int sampleRate = 44100; int channelConfig = AudioFormat.CHANNEL_IN_MONO; int audioFormat = AudioFormat.ENCODING_PCM_16BIT; int bufferSize = AudioRecord.getMinBufferSize(sampleRate, channelConfig, audioFormat); AudioRecord audioRecord = new AudioRecord(MediaRecorder.AudioSource.MIC, sampleRate, channelConfig, audioFormat, bufferSize); ``` 然后在自定义 View 的 onDraw() 方法中启动录制音频数据的线程,将录制的音频数据保存到一个缓冲区中: ```java @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Start recording thread audioRecord.startRecording(); isRecording = true; new Thread(new Runnable() { @Override public void run() { while (isRecording) { byte[] buffer = new byte[bufferSize]; int read = audioRecord.read(buffer, 0, bufferSize); // TODO: Process audio data } } }).start(); // TODO: Draw radio interface } ``` 3. 使用 FFT 将音频数据转换为频谱图。可以使用 JTransforms 库来进行 FFT 变换。在 onDraw() 方法中,将录制的音频数据传递给 JTransforms 库进行 FFT 变换,并将变换后的数据绘制到自定义 View 中: ```java @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Start recording thread audioRecord.startRecording(); isRecording = true; new Thread(new Runnable() { @Override public void run() { while (isRecording) { byte[] buffer = new byte[bufferSize]; int read = audioRecord.read(buffer, 0, bufferSize); double[] audioData = new double[read / 2]; for (int i = 0; i < read / 2; i++) { audioData[i] = (double) (buffer[i * 2] | buffer[i * 2 + 1] << 8) / 32768.0; } DoubleFFT_1D fft = new DoubleFFT_1D(audioData.length); fft.realForward(audioData); postInvalidate(); } } }).start(); // Draw radio interface // TODO: Draw frequency spectrum } ``` 4. 将频谱图绘制到自定义 View 中。可以使用 Canvas 在 View 中绘制频谱图。在 onDraw() 方法中,使用 Canvas 绘制频谱图: ```java @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Start recording thread audioRecord.startRecording(); isRecording = true; new Thread(new Runnable() { @Override public void run() { while (isRecording) { byte[] buffer = new byte[bufferSize]; int read = audioRecord.read(buffer, 0, bufferSize); double[] audioData = new double[read / 2]; for (int i = 0; i < read / 2; i++) { audioData[i] = (double) (buffer[i * 2] | buffer[i * 2 + 1] << 8) / 32768.0; } DoubleFFT_1D fft = new DoubleFFT_1D(audioData.length); fft.realForward(audioData); postInvalidate(); } } }).start(); // Draw radio interface // TODO: Draw frequency spectrum if (audioData != null) { Paint paint = new Paint(); paint.setColor(Color.RED); int width = getWidth(); int height = getHeight(); float[] spectrum = new float[audioData.length / 2]; for (int i = 0; i < spectrum.length; i++) { spectrum[i] = (float) Math.sqrt(audioData[i * 2] * audioData[i * 2] + audioData[i * 2 + 1] * audioData[i * 2 + 1]); } float[] xs = new float[spectrum.length]; float[] ys = new float[spectrum.length]; for (int i = 0; i < spectrum.length; i++) { xs[i] = (float) (i * width / spectrum.length); ys[i] = height - spectrum[i] * height; } Path path = new Path(); path.moveTo(xs[0], ys[0]); for (int i = 1; i < spectrum.length; i++) { path.lineTo(xs[i], ys[i]); } canvas.drawPath(path, paint); } } ``` 这样就实现了一个简单的收音机。当录制到音频数据时,可以将频谱图绘制到自定义 View 中,从而实现收音机的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值