进阶六之Android UI介面之(介面3D旋转)

天道酬勤。也许你付出了不一定得到回报,但不付出一定得不到回报。

本讲内容:介面3D旋转

示例一效果图:

 
             

下面是res/layout/activity_main.xml 布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/layout_main"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">

	<TextView
    	android:id="@+id/title"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_gravity="center"
		android:gravity="center"
    	android:textColor="#ff0000"
    	android:text="@string/txt_main"/>		    

	<LinearLayout
		android:layout_marginTop="50dip"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:gravity="center"
  		android:layout_gravity="center" >
		<Button
			android:id="@+id/main_last"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="上一頁"/>
		<Button
			android:id="@+id/main_next"
			android:layout_marginLeft="50dip"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="下一頁"/>
	</LinearLayout>

</LinearLayout>

下面是res/layout/next.xml 布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/layout_next"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">

	<TextView
    	android:id="@+id/title"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_gravity="center"
		android:gravity="center"
    	android:textColor="#ff0000"
    	android:text="@string/txt_next"/>		    

	<LinearLayout
		android:layout_marginTop="5dip"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:gravity="center"
  		android:layout_gravity="center" >
		<Button
			android:id="@+id/next_last"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="上一頁"/>
		<Button
			android:id="@+id/next_next"
			android:layout_marginLeft="50dip"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="下一頁"/>
	</LinearLayout>

</LinearLayout>

下面是res/values/string.xml 文件:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Rotate3D</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="txt_main">第一页\n\n珍爱生命</string>
    <string name="txt_next">第二页\n远离IT</string>

</resources>

下面是Rotate3D.java文件:

public class Rotate3D extends Animation {
	private float fromDegree;	// 旋转起始角度
	private float toDegree;		// 旋转终止角度
	private float mCenterX;		// 旋转中心x
	private float mCenterY;		// 旋转中心y
	private Camera mCamera;

	public Rotate3D(float fromDegree, float toDegree, float centerX, float centerY) {
		this.fromDegree = fromDegree;
		this.toDegree = toDegree;
		this.mCenterX = centerX;
		this.mCenterY = centerY;
	}

	@Override
	public void initialize(int width, int height, int parentWidth, int parentHeight) {
		super.initialize(width, height, parentWidth, parentHeight);
		mCamera = new Camera();
	}

	@Override
	protected void applyTransformation(float interpolatedTime, Transformation t) {
		final float FromDegree = fromDegree;
		float degrees = FromDegree + (toDegree - fromDegree) * interpolatedTime;	// 旋转角度(angle)
		final float centerX = mCenterX;
		final float centerY = mCenterY;
		final Matrix matrix = t.getMatrix();

		if (degrees <= -76.0f) {
			degrees = -90.0f;
			mCamera.save();
			mCamera.rotateY(degrees);		// 旋转
			mCamera.getMatrix(matrix);
			mCamera.restore();
		} else if (degrees >= 76.0f) {
			degrees = 90.0f;
			mCamera.save();
			mCamera.rotateY(degrees);
			mCamera.getMatrix(matrix);
			mCamera.restore();
		} else {
			mCamera.save();
			mCamera.translate(0, 0, centerX);		// 位移x
			mCamera.rotateY(degrees);
			mCamera.translate(0, 0, -centerX);
			mCamera.getMatrix(matrix);
			mCamera.restore();
		}

		matrix.preTranslate(-centerX, -centerY);
		matrix.postTranslate(centerX, centerY);
	}
}

下面是MainActivity.java主界面文件:

public class MainActivity extends Activity {
	private ViewGroup layoutmain;
	private ViewGroup layoutnext;

	private Button btn_MainLast;
	private Button btn_MainNext;
	private Button btn_NextLast;
	private Button btn_NextNext;

	private Rotate3D lQuest1Animation;
	private Rotate3D lQuest2Animation;
	private Rotate3D rQuest1Animation;
	private Rotate3D rQuest2Animation;
	private int mCenterX = 160;		// 320x480 的宽一半
	private int mCenterY = 240;		// 320x480 的高一半

