android 中的 pathview 效果

最新推荐文章于 2024-08-16 09:11:35 发布
最新推荐文章于 2024-08-16 09:11:35 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： android GUI 文章标签： android pathview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongbaidepao/article/details/21462345
版权 


public class MainActivity extends Activity implements PathView.OnItemClickListener{

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.fragment);
		setupView();
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	
	
	
 	/**
     * 初始化菜单
     */
	private void setupView() {
		PathView mPathView = (PathView) this.findViewById(R.id.mPathView_yixin);
		ImageButton startMenu = new ImageButton(this);
		startMenu.setBackgroundResource(R.drawable.start_menu_btn);
		mPathView.setStartMenu(startMenu);

		int[] drawableIds = new int[] { 
				R.drawable.ic_launcher,
				R.drawable.ic_launcher,
				R.drawable.ic_launcher,
				R.drawable.ic_launcher
			      };
		
		View[] items = new View[drawableIds.length];
		for (int i = 0; i < drawableIds.length; i++) {
			ImageButton button = new ImageButton(this);
			button.setBackgroundResource(drawableIds[i]);
			items[i] = button;
		}
		mPathView.setItems(items);
		mPathView.setOnItemClickListener(this);
	}

	
	
	
	@Override
	public void onItemClick(View view, int position) {
		// TODO Auto-generated method stub
		switch (position) {
 		case 1:
             
 			break;
 		case 2:

 			break;
 		case 3:

 			break;
 		case 4:

 			break;
 		default:
 			break;
 		}
	}

}


主要就是下面这个自定义的view类了 
/**  边角竖向path    **/
public class PathView extends RelativeLayout {
	//
	private boolean isExpand = false;
	//
	private View[] items;
	private View startMenu;
	private View bgView;
	public int DURATION = 300;
	public int MARGIN_RIGHT = 16;
	public int MARGIN_TOP = 16;
	public int MARGIN_BOTTOM = 16;
	
	public PathView(Context context) {
		super(context);
		initContentView();
	}

