仿ZAKER的windows phone风格主界面

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

第一版面：

第二版面：

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

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

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

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

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

工程目录结构：

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

MainActivity.java:

[html]  view plain copy

1. package com.example.zakerdemo;  
2.   
3. import java.util.ArrayList;  
4. import com.example.zakerdemo.R;  
5. import android.app.Activity;  
6. import android.os.Bundle;  
7. import android.os.Handler;  
8. import android.support.v4.view.ViewPager;  
9. import android.support.v4.view.ViewPager.OnPageChangeListener;  
10. import android.view.Menu;  
11. import android.widget.TextView;  
12. import android.widget.Toast;  
13.   
14. public class MainActivity extends Activity {  
15.     ArrayList<ImageInfo> data; // 菜单数据  
16.     private static TextView mynum; // 页码  
17.   
18.     @Override  
19.     protected void onCreate(Bundle savedInstanceState) {  
20.         super.onCreate(savedInstanceState);  
21.         setContentView(R.layout.main);  
22.         mynum = (TextView) findViewById(R.id.mynum);  
23.         // 初始化数据  
24.         initData();  
25.         ViewPager vpager = (ViewPager) findViewById(R.id.vPager);  
26.         vpager.setAdapter(new MyPagerAdapter(MainActivity.this, data));  
27.         vpager.setPageMargin(50);  
28.         vpager.setOnPageChangeListener(new OnPageChangeListener() {  
29.   
30.             @Override  
31.             public void onPageSelected(int arg0) {  
32.                 mynum.setText("" + (int) (arg0 + 1));  
33.             }  
34.   
35.             @Override  
36.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
37.   
38.             }  
39.   
40.             @Override  
41.             public void onPageScrollStateChanged(int arg0) {  
42.   
43.             }  
44.         });  
45.     }  
46.   
47.     private void initData() {  
48.         data = new ArrayList<ImageInfo>();  
49.         mynum.setText("1");  
50.         data.add(new ImageInfo("今日看点", R.drawable.icon1, R.drawable.icon_bg01));  
51.         data.add(new ImageInfo("新浪微博", R.drawable.icon2, R.drawable.icon_bg01));  
52.         data.add(new ImageInfo("我的收藏", R.drawable.icon3, R.drawable.icon_bg01));  
53.         data.add(new ImageInfo("新闻头条", R.drawable.icon4, R.drawable.icon_bg02));  
54.         data.add(new ImageInfo("科技频道", R.drawable.icon5, R.drawable.icon_bg02));  
55.         data.add(new ImageInfo("汽车频道", R.drawable.icon6, R.drawable.icon_bg02));  
56.         data.add(new ImageInfo("军事频道", R.drawable.icon7, R.drawable.icon_bg02));  
57.         data.add(new ImageInfo("新华炫文", R.drawable.icon8, R.drawable.icon_bg02));  
58.         data.add(new ImageInfo("ͨ娱乐八卦", R.drawable.icon9, R.drawable.icon_bg02));  
59.         data.add(new ImageInfo("体育新闻", R.drawable.icon10, R.drawable.icon_bg02));  
60.         data.add(new ImageInfo("互联网新闻", R.drawable.icon11, R.drawable.icon_bg02));  
61.         data.add(new ImageInfo("奢侈品频道", R.drawable.icon12, R.drawable.icon_bg02));  
62.         data.add(new ImageInfo("时尚频道", R.drawable.icon13, R.drawable.icon_bg02));  
63.         data.add(new ImageInfo("财经频道", R.drawable.icon14, R.drawable.icon_bg02));  
64.         data.add(new ImageInfo("财经新闻", R.drawable.icon15, R.drawable.icon_bg02));  
65.         data.add(new ImageInfo("福布斯中文网", R.drawable.icon16,  
66.                 R.drawable.icon_bg02));  
67.         data.add(new ImageInfo("旅游频道", R.drawable.icon3, R.drawable.icon_bg02));  
68.         data.add(new ImageInfo("游戏频道", R.drawable.icon8, R.drawable.icon_bg02));  
69.         data.add(new ImageInfo("开心笑话", R.drawable.icon10, R.drawable.icon_bg02));  
70.   
71.     }  
72.   
73.     @Override  
74.     public boolean onCreateOptionsMenu(Menu menu) {  
75.         // Inflate the menu; this adds items to the action bar if it is present.  
76.         getMenuInflater().inflate(R.menu.main, menu);  
77.         return true;  
78.     }  
79.   
80. }  

