仿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:

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; // 页码@Overrideprotected 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() {@Overridepublic void onPageSelected(int arg0) {mynum.setText("" + (int) (arg0 + 1));}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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));}@Overridepublic 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(){@Overridepublic void run(){handler.sendEmptyMessage(1);}}, 0 , 10);}@Overridepublic 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);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn 2;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}@Overridepublic 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() {@Overridepublic int getCount() {return 8;}@Overridepublic Object getItem(int position) {return position;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic 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() {@Overridepublic 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://download.csdn.net/detail/wulianghuan/5338801