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中使用Canvas绘制简单的图形(一)

本代码整理于视频学习,用于总结与备忘。说明都在源码注释中。 效果图: 布局文件:      ...
  • daweibalang717
  • daweibalang717
  • 2016年06月28日 15:45
  • 1414

Android 使用Fresco实现不同形状的加载图片

Android 使用Fresco实现不同形状的加载图片
  • damoguyun
  • damoguyun
  • 2017年09月11日 16:53
  • 129

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

本代码整理于视频学习,用于总结与备忘。说明都在源码注释中。 效果图: 布局文件:      ...
  • daweibalang717
  • daweibalang717
  • 2016年06月28日 15:45
  • 1414

js绘制菱形(空心和实心)

js绘制菱形,其实很简单,只要发现其中的规律,就可以了,代码如下,首先是空心var n=window.prompt("请输入n"); n=2*n-1; var temp = parse...
  • u013911102
  • u013911102
  • 2016年01月28日 13:05
  • 3091

用PHP输出对称菱形的简易办法

比如输出一个简单的菱形或者叫星星塔,首先是最外层控制行号,然后是内层的循环,内层的循环有两个第一个循环控制,然后第二个循环来控制星星的数量,控制空格的是总共有的行数减去当前的行数for($space=...
  • woshinannan741
  • woshinannan741
  • 2015年09月03日 21:27
  • 3112

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

// Only override drawRect: if you perform custom drawing. // An empty implementation adversely affec...
  • zhibudefeng
  • zhibudefeng
  • 2013年01月04日 09:44
  • 60073

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

// Only override drawRect: if you perform custom drawing.   // An empty implementation adversely af...
  • hong1595
  • hong1595
  • 2013年11月30日 23:58
  • 2230

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

原创zuo zhe http://blog.csdn.net/zhibudefeng/article/details/8463268
  • H_O_W_E
  • H_O_W_E
  • 2014年07月10日 11:06
  • 694

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

- (void)drawRect:(CGRect)rect   {       CGContextRef context = UIGraphicsGetCurrentContext();    ...
  • u011862058
  • u011862058
  • 2015年01月30日 11:10
  • 267

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

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

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