	public PathView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initContentView();
	}
	
	public PathView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initContentView();
	}

	public void initContentView() {	
		bgView = new View(getContext());
		//bgView.setBackgroundColor(Color.argb(100, 0, 0, 0));
		LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.MATCH_PARENT);
		addView(bgView, params);
		bgView.setVisibility(View.GONE);
		bgView.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				if(event.getAction()==MotionEvent.ACTION_DOWN){
					cols(DURATION);
					bgView.setVisibility(View.GONE);
					return true;				
				}
				return false;
			}
		});
	}

	public void setStartMenu(View view) {
		LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.WRAP_CONTENT);
		params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
		params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
		params.rightMargin = MARGIN_RIGHT;
		params.bottomMargin = MARGIN_BOTTOM;
		params.topMargin = MARGIN_TOP;
		addView(view, params);
		this.startMenu = view;
		startMenu.setId(66666);
		startMenu.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				if (isExpand) {
					cols(DURATION);
				} else {
					expand(DURATION);
				}
			}
		});
	}

	public void expand(int duration) {
		bgView.setVisibility(View.VISIBLE);
		for (int i = 0; i < items.length; i++) {
			final View view = items[i];
			view.setEnabled(false);
			float dy = startMenu.getY() - view.getY();
			TranslateAnimation translateAnim = new TranslateAnimation(
					-startMenu.getWidth() / 2, 0, dy, 0);
			translateAnim.setDuration(duration);
			ScaleAnimation scaleAnim = new ScaleAnimation(0f, 1f, 0f, 1f,
					Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF,
					0.5f);
			scaleAnim.setDuration(duration);
			AnimationSet set = new AnimationSet(true);
			set.addAnimation(scaleAnim);
			set.addAnimation(translateAnim);
			set.setInterpolator(getContext(),
					android.R.anim.linear_interpolator);
			set.setAnimationListener(new AnimationListener() {

				@Override
				public void onAnimationStart(Animation animation) {
					
					view.setVisibility(View.VISIBLE);
				}

				@Override
				public void onAnimationRepeat(Animation animation) {
					// TODO Auto-generated method stub

				}

				@Override
				public void onAnimationEnd(Animation animation) {
					isExpand = true;
					view.setEnabled(true);
				}
			});
			roate(0, -135, DURATION);
			view.startAnimation(set);
		}

	}

	public void cols(int duration) {
		for (int i = 0; i < items.length; i++) {
			final View view = items[i];	
			view.setEnabled(false);
			float dy = startMenu.getY() - view.getY();
			TranslateAnimation translateAnim = new TranslateAnimation(0,
					-startMenu.getWidth() / 2, 0, dy);
			translateAnim.setDuration(duration);
			ScaleAnimation scaleAnim = new ScaleAnimation(1f, 0f, 1f, 0f,
					Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF,
					0.5f);
			scaleAnim.setDuration(duration);
			AnimationSet set = new AnimationSet(true);
			set.addAnimation(scaleAnim);
			set.addAnimation(translateAnim);
			set.setInterpolator(getContext(),
					android.R.anim.linear_interpolator);
			set.setAnimationListener(new AnimationListener() {

				@Override
				public void onAnimationStart(Animation animation) {
					
				}

				@Override
				public void onAnimationRepeat(Animation animation) {
					
				}

				@Override
				public void onAnimationEnd(Animation animation) {
					view.setEnabled(true);
					view.setVisibility(View.GONE);
					isExpand = false;
				}
			});
			bgView.setVisibility(View.GONE);
			roate(-135, 0, DURATION);
			view.startAnimation(set);
		}

	}

	private void roate(int fromDegree, int toDegree, int duration) {
		RotateAnimation anim = new RotateAnimation(fromDegree, toDegree,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				0.5f);
		anim.setFillAfter(true);
		anim.setDuration(duration);
		anim.setAnimationListener(new AnimationListener() {
			
			@Override
			public void onAnimationStart(Animation animation) {
				startMenu.setEnabled(false);
			}
			
			@Override
			public void onAnimationRepeat(Animation animation) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationEnd(Animation animation) {
				startMenu.setEnabled(true);
			}
		});
		startMenu.startAnimation(anim);
	}

	public void setItems(View[] items) {
		for (int i = 0; i < items.length; i++) {
			View view = items[i];
			view.setId(i + 1);
			LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
					LayoutParams.WRAP_CONTENT);
			if (i == 0) {
				params.addRule(RelativeLayout.ABOVE, startMenu.getId());
			} else {
				params.addRule(RelativeLayout.ABOVE, items[i - 1].getId());
			}
		//	params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
			params.addRule(RelativeLayout.ALIGN_RIGHT, startMenu.getId());
		//	params.rightMargin = MARGIN_RIGHT;
			addView(view, params);
			view.setVisibility(View.INVISIBLE);
		}
		this.items = items;
	}

	public void setOnItemClickListener(final OnItemClickListener listener) {
		for (int i = 0; i < items.length; i++) {
			final View view = items[i];
			final int position = i;
			view.setOnClickListener(new OnClickListener() {

				@Override
				public void onClick(View v) {
					if(v.getVisibility()==View.VISIBLE){
						cols(DURATION);
						fadeOut(view, DURATION);
						listener.onItemClick(view, position);					
					}
				}
			});
		}
	}

	private void fadeOut(final View view, int duration) {
		AlphaAnimation alphaAnim = new AlphaAnimation(1, 0.0f);
		alphaAnim.setDuration(duration);
		ScaleAnimation scaleAnim = new ScaleAnimation(1f, 1.5f, 1f, 1.5f,
				Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF,
				0.5f);
		scaleAnim.setDuration(duration);
		AnimationSet set = new AnimationSet(true);
		set.addAnimation(scaleAnim);
		set.addAnimation(alphaAnim);
		set.setInterpolator(getContext(),
				android.R.anim.accelerate_interpolator);
		set.setAnimationListener(new AnimationListener() {

			@Override
			public void onAnimationStart(Animation animation) {

			}

			@Override
			public void onAnimationRepeat(Animation animation) {

			}

			@Override
			public void onAnimationEnd(Animation animation) {
				view.setVisibility(View.GONE);
			}
		});
		view.startAnimation(set);

	}
	
	public interface OnItemClickListener {
		void onItemClick(View view, int position);
	}

}

接下里 xml 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    
    <com.example.pathview.PathView
        android:id="@+id/mPathView_yixin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
    </com.example.pathview.PathView>

</RelativeLayout>


在 github 上又1个开源的库 可以实现 pathview 的效果  




所有的效果。

代码地址： http://download.csdn.net/detail/kongbaidepao/7060469



