Android 自定义ViewGroup手把手教你实现ArcMenu

最新推荐文章于 2024-09-11 06:53:28 发布
最新推荐文章于 2024-09-11 06:53:28 发布
阅读量40 收藏 23
点赞数 10
分类专栏： 程序员 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84150043/article/details/138381368
版权
3、在自定义的ViewGroup中获取这些属性

Arcmenu.java

/**

  • @author zhy

*/

public class ArcMenu extends ViewGroup implements OnClickListener

{

private static final String TAG = “ArcMenu”;

/**

  • 菜单的显示位置

*/

private Position mPosition = Position.LEFT_TOP;

/**

  • 菜单显示的半径，默认100dp

*/

private int mRadius = 100;

/**

  • 用户点击的按钮

*/

private View mButton;

/**

  • 当前ArcMenu的状态

*/

private Status mCurrentStatus = Status.CLOSE;

/**

  • 回调接口

*/

private OnMenuItemClickListener onMenuItemClickListener;

/**

  • 状态的枚举类

  • @author zhy

*/

public enum Status

{

OPEN, CLOSE

}

/**

  • 设置菜单现实的位置，四选1，默认右下

  • @author zhy

*/

public enum Position

{

LEFT_TOP, RIGHT_TOP, RIGHT_BOTTOM, LEFT_BOTTOM;

}

public interface OnMenuItemClickListener

{

void onClick(View view, int pos);

}

public ArcMenu(Context context)

{

this(context, null);

}

public ArcMenu(Context context, AttributeSet attrs)

{

this(context, attrs, 0);

}

/**

  • 初始化属性

  • @param context

  • @param attrs

  • @param defStyle

*/

public ArcMenu(Context context, AttributeSet attrs, int defStyle)

{

super(context, attrs, defStyle);

// dp convert to px

mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

mRadius, getResources().getDisplayMetrics());

TypedArray a = context.getTheme().obtainStyledAttributes(attrs,

R.styleable.ArcMenu, defStyle, 0);

int n = a.getIndexCount();

for (int i = 0; i < n; i++)

{

int attr = a.getIndex(i);

switch (attr)

{

case R.styleable.ArcMenu_position:

int val = a.getInt(attr, 0);

switch (val)

{

case 0:

mPosition = Position.LEFT_TOP;

break;

case 1:

mPosition = Position.RIGHT_TOP;

break;

case 2:

mPosition = Position.RIGHT_BOTTOM;

break;

case 3:

mPosition = Position.LEFT_BOTTOM;

break;

}

break;

case R.styleable.ArcMenu_radius:

// dp convert to px

mRadius = a.getDimensionPixelSize(attr, (int) TypedValue

.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100f,

getResources().getDisplayMetrics()));

break;

}

}

a.recycle();

}

4、计算子元素的大小：

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

{

int count = getChildCount();

for (int i = 0; i < count; i++)

{

// mesure child

getChildAt(i).measure(MeasureSpec.UNSPECIFIED,

MeasureSpec.UNSPECIFIED);

}

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

}

5、确定子元素的位置：

@Override

protected void onLayout(boolean changed, int l, int t, int r, int b)

{

if (changed)

{

layoutButton();

int count = getChildCount();

/**

  • 设置所有孩子的位置 例如(第一个为按钮)： 左上时，从左到右 ] 第2个：mRadius(sin0 , cos0)

  • 第3个：mRadius(sina ,cosa) 注：[a = Math.PI / 2 * (cCount - 1)]

  • 第4个：mRadius(sin2a ,cos2a) 第5个：mRadius(sin3a , cos3a) …

*/

for (int i = 0; i < count - 1; i++)

{

View child = getChildAt(i + 1);

child.setVisibility(View.GONE);

int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2)

  • i));

int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2)

  • i));

// childview width

int cWidth = child.getMeasuredWidth();

// childview height

int cHeight = child.getMeasuredHeight();

// 右上，右下

if (mPosition == Position.LEFT_BOTTOM

|| mPosition == Position.RIGHT_BOTTOM)

{

ct = getMeasuredHeight() - cHeight - ct;

}

// 右上，右下

if (mPosition == Position.RIGHT_TOP

|| mPosition == Position.RIGHT_BOTTOM)

{

cl = getMeasuredWidth() - cWidth - cl;

}

