自定义控件实现学习
程序员文章站
2022-06-12 22:45:58
...
1.优酷菜单的实现-利用现有的控件实现
实现优酷菜单的步骤分四步:
*在xml文件中进行布局设计
*给指定的控件添加点击事件
*执行动画(设定animationUtils类,里面完成动画类设计)–旋转动画–补间动画
*手机菜单按钮的捕获
主要代码如下
(1)activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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="com.youkumenu.MainActivity">
<RelativeLayout
android:id="@+id/rl_level1"
android:layout_width="100dp"
android:background="@mipmap/level1"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_height="50dp">
<ImageButton
android:id="@+id/ib_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/icon_home"
android:layout_centerInParent="true"
android:background="@null"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_level2"
android:layout_width="180dp"
android:background="@mipmap/level2"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_height="90dp">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/icon_search"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginBottom="5dp"
android:background="@null"
/>
<ImageButton
android:id="@+id/ib_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/icon_menu"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:background="@null"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/icon_myyouku"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:background="@null"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_level3"
android:layout_width="280dp"
android:background="@mipmap/level3"
android:layout_height="140dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/channel1"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginBottom="5dp"
android:background="@null"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/channel2"
android:layout_marginLeft="30dp"
android:layout_marginTop="60dp"
android:background="@null"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/channel3"
android:layout_marginLeft="65dp"
android:layout_marginTop="25dp"
android:background="@null"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/channel4"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:background="@null"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/channel5"
android:layout_alignParentRight="true"
android:layout_marginRight="65dp"
android:layout_marginTop="25dp"
android:background="@null"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/channel6"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:layout_marginTop="60dp"
android:background="@null"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/channel7"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:background="@null"/>
</RelativeLayout>
</RelativeLayout>
(2)MainActivity.java
package com.youkumenu;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.RelativeLayout;
import com.youkumenu.utils.AnimationUtils;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private RelativeLayout rl_level1;
private RelativeLayout rl_level2;
private RelativeLayout rl_level3;
boolean isLevel1Display=true;
boolean isLevel2Display=true;
boolean isLevel3Display=true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化控件
initViews();
}
//自定义方法,初始化UI布局
private void initViews(){
findViewById(R.id.ib_home).setOnClickListener(this);
findViewById(R.id.ib_menu).setOnClickListener(this);
rl_level1= (RelativeLayout) findViewById(R.id.rl_level1);
rl_level2= (RelativeLayout) findViewById(R.id.rl_level2);
rl_level3= (RelativeLayout) findViewById(R.id.rl_level3);
}
//捕获手机菜单键的按下
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
//keycode 事件码
//keyevent 保存了当前事件的其他信息,如单击,双击等等
if(keyCode == KeyEvent.KEYCODE_MENU){//如果按下去的是手机菜单
if(isLevel1Display){
long delay=0;
if(isLevel3Display){
AnimationUtils.rotateOutAnim(rl_level3,0);//如果三级菜单存在,转出去
isLevel3Display=false;
delay+=200;
}
if(isLevel2Display){
AnimationUtils.rotateOutAnim(rl_level2,delay);//如果第二级级菜单存在,转出去
isLevel2Display=false;
delay+=200;
}
AnimationUtils.rotateOutAnim(rl_level1,delay);//如果第二级级菜单存在,转出去
}else{
//顺次转进来,一级,二级,三级
AnimationUtils.rotateInAnim(rl_level1,0);
AnimationUtils.rotateInAnim(rl_level2,200);
isLevel2Display=true;
AnimationUtils.rotateInAnim(rl_level3,400);
isLevel3Display=true;
}
isLevel1Display=!isLevel1Display;
return true;//表示消费了当前事件
}
return super.onKeyDown(keyCode, event);
}
@Override
public void onClick(View v){
if(AnimationUtils.runningAnimationCount>0){
//表示当前有动画正在执行,不执行当前点击事件
return;
}
switch (v.getId()){
case R.id.ib_home:
//逻辑代码
//如果三级菜单已经显示,点击-->让菜单转出去
//如果三级菜单没有显示,点击-->让菜单转进来显示
if(isLevel2Display){
//定义新变量,来保存level2延迟的时间,如果三级菜单存在,延迟200,如果三级菜单不存在,则保持默认0
long delay=0;
//考虑三级菜单是否存在
if(isLevel3Display){
AnimationUtils.rotateOutAnim(rl_level3,0);
isLevel3Display=false;
delay=200;
}
AnimationUtils.rotateOutAnim(rl_level2,delay);//设置level3先转,然后level2转
isLevel2Display=false;
}else{
AnimationUtils.rotateInAnim(rl_level2, 0);
isLevel2Display=true;
}
break;
case R.id.ib_menu:
//逻辑代码
//如果三级菜单已经显示,点击-->让菜单转出去
//如果三级菜单没有显示,点击-->让菜单转进来显示
if(isLevel3Display){
AnimationUtils.rotateOutAnim(rl_level3,0);
isLevel3Display=false;
}else{
AnimationUtils.rotateInAnim(rl_level3, 0);
isLevel3Display=true;
}
break;
default:
break;
}
}
}
(3)工具类 AnimationUtils
package com.youkumenu.utils;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;
/**
* Created by zuojx on 2017/12/12.
*/
public class AnimationUtils {
public static int runningAnimationCount=0;//表示当前在执行的动画的数量
//旋转出去的动画
public static void rotateOutAnim(RelativeLayout layout,long delay) {
//如果转出去了,则找到所有的子view,进行隐藏
int childCount = layout.getChildCount();
for (int i=0;i<childCount;i++){
layout.getChildAt(i).setEnabled(false);
}
RotateAnimation ra= new RotateAnimation(
0f,-180f, //开始、结束的角度 逆时针旋转,角度递减;顺时针旋转,角度递增
Animation.RELATIVE_TO_SELF,0.5f,//相对的坐标点,指定旋转中心的X值
Animation.RELATIVE_TO_SELF,1f);//相对的坐标点,指定旋转中心的Y值
ra.setDuration(500); //设定执行时长
ra.setFillAfter(true); //设定动画停止在结束位置--->补间动画必须设定的参数
ra.setStartOffset(delay);//设置动画开始延时时间
ra.setAnimationListener(new MyAnimationListener());//转出动画添加监听事件
layout.startAnimation(ra);
}
public static void rotateInAnim(RelativeLayout layout, long delay) {
//如果转进来了,则找到所有的子view,进行启用
int childCount = layout.getChildCount();
for (int i=0;i<childCount;i++){
layout.getChildAt(i).setEnabled(true);
}
RotateAnimation ra= new RotateAnimation(
-180f,0f, //开始、结束的角度 逆时针旋转,角度递减;顺时针旋转,角度递增
Animation.RELATIVE_TO_SELF,0.5f,//相对的坐标点,指定旋转中心的X值
Animation.RELATIVE_TO_SELF,1f);//相对的坐标点,指定旋转中心的Y值
ra.setDuration(500); //设定执行时长
ra.setFillAfter(true); //设定动画停止在结束位置--->补间动画必须设定的参数
ra.setStartOffset(delay);//设置动画开始延时时间
ra.setAnimationListener(new MyAnimationListener());//转入动画添加监听事件
layout.startAnimation(ra);
}
static class MyAnimationListener implements Animation.AnimationListener{
@Override
public void onAnimationStart(Animation animation) {
runningAnimationCount++;
}
@Override
public void onAnimationEnd(Animation animation) {
runningAnimationCount--;
}
@Override
public void onAnimationRepeat(Animation animation) {
}
}
}
下一篇: python3 | 函数