android实现棱形效果

最新推荐文章于 2024-07-10 03:14:01 发布

new_abc

最新推荐文章于 2024-07-10 03:14:01 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： android应用

本文链接：https://blog.youkuaiyun.com/new_abc/article/details/46804921

android应用专栏收录该内容

124 篇文章

订阅专栏

本文介绍如何在Android中通过属性动画实现类似Windows Phone的棱形效果。通常Android控件为方形，但通过旋转技巧可以达成这一目标。属性动画在变换过程中不仅改变了显示位置，也同步更新了事件点击位置。示例代码展示了一个使用FrameLayout的主布局，并解释了变换过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看到仿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度后中心点没有变

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