当前位置: 移动技术网 > 移动技术>移动开发>Android > Android仿Win8界面开发

Android仿Win8界面开发

2019年07月24日  | 移动技术网移动技术  | 我要评论

本文将要模仿win8界面的一个设计,一个一个的方块。方法很简单。这里自己把图片改改就可以成为自己想要的界面了。

1、首先来看看自定义的myimageview:

package com.example.win8test; 
import android.annotation.suppresslint; 
import android.content.context; 
import android.graphics.camera; 
import android.graphics.canvas; 
import android.graphics.matrix; 
import android.graphics.paint; 
import android.graphics.paintflagsdrawfilter; 
import android.graphics.drawable.bitmapdrawable; 
import android.graphics.drawable.drawable; 
import android.os.handler; 
import android.os.message; 
import android.util.attributeset; 
import android.view.motionevent; 
import android.widget.imageview; 
 
@suppresslint("handlerleak") 
public class myimageview extends imageview { 
 public static final int rotate_handler_message_start = 1; 
 public static final int rotate_handler_message_turning = 2; 
 public static final int rotate_handler_message_turned = 3; 
 public static final int rotate_handler_message_reverse = 6; 
 
 public static final int scale_handler_message_start = 1; 
 public static final int scale_handler_message_turning = 2; 
 public static final int scale_handler_message_turned = 3; 
 public static final int scale_handler_message_reverse = 6; 
 
 private boolean isantialias = true; 
 private boolean scaleonly = false; 
 private boolean issizechanged = false; 
 private boolean isshowanimation = true; 
 private int rotatedegree = 10; 
 private boolean isfirst = true; 
 private float minscale = 0.95f; 
 private int vwidth; 
 private int vheight; 
 private boolean isanimationfinish = true, isactionmove = false, 
   isscale = false; 
 private camera camera; 
 boolean xbigy = false; 
 float rolatex = 0; 
 float rolatey = 0; 
 onviewclick onclick = null; 
 
 public myimageview(context context) { 
  super(context); 
  camera = new camera(); 
 } 
 
 public myimageview(context context, attributeset attrs) { 
  super(context, attrs); 
  camera = new camera(); 
 } 
 
 public void setanimationonoff(boolean oo) { 
  isshowanimation = oo; 
 } 
 
 public void setonclickintent(onviewclick onclick) { 
  this.onclick = onclick; 
 } 
 
 @suppresslint("drawallocation") 
 @override 
 protected void ondraw(canvas canvas) { 
  super.ondraw(canvas); 
  if (isfirst) { 
   isfirst = false; 
   init(); 
  } 
  canvas.setdrawfilter(new paintflagsdrawfilter(0, paint.anti_alias_flag 
    | paint.filter_bitmap_flag)); 
 } 
 
 public void init() { 
  vwidth = getwidth() - getpaddingleft() - getpaddingright(); 
  vheight = getheight() - getpaddingtop() - getpaddingbottom(); 
  drawable drawable = getdrawable(); 
  bitmapdrawable bd = (bitmapdrawable) drawable; 
  bd.setantialias(isantialias); 
 } 
 
 @override 
 public boolean ontouchevent(motionevent event) { 
  super.ontouchevent(event); 
  if (!isshowanimation) 
   return true; 
 
  switch (event.getaction() & motionevent.action_mask) { 
  case motionevent.action_down: 
   float x = event.getx(); 
   float y = event.gety(); 
   rolatex = vwidth / 2 - x; 
   rolatey = vheight / 2 - y; 
   xbigy = math.abs(rolatex) > math.abs(rolatey) ? true : false; 
 
   isscale = x > vwidth / 3 && x < vwidth * 2 / 3 && y > vheight / 3 
     && y < vheight * 2 / 3; 
   isactionmove = false; 
 
   if (isscale) { 
    if (isanimationfinish && !issizechanged) { 
     issizechanged = true; 
     scale_handler.sendemptymessage(scale_handler_message_start); 
    } 
   } else { 
    if (scaleonly) { 
     scale_handler.sendemptymessage(scale_handler_message_start); 
    } else { 
     rotate_handler 
       .sendemptymessage(rotate_handler_message_start); 
    } 
   } 
   break; 
  case motionevent.action_move: 
   float x = event.getx(); 
   float y = event.gety(); 
   if (x > vwidth || y > vheight || x < 0 || y < 0) { 
    isactionmove = true; 
   } else { 
    isactionmove = false; 
   } 
 
   break; 
  case motionevent.action_up: 
   if (isscale) { 
    if (issizechanged) 
     scale_handler 
       .sendemptymessage(scale_handler_message_reverse); 
   } else { 
    rotate_handler.sendemptymessage(rotate_handler_message_reverse); 
   } 
   break; 
  } 
  return true; 
 } 
 
