Android实现弧形菜单效果

前言:公司需求,自己写的一个弧形菜单!

效果:

开发环境:AndroidStudio2.2.1+gradle-2.14.1

涉及知识:1.自定义控件,2.事件分发等

部分代码:

public class HomePageMenuLayout extends ViewGroup {
 private Context context;
 // 菜单项的文本
 private String[] mItemTexts = null;
 private int StatusHeight;//状态栏高度
 public HomePageMenuLayout(Context context, AttributeSet attrs) {
 super(context, attrs);
 this.context = context;
 StatusHeight = ScreenUtils.getStatusHeight(context);
 }
 /**
 * 设置布局的宽高,并策略menu item宽高
 */
 int resWidth = 0;
 int resHeight = 0;
 int mRadius = 0;
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 //布局宽高尺寸设置为屏幕尺寸
 //设置该布局的大小
 setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
 /**
 * 根据传入的参数,分别获取测量模式和测量值
 */
 int width = MeasureSpec.getSize(widthMeasureSpec);
 resHeight = MeasureSpec.getSize(heightMeasureSpec);
 resWidth = MeasureSpec.getSize(widthMeasureSpec);
 // 获得半径
 mRadius = (int) (resHeight / 2 - 2 * StatusHeight);
 //设置item尺寸
 int childSize = (int) (mRadius * 1 / 2);
 // menu item测量模式--精确模式
 int childMode = MeasureSpec.EXACTLY;
 for (int i = 0; i < getChildCount(); i++) {
 final View child = getChildAt(i);
 if (child.getVisibility() == GONE) {
 continue;
 }
 // 计算menu item的尺寸;以及和设置好的模式,去对item进行测量
 int makeMeasureSpec = -1;
 makeMeasureSpec = MeasureSpec.makeMeasureSpec(childSize, childMode);
 child.measure(makeMeasureSpec, makeMeasureSpec);
 }
 }
 /**
 * item布局的角度
 */
 private int[] widthall = null;
 /**
 * 设置Item的位置:第一个参数1:该参数指出当前ViewGroup的尺寸或者位置是否发生了改变
 * 2.当期绘图光标横坐标位置
 * 3.当前绘图光标纵坐标位置
 */
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 int left, top;
 int cWidth = (int) (mRadius * 1 / 2);
 final int childCount = getChildCount();
 // 计算,中心点到menu item中心的距离
 float tmp = mRadius - cWidth / 2;
 // 遍历去设置menuitem的位置
 for (int i = 0; i < childCount; i++) {
 final View child = getChildAt(i);
 if (child.getVisibility() == GONE) {
 continue;
 }
 left = (int) (mRadius * Math.cos(Math.toRadians(widthall[i]))) - 65;
 top = (int) (mRadius - (resHeight / 2 - 2 * StatusHeight) * Math.sin(Math.toRadians(widthall[i])) - StatusHeight);
 child.layout(left, top, left + cWidth, top + cWidth);
 }
 }
 public interface OnMenuItemClickListener {
 void itemClick(View view, int pos);
 }
 public void setOnMenuItemClickListener(
 OnMenuItemClickListener mOnMenuItemClickListener) {
 this.mOnMenuItemClickListener = mOnMenuItemClickListener;
 }
 // 菜单的个数
 private int mMenuItemCount;
 /**
 * 设置菜单条目的图标和文本
 */
 public void setMenuItemIconsAndTexts(String[] mItemTexts) {
 this.mItemTexts = mItemTexts;
 this.mMenuItemCount = mItemTexts.length;
 resultAngle();
 addMenuItems();
 }
 private void resultAngle() {
 switch (this.mMenuItemCount) {
 case 3:
 widthall = Constants.ITEM3;
 break;
 case 4:
 widthall = Constants.ITEM4;
 break;
 case 5:
 widthall = Constants.ITEM5;
 break;
 case 6:
 widthall = Constants.ITEM6;
 break;
 case 7:
 widthall = Constants.ITEM7;
 break;
 case 8:
 widthall = Constants.ITEM8;
 break;
 case 9:
 widthall = Constants.ITEM9;
 break;
 case 10:
 widthall = Constants.ITEM10;
 break;
 default:
 break;
 }
 }
 /**
 * 设置菜单条目的图标和文本
 */
 public void setMenuItemIconsAndTexts() {
 addMenuItems();
 }
 private int mMenuItemLayoutId = R.layout.homepage_item_layout;
 /**
 * MenuItem的点击事件接口
 */
 private OnMenuItemClickListener mOnMenuItemClickListener;
 private float yPosition = 0;
 /**
 * 添加菜单项
 */
 private void addMenuItems() {
 LayoutInflater mInflater = LayoutInflater.from(getContext());
 /**
 * 根据用户设置的参数,初始化view
 */
 for (int i = 0; i < mMenuItemCount; i++) {
 final int j = i;
 View view = mInflater.inflate(mMenuItemLayoutId, this, false);

 final ImageView iv = (ImageView) view
  .findViewById(R.id.homepage_pager1_item_img);
 final TextView tv = (TextView) view
  .findViewById(R.id.homepage_pager1_item_tv);
 if (iv != null) {
 iv.setImageResource(R.mipmap.menu_ture);
 }
 if (tv != null) {
 tv.setText(mItemTexts[i]);
 }
 view.findViewById(R.id.homepage_item_layout).setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View v) {}
 });
 view.findViewById(R.id.homepage_item_layout).setOnTouchListener(new OnTouchListener() {
 @Override
 public boolean onTouch(View v, MotionEvent event) {
  if (event.getAction() == MotionEvent.ACTION_DOWN) {
  yPosition = event.getY();//获取按下的位置
  iv.setImageResource(R.mipmap.menu);
  } else if (event.getAction() == MotionEvent.ACTION_UP) {
  iv.setImageResource(R.mipmap.menu_ture);
  float displacement = Math.abs(yPosition - event.getY());
  //精确按下的位置做出响应
  if (mOnMenuItemClickListener != null&&displacement<25) {
  mOnMenuItemClickListener.itemClick(v,j);
  }
  } else if (event.getAction() == MotionEvent.ACTION_CANCEL || event.getAction() == MotionEvent.ACTION_POINTER_UP) {
  iv.setImageResource(R.mipmap.menu_ture);
  }
  return true;
 }
 });
 addView(view);
 }
 }
}