ImageInfo.java：

[html]  view plain copy

1. package com.example.zakerdemo;  
2.   
3. /**  
4.  * 图像实体类  
5.  * @author wulianghuan  
6.  *  
7.  */  
8. public class ImageInfo {  
9.   
10.     public String imageMsg;     //菜单标题  
11.     public int imageId;         //logo图片资源  
12.     public int bgId;            //背景图片资源  
13.   
14.     public ImageInfo(String msg, int id1,int id2) {  
15.         imageId = id1;  
16.         imageMsg = msg;  
17.         bgId = id2;  
18.     }  
19. }  

MyImageView.java：

[html]  view plain copy

1. package com.example.zakerdemo;  
2.   
3. import java.util.Timer;  
4. import java.util.TimerTask;  
5.   
6. import android.content.Context;  
7. import android.graphics.Bitmap;  
8. import android.graphics.BitmapFactory;  
9. import android.graphics.Canvas;  
10. import android.os.Handler;  
11. import android.os.Message;  
12. import android.util.AttributeSet;  
13. import android.util.DisplayMetrics;  
14. import android.util.Log;  
15. import android.view.View;  
16. import android.widget.ImageView;  
17. import android.widget.Toast;  
18.   
19. /**  
20.  * @author wulianghuan  
21.  * 该类为自定义ImageView，用于显示背景图片，并显示背景图片到移动效果  
22.  *  
23.  */  
24. public class MyImageView extends ImageView{  
25.     private Bitmap back;        //背景图片资源  
26.     private Bitmap mBitmap;     //生成位图    
27.     private double startX = 0;  //移动起始X坐标  
28.       
29.     //构造函数中必须有context,attributeSet这两个   参数，否则父类无法调用  
30.     public MyImageView(Context context,AttributeSet attributeSet)  
31.     {  
32.         super(context, attributeSet);  
33.         //由于不是Activity子类，只能通过DisplayMetrics来获取屏幕信息  
34.         DisplayMetrics dm = getResources().getDisplayMetrics();  
35.         //屏幕宽度  
36.         int screenWidth = dm.widthPixels;    
37.         //屏幕高度  
38.         int screenHeight = dm.heightPixels;        
39.           
40.         back = BitmapFactory.decodeResource(context.getResources(), R.drawable.rootblock_default_bg);  
41.           
42.         mBitmap = Bitmap.createScaledBitmap(back, screenWidth*3, screenHeight, true);      
43.           
44.           
45.         final Handler handler = new Handler()  
46.         {  
47.             public void handleMessage(Message msg)  
48.             {  
49.                 if (msg.what == 1)  
50.                 {  
51.                     Log.i("TAG", "-----"+startX);  
52.                     if (startX <= -80)  
53.                     {  
54.                         startX = 0;  
55.                     }  
56.                     else  
57.                     {  
58.                         startX -= 0.09;  
59.                     }  
60.                 }  
61.                 invalidate();  
62.             }  
63.         };  
64.         new Timer().schedule(new TimerTask()  
65.         {  
66.             @Override  
67.             public void run()  
68.             {  
69.                 handler.sendEmptyMessage(1);  
70.             }  
71.         }, 0 , 10);  
72.           
73.     }  
74.       
75.     @Override  
76.     public void onDraw(Canvas canvas)  
77.     {  
78.         Log.i("TAG", "-----onDraw");  
79.         Bitmap bitmap2 = Bitmap.createBitmap(mBitmap);  
80.         canvas.drawBitmap(mBitmap, (float)startX , 0 , null);  
81.     }  
82. }  