Log.e(TAG, cl + " , " + ct);

child.layout(cl, ct, cl + cWidth, ct + cHeight);

}

}

}

首先在layoutButton中对按钮位置就行设置，以及初始化点击事件；然后从第二个子元素开始为菜单项，分别设置其位置，计算的原理就是上面我画的草图，可以再去仔细看看，动手在纸上画一画。

/**

  • 第一个子元素为按钮，为按钮布局且初始化点击事件

*/

private void layoutButton()

{

View cButton = getChildAt(0);

cButton.setOnClickListener(this);

int l = 0;

int t = 0;

int width = cButton.getMeasuredWidth();

int height = cButton.getMeasuredHeight();

switch (mPosition)

{

case LEFT_TOP:

l = 0;

t = 0;

break;

case LEFT_BOTTOM:

l = 0;

t = getMeasuredHeight() - height;

break;

case RIGHT_TOP:

l = getMeasuredWidth() - width;

t = 0;

break;

case RIGHT_BOTTOM:

l = getMeasuredWidth() - width;

t = getMeasuredHeight() - height;

break;

}

Log.e(TAG, l + " , " + t + " , " + (l + width) + " , " + (t + height));

cButton.layout(l, t, l + width, t + height);

}

这是定位Button的代码，此时的代码已经实现了定位，如果你把onLayout中childView.setVisibility(VISIBLE)。ArcMenu的整个控件的样子已经实现了，接下来就是点击事件，已经效果动画的实现了。

6、设置按钮点击事件

/**

  • 为按钮添加点击事件

*/

@Override

public void onClick(View v)

{

mButton = findViewById(R.id.id_button);

if (mButton == null)

{

mButton = getChildAt(0);

}

rotateView(mButton, 0f, 270f, 300);

toggleMenu(300);

}

/**

  • 按钮的旋转动画

  • @param view

  • @param fromDegrees

  • @param toDegrees

  • @param durationMillis

*/

public static void rotateView(View view, float fromDegrees,

float toDegrees, int durationMillis)

{

RotateAnimation rotate = new RotateAnimation(fromDegrees, toDegrees,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,

0.5f);

rotate.setDuration(durationMillis);

rotate.setFillAfter(true);

view.startAnimation(rotate);

}

public void toggleMenu(int durationMillis)

{

int count = getChildCount();

for (int i = 0; i < count - 1; i++)

{

final View childView = getChildAt(i + 1);

childView.setVisibility(View.VISIBLE);

int xflag = 1;

int yflag = 1;

if (mPosition == Position.LEFT_TOP

|| mPosition == Position.LEFT_BOTTOM)

xflag = -1;

if (mPosition == Position.LEFT_TOP

|| mPosition == Position.RIGHT_TOP)

yflag = -1;

// child left

int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));

// child top

int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));

AnimationSet animset = new AnimationSet(true);

Animation animation = null;

if (mCurrentStatus == Status.CLOSE)

{// to open

animset.setInterpolator(new OvershootInterpolator(2F));

animation = new TranslateAnimation(xflag * cl, 0, yflag * ct, 0);

childView.setClickable(true);

childView.setFocusable(true);

} else

{// to close

animation = new TranslateAnimation(0f, xflag * cl, 0f, yflag

  • ct);

childView.setClickable(false);

childView.setFocusable(false);

}

animation.setAnimationListener(new AnimationListener()

{

public void onAnimationStart(Animation animation)

{

}

public void onAnimationRepeat(Animation animation)

{

}

public void onAnimationEnd(Animation animation)

{

if (mCurrentStatus == Status.CLOSE)

childView.setVisibility(View.GONE);

}

});

animation.setFillAfter(true);

animation.setDuration(durationMillis);

// 为动画设置一个开始延迟时间，纯属好看，可以不设

animation.setStartOffset((i * 100) / (count - 1));

RotateAnimation rotate = new RotateAnimation(0, 720,

Animation.RELATIVE_TO_SELF, 0.5f,

Animation.RELATIVE_TO_SELF, 0.5f);

rotate.setDuration(durationMillis);

rotate.setFillAfter(true);

animset.addAnimation(rotate);

animset.addAnimation(animation);

childView.startAnimation(animset);

final int index = i + 1;

