Android开发笔记（三十）让系统控件识别自定义属性的第二种方法：视差动画框架实例

其他 2020-01-18 11:27:00 阅读次数: 0

上一篇已经讲了让系统控件如Imageview识别自定义属性的方法一： 自定义LinearLayout，在addview的时候，给每一个系统控件外层再包裹一个自定义VIEWGROUP,然后这个VIEWGROUP来识别自定义属性并执行动画。今天我们讲第二种方法，与第一种方法有点雷同，就是在解析XML中的系统控件时，解析出属性及属性值，把这个控件如Imageview上的自定义属性解析出来封装在一个TAG对象里，然后使用view.setTag方法将自定义属性与这个系统控件关联起来。当我们执行动画时，可以使用view.getTag获取这个系统控件身上的自定义属性，执行相应的动画如水平移动，垂直移动等。我们先看一下今天要展示的实例运行效果：

源码下载地址：https://download.csdn.net/download/gaoxiaoweiandy/11142066。

这个效果是一个ViewPager滑动，然后每一个页面中的元素运动速度不一样，有的元素移动的速度明显比其它元素快，这样就形成了视差效果。首先我们来看一下这个框架的用法：

package com.example.animateframe2;


import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.widget.ImageView;

public class SplashActivity extends FragmentActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		ParallaxContainer container = (ParallaxContainer) findViewById(R.id.parallax_container);
		container.setUp(new int[]{
			R.layout.view_intro_1,
			R.layout.view_intro_2,
			R.layout.view_intro_3,
			R.layout.view_intro_4,
			R.layout.view_intro_5,
			R.layout.view_login
		});
		
		//设置动画
		ImageView iv_man = (ImageView) findViewById(R.id.iv_man);
		iv_man.setBackgroundResource(R.drawable.man_run);
		container.setIv_man(iv_man);
		
	}


}

为ParallaxContainer设置了几个布局，将来这几个布局可以滑动，然后还有自定义属性动画。就这么简单。下面那个iv_man就是一个简单的播放帧动画（小人走路）。

我们从最初的框架使用方法倒推这个动画框架的内部实现：这个ParallaxContainer，既然可以滑动，里面应该包含了ViewPager, 滑动时执行动画，说明我们为ViewPager设置了页面滑动监听“OnPageChangeListener”，在这个监听器里根据滑动的距离来执行动画。 滑动的每一个页面是一个Fragment。 我们来看看ParallaxContainer的代码是不是包含这些，代码如下：

package com.example.animateframe2;

import java.util.ArrayList;
import java.util.List;

import com.nineoldandroids.view.ViewHelper;

import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;

/**
 * 引导页的最外层布局
 */
public class ParallaxContainer extends FrameLayout implements OnPageChangeListener {

	private List<ParallaxFragment> fragments;
	private ParallaxPagerAdapter adapter;
	private float containerWidth;
	private ImageView iv_man;

	public ParallaxContainer(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	
	/**
	 * 指定引导页的所有页面布局文件
	 * @param childIds
	 */
	public void setUp(int... childIds){
		//根据布局文件数组，初始化所有的fragment
		fragments = new ArrayList<ParallaxFragment>();
		for (int i = 0; i < childIds.length; i++) {
			ParallaxFragment f = new ParallaxFragment();
			Bundle args = new Bundle();
			//页面索引
			args.putInt("index", i);
			//Fragment中需要加载的布局文件id
			args.putInt("layoutId", childIds[i]);
			f.setArguments(args);
			fragments.add(f);
		}
		
		
		//实例化适配器
		SplashActivity activity = (SplashActivity)getContext();
		adapter = new ParallaxPagerAdapter(activity.getSupportFragmentManager(), fragments);
		
		//实例化ViewPager
		ViewPager vp = new ViewPager(getContext());
		vp.setId(R.id.parallax_pager);
		vp.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
		
		//绑定
		vp.setAdapter(adapter);
		addView(vp,0);
		
		vp.setOnPageChangeListener(this);
		
	}
	

	@Override
	public void onPageScrolled(int position, float positionOffset,
			int positionOffsetPixels) {
		this.containerWidth = getWidth();
		//在翻页的过程中，不断根据视图的标签中对应的动画参数，改变视图的位置或者透明度
		//获取到进入的页面
		ParallaxFragment inFragment = null;
		try {
			inFragment = fragments.get(position - 1);
		} catch (Exception e) {}
		
		//获取到退出的页面
		ParallaxFragment outFragment = null;
		try {
			outFragment = fragments.get(position);
		} catch (Exception e) {}
		
		if (inFragment != null) {
			//获取Fragment上所有的视图，实现动画效果
			List<View> inViews = inFragment.getParallaxViews();
			if (inViews != null) {
				for (View view : inViews) {
					//获取标签，从标签上获取所有的动画参数
					ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);
					if (tag == null) {
						continue;
					}
					//translationY改变view的偏移位置，translationY=100，代表view在其原始位置向下移动100
					//仔细观察进入的fragment中view从远处过来，不断向下移动，最终停在原始位置
					ViewHelper.setTranslationY(view, (containerWidth - positionOffsetPixels) * tag.yIn);
					ViewHelper.setTranslationX(view, (containerWidth - positionOffsetPixels) * tag.xIn);
				}
			}
		}
		
		if(outFragment != null){
			List<View> outViews = outFragment.getParallaxViews();
			if (outViews != null) {
				for (View view : outViews) {
					ParallaxViewTag tag = (ParallaxViewTag) view.getTag(R.id.parallax_view_tag);
					if (tag == null) {
						continue;
					}
					//仔细观察退出的fragment中view从原始位置开始向上移动，translationY应为负数
					ViewHelper.setTranslationY(view, 0 - positionOffsetPixels * tag.yOut);
					ViewHelper.setTranslationX(view, 0 - positionOffsetPixels * tag.xOut);
				}
			}
		}
		
	}

