android实现棱形效果

1786人阅读 评论(0) 收藏 举报
分类:

看到仿Windows Phone的一个图片,感觉效果看起来不错,于是看能不能在Android中实现,因为我们一般看到的Android控件都是方形的,还是一个同学告诉我使用旋转可以实现,终于经过自己的努力,实现了,这里注意要用属性动画,Tween动画变换后只是显示的位置变了,但事件的点击位置没有变化,而属性动画就不一样,事件都一起跟着过去了。先看下效果:


其中的图片可以换成一个个应用的图片,点击相应的图片启动应用什么的都可以,看下代码:

主布局就一个FrameLayout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white" >

</FrameLayout>

然后主要是Activity:

package com.iaiai.test;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.view.WindowManager;
import android.widget.FrameLayout;
import android.widget.ImageButton;

public class MainActivity extends Activity implements OnClickListener {

	private int mTitleBarHeight = 0;

	private int mScreenWidth = 0; // 屏幕宽度
	private int mScreenHeight = 0;// 屏幕高度

	private int mImageWidth = 120;// 图片宽度
	private int mImageHeigth = 120;// 图片高度
	private int mDiagonal = 0;// 对角线长度

	private int mXSpace = 4;
	private int mYSpace = 4;
	FrameLayout mRoot = null;

	ImageButton btn1;
	ImageButton btn2;
	ImageButton btn3;
	ImageButton btn4;
	ImageButton btn5;
	ImageButton btn6;
	ImageButton btn7;