childView.setOnClickListener(new View.OnClickListener()

{

@Override

public void onClick(View v)

{

if (onMenuItemClickListener != null)

onMenuItemClickListener.onClick(childView, index - 1);

menuItemAnin(index - 1);

changeStatus();

}

});

}

changeStatus();

Log.e(TAG, mCurrentStatus.name() +“”);

}

点击时，触发TanslateAnimation动画，从定点向外扩展，也给点击按钮添加了一个旋转动画，每个子菜单项同样添加了旋转动画，且如果用户设置回调，调用回调接口；设置子菜单的点击事件。整体就是点击然后动画效果~~

7、设置子菜单的点击事件

/**

  • 开始菜单动画，点击的MenuItem放大消失，其他的缩小消失

  • @param item

*/

private void menuItemAnin(int item)

{

for (int i = 0; i < getChildCount() - 1; i++)

{

View childView = getChildAt(i + 1);

if (i == item)

{

childView.startAnimation(scaleBigAnim(300));

} else

{

childView.startAnimation(scaleSmallAnim(300));

}

childView.setClickable(false);

childView.setFocusable(false);

}

}

/**

  • 缩小消失

  • @param durationMillis

  • @return

*/

private Animation scaleSmallAnim(int durationMillis)

{

Animation anim = new ScaleAnimation(1.0f, 0f, 1.0f, 0f,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,

0.5f);

anim.setDuration(durationMillis);

anim.setFillAfter(true);

return anim;

}

/**

  • 放大，透明度降低

  • @param durationMillis

  • @return

*/

private Animation scaleBigAnim(int durationMillis)

