09-17 自定义控件之组合控件

Android开发中会经常和控件打交道,有时Android提供的控件未必能满足业务的需求,这个时候就需要我们实现自定义一些控件,今天先大致了解一下自定义控件的要求和实现的基本原理。

分类

Android开发中用到的自定义控件可以分为有三种:

  1. 组合控件
    把几个常用控件组合起来,形成一个新的控件,相当于一个组团的意思。
  2. 扩展控件
    对现有控件进行功能或者样式上的扩展,相当于给原先的控件添加装备。
  3. 完全自定义控件
    功能样式都自行定义设计,可以实现想要的功能。

光说不练到底是不行的,我打算每个文章里面加上一个小例子来写,理解也更方便。

开始

我当初入门的时候,就是以早期的优酷菜单的作为练手的,现在就还拿这个来说吧!老规矩,先放一张效果图:


09-17 自定义控件之组合控件_第1张图片
优酷菜单

该菜单由内而外分别叫做“1级菜单”,“2级菜单”和“3级菜单”,1级菜单和2级菜单的中心位置的ImageButton用来控制整个菜单的动态效果。点击1级菜单时,若2级或者3级菜单处于显示状态,则隐藏2级和3级菜单,如果没有显示,则只显示出2级菜单。点击2级菜单的时候,只控制3级菜单的显示和隐藏。

布局

首先,让我们来开始愉快的画布局吧!

  
  
      
  
          
      
  
      
  
          
  
          
  
          
      
  
      
  
          
  
          
  
          
  
          
  
          
  
          
  
          
      
  

动画

因为动画都是靠自定义的旋转动画来实现的,而且用的地方也比较多,所以对代码进行了抽取,封装了一个工具类,暴露出转入以及转出两个方法,来供调用……

import android.view.animation.Animation;  
import android.view.animation.RotateAnimation;  
import android.widget.RelativeLayout;  
  
public class AnimationUtils {  
  
    public static boolean isRunningAnimation = false; // 记录动画是否在执行  
  
    /** 
     * 旋转出去的动画 
     *  
     * @param layout 
     *            执行动画的对象 
     * @param startOffset 
     *            延迟时间 
     */  
    public static void outRotateAnimation(RelativeLayout layout, long startOffset) {  
        // 防止父控件中的子控件抢焦点能力强,而将子控件设置为不可用  
        for (int i = 0; i < layout.getChildCount(); i++) {  
            layout.getChildAt(i).setEnabled(false);  
        }  
  
        RotateAnimation ra = new RotateAnimation( //  
                0.0f, // 旋转开始的角度  
                -180.0f, // 旋转结束的角度  
                RotateAnimation.RELATIVE_TO_SELF, // 旋转坐标X轴的参照物  
                0.5f, // 相对于参照物X轴的百分比  
                RotateAnimation.RELATIVE_TO_SELF, // 旋转坐标Y轴的参照物  
                1.0f // 相对于参照物Y轴的百分比  
        );  
        ra.setDuration(500);  
        ra.setStartOffset(startOffset); // 动画延迟时间  
        ra.setFillAfter(true);  
        ra.setAnimationListener(new MyAnimationListener());  
        layout.startAnimation(ra);  
    }  
  
    /** 
     * 旋转进来的动画 
     *  
     * @param layout 
     *            执行动画的对象 
     */  
    public static void inRotateAnimation(RelativeLayout layout) {  
        // 进来的时候,将所有的子控件设置为可用  
        for (int i = 0; i < layout.getChildCount(); i++) {  
            layout.getChildAt(i).setEnabled(false);  
        }  
  
        RotateAnimation ra = new RotateAnimation( //  
                -180.0f, // 旋转开始的角度  
                0.0f, // 旋转结束的角度  
                RotateAnimation.RELATIVE_TO_SELF, // 旋转坐标X轴的参照物  
                0.5f, // 相对于参照物X轴的百分比  
                RotateAnimation.RELATIVE_TO_SELF, // 旋转坐标Y轴的参照物  
                1.0f // 相对于参照物Y轴的百分比  
        );  
        ra.setDuration(500);  
        ra.setFillAfter(true);  
        layout.startAnimation(ra);  
    }  
  
    static class MyAnimationListener implements Animation.AnimationListener {  
  
        /** 
         * 动画开始的时候执行 
         */  
        @Override  
        public void onAnimationStart(Animation animation) {  
            // TODO Auto-generated method stub  
            isRunningAnimation = true;  
        }  
  
