模仿Instant Heart Rate效果的心跳检测器

最新推荐文章于 2025-06-11 15:27:54 发布

Snowball

最新推荐文章于 2025-06-11 15:27:54 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/yangzl2008/article/details/11081067

Android 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一款模仿InstantHeartRate应用的项目，通过自定义ProgressBar样式和使用layer-list技术，实现了类似的功能与界面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模仿源泉

Instant Heart Rate的地址

开源心跳检查地址

android-heart-rate-monitor

本博客工作

模仿Instant Heart Rate的界面，并采用开源的心跳检查的源码，对其进行UI改进，以达到模仿Instant Heart Rate的效果。主要界面如下：

界面

主要采用的UI技术

主要是采用了自定义ProgressBar 样式的技术，将 android:indeterminateDrawable指定为自定义好的界面，这样ProgressBar 在显示的时候，就会自动显示自定义的界面。

而图案中心的上面上面按钮，下面图案旋转的技术，主要采用了layer-list层叠样式的的方案，最上面一层是静止的，下面一层是选装的，这样就可达到模拟Instant Heart Rate的效果，实际上Instant Heart Rate采用了将整个图案截成多个部分，然后每个部分旋转的方式实现。本案例的主要实现代UI层码如下：

main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background" >

    <com.jwetherell.heart_rate_monitor.HeartbeatView
        android:id="@+id/image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp" />

    <SurfaceView
        android:id="@+id/preview"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp" />

    <TextView
        android:id="@+id/toptext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/image"
        android:layout_alignTop="@+id/image"
        android:layout_toLeftOf="@+id/preview"
        android:layout_toRightOf="@+id/image"
        android:gravity="center"
        android:text="@string/app_name"
        android:textSize="20sp" />
    
   

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" >

        <ProgressBar
            android:id="@+id/progressBar1"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:indeterminateDrawable="@drawable/heart_beat_layer_style" />

        <TextView
            android:id="@+id/heartbeatnumbertext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|center_vertical"
            
            android:text="@string/default_text"
            android:textSize="45sp" />
    </FrameLayout> 

    <TextView
        android:id="@+id/bottomtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="@string/discription"
        android:textSize="19sp" />

</RelativeLayout>

heart_beat_layer_style.xml即自定义ProgressBar的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    
 	
    <item>
        <rotate
            android:drawable="@drawable/monitor_bg_full_"
            android:fromDegrees="0.0"
            android:pivotX="50.0%"
            android:pivotY="50.0%"
            android:toDegrees="360.0" />
    </item>
   <item android:drawable="@drawable/monitor_bg"/>

</layer-list>