码迷,mamicode.com
首页 > 其他好文 > 详细

自定义组件之卫星Button(一)

时间:2015-04-15 19:10:35      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

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

  移动开发一个好的应用离不开漂亮的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>

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

  

自定义组件之卫星Button(一)

标签:

原文地址:http://www.cnblogs.com/fishbone-lsy/p/4429143.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!