wp8开发仿win8磁贴界面以及功能源码实例

最近看见有人放win8的界面效果，搜了两款，一款是只是仿界面没有特效，另一款是自定义组件能够实现反转效果，今天分析一下这两类界面。

仿win8界面

win8磁贴类似九宫格效果，实现这种效果基本上有三种方式实现：LinearLayout，使用其属性layout_weight实现等分；TableLayout，做过计算器的人可能会用到过这个，也可以实现，还有一种就是GridView,自己实现适配器，我找到的仿win8界面使用LinearLayout来实现的，LinearLayout层层嵌套，这种方式不太提倡，因为嵌套太多，我们看一下界面效果：

我们看一下界面源码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:paddingTop="30dp"
    android:paddingBottom="30dp"
    android:paddingLeft="20dp"
    android:baselineAligned="false"
    android:background="@drawable/rootblock_default_bg"
    >
    <LinearLayout
             android:layout_width="wrap_content"
             android:layout_height="fill_parent"
             android:orientation="vertical"
             android:layout_weight="1">
             <LinearLayout
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content"
                 android:orientation="horizontal">
                     <LinearLayout
                             android:layout_width="108dp"
                             android:layout_height="108dp"
                             android:background="#FF7F24">
                         </LinearLayout>
                     <LinearLayout
                             android:layout_width="108dp"
                             android:layout_height="108dp"
                             android:layout_marginLeft="5dp"
                             android:background="#FF7F24">
                         </LinearLayout>
             </LinearLayout>
        
             <LinearLayout
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="5dp"
                 android:orientation="horizontal">
                <LinearLayout
                             android:layout_width="108dp"
                             android:layout_height="108dp"
                             android:background="#3399ff">
                         </LinearLayout>
                     <LinearLayout
                             android:layout_width="108dp"
                             android:layout_height="108dp"
                             android:layout_marginLeft="5dp"
                             android:background="#3399ff">
                         </LinearLayout>
             </LinearLayout>
             
                      <LinearLayout
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="5dp"
                 android:orientation="horizontal">
               <LinearLayout
                             android:layout_width="108dp"
                             android:layout_height="108dp"
                             android:background="#3399ff">
                         </LinearLayout>
                     <LinearLayout
                             android:layout_width="108dp"
                             android:layout_height="108dp"
                             android:layout_marginLeft="5dp"
                             android:background="#3399ff">
                         </LinearLayout>
             </LinearLayout>
                      <LinearLayout
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="5dp"
                 android:orientation="horizontal">

              <LinearLayout
                  android:layout_width="108dp"
                  android:layout_height="108dp"
                  android:background="#953399ff" >
              </LinearLayout>

                     <LinearLayout
                             android:layout_width="108dp"
                             android:layout_height="108dp"
                             android:layout_marginLeft="5dp"
                             android:background="#953399ff">
                         </LinearLayout>
             </LinearLayout>         
                 
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_weight="1">
               <RelativeLayout
                   android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   >
                 <LinearLayout
                         android:layout_width="wrap_content"
                           android:layout_height="wrap_content"
                           android:orientation="vertical"
                     android:layout_alignParentBottom="true">
                               <ImageView
                                   android:id="@+id/download_btn"
                                        android:layout_width="36dp"
                                       android:layout_height="36dp"
                                       android:src="@drawable/rootblock_icon_download_bg"/>
                               <ImageView
                                   android:id="@+id/download_btn"
                                        android:layout_width="36dp"
                                       android:layout_height="36dp"
                                       android:layout_marginTop="20dp"
                                       android:src="@drawable/rootblock_icon_clear_bg"/>
                               <ImageView
                                   android:id="@+id/download_btn"
                                        android:layout_width="36dp"
                                       android:layout_height="36dp"
                                       android:layout_marginTop="20dp"
                                       android:src="@drawable/rootblock_icon_set_bg"/>
                               <ImageView
                                   android:id="@+id/download_btn"
                                        android:layout_width="36dp"
                                       android:layout_height="36dp"
                                       android:layout_marginTop="20dp"
                                       android:src="@drawable/rootblock_icon_add_bg"/>
                        </LinearLayout>
               </RelativeLayout>
    </LinearLayout>
</LinearLayout>

