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