自定义组件之卫星Button（一）

　　方案来自慕课网，因水平和记忆力有限，将方案记录于此。

　　移动开发一个好的应用离不开漂亮的UI，漂亮的UI离不开充满想象力的UI组件。在此记录一个自定义UI组件的案例，也是学习自定义UI的开始。本例是satellite-menu的一种实现。satellite-menu效果如下图：

　　我们需要认识这个组件。这个组件相较于其他组件有两个特别的属性。一个是组件的位置，另一个是组件Item与Button的距离。这两个属性，我们希望开发者能自定。

　　第一步，我们在value文件夹下，建立一个xml文件attr.xml,将这两个属性，和这个自定义组件的命名放进去:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="position">
        <enum name="left_top" value="0"/>
        <enum name="left_bottom" value="1"/>
        <enum name="right_top" value="2"/>
        <enum name="right_bottom" value="3"/>
    </attr>
    <attr name="radius" format="dimension"/>

    <declare-styleable name="CustomButton">
        <attr name="position"/>
        <attr name="radius"/>
    </declare-styleable>
</resources>

　　其中，position是Button的位置，这是个枚举型的属性，Button只能存在于屏幕的四角。radius是一个尺寸型的属性，它表示了组件Item与Button的距离。declare-styleable用于给自定义组件添加自定义属性。上面一段就是给declare-styleable添加了两个自定义属性。

　　第二步，建立新的CustomButton类，并完成初始化。

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import com.memeda.lsy.mycustombutton.R;

/**
 * Created by Administrator on 2015/4/15.
 */
public class CustomButton extends ViewGroup {
    private static final int POS_LEFT_TOP = 0;
    private static final int POS_LEFT_BOTTOM = 1;
    private static final int POS_RIGHT_TOP = 2;
    private static final int POS_RIGHT_BOTTOM = 3;

    private Position mPosition=Position.RIGHT_BOTTOM;
    private int mRadius = 100;
    private Status mStatus = Status.CLOSE;
    private OnItemClickListener mOnItemClickListener;

    /**
     * 菜单的主按钮
     */
    private View mCButton;

    public void setmOnItemClickListener(OnItemClickListener mOnItemClickListener) {
        this.mOnItemClickListener = mOnItemClickListener;
    }

    public void setmPosition(Position mPosition) {
        this.mPosition = mPosition;
    }

    public void setmRadius(int mRadius) {
        this.mRadius = mRadius;
    }

    /**
     * 菜单位置枚举类
     */
    public enum Position{
        LEFT_TOP
        ,LEFT_BOTTOM
        ,RIGHT_TOP
        ,RIGHT_BOTTOM
    }
    /**
     * 菜单开关枚举类
     */
    public enum Status{
        OPEN,CLOSE
    }
    /**
     * 点击子菜单的回调接口
     */
    public interface OnItemClickListener{
        void onClick(View view , int position);
    }

    public CustomButton(Context context) {
        this(context , null);
    }
    public CustomButton(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }
    public CustomButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取mRadius的初始值100dp
        mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,100,getResources().getDisplayMetrics());
        //获取组件参数数组
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomButton,defStyleAttr,0);
        //获取Button位置
        int pos = a.getInt(R.styleable.CustomButton_position,POS_RIGHT_BOTTOM);
        switch (pos){
            case POS_LEFT_TOP:
                mPosition = Position.LEFT_TOP;
                break;
            case POS_LEFT_BOTTOM:
                mPosition = Position.LEFT_BOTTOM;
                break;
            case POS_RIGHT_TOP:
                mPosition = Position.RIGHT_TOP;
                break;
            case POS_RIGHT_BOTTOM:
                mPosition = Position.RIGHT_BOTTOM;
                break;
        }
        //获取Item与Button的距离
        mRadius = (int) a.getDimension(R.styleable.CustomButton_radius
                ,mRadius);

        a.recycle();
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

    }
}

　　至此，自定义组件的属性和读出属性的方法已经实现，我们可以在布局文件中使用它。

xmlns:custombutton = "http://schemas.android.com/apk/res-auto"    <com.memeda.lsy.mycustombutton.view.CustomButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        custombutton:position="right_bottom"
        custombutton:radius="120dp">
        </com.memeda.lsy.mycustombutton.view.CustomButton>

　　以上，下一节，将开始绘制自定义组件的外观。