	@Override
	public void onPageSelected(int position) {
		if (position == adapter.getCount() - 1) {
			iv_man.setVisibility(INVISIBLE);
		}else{
			iv_man.setVisibility(VISIBLE);
		}
	}

	@Override
	public void onPageScrollStateChanged(int state) {
		AnimationDrawable animation = (AnimationDrawable) iv_man.getBackground();
		switch (state) {
		case ViewPager.SCROLL_STATE_DRAGGING:
			animation.start();
			break;
			
		case ViewPager.SCROLL_STATE_IDLE:
			animation.stop();
			break;
			
		default:
			break;
		}
	}
	
	public void setIv_man(ImageView iv_man) {
		this.iv_man = iv_man;
	}
	
}

正如我们所分析的，setUp函数里确实为ViewPager设置了一个以frament数组为页面列表的adapter.还有一个

onPageScrolled函数来监听滑动的距离，根据页面滑出，进入的比例执行动画。我们来看一下onPageScrolled的各个参数：
onPageScrolled(int position, float positionOffset,int positionOffsetPixels)

position:当前正在滑动的页面，

positionOffset： 滑动的比例，例如0.5表示当前页面已滑动了一半。

扫描二维码关注公众号，回复： 8682208 查看本文章

positionOffsetPixels： 滑动的比例对应的屏幕像素值，如屏幕宽度的一半像素。

然后这个onPageScrolled里面就是执行动画的代码，首先使用view.getTag来获取与view元素关联的自定义属性对象（里面包含了这个view设置的所有自定义属性及值），然后调用setTranslationY这类的平移函数来实现VIEW元素平移动画。其中inFragment是进入的页面，outFragment是要滑出的页面。 这里面的滑动算法我们无需关心，随自己定。我们主要关心的是这个view.getTag获取系统控件（如Imageview）的自定义属性，这个TAG是什么时候set进去的，以及这个tag里的自定义属性值是怎么获取到的。有于每一个页面中的布局是在Fragment里加载的，因此我们来看一下Fragment加载布局的代码。

ParallaxFragment.java代码：

package com.example.animateframe2;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ParallaxFragment extends Fragment {

	//此Fragment上所有的需要实现视差动画的视图
	private List<View> parallaxViews = new ArrayList<View>();
	
	
	@Override
	public View onCreateView(LayoutInflater original, ViewGroup container,
			Bundle savedInstanceState) {
		Bundle args = getArguments();
		int layoutId = args.getInt("layoutId");
		int index = args.getInt("index");
		Log.d("jason", "fragment:"+index);
		//1.布局加载器将布局加载进来了
		//2.解析创建布局上所有的视图
		//3.自己搞定创建视图的过程
		//4.获取视图相关的自定义属性的值
		ParallaxLayoutInflater inflater = new ParallaxLayoutInflater(original, getActivity(),this);
		
		return inflater.inflate(layoutId, null);
	}
	
	
	public List<View> getParallaxViews() {
		return parallaxViews;
	}
	
}

我们看一下关键的两行代码：

        ParallaxLayoutInflater inflater = new ParallaxLayoutInflater(original, getActivity(),this);
        
        return inflater.inflate(layoutId, null);

我们自定义了一个LayoutInflater:  ParallaxLayoutInflater，用自定义的ParallaxLayoutInflater去解析XML布局layoutId.

