使用了ZAKER到最新版本，其主界面采用windows phone的风格，感觉还蛮好看的，挺喜欢的，就模仿写了一下，实现到界面截图如下：

第一版面：

第二版面：

在实现了它到九宫格菜单，还实现了背景图片到缓慢移动效果。

首先来分析一下它到整个布局架构，我们肯定知道它必须是采用到FrameLayout布局，最下面到是背景图片视图，上面的是线性布局来装下左右两个面板，左边到是一个可以滚动的容器，右边放一个页码和四个按钮。

那么怎么实现背景图片的不断循环滚动呢？ 既然是显示图片的，那么自然离不开ImageView，所以在这里我们自定义一个MyImageView，它来继承ImageView，在它里面通过使用Handler消息处理机制+Timer计时器来控制图片的显示位置。

在这里，我使用了android.support.v4.view.ViewPager来实现可滑动到宫格菜单，自定义一个MyPagerAdapter继承PagerAdapter，在instantiateItem方法中配置显示参数。

大概原理就是这样，挺简单的，下面分享一下代码吧：

工程目录结构：

一. src/com/example/zakerdemo下面的类：

MainActivity.java：

package com.example.zakerdemo;

import java.util.ArrayList;

import com.example.zakerdemo.R;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.view.Menu;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends Activity {

    ArrayList<ImageInfo> data; // 菜单数据

    private static TextView mynum; // 页码

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        mynum = (TextView) findViewById(R.id.mynum);

        // 初始化数据

        initData();

        ViewPager vpager = (ViewPager) findViewById(R.id.vPager);

        vpager.setAdapter(new MyPagerAdapter(MainActivity.this, data));

        vpager.setPageMargin(50);

        vpager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override

            public void onPageSelected(int arg0) {

                mynum.setText("" + (int) (arg0 + 1));

            }

            @Override

            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override

            public void onPageScrollStateChanged(int arg0) {

            }

        });

    }

    private void initData() {

        data = new ArrayList<ImageInfo>();

        mynum.setText("1");

        data.add(new ImageInfo("今日看点", R.drawable.icon1, R.drawable.icon_bg01));

        data.add(new ImageInfo("新浪微博", R.drawable.icon2, R.drawable.icon_bg01));

        data.add(new ImageInfo("我的收藏", R.drawable.icon3, R.drawable.icon_bg01));

        data.add(new ImageInfo("新闻头条", R.drawable.icon4, R.drawable.icon_bg02));

        data.add(new ImageInfo("科技频道", R.drawable.icon5, R.drawable.icon_bg02));

        data.add(new ImageInfo("汽车频道", R.drawable.icon6, R.drawable.icon_bg02));

        data.add(new ImageInfo("军事频道", R.drawable.icon7, R.drawable.icon_bg02));

        data.add(new ImageInfo("新华炫文", R.drawable.icon8, R.drawable.icon_bg02));

        data.add(new ImageInfo("ͨ娱乐八卦", R.drawable.icon9, R.drawable.icon_bg02));

        data.add(new ImageInfo("体育新闻", R.drawable.icon10, R.drawable.icon_bg02));

        data.add(new ImageInfo("互联网新闻", R.drawable.icon11, R.drawable.icon_bg02));

        data.add(new ImageInfo("奢侈品频道", R.drawable.icon12, R.drawable.icon_bg02));

        data.add(new ImageInfo("时尚频道", R.drawable.icon13, R.drawable.icon_bg02));

        data.add(new ImageInfo("财经频道", R.drawable.icon14, R.drawable.icon_bg02));

        data.add(new ImageInfo("财经新闻", R.drawable.icon15, R.drawable.icon_bg02));

        data.add(new ImageInfo("福布斯中文网", R.drawable.icon16,

                R.drawable.icon_bg02));

        data.add(new ImageInfo("旅游频道", R.drawable.icon3, R.drawable.icon_bg02));

        data.add(new ImageInfo("游戏频道", R.drawable.icon8, R.drawable.icon_bg02));

        data.add(new ImageInfo("开心笑话", R.drawable.icon10, R.drawable.icon_bg02));

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

}

ImageInfo.java：

package com.example.zakerdemo;

/**

 * 图像实体类

 * @author wulianghuan

 *

 */

public class ImageInfo {

    public String imageMsg;        //菜单标题

    public int imageId;            //logo图片资源

    public int bgId;            //背景图片资源

    public ImageInfo(String msg, int id1,int id2) {

        imageId = id1;

        imageMsg = msg;

        bgId = id2;

    }

}

MyImageView.java：

package com.example.zakerdemo;

import java.util.Timer;

import java.util.TimerTask;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.os.Handler;