MyPagerAdapter.java：

[html]  view plain copy

1. package com.example.zakerdemo;  
2.   
3. import java.util.ArrayList;  
4. import com.example.zakerdemo.R;  
5. import android.app.Activity;  
6. import android.content.Context;  
7. import android.os.Vibrator;  
8. import android.support.v4.view.PagerAdapter;  
9. import android.support.v4.view.ViewPager;  
10. import android.util.Log;  
11. import android.view.LayoutInflater;  
12. import android.view.MotionEvent;  
13. import android.view.View;  
14. import android.view.ViewGroup;  
15. import android.view.ViewGroup.LayoutParams;  
16. import android.view.WindowManager;  
17. import android.widget.AdapterView;  
18. import android.widget.AdapterView.OnItemLongClickListener;  
19. import android.widget.BaseAdapter;  
20. import android.widget.GridView;  
21. import android.widget.ImageView;  
22. import android.widget.RelativeLayout;  
23. import android.widget.TextView;  
24.   
25. /**  
26.  * 自定义适配器  
27.  * @author wulianghuan  
28.  *  
29.  */  
30. public class MyPagerAdapter extends PagerAdapter {  
31.     Vibrator vibrator;  
32.     ArrayList<ImageInfo> data;  
33.     Activity activity;  
34.     LayoutParams params;  
35.   
36.     public MyPagerAdapter(Activity activity, ArrayList<ImageInfo> data) {  
37.         this.activity = activity;  
38.         this.data = data;  
39.         vibrator = (Vibrator) activity  
40.                 .getSystemService(Context.VIBRATOR_SERVICE);  
41.     }  
42.   
43.     @Override  
44.     public int getCount() {  
45.         // TODO Auto-generated method stub  
46.         return 2;  
47.     }  
48.   
49.     @Override  
50.     public boolean isViewFromObject(View arg0, Object arg1) {  
51.         // TODO Auto-generated method stub  
52.         return arg0 == arg1;  
53.     }  
54.   
55.     @Override  
56.     public Object instantiateItem(ViewGroup container, final int index) {  
57.         Log.v("test", index + "index");  
58.   
59.         View view = activity.getLayoutInflater().inflate(R.layout.grid, null);  
60.         GridView gridView = (GridView) view.findViewById(R.id.gridView1);  
61.         gridView.setNumColumns(2);  
62.         gridView.setVerticalSpacing(5);  
63.         gridView.setHorizontalSpacing(5);  
64.         gridView.setAdapter(new BaseAdapter() {  
65.   
66.             @Override  
67.             public int getCount() {  
68.                 return 8;  
69.             }  
70.   
71.             @Override  
72.             public Object getItem(int position) {  
73.                 return position;  
74.             }  
75.   
76.             @Override  
77.             public long getItemId(int position) {  
78.                 return position;  
79.             }  
80.   
81.             @Override  
82.             public View getView(int position, View convertView, ViewGroup parent) {  
83.                 View item = LayoutInflater.from(activity).inflate(  
84.                         R.layout.grid_item, null);  
85.                 ImageView iv = (ImageView) item.findViewById(R.id.imageView1);  
86.                 RelativeLayout relativeLayout = (RelativeLayout)item.findViewById(R.id.relativeLayout);  
87.                 iv.setImageResource((data.get(index * 8 + position)).imageId);  
88.                 relativeLayout.setBackgroundResource((data.get(index * 8 + position)).bgId);  
89.                 relativeLayout.getBackground().setAlpha(225);  
90.                 TextView tv = (TextView) item.findViewById(R.id.msg);  
91.                 tv.setText((data.get(index * 8 + position)).imageMsg);  
92.                 return item;  
93.             }  
94.         });  
95.   
96.         gridView.setOnItemLongClickListener(new OnItemLongClickListener() {  
97.             @Override  
98.             public boolean onItemLongClick(AdapterView<?> arg0, View arg1,  
99.                     int arg2, long arg3) {  
100.                 View view = arg1;  
101.                 arg1.setVisibility(View.INVISIBLE);  
102.                 params = new WindowManager.LayoutParams();  
103.                 vibrator.vibrate(2500);  
104.                 return true;  
105.             }  
106.         });  
107.         ((ViewPager) container).addView(view);  
108.         return view;  
109.     }  
110. }  