从源码上看，分了左右两部分，左边使用LinearLayout进行嵌套，不过其宽度和高度都是108dp，固定的不好，如果是在Pad上面界面就不太和谐了，就要写几套布局来实现。
我重写改了一下，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rootblock_default_bg"
    android:paddingBottom="30dp"
    android:paddingLeft="20dp"
    android:paddingTop="30dp" >

    <LinearLayout
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:orientation="vertical"
        android:paddingLeft="20dip"
        android:paddingRight="20dip" >

        <ImageView
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/rootblock_icon_download_bg" />

        <ImageView
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:layout_marginTop="20dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/rootblock_icon_clear_bg" />

        <ImageView
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:layout_marginTop="20dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/rootblock_icon_set_bg" />

        <ImageView
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:layout_marginTop="20dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/rootblock_icon_add_bg" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toLeftOf="@id/right"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_weight="1"
            android:baselineAligned="false"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#FF7F24" >
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:background="#FF7F24" >
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_marginTop="5dp"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#3399ff" >
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:background="#3399ff" >
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_marginTop="5dp"
            android:layout_weight="1"
            android:baselineAligned="false"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#3399ff" >
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:background="#3399ff" >
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_marginTop="5dp"
            android:layout_weight="1"
            android:baselineAligned="false"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#953399ff" >
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:background="#953399ff" >
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_marginTop="5dp"
            android:layout_weight="1"
            android:baselineAligned="false"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

采取分方式就是layout_weight嵌套，虽然这种方式官方不提倡，不过可以有很好的适应性。

自定义，实现仿win8磁贴功能我找到的这个源码效果很绚丽，自定义组件式通过继承ImageView来实现的，因为ImageView本身是有可以使用Matix进行缩放和旋转功能，缺点就是只能放图片，所以如果用这个源码你必须把主界面的模块布局用图片的形式展现，下面看看它的实现效果：

实现原理很简单，功能分为缩放和旋转，当点击中间区域实现缩放，点击两侧实现旋转，这个可以根据组件的宽度和高度以及点击的位置来判断，源码如下：