{

《设计思想解读开源框架》

第一章、 热修复设计

  • 第一节、 AOT/JIT & dexopt 与 dex2oat

  • 第二节、 热修复设计之 CLASS_ISPREVERIFIED 问题

  • 第三节、热修复设计之热修复原理

  • 第四节、Tinker 的集成与使用（自动补丁包生成）

    第二章、 插件化框架设计

  • 第一节、 Class 文件与 Dex 文件的结构解读

  • 第二节、 Android 资源加载机制详解

  • 第三节、 四大组件调用原理

  • 第四节、 so 文件加载机制

  • 第五节、 Android 系统服务实现原理

    第三章、 组件化框架设计

  • 第一节、阿里巴巴开源路由框——ARouter 原理分析

  • 第二节、APT 编译时期自动生成代码&动态类加载

  • 第三节、 Java SPI 机制

  • 第四节、 AOP&IOC

  • 第五节、 手写组件化架构

    第四章、图片加载框架

  • 第一节、图片加载框架选型

  • 第二节、Glide 原理分析

  • 第三节、手写图片加载框架实战

    第五章、网络访问框架设计

  • 第一节、网络通信必备基础

  • 第二节、OkHttp 源码解读

  • 第三节、Retrofit 源码解析

    第六章、 RXJava 响应式编程框架设计

  • 第一节、链式调用

  • 第二节、 扩展的观察者模式

  • 第三节、事件变换设计

  • 第四节、Scheduler 线程控制

    第七章、 IOC 架构设计

  • 第一节、 依赖注入与控制反转

  • 第二节、ButterKnife 原理上篇、中篇、下篇

  • 第三节、Dagger 架构设计核心解密

    第八章、 Android 架构组件 Jetpack

  • 第一节、 LiveData 原理

  • 第二节、 Navigation 如何解决 tabLayout 问题

  • 第三节、 ViewModel 如何感知 View 生命周期及内核原理

  • 第四节、 Room 架构方式方法

  • 第五节、 dataBinding 为什么能够支持 MVVM

  • 第六节、 WorkManager 内核揭秘

  • 第七节、 Lifecycles 生命周期


    本文包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…

    《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
    通信必备基础**

  • 第二节、OkHttp 源码解读

  • 第三节、Retrofit 源码解析

    [外链图片转存中…(img-sTBK5oav-1714573627544)]

    第六章、 RXJava 响应式编程框架设计

  • 第一节、链式调用

  • 第二节、 扩展的观察者模式

  • 第三节、事件变换设计

  • 第四节、Scheduler 线程控制

    [外链图片转存中…(img-NDa9XueG-1714573627545)]

    第七章、 IOC 架构设计

  • 第一节、 依赖注入与控制反转

  • 第二节、ButterKnife 原理上篇、中篇、下篇

  • 第三节、Dagger 架构设计核心解密

    [外链图片转存中…(img-Ua6t4gv2-1714573627546)]

    第八章、 Android 架构组件 Jetpack

  • 第一节、 LiveData 原理

  • 第二节、 Navigation 如何解决 tabLayout 问题

  • 第三节、 ViewModel 如何感知 View 生命周期及内核原理

  • 第四节、 Room 架构方式方法

  • 第五节、 dataBinding 为什么能够支持 MVVM

  • 第六节、 WorkManager 内核揭秘

  • 第七节、 Lifecycles 生命周期

    [外链图片转存中…(img-cvkhY3AQ-1714573627547)]
    本文包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…
    [外链图片转存中…(img-PRzS5kNA-1714573627549)]
    《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

ArcMenu(底部)
03-22
实现位于底部的Arcmen
【Android】自定义View / ViewGroup
helloworld370629的博客
11-30 1151
我们自定义View的目的是为了针对我们的工程需要，完成一些内置View不能实现或者实现起来很麻烦的功能。其中我们需要复写`onMeasure()`, `onLayout()`以及`onDraw()`。 接下来我们将通过自定义View实现类似于微信头像的效果。 自定义ViewGroup相比于自定义View会更加复杂一点，因为它不仅涉及到自身的测量，摆放以及绘制，还需要安排好子元素的测量，摆放以及绘制。但是ViewGroup本质上还是一个View，它继承自View.
Android中View和ViewGroup介绍
最新发布
2401_86964011的博客
09-11 1114
图1 窗口系统的客户端DecorView实际上是一个ViewGroup。在依存关系上来讲，对单个主窗口来讲，DecorView是Top-Level View。View并不是关注的重点，重要的是我们需要知道消息分发路径是建立在什么关系上的。View的成员变量mParent用来管理View上级关系的。而ViewGroup顾名思义就是一组View的管理，于是在ViewGroup构建了焦点管理和子View节点数组。
Android自定义ViewGroup布局进阶，完整的九宫格实现
star_nwe的博客
12-13 2224
如何把填充布局的逻辑抽取出来呢？每次初始化九宫格的时候就把九个布局全部添加进来，先测量布局了再说，然后通过暴露的方法隐藏多余的布局。通过一个定义一个数据适配器Adapter,内部封装一些逻辑，让具体实现的类去完成具体的逻辑。两种方法都可以，没有好坏之分。但是使用数据适配器的方案由于内部的View会少，性能会好那么一丢丢，总体来说差别不大。
带你深入理解自定义View和自定义ViewGroup
Dakaring的专栏
05-26 1980
在实现自定义 View 和自定义 ViewGroup 的过程中，需要注意测量、布局和绘制的流程和方法，以及合理处理子视图的添加和移除。自定义 ViewGroup 是指通过继承现有的 ViewGroup 类，重写相关方法和管理子视图的布局和绘制逻辑，来创建一个新的自定义容器。自定义 View 是指通过继承现有的 View 类，重写相关方法和实现自定义的绘制逻辑，来创建一个新的自定义视图。在以上示例代码中，我们通过继承 View 或 ViewGroup 类，重写了关键的方法，以实现自定义的视图或容器。
Android中自定义ViewGroup
2301_79600088的博客
04-04 919
三、一个小Demo我们新建一个叫AndroidViewGroup的工程，Activity起名为MainActivity。在写一个继承于ViewGroup的类，名叫HelloViewGroup。–>HelloViewGroup类@Override–>MainActivity类这时你可以运行一下，发现屏幕除了状态栏了那个Label是一片黑，呵呵。下面我们来修改代码，让自己的ViewGroup火起来。我们新建一个名叫myAddView的方法，这个方法用来向ViewGroup中添加组件：
Android自定义ViewGroup完美实现 ArcMenu
07-08
在Android开发中，自定义ViewGroup是实现独特用户界面效果的重要手段。ArcMenu是一个非常吸引人的设计，它呈现了一个扇形的菜单布局，通常用于显示一些可点击的图标或者选项，这种设计通常会给人一种优雅而直观的...
Android自定义ViewGroup实现标签流容器FlowLayout
09-01
在Android开发中，自定义ViewGroup是实现特定布局需求的重要手段。本文主要讲解如何自定义一个名为FlowLayout的标签流容器，适用于展示类似热门标签的自动换行布局。Flow Layout是一种布局方式，它允许子视图根据...
Android自定义ViewGroup实现标签浮动效果
01-06
前面在学习鸿洋大神的一些自定义的View文章，看到了自定义ViewGroup实现浮动标签，初步看了下他的思路以及结合自己的思路完成了自己的浮动标签的自定义ViewGroup。目前实现的可以动态添加标签、可点击。效果图如下：...
Android 手把手教您自定义ViewGroup（一）
08-02
我们将通过分析标题"Android 手把手教您自定义ViewGroup（一）"以及提供的博客链接，深入探讨这个主题。 首先，自定义ViewGroup意味着你需要扩展`android.view.ViewGroup`类，这是一个容器，可以包含多个子视图...
Android自定义viewGroup实现点击动画效果
01-20
在Android开发中，自定义ViewGroup是创建复杂用户界面或实现独特交互效果的重要手段。本文将探讨如何在自定义的ViewGroup中实现点击动画效果，具体以`MyCustomView`为例，它继承自ViewGroup并实现了`OnClickListener...
Android 自定义ViewGroup 实战篇 -> 实现FlowLayout源码程序
08-04
在Android开发中，自定义ViewGroup是实现复杂布局和交互的关键技术之一。本实战篇将聚焦于如何实现一个名为FlowLayout的自定义布局，它允许子视图按行排列，类似于HTML中的`<div>`标签。在Android应用设计中，...
Android自定义ViewGroup实现弹性滑动效果
08-28
在Android开发中，自定义ViewGroup是实现特定交互效果或界面布局的重要手段。...总之，自定义ViewGroup是Android开发中实现复杂交互和动画的重要手段，熟练掌握这一技术能够极大地丰富你的应用界面设计。
Android自定义ViewGroup的实现方法
09-02
在Android开发中，自定义ViewGroup是扩展布局功能的关键手段，尤其当系统提供的LinearLayout、RelativeLayout、FrameLayout等标准布局无法满足复杂界面设计时。本文将详细介绍如何实现一个自定义的ViewGroup，以...
Android自定义ViewGroup实现带箭头的圆角矩形菜单
01-04
就是声明一下你的这个自定义View有哪些可配置的属性，将来使用的时候可以自由配置。这里声明了7个属性，分别是：箭头宽度、箭头高度、箭头水平偏移、圆角半径、菜单背景色、阴影色、阴影厚度。 <resour
Android自定义ViewGroup实现竖向引导界面
01-20
在Android开发中，创建自定义ViewGroup是一种常见的需求，它允许开发者根据应用的特定需求定制UI组件。在这个案例中，我们将深入探讨如何实现一个竖向滚动的引导界面，即一个自定义的VerticalLinearLayout。通常，...
Android中自定义ViewGroup，Android开发岗还不会这些问题
m0_64603743的博客
12-08 149
2、ViewGroup是一个基类，并且是Layout和一些View组件的基类。 等等，不一而足，眼界有多高相信看到的就有多远，呵呵。 二、ViewGroup的三个方法 在继承ViewGroup时有三个重要的方法，下面我们就来看看： 1、onLayout方法 protected  void onLayout( boolean changed,  int left,  int top,  int right, 
使用LayoutParams自定义安卓ViewGroup
silencefly的博客
10-11 898
使用LayoutParams自定义安卓ViewGroup
【Android】Android自定义View和ViewGroup知识点汇总
devnn的专栏
10-17 770
一、View的绘制流程 onMeasure()-&amp;gt;onDraw()。 二、ViewGroup的绘制流程 onMeasure()-&amp;gt;onLayout()-&amp;gt;onDraw()(一般不重写)。 三、需要重写的函数 View：必须重写onDraw来绘制图形，不一定要重写onMeasure，需要定义wrap_content时才需要重写onMeasure。 ViewGroup：必须重写...
Android自定义ViewGroup实现侧滑菜单详解
"这篇教程详细解析了如何在Android中实现自定义的ViewGroup，特别是侧滑菜单的功能。通过创建一个自定义的SlideMenuView，我们可以将侧滑菜单和主面板结合在一起，形成一个完整的视图组件。" 在Android开发中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值