Android自定义控件---优酷菜单
2015-01-28 20:00
417 查看
实现的效果图:
逻辑并不是很难,主要有三点:
1.他的布局
2.动画的原理
3.onkeydown监听menu按键的事件
第一个:
第二个:
逻辑并不是很难,主要有三点:
1.他的布局
2.动画的原理
3.onkeydown监听menu按键的事件
第一个:
<span style="font-size:12px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="${relativePackage}.${activityClass}" > <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/icon_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@drawable/icon_home" /> </RelativeLayout> <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:id="@+id/icon_search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_margin="10dp" android:background="@drawable/icon_search" /> <ImageView android:id="@+id/icon_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:id="@+id/icon_myyouku" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_margin="10dp" android:background="@drawable/icon_myyouku" /> </RelativeLayout> <RelativeLayout android:id="@+id/level3" android:layout_width="280dp" android:layout_height="140dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:background="@drawable/level3" > <ImageView android:id="@+id/channel1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:background="@drawable/channel1" /> <ImageView android:id="@+id/channel2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/channel1" android:layout_alignLeft="@id/channel1" android:layout_marginLeft="20dp" android:layout_marginBottom="6dp" android:background="@drawable/channel2" /> <!-- android:layout_alignLeft="@id/channel1" 和channel1控件左边对齐--> <ImageView android:id="@+id/channel3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/channel2" android:layout_alignLeft="@id/channel2" android:layout_marginLeft="30dp" android:layout_marginBottom="6dp" android:background="@drawable/channel3" /> <ImageView android:id="@+id/channel4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:background="@drawable/channel4" /> <ImageView android:id="@+id/channel5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/channel6" android:layout_alignRight="@+id/channel6" android:layout_marginRight="30dp" android:layout_marginBottom="6dp" android:background="@drawable/channel5" /> <ImageView android:id="@+id/channel6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/channel7" android:layout_alignRight="@+id/channel7" android:layout_marginRight="20dp" android:layout_marginBottom="6dp" android:background="@drawable/channel6" /> <ImageView android:id="@+id/channel7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:layout_marginBottom="10dp" android:background="@drawable/channel7" /> </RelativeLayout> </RelativeLayout></span>
第二个:
<span style="font-size:12px;font-weight: normal;">package com.dystu.youkudemo;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;
public class MyUtils {
/**
*
* 旋转离开的动画
*
* @param view
*/
public static void startAnimationOut(RelativeLayout view) {
/**
*
* 默认圆心为View的左上角
*
* 水平向右:0度 顺时针旋转度数增加
*
*
*/
RotateAnimation animation = new RotateAnimation(0, 180,
view.getWidth() / 2, view.getHeight());
animation.setDuration(500);
//动画执行完以后,保持最后的状态
animation.setFillAfter(true);
view.startAnimation(animation);
}
/**
*
* 旋转进入的动画
*
* @param view
*/
public static void startAnimationIn(RelativeLayout view) {
RotateAnimation animation = new RotateAnimation(180, 360,
view.getWidth() / 2, view.getHeight());
animation.setDuration(500);
animation.setFillAfter(true);
view.startAnimation(animation);
}
/**
*
* 让指定view延时执行旋转离开的方法
*
* @param level3
* @param i 延时的时间
*/
public static void startAnimationOut(RelativeLayout view, long offset) {
/**
*
* 默认圆心为View的左上角
*
* 水平向右:0度 顺时针旋转度数增加
*
*
*/
RotateAnimation animation = new RotateAnimation(0, 180,
view.getWidth() / 2, view.getHeight());
animation.setDuration(500);
//动画执行完以后,保持最后的状态
animation.setFillAfter(true);
//设置延时执行的动画
animation.setStartOffset(offset);
view.startAnimation(animation);
}
}
</span>
3.
package com.dystu.youkudemo; import android.app.Activity; import android.os.Bundle; import android.view.KeyEvent; import android.view.View; import android.view.View.OnClickListener; import android.widget.ArrayAdapter; import android.widget.AutoCompleteTextView; import android.widget.ImageView; import android.widget.RelativeLayout; public class MainActivity extends Activity implements OnClickListener { private ImageView icon_menu, icon_home; private RelativeLayout level1; private RelativeLayout level2; private RelativeLayout level3; // 用于判断第三级菜单是否显示 默认是显示的(true) private boolean isLevel3Show = true; private boolean isLevel2Show = true; private boolean isLevel1Show = true; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); icon_home = (ImageView) findViewById(R.id.icon_home); icon_menu = (ImageView) findViewById(R.id.icon_menu); level1 = (RelativeLayout) findViewById(R.id.level1); level2 = (RelativeLayout) findViewById(R.id.level2); level3 = (RelativeLayout) findViewById(R.id.level3); icon_home.setOnClickListener(this); icon_menu.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.icon_menu: // 如果第三级菜单是显示状态,则隐藏,反之,则显示; if (isLevel3Show) { // 隐藏第三级菜单 MyUtils.startAnimationOut(level3); } else { // 显示 MyUtils.startAnimationIn(level3); } isLevel3Show = !isLevel3Show; break; case R.id.icon_home: // 如果二级菜单是显示状态,那么就隐藏2,3级菜单; // 如果二级菜单是隐藏状态,那么就显示2级菜单。 if (isLevel2Show) { MyUtils.startAnimationOut(level2); isLevel2Show = false; if (isLevel3Show) { // 如果第三级菜单也显示,那也将其隐藏 MyUtils.startAnimationOut(level3); isLevel3Show = false; } } else { MyUtils.startAnimationIn(level2); isLevel2Show = true; } break; default: break; } } /** * * 监听menu按键的事件 * */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_MENU) { changeLevel1State(); } return super.onKeyDown(keyCode, event); } /** * * * 改变第一级菜单的状态 * */ private void changeLevel1State() { // 如果第一级菜单是显示状态 那么隐藏1,2,3级菜单 // 如果第一级菜单是隐藏状态,那么显示1,2级菜单 if (isLevel1Show) { MyUtils.startAnimationOut(level1); isLevel1Show = false; if (isLevel2Show) { MyUtils.startAnimationOut(level2); isLevel2Show = false; if (isLevel3Show) { MyUtils.startAnimationOut(level3); isLevel3Show = false; } } } else { MyUtils.startAnimationIn(level1); isLevel1Show = true; MyUtils.startAnimationIn(level2); isLevel2Show = true; } } }
相关文章推荐
- Android自定义控件系列一:Android如何实现老版优酷客户端三级环形菜单
- Android自定义控件——仿优酷圆盘菜单
- Android自定义控件系列一:Android如何实现老版优酷客户端三级环形菜单
- Android自定义控件系列一:Android如何实现老版优酷客户端三级环形菜单
- Android自定义控件:老版优酷的三级菜单(效果图 + Demo)
- Android自定义控件2--优酷菜单界面初始化
- Android自定义控件4--优酷菜单的菜单键及细节补充
- Android自定义控件系列一:Android如何实现老版优酷客户端三级环形菜单
- Android自定义控件3--优酷菜单执行动画
- Android自定义控件——仿优酷圆盘菜单
- android基础笔记——自定义控件和视图:优酷菜单:RotateAnimation
- Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
- android 自定义控件--(圆盘形菜单控件)
- Android 实现形态各异的双向侧滑菜单 自定义控件来袭
- Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
- Android 实现形态各异的双向侧滑菜单 自定义控件来袭
- Android 自定义控件打造史上最简单的侧滑菜单
- android 自定义控件--(圆盘形菜单控件)
- Android自定义控件——侧滑菜单
- android特效集锦系列之五 仿优酷菜单