我们自定义LayoutInflater的目的，无非是想在解析XML里的各个VIEW时做些手脚，做什么手脚呢？ 解析每一个XML的view元素，并获取它身上的多个自定义属性，封装在一个tag对象里，然后调用view.setTag将view与自定义属性关联起来。

通过阅读系统LayoutInflater源码，系统API是在LayoutInflater的Factory2对象里的onCreateView函数里来解析xml元素的。因此我们想办法自定义LayoutInflater，并重写Factory2的onCreateView函数。我们先来看一下ParallaxLayoutInflater的代码，

自定义LayoutInflater：ParallaxLayoutInflater.java:

package com.example.animateframe2;


import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;

public class ParallaxLayoutInflater extends LayoutInflater {

	private ParallaxFragment fragment;
	
	protected ParallaxLayoutInflater(LayoutInflater original, Context newContext,ParallaxFragment fragment) {
		super(original, newContext);
		this.fragment = fragment;

		//重新设置布局加载器的工厂
		//工厂：创建布局文件中所有的视图
		setFactory2(new ParallaxFactory(this));

	}

	@Override
	public LayoutInflater cloneInContext(Context newContext) {
		return this;
		//return new ParallaxLayoutInflater(this,newContext,fragment);
	}

	class ParallaxFactory implements Factory2{
		
		private LayoutInflater inflater;
		private final String[] sClassPrefix = {
				"android.widget.",
				"android.view."
		};
		public ParallaxFactory(LayoutInflater inflater) {
			this.inflater = inflater;
		}

		//自定义,视图创建的过程
		@Override
		public View onCreateView(String name, Context context,
				AttributeSet attrs) {
			View view = null;
			if (view == null) {
				view = createViewOrFailQuietly(name,context,attrs);
			}
			
			//实例化完成
			if (view != null) {
				//获取自定义属性，通过标签关联到视图上
				setViewTag(view,context,attrs);
				fragment.getParallaxViews().add(view);
				Log.d("ricky", "view:"+view);
			}
			
			return view;
		}
		
		private void setViewTag(View view, Context context, AttributeSet attrs) {
			//所有自定义的属性
			int[] attrIds = {
					R.attr.a_in,
					R.attr.a_out,
					R.attr.x_in,
					R.attr.x_out,
					R.attr.y_in,
					R.attr.y_out};
			
			//获取
			TypedArray a = context.obtainStyledAttributes(attrs, attrIds);
			if (a != null && a.length() > 0) {
				//获取自定义属性的值
				ParallaxViewTag tag = new ParallaxViewTag();
				tag.alphaIn = a.getFloat(0, 0f);
				tag.alphaOut = a.getFloat(1, 0f);
				tag.xIn = a.getFloat(2, 0f);
				tag.xOut = a.getFloat(3, 0f);
				tag.yIn = a.getFloat(4, 0f);
				tag.yOut = a.getFloat(5, 0f);
				
				//index
				view.setTag(R.id.parallax_view_tag,tag);
			}
			
			a.recycle();
			
		}

		private View createViewOrFailQuietly(String name, String prefix,Context context,
				AttributeSet attrs) {
			try {
				//通过系统的inflater创建视图，读取系统的属性
				return inflater.createView(name, prefix, attrs);
			} catch (Exception e) {
				return null;
			}
		}

		private View createViewOrFailQuietly(String name, Context context,
				AttributeSet attrs) {
			//1.自定义控件标签名称带点，所以创建时不需要前缀
			if (name.contains(".")) {
				createViewOrFailQuietly(name, null, context, attrs);
			}
			//2.系统视图需要加上前缀
			for (String prefix : sClassPrefix) {
				View view = createViewOrFailQuietly(name, prefix, context, attrs);
				if (view != null) {
					return view;
				}
			}
			
			return null;
		}

		@Override
		public View onCreateView(View parent, String name, Context context, AttributeSet attrs) {
			View view = null;
			if (view == null) {
				view = createViewOrFailQuietly(name,context,attrs);
			}

			//实例化完成
			if (view != null) {
				//获取自定义属性，通过标签关联到视图上
				setViewTag(view,context,attrs);
				fragment.getParallaxViews().add(view);
				Log.d("ricky", "view:"+view);
			}

			return view;
		}
	}
	
}

代码分析：

1. 首先继承LayoutInflater

2. 然后自定义一个Factory2:  ParallaxFactory , 并重写onCreateview方法，调用

