带环形进度条的button

带环形进度条的button

今天有一个一起学习的同学找我帮忙，因为今天工作不是很忙，所以就帮助他把效果实现了下，废话不多说，效果图奉上。

简单说下思路：在了解需求后，因为缺少相应的切图，所以选择自己来配图，背景使用shape来绘制的，麦克风的切图实在阿里素材库下载的，环形进度条的效果是写了一个rotate来实现的，当然如果提供切图的画，可以使用RotateAnimation动画来实现，效果应该会更好。

背景的recordstyle.xml如下：

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#27f20c"/> <size android:width="128dp" android:height="128dp"/> </shape>

环形进度条progressbar.xml如下：

<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%"> <shape android:innerRadius="40dp" android:shape="ring" android:thickness="8dp" android:useLevel="false"> <gradient android:angle="90" android:centerColor="#27f20c" android:centerY="0.50" android:endColor="#27f20c" android:startColor="#ffffff" android:type="sweep" android:useLevel="false"/> </shape> </rotate>

这两个文件都放在drawable下。

再来看一下主布局文件activity_main.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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.tom.progressdemo.MainActivity"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/app_name"/> <FrameLayout android:layout_width="120dp" android:layout_height="120dp" android:layout_marginTop="20dp" > <ImageButton android:id="@+id/record" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/recordsytle" android:src="@drawable/recorder" /> <TextView android:id="@+id/pause" android:layout_width="80dp" android:layout_height="80dp" android:text="暂停" android:textColor="#ffffff" android:textSize="24sp" android:gravity="center" android:layout_gravity="center" android:background="@drawable/recordsytle" android:visibility="gone"/> <ProgressBar android:id="@+id/circle" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:indeterminateDrawable="@drawable/progressbar" android:visibility="invisible" /> </FrameLayout> </LinearLayout>

这块主要使用FrameLayout,来完成效果的展示，通过尺寸的调整，让用户看起来好像是一个东西，此处应该有更好的实现方式，欢迎各位留言指导。

主Activity实现很简单，代码奉上:

package com.example.tom.progressdemo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.ImageButton; import android.widget.ProgressBar; import android.widget.TextView; public class MainActivity extends AppCompatActivity implements View.OnClickListener{ ImageButton mRecordBtn; TextView mPauseTxt; ProgressBar mProgressBar; boolean flag = false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); } private void initViews() { mRecordBtn = (ImageButton) findViewById(R.id.record); mPauseTxt = (TextView) findViewById(R.id.pause); mProgressBar = (ProgressBar) findViewById(R.id.circle); mRecordBtn.setOnClickListener(this); } @Override public void onClick(View v) { int id = v.getId(); switch (id){ case R.id.record: if (flag) { mProgressBar.setVisibility(View.GONE); mPauseTxt.setVisibility(View.GONE); flag = false; } else { mProgressBar.setVisibility(View.VISIBLE); mPauseTxt.setVisibility(View.VISIBLE); flag = true; } break; default: } } }

整个Demo的下载

点我下载