二.  layout下的布局文件：

main.xml

[html]  view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent">  
5.      
6. <FrameLayout   
7.     android:layout_width="fill_parent"  
8.     android:layout_height="fill_parent">  
9.       
10.         <com.example.zakerdemo.MyImageView  
11.         android:id="@+id/rootbg"  
12.         android:layout_width="fill_parent"  
13.         android:layout_height="fill_parent"  
14.         android:scaleType="fitXY"/>  
15.       
16.         <LinearLayout   
17.             android:layout_width="match_parent"  
18.             android:layout_height="match_parent"  
19.             android:orientation="horizontal">  
20.               
21.             <LinearLayout   
22.                 android:layout_width="match_parent"  
23.                 android:layout_height="match_parent"  
24.                 android:layout_weight="1">  
25.                   
26.                 <android.support.v4.view.ViewPager  
27.                     android:id="@+id/vPager"  
28.                     android:layout_width="fill_parent"  
29.                     android:layout_height="match_parent" />  
30.                  
31.             </LinearLayout>  
32.               
33.             <LinearLayout   
34.                 android:layout_width="wrap_content"  
35.                 android:layout_height="match_parent"  
36.                 android:orientation="vertical">  
37.                   
38.                 <RelativeLayout  
39.                     android:layout_width="match_parent"  
40.                     android:layout_height="match_parent"  
41.                     android:layout_gravity="center_horizontal">  
42.                       
43.                       
44.                      <TextView  
45.                         android:id="@+id/mynum"  
46.                         android:layout_width="wrap_content"  
47.                         android:layout_height="wrap_content"  
48.                         android:layout_alignParentTop="true"  
49.                         android:layout_marginTop="15dp"  
50.                         android:layout_marginLeft="5dp"  
51.                         android:gravity="center"  
52.                         android:textStyle="bold"  
53.                         android:textColor="@android:color/white"  
54.                         android:background="@drawable/rootblock_pageinfo_blue_bg"/>  
55.                       
56.                     <Button  
57.                         android:id="@+id/add"  
58.                         android:layout_width="wrap_content"  
59.                         android:layout_height="wrap_content"  
60.                         android:layout_alignParentBottom="true"  
61.                         android:layout_marginBottom="40dp"  
62.                         android:background="@drawable/rootblock_add_selector"/>  
63.                       
64.                     <Button  
65.                         android:id="@+id/set"  
66.                         android:layout_width="wrap_content"  
67.                         android:layout_height="wrap_content"  
68.                         android:layout_above="@id/add"  
69.                         android:layout_marginBottom="15dp"  
70.                         android:background="@drawable/rootblock_set_selector"/>  
71.                       
72.                     <Button  
73.                         android:id="@+id/appstroe"  
74.                         android:layout_width="wrap_content"  
75.                         android:layout_height="wrap_content"  
76.                         android:layout_above="@id/set"  
77.                         android:layout_marginBottom="15dp"  
78.                         android:background="@drawable/rootblock_appstroe_selector"/>  
79.                       
80.                     <Button  
81.                         android:id="@+id/download"  
82.                         android:layout_width="wrap_content"  
83.                         android:layout_height="wrap_content"  
84.                         android:layout_above="@id/appstroe"  
85.                         android:layout_marginBottom="15dp"  
86.                         android:background="@drawable/rootblock_download_selector"/>  
87.             </RelativeLayout>  
88.               
89.          </LinearLayout>  
90.                   
91.     </LinearLayout>  
92.       
93. </FrameLayout>  
94. </LinearLayout>  