	@Override
	public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initAnimation();
        initMain();
	}

	private void initMain(){
		layoutmain = (LinearLayout)findViewById(R.id.layout_main);
		btn_MainLast = (Button)findViewById(R.id.main_last);
		btn_MainNext = (Button)findViewById(R.id.main_next);

		btn_MainLast.setOnClickListener(listener);
		btn_MainNext.setOnClickListener(listener);
	}

	private void initNext(){
        setContentView(R.layout.next);

		layoutnext = (LinearLayout)findViewById(R.id.layout_next);
		btn_NextLast = (Button)findViewById(R.id.next_last);
		btn_NextNext = (Button)findViewById(R.id.next_next);

		btn_NextLast.setOnClickListener(listener);
		btn_NextNext.setOnClickListener(listener);
	}

	private View.OnClickListener listener = new View.OnClickListener() {
		@Override
		public void onClick(View v) {
			switch (v.getId()) {
			case R.id.main_last:	// 上一页
				layoutmain.startAnimation(lQuest1Animation);	// 当前页向左旋转(0,-90)
				initNext();
				layoutnext.startAnimation(lQuest2Animation);	// 下一页向左旋转(90, 0)
				break;
			case R.id.main_next:	// 下一页
				layoutmain.startAnimation(rQuest1Animation);	// 当前页向右旋转(0,90)
				initNext();
				layoutnext.startAnimation(rQuest2Animation);	// 下一页向右旋转(-90, 0)
				break;
			case R.id.next_last:
				layoutnext.startAnimation(lQuest1Animation);
				initMain();
				layoutmain.startAnimation(lQuest2Animation);
				break;
			case R.id.next_next:
				layoutnext.startAnimation(rQuest1Animation);
				initMain();
				layoutmain.startAnimation(rQuest2Animation);
				break;
			}
		}
	};

	public void initAnimation() {
		// 获取旋转中心
		DisplayMetrics dm = new DisplayMetrics();
		dm = getResources().getDisplayMetrics();
		mCenterX = dm.widthPixels / 2;
		mCenterY = dm.heightPixels / 2;

		// 定义旋转方向
		int duration = 1000;
		lQuest1Animation = new Rotate3D(0, -90, mCenterX, mCenterY);	// 下一页的旋转方向(从0度转到-90,参考系为水平方向为0度)
		lQuest1Animation.setFillAfter(true);
		lQuest1Animation.setDuration(duration);

		lQuest2Animation = new Rotate3D(90, 0, mCenterX, mCenterY);		// 下一页的旋转方向(从90度转到0,参考系为水平方向为0度)(起始第一题)
		lQuest2Animation.setFillAfter(true);
		lQuest2Animation.setDuration(duration);

		rQuest1Animation = new Rotate3D(0, 90, mCenterX, mCenterY);		// 上一页的旋转方向(从0度转到90,参考系为水平方向为0度)
		rQuest1Animation.setFillAfter(true);
		rQuest1Animation.setDuration(duration);

		rQuest2Animation = new Rotate3D(-90, 0, mCenterX, mCenterY);	// 上一页的旋转方向(从-90度转到0,参考系为水平方向为0度)
		rQuest2Animation.setFillAfter(true);
		rQuest2Animation.setDuration(duration);
	}

}

Take your time and enjoy it

时间: 2024-11-05 13:47:10

进阶六之Android UI介面之(介面3D旋转)的相关文章

Android自定义动画类——实现3D旋转动画