空白的泡
关注
专栏目录
android PathView
03-18
android PathView，效果很好看，也很实用
android动画绘制path,android-pathview
weixin_30878111的博客
05-25 247
有两种类型的path：1. 从 Svgxmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/pathView"android:layout_width="150dp"android:layout_height="150dp"app:pathColor="@android:color/white"app:svg="@r...
Android Pathview教程：打造生动的SVG及路径动画
最新发布
gitblog_00157的博客
08-16 581
Android Pathview教程：打造生动的SVG及路径动画 android-pathviewAndroid view with both path from constructed path or from svg.项目地址:https://gitcode.com/gh_mirrors/an/android-pathview 项目介绍 Android Pathview是一款专为Androi...
Android SVG动画PathView源码解析与使用教程（API 14）
区长的专栏
08-11 6349
使用的是一个第三方库android-pathview主要是一个自定义View——PathView，跟所有自定义View一样，重写了三个构造方法。并且最终调用三个参数的构造方法，在里面获取自定义属性。
安卓动画效果相关-android-pathview路径动画库.rar
07-29
android-pathview路径动画库.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
Android开发——使用PathView框架没有办法显示动画
裕博的博客
11-21 317
前言 在日常开发当中我要实现动画，我们可以使用svg动画框架PathView。但是我今天遇到一个奇葩的事情，没有办法正常显示动画，我就点懵逼了。我看我的代码是没有问题的呀，能够正常执行的。 问题的所在 我第一次接触SVG的图片，我就点看看了一下，发现有爆红的代码，我把爆红的语言给删除了造成PathView框架加SVG没有办法显示动画。 注意：我们不要修改svg文件里面的任何东西，要不然没有办法显示...
android pathview
07-15
Android PathView是一个自定义View，用于绘制路径动画。它可以根据指定的路径绘制图形，并且可以通过动画控制路径...这只是PathView的基本用法，你可以根据自己的需求进一步定制和控制路径动画的效果。希望对你有帮助！
PathView.zip
06-18
PathView.zip是一个包含Android动画效果实现的压缩包，主要用于创建类似BiliBili客户端聊天弹幕室中的线条动画。在BiliBili这样的视频分享平台上，弹幕是用户互动的重要方式，而线条动画则能够生动地展示这些弹幕在...
Android开发——SVG动画框架PathView的使用
裕博的博客
11-21 1260
前言 在学习菜鸟窝的菜鸟手机助手的过程中，学习到了SVG动画框架PathView的使用，记录一下开发心得。 PathView的Github地址 【传送门】https://github.com/geftimov/android-pathview PNG转SVG的工具地址 【传送门】https://image.online-convert.com/convert-to-svg 使用方式 1.将你的sv...
Android代码-TextPathView是一个把文字转化为路径动画然后展现出来的自定义控件
08-06
TextPathView > Go to the English README 介绍 　　TextPathView是一个把文字转化为路径动画然后展现出来的自定义控件。效果如上图。 > 这里有原理解析！ 使用 　　主要的使用流程就是输入文字，然后设置一些动画的属性，还有画笔特效，最后启动就行了。想要自己控制绘画的进度也可以，详情见下面。 Gradle compile 'com.yanzhikai:TextPathView:0.1.3' > minSdkVersion 16 > 如果遇到播放完后消失的问题，请关闭硬件加速，可能是硬件加速对drawPath()方法不支持 使用方法 TextPathView 　　TextPathView分为两种，一种是每个笔画按顺序刻画的SyncTextPathView，一种是每个笔画同时刻画的AsyncTextPathView，使用方法都是一样，在xml里面配置属性，然后直接在java里面调用startAnimation()方法就行了，具体的可以看例子和demo。下面是一个简单的例子： xml里面： java里面使用： atpv1
QML实现酷炫的 Cover Flow 图片轮播效果（PathView）
09-10
通过 QML 的PathView来实现酷炫的 Cover Flow 图片轮播效果，http://blog.csdn.net/luoyayun361/article/details/77659386
Android 自定义View——Path的使用
To_be_Designer
09-17 2875
Path, 轨迹，路径。Path可以沿着多个点绘制一条路径， 在Canvas中可以根据Path绘制不同的图形。Path我们在使用Path绘制路径，一般要使用到以下几个方法：moveTo(float x, float y)： 　　移动到（x, y）坐标点。绘制路径时，路径的第一个点一般我们通过moveTo()来决定，否则默认为(0, 0)点。 lineTo(float x, float y)：
Android中svg动画框架PathView的使用
码出世界
09-01 3149
今天学了一个新的框架PathView，这个框架主要是svg通过path来绘制动画，Github地址为：https://github.com/geftimov/android-pathview，如果你有图片但是没有svg的话，你可以使用工具将图片转为svg。在线转换工具：https://image.online-convert.com/convert-to-svg使用步骤 首先你需要一个svg图片，将
Android自定义View之Path基础（一）
Silicon_Valley
10-17 296
Path类封装由直线段，二次曲线和三次曲线组成的复合（多个轮廓）几何路径。 可以使用canvas.drawPath（path，paint）进行填充或描边绘制（基于Paint的Style），也可以用于剪切或在路径上绘制文本。 github上的示例 ...
探索未来动画效果：android-pathview 开源库
gitblog_00064的博客
05-11 372
探索未来动画效果：android-pathview 开源库 android-pathviewAndroid view with both path from constructed path or from svg.项目地址:https://gitcode.com/gh_mirrors/an/android-pathview 在移动应用开发中，引人入胜的动画效果往往能提升用户体验，使产品更富吸引...
Android 自定义View 之 Path PathMeasure (一)
专注Android ，直到世界尽头
09-05 1026
Path path常用api moveTo(float x, float y) 移动下一次操作的起点位置 lineTo(float x, float y) 添加上一个点到当前点之间的直线到Path addRect, addRoundRect, addOval, addCircle, addPath, addArc, arcTo 添加(矩形， 圆角矩形， 椭圆， 圆， 路径， 圆弧) 到当前Path close() 连接第一个点连接到最后一个点，形成一个闭合区域 q
Android快速SDK（11）圆弧菜单库PathView【傻瓜模式】
huangbin95487710的博客
11-11 690
代码：http://download.csdn.net/detail/huangbin95487710/9258865 依赖包模式 支持样式属性配置 支持配置动画时间支持配置动画半径支持配置对齐方式菜单按钮配置化（免代码）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空白的泡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值