grid.xml:

[html]  view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="fill_parent"  
3.     android:layout_height="fill_parent" >  
4.   
5.     <GridView  
6.         android:id="@+id/gridView1"  
7.         android:layout_width="fill_parent"  
8.         android:layout_marginLeft="10dp"  
9.         android:layout_marginTop="15dp"  
10.         android:layout_height="fill_parent"  
11.         android:layout_alignParentTop="true"  
12.         android:layout_toRightOf="@+id/left"  
13.         android:numColumns="2" >  
14.     </GridView>  
15.   
16. </RelativeLayout>  

grid_item.xml:

[html]  view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="120dip"  
3.     android:layout_height="120dip"  
4.     android:id="@+id/relativeLayout">  
5.   
6.     <ImageView  
7.         android:id="@+id/imageView1"  
8.         android:layout_width="60dp"  
9.         android:layout_height="70dp"  
10.         android:layout_alignParentTop="true"  
11.         android:layout_centerHorizontal="true"  
12.         android:layout_marginTop="5dp" />  
13.     <TextView  
14.         android:id="@+id/msg"  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content"  
17.         android:layout_below="@+id/imageView1"  
18.         android:layout_centerHorizontal="true"  
19.         android:paddingBottom="10dp"  
20.         android:textColor="#ffffff" />  
21.   
22. </RelativeLayout>  

三. drawable下的xml文件：

rootblock_add_selector.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item  
4.         android:state_pressed="false"  
5.         android:drawable="@drawable/rootblock_icon_add" />  
6.           
7.     <item  
8.         android:state_pressed="true"  
9.         android:drawable="@drawable/rootblock_icon_add_selected" />  
10. </selector>  

rootblock_appstroe_selector.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item  
4.         android:state_pressed="false"  
5.         android:drawable="@drawable/rootblock_icon_appstroe" />  
6.       
7.     <item  
8.         android:state_pressed="true"  
9.         android:drawable="@drawable/rootblock_icon_appstroe_selected" />  
10. </selector>  

rootblock_download_selector.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item  
4.         android:state_pressed="false"  
5.         android:drawable="@drawable/rootblock_icon_download" />  
6.           
7.     <item  
8.         android:state_pressed="true"  
9.         android:drawable="@drawable/rootblock_icon_download_selected" />  
10. </selector>  

rootblock_set_selector.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item  
4.         android:state_pressed="false"  
5.         android:drawable="@drawable/rootblock_icon_set" />  
6.           
7.     <item  
8.         android:state_pressed="true"  
9.         android:drawable="@drawable/rootblock_icon_set_selected" />  
10. </selector>  

四. AndroidManifest.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
3.     package="com.example.zakerdemo"  
4.     android:versionCode="1"  
5.     android:versionName="1.0" >  
6.       
7.     <supports-screens  
8.         android:smallScreens="true"  
9.         android:normalScreens="true"  
10.         android:largeScreens="true"  
11.         android:resizeable="true"  
12.         android:anyDensity="true" />  
13.     <uses-sdk  
14.         android:minSdkVersion="14"  
15.         android:targetSdkVersion="14" />  
16.   
17.     <application  
18.         android:allowBackup="true"  
19.         android:icon="@drawable/ic_launcher"  
20.         android:label="@string/app_name"  
21.         android:theme="@android:style/Theme.NoTitleBar" >  
22.         <activity  
23.             android:name="com.example.zakerdemo.MainActivity"  
24.             android:label="@string/app_name" >  
25.             <intent-filter>  
26.                 <action android:name="android.intent.action.MAIN" />  
27.   
28.                 <category android:name="android.intent.category.LAUNCHER" />  
29.             </intent-filter>  
30.         </activity>  
31.     </application>  
32.   
33. </manifest>  

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