import android.os.Message;

import android.util.AttributeSet;

import android.util.DisplayMetrics;

import android.util.Log;

import android.view.View;

import android.widget.ImageView;

import android.widget.Toast;

/**

 * @author wulianghuan

 * 该类为自定义ImageView，用于显示背景图片，并显示背景图片到移动效果

 *

 */

public class MyImageView extends ImageView{

    private Bitmap back;        //背景图片资源

    private Bitmap mBitmap;        //生成位图

    private double startX = 0;    //移动起始X坐标

    //构造函数中必须有context,attributeSet这两个    参数，否则父类无法调用

    public MyImageView(Context context,AttributeSet attributeSet)

    {

        super(context, attributeSet);

        //由于不是Activity子类，只能通过DisplayMetrics来获取屏幕信息

        DisplayMetrics dm = getResources().getDisplayMetrics();

        //屏幕宽度

        int screenWidth = dm.widthPixels;

        //屏幕高度

        int screenHeight = dm.heightPixels;      

        back = BitmapFactory.decodeResource(context.getResources(), R.drawable.rootblock_default_bg);

        mBitmap = Bitmap.createScaledBitmap(back, screenWidth*3, screenHeight, true);    

        final Handler handler = new Handler()

        {

            public void handleMessage(Message msg)

            {

                if (msg.what == 1)

                {

                    Log.i("TAG", "-----"+startX);

                    if (startX <= -80)

                    {

                        startX = 0;

                    }

                    else

                    {

                        startX -= 0.09;

                    }

                }

                invalidate();

            }

        };

        new Timer().schedule(new TimerTask()

        {

            @Override

            public void run()

            {

                handler.sendEmptyMessage(1);

            }

        }, 0 , 10);

    }

    @Override

    public void onDraw(Canvas canvas)

    {

        Log.i("TAG", "-----onDraw");

        Bitmap bitmap2 = Bitmap.createBitmap(mBitmap);

        canvas.drawBitmap(mBitmap, (float)startX , 0 , null);

    }

}

MyPagerAdapter.java：

package com.example.zakerdemo;

import java.util.ArrayList;

import com.example.zakerdemo.R;

import android.app.Activity;

import android.content.Context;

import android.os.Vibrator;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.MotionEvent;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewGroup.LayoutParams;

import android.view.WindowManager;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemLongClickListener;

import android.widget.BaseAdapter;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.RelativeLayout;

import android.widget.TextView;

/**

 * 自定义适配器

 * @author wulianghuan

 *

 */

public class MyPagerAdapter extends PagerAdapter {

    Vibrator vibrator;

    ArrayList<ImageInfo> data;

    Activity activity;

    LayoutParams params;

    public MyPagerAdapter(Activity activity, ArrayList<ImageInfo> data) {

        this.activity = activity;

        this.data = data;

        vibrator = (Vibrator) activity

                .getSystemService(Context.VIBRATOR_SERVICE);

    }

    @Override

    public int getCount() {

        // TODO Auto-generated method stub

        return 2;

    }

    @Override

    public boolean isViewFromObject(View arg0, Object arg1) {

        // TODO Auto-generated method stub

        return arg0 == arg1;

    }

    @Override

    public Object instantiateItem(ViewGroup container, final int index) {

        Log.v("test", index + "index");

        View view = activity.getLayoutInflater().inflate(R.layout.grid, null);

        GridView gridView = (GridView) view.findViewById(R.id.gridView1);

        gridView.setNumColumns(2);

        gridView.setVerticalSpacing(5);

        gridView.setHorizontalSpacing(5);

        gridView.setAdapter(new BaseAdapter() {

            @Override

            public int getCount() {

                return 8;

            }

            @Override

            public Object getItem(int position) {

                return position;

            }

            @Override

            public long getItemId(int position) {

                return position;

            }

            @Override

            public View getView(int position, View convertView, ViewGroup parent) {

                View item = LayoutInflater.from(activity).inflate(

                        R.layout.grid_item, null);

                ImageView iv = (ImageView) item.findViewById(R.id.imageView1);

                RelativeLayout relativeLayout = (RelativeLayout)item.findViewById(R.id.relativeLayout);

                iv.setImageResource((data.get(index * 8 + position)).imageId);

                relativeLayout.setBackgroundResource((data.get(index * 8 + position)).bgId);

                relativeLayout.getBackground().setAlpha(225);

                TextView tv = (TextView) item.findViewById(R.id.msg);

                tv.setText((data.get(index * 8 + position)).imageMsg);

                return item;

            }

        });

        gridView.setOnItemLongClickListener(new OnItemLongClickListener() {

            @Override

            public boolean onItemLongClick(AdapterView<?> arg0, View arg1,

                    int arg2, long arg3) {

                View view = arg1;

                arg1.setVisibility(View.INVISIBLE);

                params = new WindowManager.LayoutParams();

                vibrator.vibrate(2500);

                return true;

            }

        });

        ((ViewPager) container).addView(view);

        return view;

    }

}

