自定义控件（组合控件）--模仿优酷菜单

时间：2022-09-29 20:39:35

自定义控件：
1.组合控件：将android系统原生自带的控件组合起来，加上动画效果，最终形成的一种特殊的UI效果。
2.先看效果：
自定义控件（组合控件）--模仿优酷菜单

这是一个三级子菜单组合成的动画菜单，点击中间的小房子，可以将外层的2个子菜单隐藏和显示。点击“三”可以把最外层的菜单隐藏和显示。

3.分析布局文件。
3.1 最里面的房子菜单为“一级菜单”，里面由一个背景和一个图片组成。使用相对布局，宽度为100dp,高度为50dp,位于父布局的的底部，水平居中，里面嵌套一个图片，图片包裹自己，图片是相对于它的父布局居中显示。

 <!-- 一级菜单 -->

<RelativeLayout
 android:id="@+id/level1"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level1" >

<ImageView
 android:id="@+id/iv_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/icon_home" />
</RelativeLayout>

3.2 中间的为“二级菜单”，里面由一个背景和三个图片组成。使用相对布局，宽度为180dp,高度为90dp,位于父布局的的底部，水平居中，宽度和高度要比一级菜单大一些。

  <!-- 二级菜单 -->

<RelativeLayout
 android:id="@+id/level2"
android:layout_width="180dp"
android:layout_height="90dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level2" >

<ImageView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:background="@drawable/icon_search" />

<ImageView
 android:id="@+id/iv_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:background="@drawable/icon_menu" />

<ImageView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/icon_myyouku" />
</RelativeLayout>

3.3 三级菜单的布局代码：

    <!-- 三级菜单 -->

<RelativeLayout
 android:id="@+id/level3"
android:layout_width="280dp"
android:layout_height="142dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level3" >

<ImageView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="15dp"
android:layout_marginLeft="12dp"
android:background="@drawable/channel1" />

<ImageView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="55dp"
android:layout_marginLeft="32dp"
android:background="@drawable/channel2" />

<ImageView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="85dp"
android:layout_marginLeft="62dp"
android:background="@drawable/channel3" />

<ImageView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="@drawable/channel4" />

<ImageView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="85dp"
android:layout_marginRight="62dp"
android:background="@drawable/channel7" />

<ImageView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="55dp"
android:layout_marginRight="32dp"
android:background="@drawable/channel6" />

<ImageView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="15dp"
android:layout_marginRight="12dp"
android:background="@drawable/channel5" />
</RelativeLayout>

4.MainActivity.java 初始化布局文件、给图片添加监听事件

public class MainActivity extends Activity implements OnClickListener {
private RelativeLayout level1, level2, level3;
private ImageView iv_home;
private ImageView iv_menu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        initView();
        initListener();
    }

private void initView() {
        setContentView(R.layout.activity_main);
        iv_home = (ImageView) findViewById(R.id.iv_home);
        iv_menu = (ImageView) findViewById(R.id.iv_menu);
        level1 = (RelativeLayout) findViewById(R.id.level1);
        level2 = (RelativeLayout) findViewById(R.id.level2);
        level3 = (RelativeLayout) findViewById(R.id.level3);
    }

private void initListener() {
        iv_home.setOnClickListener(this);
        iv_menu.setOnClickListener(this);
    }

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.iv_home:
//处理点击小房子事件，通过点击显示，在点击隐藏的循环方式操作
break;
case R.id.iv_menu:
//处理点击菜单事件，通过点击显示，在点击隐藏的循环方式操作
        breakk;
default:
break;
        }
    }
//点击物理键MENU时，如果显示就隐藏，如果隐藏就显示
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU) {
        }
return super.onKeyDown(keyCode, event);
    }
}

6 AnimUtil.java 动画显示与隐藏

import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;
public class AnimUtil {
public static int animCount = 0;
//隐藏菜单
public static void closeMenu(RelativeLayout rl,long startOffset){
//遍历布局文件里面所有的子控件（都是图片），当隐藏时，不可点击
for (int i = 0; i < rl.getChildCount(); i++) {
            rl.getChildAt(i).setEnabled(false);
        }
//旋转动画
        RotateAnimation animation = new RotateAnimation(0, -180, 
                RotateAnimation.RELATIVE_TO_SELF, 0.5f, 
                RotateAnimation.RELATIVE_TO_SELF, 1f);
        animation.setDuration(500);
        animation.setFillAfter(true);//动画结束后保持当时的状态
        animation.setStartOffset(startOffset);
        animation.setAnimationListener(new MyAnimationListener());
        rl.startAnimation(animation);
    }

public static void showMenu(RelativeLayout rl,long startOffset){
for (int i = 0; i < rl.getChildCount(); i++) {
            rl.getChildAt(i).setEnabled(true);
        }
        RotateAnimation animation = new RotateAnimation(-180, 0, 
                RotateAnimation.RELATIVE_TO_SELF, 0.5f, 
                RotateAnimation.RELATIVE_TO_SELF, 1f);
        animation.setDuration(500);
        animation.setFillAfter(true);//动画结束后保持当时的状态
        animation.setStartOffset(startOffset);
        animation.setAnimationListener(new MyAnimationListener());
        rl.startAnimation(animation);
    }

//保证动画运行完成之后，在从头运行，不太好说，可以连续点击小房子，看效果，或者将animation.setAnimationListener(new MyAnimationListener());注释后看看两者有什么区别。
static class MyAnimationListener implements AnimationListener {

@Override
public void onAnimationStart(Animation animation) {
            animCount++;
        }

@Override
public void onAnimationEnd(Animation animation) {
            animCount--;
        }

@Override
public void onAnimationRepeat(Animation animation) {

        }
    }
}
  1. 点击事件的逻辑
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.iv_home:
if(AnimUtil.animCount!=0){
//说明有动画在执行
return;
            }
if (isShowLevel2) {
// 需要隐藏
// Log.e(tag, "隐藏");
int startOffset = 0;
if (isShowLevel3) {
                    AnimUtil.closeMenu(level3, startOffset);
                    isShowLevel3 = false;
                    startOffset += 200;
                }
                AnimUtil.closeMenu(level2, startOffset);
            } else {
// 显示
// Log.e(tag, "显示");
                AnimUtil.showMenu(level2,0);
            }
            isShowLevel2 = !isShowLevel2;
break;
case R.id.iv_menu:
if(AnimUtil.animCount!=0){
//说明有动画在执行
return;
            }
if (isShowLevel3) {
                AnimUtil.closeMenu(level3, 0);
            } else {
                AnimUtil.showMenu(level3,0);
            }
            isShowLevel3 = !isShowLevel3;
break;
default:
break;
        }
    }

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU) {
if (isShowMenu) {
// 显示，变成隐藏
int startOffset = 0;
if (isShowLevel3) {
                    AnimUtil.closeMenu(level3, startOffset);
                    isShowLevel3 = false;
                    startOffset += 200;
                }
if (isShowLevel2) {
                    AnimUtil.closeMenu(level2, startOffset);
                    isShowLevel2 = false;
                    startOffset += 200;
                }
                AnimUtil.closeMenu(level1, startOffset);
            } else {
// 隐藏变成显示
                AnimUtil.showMenu(level1, 0);
                AnimUtil.showMenu(level2, 200);
                isShowLevel2 = true;
                AnimUtil.showMenu(level3, 400);
                isShowLevel3 = true;

            }
            isShowMenu = !isShowMenu;
return true;
        }
return super.onKeyDown(keyCode, event);
    }

源码链接：http://download.csdn.net/detail/dczjzz/9085999
标签：

相关文章