package com.ljp.ani;

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 MagnetView extends ImageView {

        private boolean onAnimation = true;
        private int rotateDegree = 10;
        private PaintFlagsDrawFilter filter;

        private boolean isFirst = true;
        private float minScale = 0.95f;
        private int vWidth;
        private int vHeight;
        private boolean isFinish = true, isActionMove = false, isScale = false;
        private Camera camera;

        boolean XbigY = false;
        float RolateX = 0;
        float RolateY = 0;

        OnViewClick onclick = null;

        public MagnetView(Context context) {
                super(context);
                camera = new Camera();
                filter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
                                | Paint.FILTER_BITMAP_FLAG);
        }

        public MagnetView(Context context, AttributeSet attrs) {
                super(context, attrs);
                camera = new Camera();
                filter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
                                | Paint.FILTER_BITMAP_FLAG);
        }

        public void SetAnimationOnOff(boolean oo) {
                onAnimation = oo;
        }

        public void setOnClickIntent(OnViewClick onclick) {
                this.onclick = onclick;
        }

        @Override
        protected void onDraw(Canvas canvas) {
                super.onDraw(canvas);
                if (isFirst) {
                        isFirst = false;
                        init();
                }
                canvas.setDrawFilter(filter);
        }

        public void init() {
                vWidth = getWidth() - getPaddingLeft() - getPaddingRight();
                vHeight = getHeight() - getPaddingTop() - getPaddingBottom();
                Drawable drawable = getDrawable();
                BitmapDrawable bd = (BitmapDrawable) drawable;
                bd.setAntiAlias(true);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
                super.onTouchEvent(event);
                if (!onAnimation)
                        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) {
                                handler.sendEmptyMessage(1);
                        } else {
                                rolateHandler.sendEmptyMessage(1);
                        }
                        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) {
                                handler.sendEmptyMessage(6);
                        } else {
                                rolateHandler.sendEmptyMessage(6);
                        }
                        break;
                }
                return true;
        }

        public interface OnViewClick {
                public void onClick();
        }

        private Handler rolateHandler = new Handler() {
                private Matrix matrix = new Matrix();
                private float count = 0;

                @Override
                public void handleMessage(Message msg) {
                        super.handleMessage(msg);
                        matrix.set(getImageMatrix());
                        switch (msg.what) {
                        case 1:
                                count = 0;
                                BeginRolate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));
                                rolateHandler.sendEmptyMessage(2);
                                break;
                        case 2:
                                BeginRolate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));
                                if (count < getDegree()) {
                                        rolateHandler.sendEmptyMessage(2);
                                } else {
                                        isFinish = true;
                                }
                                count++;
                                count++;
                                break;
                        case 3:
                                BeginRolate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));
                                if (count > 0) {
                                        rolateHandler.sendEmptyMessage(3);
                                } else {
                                        isFinish = true;
                                        if (!isActionMove && onclick != null) {
                                                onclick.onClick();
                                        }
                                }
                                count--;
                                count--;
                                break;
                        case 6:
                                count = getDegree();
                                BeginRolate(matrix, (XbigY ? count : 0), (XbigY ? 0 : count));
                                rolateHandler.sendEmptyMessage(3);
                                break;
                        }
                }
        };

        private synchronized void BeginRolate(Matrix matrix, float rolateX,
                        float rolateY) {
                int scaleX = (int) (vWidth * 0.5f);
                int scaleY = (int) (vHeight * 0.5f);
                camera.save();
                camera.rotateX(RolateY > 0 ? rolateY : -rolateY);
                camera.rotateY(RolateX < 0 ? rolateX : -rolateX);
                camera.getMatrix(matrix);
                camera.restore();
                // 控制中心点
                if (RolateX > 0 && rolateX != 0) {
                        matrix.preTranslate(-vWidth, -scaleY);
                        matrix.postTranslate(vWidth, scaleY);
                } else if (RolateY > 0 && rolateY != 0) {
                        matrix.preTranslate(-scaleX, -vHeight);
                        matrix.postTranslate(scaleX, vHeight);
                } else if (RolateX < 0 && rolateX != 0) {
                        matrix.preTranslate(-0, -scaleY);
                        matrix.postTranslate(0, scaleY);
                } else if (RolateY < 0 && rolateY != 0) {
                        matrix.preTranslate(-scaleX, -0);
                        matrix.postTranslate(scaleX, 0);
                }
                setImageMatrix(matrix);
        }

        private Handler 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 1:
                                if (!isFinish) {
                                        return;
                                } else {
                                        isFinish = false;
                                        count = 0;
                                        s = (float) Math.sqrt(Math.sqrt(minScale));
                                        BeginScale(matrix, s);
                                        handler.sendEmptyMessage(2);
                                }
                                break;
                        case 2:
                                BeginScale(matrix, s);
                                if (count < 4) {
                                        handler.sendEmptyMessage(2);
                                } else {
                                        isFinish = true;
                                        if (!isActionMove && onclick != null) {
                                                onclick.onClick();
                                        }
                                }
                                count++;
                                break;
                        case 6:
                                if (!isFinish) {
                                        handler.sendEmptyMessage(6);
                                } else {
                                        isFinish = false;
                                        count = 0;
                                        s = (float) Math.sqrt(Math.sqrt(1.0f / minScale));
                                        BeginScale(matrix, s);
                                        handler.sendEmptyMessage(2);
                                }
                                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;
        }
}

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bkg_img_default"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <com.ljp.ani.MagnetView
                    android:id="@+id/c_joke"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="matrix"
                    android:src="@drawable/left_top" />

                <com.ljp.ani.MagnetView
                    android:id="@+id/c_idea"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:scaleType="matrix"
                    android:src="@drawable/left_bottom" />
            </LinearLayout>

            <com.ljp.ani.MagnetView
                android:id="@+id/c_constellation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:scaleType="matrix"
                android:src="@drawable/right" />
        </LinearLayout>

        <com.ljp.ani.MagnetView
            android:id="@+id/c_recommend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:scaleType="matrix"
            android:src="@drawable/bottom" />
    </LinearLayout>

</LinearLayout>

其实布局跟第一种情况一样，只是组件换成自己定义的组件，多的只是自定义组件的点击效果。

时间： 2024-02-23 11:44:51

wp8开发仿win8磁贴界面以及功能源码实例的相关文章

求。net mvc简单的登录删除查询 功能源码 哎 自学好辛苦