二.  layout下的布局文件：

main.xml

<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">

<FrameLayout

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

        <com.example.zakerdemo.MyImageView

        android:id="@+id/rootbg"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:scaleType="fitXY"/>

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:orientation="horizontal">

            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:layout_weight="1">

                <android.support.v4.view.ViewPager

                    android:id="@+id/vPager"

                    android:layout_width="fill_parent"

                    android:layout_height="match_parent" />

            </LinearLayout>

            <LinearLayout

                android:layout_width="wrap_content"

                android:layout_height="match_parent"

                android:orientation="vertical">

                <RelativeLayout

                    android:layout_width="match_parent"

                    android:layout_height="match_parent"

                    android:layout_gravity="center_horizontal">

                     <TextView

                        android:id="@+id/mynum"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_alignParentTop="true"

                        android:layout_marginTop="15dp"

                        android:layout_marginLeft="5dp"

                        android:gravity="center"

                        android:textStyle="bold"

                        android:textColor="@android:color/white"

                        android:background="@drawable/rootblock_pageinfo_blue_bg"/>

                    <Button

                        android:id="@+id/add"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_alignParentBottom="true"

                        android:layout_marginBottom="40dp"

                        android:background="@drawable/rootblock_add_selector"/>

                    <Button

                        android:id="@+id/set"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_above="@id/add"

                        android:layout_marginBottom="15dp"

                        android:background="@drawable/rootblock_set_selector"/>

                    <Button

                        android:id="@+id/appstroe"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_above="@id/set"

                        android:layout_marginBottom="15dp"

                        android:background="@drawable/rootblock_appstroe_selector"/>

                    <Button

                        android:id="@+id/download"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_above="@id/appstroe"

                        android:layout_marginBottom="15dp"

                        android:background="@drawable/rootblock_download_selector"/>

            </RelativeLayout>

         </LinearLayout>

    </LinearLayout>

</FrameLayout>

</LinearLayout>

grid.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

    <GridView

        android:id="@+id/gridView1"

        android:layout_width="fill_parent"

        android:layout_marginLeft="10dp"

        android:layout_marginTop="15dp"

        android:layout_height="fill_parent"

        android:layout_alignParentTop="true"

        android:layout_toRightOf="@+id/left"

        android:numColumns="2" >

    </GridView>

</RelativeLayout>

grid_item.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="120dip"

    android:layout_height="120dip"

    android:id="@+id/relativeLayout">

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="60dp"

        android:layout_height="70dp"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="5dp" />

    <TextView

        android:id="@+id/msg"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/imageView1"

        android:layout_centerHorizontal="true"

        android:paddingBottom="10dp"

        android:textColor="#ffffff" />

</RelativeLayout>

三. drawable下的xml文件：

rootblock_add_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:state_pressed="false"

        android:drawable="@drawable/rootblock_icon_add" />

    <item

        android:state_pressed="true"

        android:drawable="@drawable/rootblock_icon_add_selected" />

</selector>

rootblock_appstroe_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:state_pressed="false"

        android:drawable="@drawable/rootblock_icon_appstroe" />

    <item

        android:state_pressed="true"

        android:drawable="@drawable/rootblock_icon_appstroe_selected" />

</selector>

rootblock_download_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:state_pressed="false"

        android:drawable="@drawable/rootblock_icon_download" />

    <item

        android:state_pressed="true"

        android:drawable="@drawable/rootblock_icon_download_selected" />

</selector>

rootblock_set_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:state_pressed="false"

        android:drawable="@drawable/rootblock_icon_set" />

    <item

        android:state_pressed="true"

        android:drawable="@drawable/rootblock_icon_set_selected" />

</selector>

四. AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.zakerdemo"

    android:versionCode="1"

    android:versionName="1.0" >

    <supports-screens

        android:smallScreens="true"

        android:normalScreens="true"

        android:largeScreens="true"

        android:resizeable="true"

        android:anyDensity="true" />

    <uses-sdk

        android:minSdkVersion="14"

        android:targetSdkVersion="14" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@android:style/Theme.NoTitleBar" >

        <activity

            android:name="com.example.zakerdemo.MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest>

转载自：http://blog.csdn.net/wulianghuan/article/details/8892203

代码下载地址：http://download.csdn.net/detail/wulianghuan/5338801

