本文实例讲述了Android编程实现仿优酷旋转菜单效果。分享给大家供大家参考,具体如下:

首先,看下效果:

不好意思,不会制作动态图片,只好上传静态的了,如果谁会,请教教我吧。

首先,看下xml文件:

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#c9c9c9" >

android:id="@+id/relate_level3"

android:layout_width="280dp"

android:layout_height="140dp"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@drawable/level3" >

android:id="@+id/c1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_marginBottom="6dip"

android:layout_marginLeft="12dip"

android:background="@drawable/channel1" />

android:id="@+id/c2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@+id/c1"

android:layout_marginBottom="12dip"

android:layout_marginLeft="28dip"

android:background="@drawable/channel2" />

android:id="@+id/c3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@+id/c2"

android:layout_marginBottom="8dip"

android:layout_marginLeft="6dip"

android:layout_toRightOf="@+id/c2"

android:background="@drawable/channel3" />

android:id="@+id/c4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_margin="6dip"

android:background="@drawable/channel4" />

android:id="@+id/c5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@+id/c6"

android:layout_marginBottom="8dip"

android:layout_marginRight="6dip"

android:layout_toLeftOf="@+id/c6"

android:background="@drawable/channel5" />

android:id="@+id/c6"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@+id/c7"

android:layout_alignParentRight="true"

android:layout_marginBottom="12dip"

android:layout_marginRight="28dip"

android:background="@drawable/channel6" />

android:id="@+id/c7"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_marginBottom="6dip"

android:layout_marginRight="12dip"

android:background="@drawable/channel7" />

android:id="@+id/relate_level2"

android:layout_width="180dp"

android:layout_height="90dp"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@drawable/level2" >

android:id="@+id/menu"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_margin="6dip"

android:background="@drawable/icon_menu" />

android:id="@+id/search"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_margin="10dip"

android:background="@drawable/icon_search" />

android:id="@+id/myyouku"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_margin="10dip"

android:background="@drawable/icon_myyouku" />

android:id="@+id/relate_level1"

android:layout_width="100dp"

android:layout_height="50dp"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@drawable/level1" >

android:id="@+id/home"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="10dp"

android:background="@drawable/icon_home" />

大家看到主要有三个RalativeLayout,就是大家看到的三层,但是关于图片的倾斜 是怎样实现的呢?实际上是个假象,图片是正放的,里面图像是倾斜的。如下图:

这样大概能明白,下面就是开始动画效果了,先看下主Activity:

public class TestYoukuActivity extends Activity {

/** Called when the activity is first created. */

private boolean areLevel2Showing = true, areLevel3Showing = true;

private RelativeLayout relate_level2, relate_level3;

private ImageButton home, menu;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

findViews();

setListener();

}

private void findViews() {

relate_level2 = (RelativeLayout) findViewById(R.id.relate_level2);

relate_level3 = (RelativeLayout) findViewById(R.id.relate_level3);

home = (ImageButton) findViewById(R.id.home);

menu = (ImageButton) findViewById(R.id.menu);

}

private void setListener() {

// 给大按钮设置点击事件

home.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

if (!areLevel2Showing) {

MyAnimation.startAnimationsIn(relate_level2, 500);

} else {

if (areLevel3Showing) {

MyAnimation.startAnimationsOut(relate_level2, 500, 500);

MyAnimation.startAnimationsOut(relate_level3, 500, 0);

areLevel3Showing = !areLevel3Showing;

} else {

MyAnimation.startAnimationsOut(relate_level2, 500, 0);

}

}

areLevel2Showing = !areLevel2Showing;

}

});

menu.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

if (!areLevel3Showing) {

MyAnimation.startAnimationsIn(relate_level3, 500);

} else {

MyAnimation.startAnimationsOut(relate_level3, 500, 0);

}

areLevel3Showing = !areLevel3Showing;

}

});

}

}

应该注意到了:

MyAnimation.startAnimationsIn(relate_level2, 500);

看一下这个静态方法的实现:

public static void startAnimationsIn(ViewGroup viewgroup, int durationMillis) {

viewgroup.setVisibility(0);

for (int i = 0; i < viewgroup.getChildCount(); i++) {

viewgroup.getChildAt(i).setVisibility(0);

viewgroup.getChildAt(i).setClickable(true);

viewgroup.getChildAt(i).setFocusable(true);

}

Animation animation;

animation = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF,

0.5f, Animation.RELATIVE_TO_SELF, 1.0f);