 public interface onviewclick { 
  public void onclick(); 
 } 
 
 @suppresslint("handlerleak") 
 private handler rotate_handler = new handler() { 
  private matrix matrix = new matrix(); 
  private float count = 0; 
 
  // private boolean clickguolv = false; 
  @override 
  public void handlemessage(message msg) { 
   super.handlemessage(msg); 
   matrix.set(getimagematrix()); 
   switch (msg.what) { 
   case rotate_handler_message_start: 
    count = 0; 
    beginrotate(matrix, (xbigy ? count : 0), (xbigy ? 0 : count)); 
    rotate_handler.sendemptymessage(rotate_handler_message_turning); 
    break; 
   case rotate_handler_message_turning: 
    beginrotate(matrix, (xbigy ? count : 0), (xbigy ? 0 : count)); 
    count++; 
    if (count < getdegree()) { 
     rotate_handler 
       .sendemptymessage(rotate_handler_message_turning); 
    } else { 
     isanimationfinish = true; 
    } 
    break; 
   case rotate_handler_message_turned: 
    beginrotate(matrix, (xbigy ? count : 0), (xbigy ? 0 : count)); 
    if (count > 0) { 
     rotate_handler 
       .sendemptymessage(rotate_handler_message_turned); 
    } else { 
     isanimationfinish = true; 
     if (!isactionmove && onclick != null) { 
      onclick.onclick(); 
     } 
    } 
    count--; 
    count--; 
    break; 
   case rotate_handler_message_reverse: 
    count = getdegree(); 
    beginrotate(matrix, (xbigy ? count : 0), (xbigy ? 0 : count)); 
    rotate_handler.sendemptymessage(rotate_handler_message_turned); 
    break; 
   } 
  } 
 }; 
 
 private synchronized void beginrotate(matrix matrix, float rotatex, 
   float rotatey) { 
  // bitmap bm = getimagebitmap(); 
  int scalex = (int) (vwidth * 0.5f); 
  int scaley = (int) (vheight * 0.5f); 
  camera.save(); 
  camera.rotatex(rolatey > 0 ? rotatey : -rotatey); 
  camera.rotatey(rolatex < 0 ? rotatex : -rotatex); 
  camera.getmatrix(matrix); 
  camera.restore(); 
  // 控制中心点 
  if (rolatex > 0 && rotatex != 0) { 
   matrix.pretranslate(-vwidth, -scaley); 
   matrix.posttranslate(vwidth, scaley); 
  } else if (rolatey > 0 && rotatey != 0) { 
   matrix.pretranslate(-scalex, -vheight); 
   matrix.posttranslate(scalex, vheight); 
  } else if (rolatex < 0 && rotatex != 0) { 
   matrix.pretranslate(-0, -scaley); 
   matrix.posttranslate(0, scaley); 
  } else if (rolatey < 0 && rotatey != 0) { 
   matrix.pretranslate(-scalex, -0); 
   matrix.posttranslate(scalex, 0); 
  } 
  setimagematrix(matrix); 
 } 
 
