自定义控件初步<实现半圆形弹出菜单>

最新推荐文章于 2023-11-26 17:31:40 发布

风飞雪未扬

最新推荐文章于 2023-11-26 17:31:40 发布

阅读量906

点赞数

分类专栏：自定义控件文章标签：自定义控件半圆形弹出菜单动画播放

本文链接：https://blog.youkuaiyun.com/u013616976/article/details/44784925

版权

自定义控件专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用Android系统控件实现半圆形弹出菜单的方法。通过不同层级的相对布局展示菜单，并利用旋转动画实现菜单的展开与收起效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义控件初步<实现半圆形弹出菜单>

自定义控件大体上分为四种
1.使用系统控件实现自定义控件
2.定义集成View的类绘制特定的控件
3.自定义控件并自定义属性
4.自己定义一个类继承ViewGroup

又浅入深，今天先使用系统的控件实现自定义控件效果

首先使用相对布局布置页面

先上效果

<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=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="自定义优酷布局" />

    <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_centerHorizontal="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_marginBottom="10dp"
            android:layout_marginLeft="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_marginBottom="6dp"
            android:layout_marginLeft="20dp"
           
            android:background="@drawable/channel2" />
        
        <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_marginBottom="6dp"
            android:layout_marginLeft="30dp"
            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/channel7"
            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/channel7" />
        <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_marginBottom="6dp"
            android:layout_marginRight="20dp"
            android:background="@drawable/channel6" />
         <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_marginBottom="6dp"
            android:layout_marginRight="30dp"
            android:background="@drawable/channel5" />
    </RelativeLayout>

</RelativeLayout>

借助于动画实现动画效果

package com.example.youku;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends Activity implements OnClickListener {
  // 初始化是否显示参数显示
  private static boolean isShowLevel1 = true;
  private static boolean isShowLevel2 = true;
  private static boolean isShowLevel3 = true;
  // 初始化imageView
  private ImageView icon_menu;
  private ImageView icon_home;
  // 获取 三层布局
  private RelativeLayout level1;
  private RelativeLayout level2;
  private RelativeLayout level3;

  @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);
    icon_home.setOnClickListener(this);
    icon_menu.setOnClickListener(this);
    level1 = (RelativeLayout) findViewById(R.id.level1);
    level2 = (RelativeLayout) findViewById(R.id.level2);
    level3 = (RelativeLayout) findViewById(R.id.level3);
  }

  @Override
  public void onClick(View v) {
    switch (v.getId()) {
      case R.id.icon_home:
        if (isShowLevel2) {
          //播放动画
          AnimationUtil.showOutAnimation(level2, 100);
          if (isShowLevel3) {
            AnimationUtil.showOutAnimation(level3, 200);
            isShowLevel3 = false;
          }
        }

        else {

          AnimationUtil.showInAnimation(level2);
        }
        isShowLevel2 = !isShowLevel2;
        break;
      case R.id.icon_menu:
        if (isShowLevel3) {

          AnimationUtil.showOutAnimation(level3);
        } else {

          AnimationUtil.showInAnimation(level3);
        }
        isShowLevel3 = !isShowLevel3;
        break;
    }
  }

  @Override
  public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_MENU) {
      if (isShowLevel1) {
        isShowLevel1 = false;
        AnimationUtil.showOutAnimation(level1);
        if (isShowLevel2) {
          isShowLevel2 = false;
          AnimationUtil.showOutAnimation(level2, 100);
        }
        if (isShowLevel3) {
          isShowLevel3 = false;
          AnimationUtil.showOutAnimation(level3, 200);

        }

      } else {
        isShowLevel1 = true;
        AnimationUtil.showInAnimation(level1);
      }
      return true;
    }
    return super.onKeyDown(keyCode, event);
  }

}

动画工具类

package com.example.youku;

import android.R.integer;
import android.view.View;
import android.view.animation.RotateAnimation;

/**  ============================================================  
 * 项目名称：youku   
 * 
 * 类名称：MyView   
 * 
 * 类描述：   动画操作
 * 
 * 创建人：flyou  
 * 
 * 创建时间：2015-3-31 下午7:12:03  
 *  
 * 修改备注：   
 * 
 * 版本：@version    
 *   ============================================================ 
 */
public class AnimationUtil {
  public static final String TAG = "MyView";
public static void showInAnimation(View view){
  RotateAnimation animation=new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight());
  animation.setDuration(500);
  animation.setFillAfter(true);
  view.startAnimation(animation);
  
}
public static void showOutAnimation(View view){
  RotateAnimation animation=new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());
  animation.setDuration(500);
  animation.setFillAfter(true);
  view.startAnimation(animation);
  
}
public static void showInAnimation(View view,int offset){
  RotateAnimation animation=new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight());
  animation.setDuration(500);
  animation.setStartOffset(offset);
  animation.setFillAfter(true);
  view.startAnimation(animation);
  
}
public static void showOutAnimation(View view,int offset){
  RotateAnimation animation=new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());
  animation.setDuration(500);
  animation.setStartOffset(offset);
  animation.setFillAfter(true);
  view.startAnimation(animation);
  
}
}