带环形进度条的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的下载

点我下载