Android仿Win8界面開(kāi)發(fā)
本文將要模仿Win8界面的一個(gè)設(shè)計(jì),一個(gè)一個(gè)的方塊。方法很簡(jiǎn)單。這里自己把圖片改改就可以成為自己想要的界面了。
1、首先來(lái)看看自定義的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(); // 控制中心點(diǎn) 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、下來(lái),來(lái)看看布局
<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、效果
手指按在中間是縮小,手指按在邊上是有角度的卷動(dòng)
手指一直按著的時(shí)候,被按下的那個(gè)圖像變小,并且手指一直按著移動(dòng),此時(shí)其它圖片按鈕不響應(yīng)
希望本文所述對(duì)大家學(xué)習(xí)Android軟件編程有所幫助。
- Android Metro菜單實(shí)現(xiàn)思路及代碼
- Android開(kāi)發(fā) -- UI界面之threme和style
- 解析Android開(kāi)發(fā)優(yōu)化之:對(duì)界面UI的優(yōu)化詳解(三)
- 解析Android開(kāi)發(fā)優(yōu)化之:對(duì)界面UI的優(yōu)化詳解(二)
- 解析Android開(kāi)發(fā)優(yōu)化之:對(duì)界面UI的優(yōu)化詳解(一)
- Android界面效果UI開(kāi)發(fā)資料匯總(附資料包)
- Android 使用XML做動(dòng)畫(huà)UI的深入解析
- Android 在其他線程中更新UI線程的解決方法
- Android仿Win8的metro的UI界面(上)
相關(guān)文章
Android自定義view實(shí)現(xiàn)日歷打卡簽到
這篇文章主要為大家詳細(xì)介紹了Android自定義view實(shí)現(xiàn)日歷打卡簽到,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05Android實(shí)現(xiàn)測(cè)試環(huán)境噪音分貝
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)測(cè)試環(huán)境噪音分貝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01條件數(shù)據(jù)庫(kù)Android:sqllite的簡(jiǎn)單使用
條件數(shù)據(jù)庫(kù)Android:sqllite的簡(jiǎn)單使用,需要的朋友可以參考一下2013-05-05Android啟動(dòng)初始化方案App StartUp的應(yīng)用詳解
這篇文章主要介紹了Android啟動(dòng)初始化方案App StartUp的使用方法,StartUp是為了App的啟動(dòng)提供的一套簡(jiǎn)單、高效的初始化方案,下面我們來(lái)詳細(xì)了解2022-09-09解決android關(guān)于打開(kāi)虛擬機(jī)時(shí)右側(cè)工具欄不顯示的問(wèn)題
下面小編就為大家分享一篇解決android關(guān)于打開(kāi)虛擬機(jī)時(shí)右側(cè)工具欄不顯示的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01