animation.setFillAfter(true);

animation.setDuration(durationMillis);

viewgroup.startAnimation(animation);

}

RotateAnimation是画面转移旋转动画效果,看一下它的构造方法:

RotateAnimation(Context context, AttributeSet attrs)

Constructor used when a RotateAnimation is loaded from a resource.

RotateAnimation(float fromDegrees, float toDegrees)

Constructor to use when building a RotateAnimation from code.

RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)

Constructor to use when building a RotateAnimation from code

RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

Constructor to use when building a RotateAnimation from code

在这里使用的是第四个构造方法:

fromDegrees:旋转的开始角度。

toDegrees:旋转的结束角度。

pivotXType:X轴的伸缩模式,可以取值为ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。

pivotXValue:X坐标的伸缩值。

pivotYType:Y轴的伸缩模式,可以取值为ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。

pivotYValue:Y坐标的伸缩值。

关于角度问题:

当角度为负数——表示逆时针旋转

当角度为正数——表示顺时针旋转

(负数from——to正数:顺时针旋转)

(负数from——to负数:逆时针旋转)

(正数from——to正数:顺时针旋转)

(正数from——to负数:逆时针旋转)

关于pivotXValue:这一点的X坐标的对象被旋转,在指定的绝对数字0是左边边缘。如果pivotXType数是绝对的这个值可以是一个绝对,另外也可以是百分比(在1.0为100%)。50%是x中点,100%为右边缘。

同理,pivotYValue:这一点的Y坐标的对象被旋转,在指定的绝对数字0是顶部边缘。如果pivotYType数是绝对的这个值可以是一个绝对,另外也可以是百分比(在1.0为100%)。50%是Y中点,100%为下边缘。

然后再看下调用的其他的方法:

setFillAfter:

If fillAfter is true, the transformation that this animation performed will persist when it is finished. Defaults to false if not set. Note that this applies when using an AnimationSet to chain animations. The transformation is not applied before the AnimationSet itself starts.

如果fillAfter为真,transformation 动画将一直运行直到它完成。默认设置为假。注意:这适用于当使用一个AnimationSet连锁动画。transformation 是不适用AnimationSet本身之前开始。

setDuration:设置动画时间。

再看一下退出:

// 图标的动画(出动画)

public static void startAnimationsOut(final ViewGroup viewgroup,

int durationMillis, int startOffset) {

Animation animation;

animation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF,

0.5f, Animation.RELATIVE_TO_SELF, 1.0f);

animation.setFillAfter(true);

animation.setDuration(durationMillis);

animation.setStartOffset(startOffset);

animation.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation arg0) {}

@Override

public void onAnimationRepeat(Animation arg0) {}

@Override

public void onAnimationEnd(Animation arg0) {

viewgroup.setVisibility(8);

for (int i = 0; i < viewgroup.getChildCount(); i++) {

viewgroup.getChildAt(i).setVisibility(8);

viewgroup.getChildAt(i).setClickable(false);

viewgroup.getChildAt(i).setFocusable(false);

}

}

});

viewgroup.startAnimation(animation);

}

有一个animation.setStartOffset(startOffset);是设置animation多长时间以后执行。

最后:代码下载地址:

希望本文所述对大家Android程序设计有所帮助。