 private handler scale_handler = new handler() { 
  private matrix matrix = new matrix(); 
  private float s; 
  int count = 0; 
 
  @override 
  public void handlemessage(message msg) { 
   super.handlemessage(msg); 
   matrix.set(getimagematrix()); 
   switch (msg.what) { 
   case scale_handler_message_start: 
    if (!isanimationfinish) { 
     return; 
    } else { 
     isanimationfinish = false; 
     issizechanged = true; 
     count = 0; 
     s = (float) math.sqrt(math.sqrt(minscale)); 
     beginscale(matrix, s); 
     scale_handler 
       .sendemptymessage(scale_handler_message_turning); 
    } 
    break; 
   case scale_handler_message_turning: 
    beginscale(matrix, s); 
    if (count < 4) { 
     scale_handler 
       .sendemptymessage(scale_handler_message_turning); 
    } else { 
     isanimationfinish = true; 
     if (!issizechanged && !isactionmove && onclick != null) { 
      onclick.onclick(); 
     } 
    } 
    count++; 
    break; 
   case scale_handler_message_reverse: 
    if (!isanimationfinish) { 
     scale_handler 
       .sendemptymessage(scale_handler_message_reverse); 
    } else { 
     isanimationfinish = false; 
     count = 0; 
     s = (float) math.sqrt(math.sqrt(1.0f / minscale)); 
     beginscale(matrix, s); 
     scale_handler 
       .sendemptymessage(scale_handler_message_turning); 
     issizechanged = false; 
    } 
    break; 
   } 
  } 
 }; 
 
 private synchronized void beginscale(matrix matrix, float scale) { 
  int scalex = (int) (vwidth * 0.5f); 
  int scaley = (int) (vheight * 0.5f); 
  matrix.postscale(scale, scale, scalex, scaley); 
  setimagematrix(matrix); 
 } 
 
 public int getdegree() { 
  return rotatedegree; 
 } 
 
 public void setdegree(int degree) { 
  rotatedegree = degree; 
 } 
 
 public float getscale() { 
  return minscale; 
 } 
 
 public void setscale(float scale) { 
  minscale = scale; 
 } 
} 

2、下来,来看看布局

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="@drawable/d" 
 android:orientation="vertical" 
 tools:context=".mainactivity" > 
 
 <linearlayout 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:orientation="horizontal" > 
 
  <com.example.win8test.myimageview 
   android:id="@+id/myimageview01" 
   android:layout_width="108dp" 
   android:layout_height="108dp" 
   android:layout_margin="16dp" 
   android:scaletype="matrix" 
   android:src="@drawable/fen" /> 
 
  <com.example.win8test.myimageview 
   android:id="@+id/myimageview02" 
   android:layout_width="108dp" 
   android:layout_height="108dp" 
   android:layout_margin="16dp" 
   android:scaletype="matrix" 
   android:src="@drawable/fen" /> 
 </linearlayout> 
 
 <linearlayout 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:orientation="horizontal" > 
 
  <com.example.win8test.myimageview 
   android:id="@+id/myimageview03" 
   android:layout_width="108dp" 
   android:layout_height="108dp" 
   android:layout_margin="16dp" 
   android:scaletype="matrix" 
   android:src="@drawable/fen" /> 
 
  <com.example.win8test.myimageview 
   android:id="@+id/myimageview04" 
   android:layout_width="108dp" 
   android:layout_height="108dp" 
   android:layout_margin="16dp" 
   android:scaletype="matrix" 
   android:src="@drawable/fen" /> 
 </linearlayout> 
 
 <linearlayout 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:orientation="horizontal" > 
 
  <com.example.win8test.myimageview 
   android:id="@+id/myimageview05" 
   android:layout_width="108dp" 
   android:layout_height="108dp" 
   android:layout_margin="16dp" 
   android:scaletype="matrix" 
   android:src="@drawable/fen" /> 
 
  <com.example.win8test.myimageview 
   android:id="@+id/myimageview06" 
   android:layout_width="108dp" 
   android:layout_height="108dp" 
   android:layout_margin="16dp" 
   android:scaletype="matrix" 
   android:src="@drawable/fen" /> 
 </linearlayout> 
 
</linearlayout> 

3、上面的图片按钮的用法,这里只给一张图片按钮添加了事件:

myimageview image_3d_1 = (myimageview)findviewbyid(r.id.myimageview01); 
  image_3d_1.setonclickintent(new myimageview.onviewclick() { 
  @override 
  public void onclick() { 
   toast.maketext(mainactivity.this, "clicked", 100) 
     .show(); 
  } 
 }); 

4、效果
手指按在中间是缩小,手指按在边上是有角度的卷动

手指一直按着的时候,被按下的那个图像变小,并且手指一直按着移动,此时其它图片按钮不响应

希望本文所述对大家学习android软件编程有所帮助。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网