        /** 
         * 动画结束的时候执行 
         */  
        @Override  
        public void onAnimationEnd(Animation animation) {  
            // TODO Auto-generated method stub  
            isRunningAnimation = false;  
        }  
  
        /** 
         * 动画重复执行的时候 
         */  
        @Override  
        public void onAnimationRepeat(Animation animation) {  
            // TODO Auto-generated method stub  
  
        }  
  
    }  
  
}  

代码控制

然后就是在代码中进行控制。当点击的时候判断当前菜单的出现状态。然后根据菜单状态的不同执行相应操作。

import android.os.Bundle;  
import android.app.Activity;  
import android.view.KeyEvent;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.widget.RelativeLayout;  
  
public class MainActivity extends Activity implements OnClickListener {  
  
    private RelativeLayout rlLevel1;  
    private RelativeLayout rlLevel2;  
    private RelativeLayout rlLevel3;  
    /** 记录3级菜单是否展示 */  
    private boolean isDisplayLevel3 = true;  
    /** 记录2级菜单是否展示 */  
    private boolean isDisplayLevel2 = true;  
    /** 记录1级菜单是否展示 */  
    private boolean isDisplayLevel1 = true;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        rlLevel1 = (RelativeLayout) findViewById(R.id.rl_level1);  
        rlLevel2 = (RelativeLayout) findViewById(R.id.rl_level2);  
        rlLevel3 = (RelativeLayout) findViewById(R.id.rl_level3);  
  
        findViewById(R.id.ib_home).setOnClickListener(this);  
        findViewById(R.id.ib_menu).setOnClickListener(this);  
  
    }  
  
    @Override  
    public void onClick(View v) {  
        switch (v.getId()) {  
        case R.id.ib_home:  
            if (AnimationUtils.isRunningAnimation) // 当前动画正在执行的时候,不执行动画  
                return;  
            if (isDisplayLevel2) {  
                // 2级菜单正在展示  
                long startOffset = 0; // 旋转延时时间  
                if (isDisplayLevel3) {  
                    // 3级菜单也在展示,先旋转出去3级菜单,再旋转出去2级菜单  
                    AnimationUtils.outRotateAnimation(rlLevel3, startOffset);  
                    startOffset += 200;  
                    isDisplayLevel3 = !isDisplayLevel3;  
                }  
                AnimationUtils.outRotateAnimation(rlLevel2, startOffset);  
            } else {  
                // 2级菜单没有展示,需要旋转进来  
                AnimationUtils.inRotateAnimation(rlLevel2);  
            }  
            isDisplayLevel2 = !isDisplayLevel2;  
            break;  
        case R.id.ib_menu:  
            if (AnimationUtils.isRunningAnimation)  
                return;  
            if (isDisplayLevel3) {  
                // 3级菜单正在展示,需要旋转出去  
                AnimationUtils.outRotateAnimation(rlLevel3, 0);  
            } else {  
                // 3级菜单没有展示,需要旋转进来  
                AnimationUtils.inRotateAnimation(rlLevel3);  
            }  
            isDisplayLevel3 = !isDisplayLevel3;  
            break;  
        default:  
            break;  
        }  
    }  
  
    /** 
     * 菜单按钮的处理 
     */  
    @Override  
    public boolean onKeyDown(int keyCode, KeyEvent event) {  
        // TODO Auto-generated method stub  
        if (keyCode == KeyEvent.KEYCODE_MENU) {  
            if (AnimationUtils.isRunningAnimation)  
                return super.onKeyDown(keyCode, event);  
            if (isDisplayLevel1) {  
                // 1级菜单旋转出去  
                long startOffset = 0; // 记录延迟时间  
                if (isDisplayLevel2) {  
                    // 2级菜单旋转出去  
                    if (isDisplayLevel3) {  
                        // 3级菜单先旋转出去  
                        AnimationUtils.outRotateAnimation(rlLevel3, startOffset);  
                        startOffset += 200;  
                        isDisplayLevel3 = !isDisplayLevel3;  
                    }  
                    AnimationUtils.outRotateAnimation(rlLevel2, startOffset);  
                    startOffset += 200; // 延迟200ms  
                    isDisplayLevel2 = !isDisplayLevel2;  
                }  
                AnimationUtils.outRotateAnimation(rlLevel1, startOffset);  
            } else {  
                // 1级菜单旋转进来  
                AnimationUtils.inRotateAnimation(rlLevel1);  
            }  
            isDisplayLevel1 = !isDisplayLevel1;  
        }  
        return super.onKeyDown(keyCode, event);  
    }  
}  

至此,大功告成!

你可能感兴趣的:(09-17 自定义控件之组合控件)