android仿优酷菜单,Android编程实现仿优酷旋转菜单效果(附demo源码)相关推荐

  1. 蓝牙配对模式 java_【Android】蓝牙开发—— 经典蓝牙配对介绍(Java代码实现演示)附Demo源码...

    目录 前言 一.连接&配对方法介绍 二.演示:第一次连接蓝牙设备  &  直接与蓝牙设备建立配对 三.总结 四.补充 五.Demo案例源码地址: 前言 前面两篇文章[Android]蓝 ...

  2. 【Android】蓝牙开发—— 经典蓝牙配对介绍(Java代码实现演示)附Demo源码

    目录 前言 一.连接&配对方法介绍 二.演示:第一次连接蓝牙设备  &  直接与蓝牙设备建立配对 三.总结 四.补充 五.Demo案例源码地址: 前言 前面两篇文章[Android]蓝 ...

  3. 分类图片展示php源码,HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)...

    本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我 ...

  4. android 桌面图标的点击放大效果,Android仿英语流利说取词放大控件的实现方法(附demo源码下载)...

    本文实例讲述了Android仿英语流利说取词放大控件的实现方法.分享给大家供大家参考,具体如下: 1 取词放大控件 英语流利说是一款非常帮的口语学习app,在app的修炼页面长按屏幕,会弹出一个放大镜 ...

  5. android 融云 + 科大讯飞 实现仿微信语音消息转换为文字(附DEMO源码)

    融云SDK 使用很方便,简单配置就可以搭建即时通讯功能,配合科大讯飞的语音识别, 即可实现微信中语音消息转换为文字的功能 融云sdk的基本使用就不细说了, 网上很多资料 使用融云sdk自带的聊天会话界 ...

  6. Android 二维码 生成和识别(附Demo源码)

    Posted on 2013-08-25 23:15 泡泡糖 阅读( 20424) 评论( 7) 编辑 收藏 今天讲一下目前移动领域很常用的技术--二维码.现在大街小巷.各大网站都有二维码的踪迹,不管 ...

  7. Android - 弹幕实现原理(附Demo源码)

    3.核心代码就要来了.在这里有几点是需要说明的. (1)首先播放视频的话这里用到的是VideoView,使用起来也非常简单,先要设置一个视频文件的路径:String uri = "andro ...

  8. 基于Android的儿童绘本阅读与收听APP的设计与实现【附项目源码+论文说明】

    基于Android的儿童绘本阅读与收听APP的设计与实现演示 摘要 随着人们生活水平的不断提高,儿童学前教育日益受到重视.绘本作为一种历史古老.效果优秀的早教手段,利用图画和简短的文字构筑出一个跌宕起 ...

  9. Android BlueToothBLE入门(二)——设备的连接和通讯(附Demo源码地址)

    学更好的别人, 做更好的自己. --<微卡智享> 本文长度为7870字,预计阅读12分钟 前言 接<Android BlueToothBLE入门(一)--低功耗蓝牙介绍>上篇, ...

最新文章

  1. python sort函数key_Python:s.sort([cmp[, key[, reverse]]])
  2. cleanmymac3.9.6 for mac_色轮插件配色神器Coolorus 2.6(win+mac)
  3. 骰子的妙用---课堂答题
  4. OkHttp3 HTTP请求执行流程分析
  5. 20220203--CTF刷题WEB方向-- PHP2--考察URL编码解码和修改php后缀为phps
  6. nodejs即时聊天
  7. 高等组合学笔记(八):第一类Stirling数, 整数分拆
  8. vue-cli3.0 初体验
  9. 《博弈论与生活》思维导图
  10. 通信原理的新认识-从实践到原理
  11. 《MLB棒球创造营》:走近棒球运动·匹兹堡海盗队
  12. FPGA开发中sof和elf文件的合并与格式转换
  13. 简洁桌面(使用Windows自带的桌面整理功能)
  14. CodeForces - 950C Zebras 模拟变脑洞的天秀代码
  15. NSDI 2021 Breaking the Transience-Equilibrium Nexus: A New Approach to Datacenter Packet Transport笔记
  16. FTDI for linux的安装指南
  17. scala的 case class与class的区别
  18. 传统安防监控摄像头Onvif云台控制直播流如何转换成GB/T28181对接到国标视频平台公安内网
  19. Nodejs+Koa2+云服务ECS 开发微信公众号(一)之环境配置
  20. 大数据Hive(一):​​​​​​​Hive基本概念

热门文章

  1. BizTalk接收消息后路由失败
  2. 一个完整的使用的例子,和可下代码
  3. 把.NET程序部署到没有安装.NET Framwork的机器上
  4. JZOJ 6290. 倾斜的线
  5. 将CSV文件存为HTML文件形式
  6. python 最麻烦的时间有药了
  7. saltstack实战2--远程执行之模块(Modules)
  8. 十分钟了解HTTPS协议
  9. mapreduce优化总结
  10. NHibernate 操作视图 第十三篇