	private int mLineOneCount = 4;
	private int mLineTwoCount = 3;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);
		setContentView(R.layout.activity_main);

		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		mScreenWidth = dm.widthPixels;// 宽度 800
		mScreenHeight = dm.heightPixels;// 高度 450
		mDiagonal = (int) Math.sqrt(2 * mImageWidth * mImageWidth);

		mRoot = (FrameLayout) findViewById(R.id.root);

		btn1 = new ImageButton(this);// 中心点(mImageWidth/2,
										// mImageHeigth/2)

		AnimatorSet animSet = new AnimatorSet();

		/* 变换流程,先绕中心点旋转,在平移到圆心,在向左或者右移动以及上下移动 */
		btn1.setOnClickListener(this);
		btn1.setBackgroundColor(Color.TRANSPARENT);
		btn1.setImageResource(R.drawable.tab_buy_mask);
		LayoutParams params = new FrameLayout.LayoutParams(mImageWidth,
				mImageHeigth);
		mRoot.addView(btn1, params);
		ObjectAnimator anim1 = ObjectAnimator
				.ofFloat(btn1, "rotation", 0f, 45f);
		// anim1.start();
		ObjectAnimator anim2 = ObjectAnimator.ofFloat(btn1, "translationX", 0f,
				mScreenWidth / 2 - mImageWidth / 2 - 1.5f * mDiagonal - 1.5f
						* mXSpace);
		// anim2.start();
		ObjectAnimator anim3 = ObjectAnimator.ofFloat(btn1, "translationY", 0f,
				mScreenHeight / 2 - mImageHeigth / 2 - mDiagonal / 4 - 0.5f
						* mYSpace);
		// anim3.start();
		// animSet.setDuration(10);
		animSet.playTogether(anim1, anim2, anim3);
		animSet.start();

		btn2 = new ImageButton(this);
		btn2.setOnClickListener(this);
		btn2.setBackgroundColor(Color.TRANSPARENT);
		btn2.setImageResource(R.drawable.tab_buy_mask);

		mRoot.addView(btn2, params);
		anim1 = ObjectAnimator.ofFloat(btn2, "rotation", 0f, 45f);
		// anim1.start();
		anim2 = ObjectAnimator.ofFloat(btn2, "translationX", 0f, mScreenWidth
				/ 2 - mImageWidth / 2 - 0.5f * mDiagonal - 0.5f * mXSpace);
		// anim2.start();
		anim3 = ObjectAnimator.ofFloat(btn2, "translationY", 0f, mScreenHeight
				/ 2 - mImageHeigth / 2 - mDiagonal / 4 - 0.5f * mYSpace);
		// anim3.start();
		animSet.playTogether(anim1, anim2, anim3);
		animSet.start();

		btn3 = new ImageButton(this);
		btn3.setOnClickListener(this);
		btn3.setBackgroundColor(Color.TRANSPARENT);
		btn3.setImageResource(R.drawable.tab_buy_mask);

		mRoot.addView(btn3, params);
		anim1 = ObjectAnimator.ofFloat(btn3, "rotation", 0f, 45f);
		// anim1.start();
		anim2 = ObjectAnimator.ofFloat(btn3, "translationX", 0f, mScreenWidth
				/ 2 - mImageWidth / 2 + 0.5f * mDiagonal + 0.5f * mXSpace);
		// anim2.start();
		anim3 = ObjectAnimator.ofFloat(btn3, "translationY", 0f, mScreenHeight
				/ 2 - mImageHeigth / 2 - mDiagonal / 4 - 0.5f * mYSpace);
		// anim3.start();
		animSet.playTogether(anim1, anim2, anim3);
		animSet.start();

		btn4 = new ImageButton(this);
		btn4.setOnClickListener(this);
		btn4.setBackgroundColor(Color.TRANSPARENT);
		btn4.setImageResource(R.drawable.tab_buy_mask);

		mRoot.addView(btn4, params);
		anim1 = ObjectAnimator.ofFloat(btn4, "rotation", 0f, 45f);
		// anim1.start();
		anim2 = ObjectAnimator.ofFloat(btn4, "translationX", 0f, mScreenWidth
				/ 2 - mImageWidth / 2 + 1.5f * mDiagonal + 1.5f * mXSpace);
		// anim2.start();
		anim3 = ObjectAnimator.ofFloat(btn4, "translationY", 0f, mScreenHeight
				/ 2 - mImageHeigth / 2 - mDiagonal / 4 - 0.5f * mYSpace);
		// anim3.start();
		animSet.playTogether(anim1, anim2, anim3);
		animSet.start();

		btn5 = new ImageButton(this);
		btn5.setOnClickListener(this);
		btn5.setBackgroundColor(Color.TRANSPARENT);
		btn5.setImageResource(R.drawable.tab_music_mask);

		mRoot.addView(btn5, params);
		anim1 = ObjectAnimator.ofFloat(btn5, "rotation", 0f, 45f);
		// anim1.start();
		anim2 = ObjectAnimator.ofFloat(btn5, "translationX", 0f, mScreenWidth
				/ 2 - mImageWidth / 2 - mDiagonal - 1 * mXSpace);
		// anim2.start();
		anim3 = ObjectAnimator.ofFloat(btn5, "translationY", 0f, mScreenHeight
				/ 2 - mImageHeigth / 2 + mDiagonal / 4 + 0.5f * mYSpace);
		// anim3.start();
		animSet.playTogether(anim1, anim2, anim3);
		animSet.start();

		btn6 = new ImageButton(this);
		btn6.setOnClickListener(this);
		btn6.setBackgroundColor(Color.TRANSPARENT);
		btn6.setImageResource(R.drawable.tab_music_mask);

		mRoot.addView(btn6, params);
		anim1 = ObjectAnimator.ofFloat(btn6, "rotation", 0f, 45f);
		// anim1.start();
		anim2 = ObjectAnimator.ofFloat(btn6, "translationX", 0f, mScreenWidth
				/ 2 - mImageWidth / 2);
		// anim2.start();
		anim3 = ObjectAnimator.ofFloat(btn6, "translationY", 0f, mScreenHeight
				/ 2 - mImageHeigth / 2 + mDiagonal / 4 + 0.5f * mYSpace);
		// anim3.start();
		animSet.playTogether(anim1, anim2, anim3);
		animSet.start();

		btn7 = new ImageButton(this);
		btn7.setOnClickListener(this);
		btn7.setBackgroundColor(Color.TRANSPARENT);
		btn7.setImageResource(R.drawable.tab_music_mask);

		mRoot.addView(btn7, params);
		anim1 = ObjectAnimator.ofFloat(btn7, "rotation", 0f, 45f);
		// anim1.start();
		anim2 = ObjectAnimator.ofFloat(btn7, "translationX", 0f, mScreenWidth
				/ 2 - mImageWidth / 2 + mDiagonal + 1 * mXSpace);
		// anim2.start();
		anim3 = ObjectAnimator.ofFloat(btn7, "translationY", 0f, mScreenHeight
				/ 2 - mImageHeigth / 2 + mDiagonal / 4 + 0.5f * mYSpace);
		// anim3.start();
		animSet.playTogether(anim1, anim2, anim3);
		animSet.start();
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		int id = v.getId();
	}

}

add一个Button都是添加到左上角,中心点在(mImageWidth/2,mImageHeigth/2),旋转45度后中心点没有变

变换的过程都是先移动到中心点,然后在根据需要向左右上下移动

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1177080次
    • 积分:15320
    • 等级:
    • 排名:第748名
    • 原创:358篇
    • 转载:152篇
    • 译文:60篇
    • 评论:296条
    博客专栏
    最新评论