Android中的补间动画分为下面几种: (1)AlphaAnimation :透明度改变的动画. (2)ScaleAnimation:大小缩放的动画. (3)TranslateAnimation:位移变化的动画. (4)RotateAnimation:旋转动画. 然而在实际项目中透明度.缩放.位移.旋转这几种动画并不能满足我们的需求,比如我们需要一个类似下面的3D旋转动画. 这时候就需要用到自定义动画,自定义动画需要继承Animation,并重写applyTransformation(floa

进阶七之Android UI介面之(滑动倒影效果)

只有你学会把自己已有的成绩都归零,才能腾出空间去接纳更多的新东西,如此才能使自己不断的超越自己. 本讲内容:介面滑动倒影效果 一.倒影原理: 倒影效果是主要由原图+间距+倒影三部分组成,高度大约为原图的3/2(原图为1.倒影为1/2) 原图,就是我们看到了最开始的图片 间距,是原图与倒影之间的间隙,如:reflectionGap = 4; 倒影,是原图下半部分1/2高度,通过矩阵变换matrix.preScale(1, -1); 获取倒立图片,然后再加上线性遮罩和阴影实现 示例一效果图:    

进阶三之Android UI介面之(滑动效果之Gallery + GridView)

人一生下就会哭,笑是后来才学会的.所以忧伤是一种低级的本能,而快乐是一种更高级的能力. 本讲内容:滑动效果之Gallery + GridView Android系统自带一个GridView和Gallery两个控件,GridView网格显示,Gallery单个浏览,两者结合起来可以真正实现Gallery浏览图片效果. 示例效果图         下面是res/layout/activity_main.xml 布局文件: <?xml version="1.0" encoding=&q

Android UI组件进阶(2)——仿Windows对话框

Android UI组件进阶(2)--仿Windows对话框 在开始本章前先祝大家中秋节快乐哈,相信很多上班的朋友都是放三天假的哈! 有时间的话回家陪陪父母吧!树欲静而风不止,子欲养而亲不待!岁月不饶人! 好了,道理和祝福语就说到这里了,今天给大家准备的是模仿Windows风格对话框! 效果图: 相信大部分的AlertDialog都是下面这个样子的: 今天给大家讲解的对话框是下面这样的: 对比两种对话框,站在用户的角度,相信你更加钟情于第二种颜色鲜明的对话框 好了下面就开始讲解如何制作模仿win

android UI进阶之实现listview中checkbox的多选与记录

今天继续和大家分享涉及到listview的内容.在很多时候,我们会用到listview和checkbox配合来提供给用户一些选择操作.比如在一个清单页面,我们需要记录用户勾选了哪些条目.这个的实现并不太难,但是有很多朋友来问我如何实现,他们有遇到各种各样的问题,这里就一并写出来和大家一起分享. ListView的操作就一定会涉及到item和Adapter,我们还是先来实现这部分内容. 首先,写个item的xml布局,里面放置一个TextView和一个CheckBox.要注意的时候,这里我设置了C

android UI进阶之实现listview的分页加载

 分享了下拉刷新,这是一个用户体验非常好的操作方式.新浪微薄就是使用这种方式的典型. 还有个问题,当用户从网络上读取微薄的时候,如果一下子全部加载用户未读的微薄这将耗费比较长的时间,造成不好的用户体验,同时一屏的内容也不足以显示如此多的内容.这时候,我们就需要用到另一个功能,那就是listview的分页了.通过分页分次加载数据,用户看多少就去加载多少. 通常这也分为两种方式,一种是设置一个按钮,用户点击即加载.另一种是当用户滑动到底部时自动加载.今天我就和大家分享一下这个功能的实现. 首先,

Android UI组件进阶(1)——带进度条的按钮

Android UI组件进阶(1)--带进度条的按钮 本节引言: 这个系列是继Android UI组件实例大全后的进阶系列,在该系列中我们将进一步的学习 Android UI组件,建议阅读本系列前线学习下UI组件实例大全系列,掌握基本组件的使用; 当然你也可以直接学习本系列!好了,废话不多说,直接开始第一节吧!本节要演示的是: 带进度条的按钮!相信大家在360手机助手到看到这个东东吧: 本节要实现的就是下方这个点击后显示进度的按钮 效果图: 必备基础: 1.进度条的一些属性: backgroun

Android测试(六):Android UI自动化测试

Android测试(六):Android UI自动化测试 发布时间 2017年12月20日 虫师 原文:https://developer.android.com/training/testing/ui-testing/index.html 用户界面(UI)测试可以确保你的应用程序满足其功能要求,并达到用户最可能成功采用的高质量标准. UI测试的一种方法是简单地让人类测试人员在目标应用程序上执行一组用户操作,并验证其行为是否正确. 但是,这种手动方法可能耗时.乏味.且容易出错.更有效的方法是编写

Android UI个性style

Android开源项目第一篇--个性化控件(View) ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.ProgressBar.TextView.ScrollView.TimeView.TipView.FlipView.ColorPickView.GraphView.UI Style.其他 Android开源项目第二篇--工具库篇 包括依赖注入.图片缓存.网络相关.数据库ORM工具包.Android公共库.高版本向低版本兼