最近的一些个人小作品经常要用到一些控制开始或者暂停的图片按钮(类似音乐播放软件控制音乐播放或暂停的按钮),现放出来给大家分享下。

主要功能:点击一次就更换为另一种状态,再点击一次就更换回原来的状态。

首先,我们需要一个layout文件

control_button.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
</LinearLayout>

一个简单的LinearLayout布局文件,当然,如果你要RelativeLayout也行,这个因个人爱好而设置,对后面的功能实现不会产生多大的影响。

接着,定义一个resourse文件,用来定义一些Button的属性。

ChangeButton.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ChangeButton">
        <attr name="start" format="reference" />
        <attr name="stop" format="reference" />
    </declare-styleable>
</resources>

给Button定义两个属性,一个是表示开始的状态,另一个表示结束的状态。

接下来就是最关键的部分了(自我认为挺关键的)

创建一个类继承LinearLayout(这个看你的layout文件是用哪种布局,因为我上面使用LinearLayout,所以就继承LinearLayout)

ChangeButton.java

package view;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;

public class ChangeButton extends LinearLayout {
    /**
     * 命名空间
     */
    private static String NAMESPACE = "http://schemas.android.com/apk/res/com.cmb.music";
    /**
     * 存放第一张图片在R文件中的Int值,默认为0
     */
    private int startImage = 0;
    /**
     * 存放第二张图片在R文件中的Int值,默认为0
     */
    private int stopImage = 0;
    /**
     * 判断处于哪个状态,默认为false
     */
    private boolean isStart = false;
    
    /**
     * 构造函数1
     * @param context
     */
    public ChangeButton(Context context) {
        super(context);
        initView();
    }
    
    /**
     * 构造函数2
     * @param context
     */
    public ChangeButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }
    
    /**
     * 构造函数2
     * @param context
     */
    public ChangeButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 获取图片的Int值
        startImage = attrs.getAttributeResourceValue(NAMESPACE, "start", R.drawable.start);
        stopImage = attrs.getAttributeResourceValue(NAMESPACE, "stop", R.drawable.stop);
        initView();
    }
    
    public boolean isStart(){
        return isStart;
    }
    /**
     * 初始化函数
     */
    private void initView(){
        View.inflate(getContext(), R.layout.item_control_button, this);
        this.setClickable(true);
        if(stopImage == 0){
            return ;
        }else{
            setIsStart(isStart);
        }
    }
    /**
     * 通过传进一个boolean值,设置按钮的状态
     * @param isStart 设置开始或者暂停的状态
     */
    public void setIsStart(boolean isStart){
        this.isStart = isStart;
        if(isStart){
            this.setBackgroundResource(startImage);
        }
        else{
            this.setBackgroundResource(stopImage);
        }
    }
}

关于命名空间,就是http://schemas.android.com/apk/res/+包名,不懂得请先看看xml里面关于命名空间的相关资料,这里就不再说明。
startImage,stopImage,正如注释所讲的就是状态图片在R文件中的int值,用于接收用户自己定义的两张图片。

对于三个构造函数,

第一个构造函数是在该组件没有属性没有样式时调用的,这里我们不用到。

第二个构造函数是当该组件在声明时调用了样式时调用的,这里我们也用不到。

第三个构造函数是在该组件在声明时只有属性时调用的,我们主要用到的就是这个函数。

在第三个构造函数中,用我们前面定义的startImage和stopImage接收start和stop属性。

写完这个类,我们的按钮就基本完成了,将它放入main_layout.xml文件中试试。

main_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:cmb="http://schemas.android.com/apk/res/com.example.changebutton"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.changebutton.MainActivity" >

    <com.example.changebutton.ChangeButton
        android:id="@+id/btn_control"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerInParent="true"
        cmb:start="@drawable/start_selector"
        cmb:stop="@drawable/stop_selector" >
    </com.example.changebutton.ChangeButton>

</RelativeLayout>

不要忘了命名空间哦,这个很重要。

接下来,在MainActivity.java文件里面配置一下

MainActivity.java

package com.example.changebutton;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;

public class MainActivity extends ActionBarActivity {

    ChangeButton mChangeButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mChangeButton = (ChangeButton) findViewById(R.id.btn_control);
        mChangeButton.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                mChangeButton.setIsStart(!mChangeButton.isStart());
            }
        });
    }
    
}

按钮完成,现在可以测测看了。

 

 

总结:第一次写博客,心里有点小紧张,有错误的地方希望大家能帮我指出。

附上源代码:http://pan.baidu.com/s/1cdW84A