问题描述 求.net mvc简单的登录删除查询 功能源码 哎 自学好辛苦 有视频开发实例 或者好的资料也行 .哎 自学好辛苦 英文又不懂烦死了.好想求一位师傅 解决方案 先跟着我的这篇博客试着写一下,然后登陆.删除啥的依葫芦画瓢. http://blog.csdn.net/chinacsharper/article/details/43927025 解决方案二: 这个百度一搜,应该够入门了吧 解决方案三: 呵呵 也是 只是自己本来就不懂 没人教 学的好乱 看不大懂啊 解决方案四: 吧你的联系方式

使用ajax+php模仿google功能源码

模仿google搜索栏功能的效果源代码如下: 以下是引用片段:// 原创作品 本站原创:www.111cn.cn 作者:面条爱兔子 QQ:271728967 注明:转载请说明原出去 http://www.111cn.cn // 现在长沙下着大雪啊,晚上回家也没什么事作,白天在公司写一个BBS完成了一部份,突然昨天听一个网友说如果能实现google效果就好了,今天无聊之下就想了想,觉得这个用ajax做应该不是什么难道了,就试着写了,说句实话我学ajax时间很短,也只懂皮毛了,各位看了后别丢石头了,

PHP+jQuery实现自动补全功能源码_php技巧

前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择.由于项目很多地方要用到这个功能,所以需要用心做一下.发现select2这个插件的功能可以满足当前需求. 在使用jquery插件select2的过程中遇到了一些疑惑,无论是穿json数据还是通过jsonp方式取数据,都能够正确返回.可是下拉列表中的条目却不能被选中,对鼠标和键盘选择都无效. 后来发现,select2插件在实现选中时是以数据中的id字段为准的.所以不管是json还是jsonp,ajax返回的数据都必须

C语言实现的统计php代码行数功能源码（支持文件夹、多目录）_C 语言

放假在家没事,睡过懒觉,看过电影,就想起来写个小程序. 统计php代码的行数,对于phper还是挺实用的.支持单个文件和目录.下面是代码和演示的例子! /**  * @date     2012-12-1  * @author bright  * @todo     统计php代码行数  */ #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #inc

asp下实现代码的“运行代码”“复制代码”“保存代码”功能源码_应用技巧

看到很多人需要,就放出来,好东西大家一起分享.  复制代码 代码如下: Function content_Code(Str)    dim ary_String,i,n,n_pos    ary_String=split(Str,"[ code ]")    n=ubound(ary_String)    If n<1 then     content_Code=Str     Exit function    End If    for i=1 to n     n_pos=i

Android仿Win8界面开发_Android

本文将要模仿Win8界面的一个设计,一个一个的方块.方法很简单.这里自己把图片改改就可以成为自己想要的界面了. 1.首先来看看自定义的MyImageView: package com.example.win8test; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Camera; import android.graphics.Canvas; impo

Win8开始界面怎么关机？Win8.1系统在Metro界面中创建关机磁贴的方法图解

  Win8/8.1加入Metro开始界面后,很多网友在开始界面都不知道怎么关机,每次电脑关机都需要切换到传统桌面.今天,脚本之家小编教大家一个玩转Win8/8.1关机技巧,在Metro开始界面创建关机磁贴,这样无论是哪个界面,关机都非常简单,下面是具体的教程. Win8开始界面怎么关机 Win8.1的Metro界面创建关机磁贴方法 一.首先在桌面新建一个快捷方式,在"请键入对象的位置"输入框中,键入"shutdown.exe -s -t 00",然后点击"

Android仿Win8的metro的UI界面（上）_Android

手机下载了一些APP,发现现在仿win8的主界面越来越多,在大家见惯了类GridView或者类Tab后,给人一种耳目一新的感觉.今天在eoe上偶然发现已经有人实现了这个功能的源码(地址:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=327557),马上下载跑了一下,效果很炫,但是有些bug,比如点击速度特别快时图像会被放大,以及点击时会触发两次点击事件. 本例子基于eoe中这位大神的实现,做了一些简化,和bug的修复. 效果: 首先

初学wp8开发：如何点击按钮打开一个新的界面

问题描述 初学wp8开发:如何点击按钮打开一个新的界面 请大家帮帮我,我想在一个界面点击按钮打开另一个界面应该怎么做?