仿windows phone风格主界面的更多相关文章

  1. Android 高仿微信6.0主界面 带你玩转切换图标变色

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41087219,本文出自:[张鸿洋的博客] 1.概述 学习Android少不了模仿 ...

  2. 高仿Windows Phone QQ登录界面

    给 TextBox文本框前添加图片 扩展PhoneTextBox:添加一个类"ExtentPhoneTextBox"继承 PhoneTextBox ,在"ExtentPh ...

  3. VC/Wince 实现仿Win8 Metro风格界面1——设计概述和自绘Button(附效果图)

    去年用VC做了一个仿Win8 Metro风格的界面,感觉挺有意思,最近打算把实现过程和一些技术原理记录下来. 主要是风格上类似Win8,其实功能上很多借鉴了Android的操作方式.界面只支持两种大小 ...

  4. Android应用经典主界面框架之二:仿网易新闻client、CSDN client (Fragment ViewPager)

    另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所 ...

  5. Android ActionBar应用实战，高仿微信主界面的设计

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...

  6. Linux 版 SecureCRT 界面变为 Windows 2000 风格的解决办法

    SecureCRT 是一款非常好用的远程终端连接软件,支持 Windows.Linux.macOS 全平台.由于现在工作平台主要在 Linux 系统上,SecureCRT 也是必备软件.一开始安装的是 ...

  7. VC/Wince 实现仿Win8 Metro风格界面2——页面滑动切换（附效果图）

    前几天开始写仿Win8 Metro界面文章,部分网友觉得不错,感谢各位的意见.本来今天一直在折腾Android VLC播放器,没时间写.不过明天休息,所以今天就抽时间先写一下. 言归正传,我们都知道W ...

  8. 仿oschina 主界面的实现（二） -------Toolbar + DrawerLayout

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  9. 高仿美团主界面&lt;一&gt;

    声明:本demo还未完好,正在持续更新中... 先上图吧: 这个小demo资源图片全是用青花瓷抠出来的,如今仅仅是完毕了 一部分. 会持续更行中. . .有兴趣的朋友能够关注我,我们一起coding, ...

随机推荐

  1. unity UGUI动态字体显示模糊

    设置Unity中ttf文件的Character为Unicode,点击apply

  2. Sina App Engine(SAE)入门教程(7)- Storage使用

    参考阅读 sae storage api 文档 Storage 说明文档 Storage 大文件上传说明 storage是什么? 因为sae禁用了代码环境的本地读写,但是在网站运行的过程中,必定会出现 ...

  3. [Unity菜鸟] 射线

    1. 射线用 Physics.Raycast 都可以判断,用 collider.Raycast 只在某些(不明)情况下可以 void Update() { Ray ray = Camera.main. ...

  4. 对象的继承关系在数据库中的实现方式和PowerDesigner设计

    原文:对象的继承关系在数据库中的实现方式和PowerDesigner设计 在面向对象的编程中,使用对象的继承是一个非常普遍的做法,但是在关系数据库管理系统RDBMS中,使用的是外键表示实体(表)之间的 ...

  5. highcharts 结合phantomjs纯后台生成图片

    highcharts 结合phantomjs纯后台生成图片 highcharts 这个图表展示插件我想大家应该都知道,纯javascript编写,相比那些flash图表插件有很大的优势,至少浏览器不用 ...

  6. 利用qt打开一张图片并转成灰度矩阵

    首先是mat类,这个类的主要作用是构造一个容器,并将对应像素的灰度值放在容器内 #ifndef MAT_H #define MAT_H #include <vector> #include ...

  7. javascript 字符转义汇总

    在开发中经常遇到需要字符转义的,我将一一把遇到的转义列举出来 1.今天中午做项目的时候遇到一个字符串链接的问题,需要链接的的是一个函数的参数 时间字符串:"2014-04-08 16:37: ...

  8. IE css expression（表达式）

    很多时候我们需要对IE6的bug写一些hack,如max-height,absolute元素高度100%等. css里面的 expression(表达式)和js里面的差不多,如: 获取当前元素的高度: ...

  9. Enabling HierarchyViewer on Rooted Android Devices

    转自http://blog.apkudo.com/2012/07/26/enabling-hierarchyviewer-on-rooted-android-devices/. The Hierarc ...

  10. 学军NOI训练13 T3 白黑树

    唉,大学军有自己的OJ就是好,无限orz 只有周六的比赛是开放的囧,这场比赛最后因为虚拟机卡住没有及时提交…… 否则就能让大家看到我有多弱了…… 前两题题解写的很详细,可以自己去看,我来随便扯扯T3好 ...