源码下载

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • Android编程绘图操作之弧形绘制方法示例

    本文实例讲述了Android编程绘图操作之弧形绘制方法.分享给大家供大家参考,具体如下: /** * 绘制弧形图案 * @description: * @author ldm * @date 2016-4-25 下午4:37:01 */ public class ArcsActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedIns

  • android图像绘制(二)画布上放大缩小问题

    android中图像在画布上放大缩小时,图像的边框大小没有改变! 原图如下: 放大后:原来图片的边框没有改变,位置依旧! 所以如果要放置图片的位置的话,就需要做相应的位置移动才可以! 采用如下代码(全屏放置图片): 复制代码 代码如下: Matrix matrix = new Matrix(); matrix.postScale(canvas.getWidth()*1.01f/bmpBg.getWidth(), canvas.getHeight()*1.01f/bmpBg.getHeight()

  • android图像绘制(六)获取本地图片或拍照图片等图片资源

    从SD卡中获取图片资源,或者拍一张新的图片. 先贴代码 获取图片: 注释:拍照获取的话,可以指定图片的保存地址,在此不说明. 复制代码 代码如下: CharSequence[] items = {"相册", "相机"}; new AlertDialog.Builder(this) .setTitle("选择图片来源") .setItems(items, new OnClickListener() { public void onClick(Dia

  • Android编程绘制圆形图片的方法

    本文实例讲述了Android编程绘制圆形图片的方法.分享给大家供大家参考,具体如下: 效果图如下: 第一步:新建RoundView自定义控件继承View package com.rong.activity; import com.rong.test.R; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.grap

  • android图像绘制(三)画布刷屏问题记录

    在canvas中绘制动态图的时候,如果使用了一个固定的背景图片,只有一个小小的精灵在移动! 这样的情况下却不得不在没帧中重新绘制背景图片,使得效率降低!尝试过各种方法,最终还是失败了! 如果有人有好的方法,可以提供一下,谢谢! 以下是在探索过程的一些分享: 1.一篇关于图片重新绘制的文章,不过只能是适用于精灵在固定位置变化,背景是没有变化的! 如果使用在移动的精灵上,将会使得整个屏幕都布满了精灵的移动图片,bug. 地址:Android SurfaceView 绘图覆盖刷新及脏矩形刷新方法 2.

  • android图像绘制(五)画布保存为指定格式/大小的图片

    将图片进行编辑(放缩,涂鸦等),最后保存成指定格式.大小的图片. 先贴代码: 复制代码 代码如下: Bitmap bmp = Bitmap.createBitmap(480, 800, Config.ARGB_8888); Canvas canvas = new Canvas(bmp); canvas.drawBitmap(this.bmp, matrix, paint); canvas.save(Canvas.ALL_SAVE_FLAG); canvas.restore(); File fil

  • android图像绘制(四)自定义一个SurfaceView控件

    自定义控件(类似按钮等)的使用,自定义一个SurfaceView. 如某一块的动态图(自定义相应),或者类似UC浏览器下面的工具栏. 如下图示例:  自定义类代码: 复制代码 代码如下: public class ImageSurfaceView extends SurfaceView implements Callback{ //用于控制SurfaceView private SurfaceHolder sfh; private Handler handler = new Handler();

  • android图像绘制(一)多种方法做图像镜像

    在android中做图像镜像有很多方法,今天算是学习了! 两种方法如下: 复制代码 代码如下: //方法一 Matrix matrix = new Matrix(); matrix.postScale(leftOrRight, 1, bmpW/2, bmpH/2);//前两个是xy变换,后两个是对称轴中心点 matrix.postTranslate(x, y); canvas.drawBitmap(bmpLuffy[0], matrix, paint); //方法二 // canvas.save

  • Android实现自定义的卫星式菜单(弧形菜单)详解

    一.前言 Android 实现卫星式菜单也叫弧形菜单,主要要做的工作如下: 1.动画的处理 2.自定义ViewGroup来实现卫星式菜单View (1)自定义属性 a. 在attrs.xml中定义属性 b. 在布局中使用自定义属性 c. 在自定义View中读取布局文件中的自定义属性 (2)onMeasure 测量 child 即测量主按钮以及菜单项 (3)onLayout 布局 child 即布局主按钮以及菜单项 (4)设置主按钮的选择动画 a.为菜单项menuItem添加平移动画和旋转动画 b

  • Android开发笔记之:在ImageView上绘制圆环的实现方法

    绘制圆环其实很简单,有大概以下三种思路. 这里先说网上提到的一种方法.思路是先绘制内圆,然后绘制圆环(圆环的宽度就是paint设置的paint.setStrokeWidth的宽度),最后绘制外圆.请看核心源码: 复制代码 代码如下: <SPAN xmlns="http://www.w3.org/1999/xhtml">package yan.guoqi.rectphoto;import android.content.Context;import android.graph

  • android图像绘制(七)ClipRect局部绘图/切割原图绘制总结

    杂语:看了很多程序猿都有写博客的习惯,看来我也得练练,不管写的好不好了,学到点什么体会就写写吧. 内容解说:这几天开始学游戏地图制作,今天小小的总结一下Canvas的clipRect()接口的使用. 1)选取要在画布上绘制(刷新)的区域,如图以(x, y)为起点坐标.宽w.高h的区域 2)选择要绘制的图片,不一定是刚好宽高为(w,h),大图就需要切割了(本例子绘制绿色区域) 3)将图片绘制到画布上,使得绿色区域与白色方块重合 4)最后效果图 代码解说: 复制代码 代码如下: canvas.sav

随机推荐