android实现棱形效果

原创 2015年07月08日 16:27:35

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

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

相关文章推荐

【Android应用】【Shape使用总结】

在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,首先我们了解一下Shape下面有哪些标签,都代表什么意思: solid:填充 android:color指定填充的颜...

Android中使用Canvas绘制简单的图形(一)

本代码整理于视频学习,用于总结与备忘。说明都在源码注释中。 效果图: 布局文件:      ...

Android上使用OpenGL画3D菱形

android是用OpenGL来实现3d的。OpenGL的处理机制是把所有的数据都用代码传递给opengl service,如果用户(这里是应用程序)想要画什么东西,就用告诉opengl 什么东西是可...

Android开源图表控件hellocharts-android简单使用

有时在开发的过程中需要使用到诸如拆线型,饼状形等图表统计功能。 通常来说,自己要实现这些控件还是要花费不少时间,所以我们就想到了开源控件。 网上相关的开源框架很多,比如: 大名鼎鼎的MPAndr...
  • true100
  • true100
  • 2017年03月02日 09:15
  • 2638

android自带图片资源图标一览,android.R.drawable

链接1:http://blog.csdn.net/jishu360/article/details/8540026链接2官方API查看图片id: http://developer.android.co...

Android 不规则按钮

各位朋友首先请移步 http://blog.csdn.net/windspeaker/article/details/8129269  看看这个效果...
  • parcool
  • parcool
  • 2014年11月07日 23:06
  • 1541

android 常见问题

1.控制台输出:called unimplemented OpenGL ES API 调用了未实现的OpenGL ES API函数,一般由于导入的第三方库如地图库,里面有用到OpenGL,但是模...

IOS Quartz 各种绘制图形用法---实现画图片、写文字、画线、椭圆、矩形、棱形等

- (void)drawRect:(CGRect)rect   {       CGContextRef context = UIGraphicsGetCurrentContext();    ...

IOS Quartz 各种绘制图形用法---实现画图片、写文字、画线、椭圆、矩形、棱形等

// Only override drawRect: if you perform custom drawing. // An empty implementation adversely affec...

Quartz 各种绘制图形用法 Quartz 实现画图片、写文字、画线、椭圆、矩形、棱形等。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android实现棱形效果
举报原因:
原因补充:

(最多只允许输入30个字)