view = createViewOrFailQuietly(name,context,attrs);获取系统为我们解析的XML元素view实例。

	private View createViewOrFailQuietly(String name, Context context,
				AttributeSet attrs) {
			//1.自定义控件标签名称带点，所以创建时不需要前缀
			if (name.contains(".")) {
				createViewOrFailQuietly(name, null, context, attrs);
			}
			//2.系统视图需要加上前缀
			for (String prefix : sClassPrefix) {
				View view = createViewOrFailQuietly(name, prefix, context, attrs);
				if (view != null) {
					return view;
				}
			}
			
			return null;
		}


		private View createViewOrFailQuietly(String name, String prefix,Context context,
				AttributeSet attrs) {
			try {
				//通过系统的inflater创建视图，读取系统的属性
				return inflater.createView(name, prefix, attrs);
			} catch (Exception e) {
				return null;
			}
		}
为什么是系统帮我们解析的，因为在这个函数里面我们最终调用的是  return inflater.createView(name, prefix, attrs);
那为什么我们不直接调用系统的inflater.createView(name, prefix, attrs)函数来获取xml中的view实例呢。因为在这个createViewOrFailQuietly函数里我们要区分自定义控件与系统控件，如果是自定义控件的话，整个name就是一个完成的类路径，所以prefix为null.如何是系统控件，如imageview,那么prefix得传递系统控件前缀
"android.widget.",
"android.view."

OK,这一步我们获得了每一个XML中的view。

3.  获取自定义属性，封装到TAG

    
            if (view != null) {
                //获取自定义属性，通过标签关联到视图上
                setViewTag(view,context,attrs);
                fragment.getParallaxViews().add(view);
                Log.d("ricky", "view:"+view);
            }

这里setViewTag函数完成了这个功能：

	private void setViewTag(View view, Context context, AttributeSet attrs) {
			//所有自定义的属性
			int[] attrIds = {
					R.attr.a_in,
					R.attr.a_out,
					R.attr.x_in,
					R.attr.x_out,
					R.attr.y_in,
					R.attr.y_out};
			
			//获取
			TypedArray a = context.obtainStyledAttributes(attrs, attrIds);
			if (a != null && a.length() > 0) {
				//获取自定义属性的值
				ParallaxViewTag tag = new ParallaxViewTag();
				tag.alphaIn = a.getFloat(0, 0f);
				tag.alphaOut = a.getFloat(1, 0f);
				tag.xIn = a.getFloat(2, 0f);
				tag.xOut = a.getFloat(3, 0f);
				tag.yIn = a.getFloat(4, 0f);
				tag.yOut = a.getFloat(5, 0f);
				
				//index
				view.setTag(R.id.parallax_view_tag,tag);
			}
			
			a.recycle();
			
		}

fragment.getParallaxViews().add(view);这行代码是将每一页fragment中的view元素放到一个数组里。以方便我们在前面的viewPager ： onPageScrolled函数里遍历每一个view并获取这个view上的自定义属性。

Ok，至此我们从最初的框架使用方法倒推出了这个动画框架的内部实现。

源码下载地址：https://download.csdn.net/download/gaoxiaoweiandy/11142066。

冉航--小虾米
发布了44 篇原创文章 · 获赞 27 · 访问量 2万+
私信 关注

猜你喜欢

转载自blog.csdn.net/gaoxiaoweiandy/article/details/89493652
今日推荐
“开源信徒”周鸿祎开源360智脑大模型
华为ensp中vrrp虚拟路由器冗余协议 原理及配置命令
基于Python爬虫广东广州水酒店宾馆数据可视化系统设计与实现(Django框架) 研究背景与意义、国内外研究现状
知识融合：知识图谱构建的关键技术
文心一言收费还是免费：全面解析其价格策略与服务价值
百万用户通话新风潮：仅需50秒，无界AI让彩铃变身短视频
【STM32项目】基于STM32多传感器融合的新型智能导盲杖设计（完整工程资料源码）
文生视频大模型Sora的复现经验
腾讯云函数计算技术：云原生架构下的Serverless与微服务新篇章
干货分享｜JumpServer 三种常见的文件传输方式效果对比
【榜单公布】2023年度征文活动已结束
周排行
Java中关于时间的操作及格式化
《HTML5与CSS3基础教程》第五章学习笔记 图像
nginx下安装PHP发生问题的逐步解决
HDU-1048，The Hardest Problem Ever（字符串处理）
新一代多媒体技术与应用的部分课后题
Shader 绘制特殊图形
Oracle数据库三种备份方案
CodeForces - 983B XOR-pyramid(两次区间DP/记忆化DFS)
Python3基础语法——变量与运算符
（转载）KMP算法详解 （原创）详解KMP算法
每日归档
更多
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)
2024-04-08(60)
2024-04-07(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022