一、概述
之前写过一篇文章也是关于360安全卫士布局的，发现有很多朋友比较感兴趣，鉴于此这次继续再完善一下。先说一下思路：
1、继续使用ViewPager来滑动切换页面
2、使用GridView来显示各个图片和文字
二、代码
1、ViewPager的实现：
[java]view plaincopyimportjava.util.ArrayList;importcom.example.demo_360.MainActivity.ImageInfo;importcom.example.demo_360.R;importandroid.content.Context;importandroid.os.Vibrator;importandroid.support.v4.view.PagerAdapter;importandroid.support.v4.view.ViewPager;importandroid.util.Log;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.AdapterView;importandroid.widget.AdapterView.OnItemLongClickListener;importandroid.widget.BaseAdapter;importandroid.widget.GridView;importandroid.widget.ImageView;importandroid.widget.TextView;publicclassMyPagerAdapterextendsPagerAdapter{privateVibratorvibrator;privateArrayList<ImageInfo>data;privateContextcontext;publicMyPagerAdapter(Contextcontext,ArrayList<ImageInfo>data){this.context=context;this.data=data;vibrator=(Vibrator)context.getSystemService(Context.VIBRATOR_SERVICE);}@OverridepublicintgetCount(){return2;}@OverridepublicbooleanisViewFromObject(Viewarg0,Objectarg1){returnarg0==arg1;}@OverridepublicObjectinstantiateItem(ViewGroupcontainer,finalintindex){Log.v("test",index+"index");Viewview=LayoutInflater.from(context).inflate(R.layout.grid,null);GridViewgridView=(GridView)view.findViewById(R.id.gridView1);gridView.setNumColumns(2);gridView.setVerticalSpacing(5);gridView.setHorizontalSpacing(5);gridView.setAdapter(newBaseAdapter(){@OverridepublicintgetCount(){return8;}@OverridepublicObjectgetItem(intposition){returnposition;}@OverridepubliclonggetItemId(intposition){returnposition;}@OverridepublicViewgetView(intposition,ViewconvertView,ViewGroupparent){Viewitem=LayoutInflater.from(context).inflate(R.layout.grid_item,null);ImageViewiv=(ImageView)item.findViewById(R.id.imageView1);iv.setImageResource((data.get(index*8+position)).imageId);TextViewtv=(TextView)item.findViewById(R.id.msg);tv.setText((data.get(index*8+position)).imageMsg);returnitem;}});gridView.setOnItemLongClickListener(newOnItemLongClickListener(){@OverridepublicbooleanonItemLongClick(AdapterView<?>arg0,Viewarg1,intarg2,longarg3){Viewview=arg1;view.setVisibility(View.INVISIBLE);vibrator.vibrate(2500);returntrue;}});((ViewPager)container).addView(view);returnview;}} 对于ViewPager的用法，不明白的朋友可以看一下我之前的文章，里面有介绍。
2、Activity的实现，
[java]view plaincopyimportjava.util.ArrayList;importcom.example.adapter.MyPagerAdapter;importandroid.os.Bundle;importandroid.app.Activity;importandroid.support.v4.view.ViewPager;importandroid.view.Menu;/***@authorwang*/publicclassMainActivityextendsActivity{privateArrayList<ImageInfo>data;@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initData();ViewPagervpager=(ViewPager)findViewById(R.id.vPager);vpager.setAdapter(newMyPagerAdapter(MainActivity.this,data));vpager.setPageMargin(50);//设置页面之间的差距}privatevoidinitData(){data=newArrayList<ImageInfo>();data.add(newImageInfo("抢火车票",R.drawable.tool_box_ticket));data.add(newImageInfo("系统体检",R.drawable.tool_box_system_exam));data.add(newImageInfo("快速拨号",R.drawable.tool_box_quickdial));data.add(newImageInfo("网络设置",R.drawable.tool_box_network));data.add(newImageInfo("流量监控",R.drawable.tool_box_feescan));data.add(newImageInfo("宝盒",R.drawable.tool_box_baohe));data.add(newImageInfo("短信监控",R.drawable.smsunread));data.add(newImageInfo("设置监控",R.drawable.tabicon_black_white_list_normal));data.add(newImageInfo("通话监控",R.drawable.tabicon_call_record_normal));data.add(newImageInfo("信息设置",R.drawable.tabicon_sms_record_normal));data.add(newImageInfo("恶意广告拦截",R.drawable.title_bar_set_logout));data.add(newImageInfo("交通趋势",R.drawable.traffic_list_unchecked));data.add(newImageInfo("内存监控",R.drawable.traffic_main_unchecked));data.add(newImageInfo("防火墙",R.drawable.traffic_main_unchecked));data.add(newImageInfo("交通趋势",R.drawable.traffic_list_unchecked));data.add(newImageInfo("内存监控",R.drawable.traffic_main_unchecked));data.add(newImageInfo("防火墙",R.drawable.traffic_main_unchecked));}@OverridepublicbooleanonCreateOptionsMenu(Menumenu){getMenuInflater().inflate(R.menu.activity_main,menu);returntrue;}publicclassImageInfo{publicStringimageTitle;publicintimageId;publicImageInfo(Stringtitle,intid){imageId=id;//图片资源imageTitle=title;//图片标题}}}
3、xml布局：
布局主要涉及到三个，一是Activity的布局，需要用到ViewPager控件了。
[java]view plaincopy<RelativeLayoutxmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/main_screen_bg"><ImageViewandroid:id="@+id/logo"android:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingLeft="10dp"android:paddingTop="10dp"android:src="@drawable/main_notify_logo"/><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignBottom="@+id/logo"android:layout_toRightOf="@+id/logo"android:src="@drawable/main_screen_logo"/><FrameLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_below="@+id/logo"android:focusable="false"android:focusableInTouchMode="false"><android.support.v4.view.ViewPagerandroid:id="@+id/vPager"android:layout_width="fill_parent"android:layout_height="wrap_content"/><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:focusable="false"android:focusableInTouchMode="false"><ImageViewandroid:id="@+id/set"style="@style/main_button"android:layout_alignParentRight="true"android:layout_alignTop="@+id/vPager"android:layout_marginRight="5dp"android:layout_marginTop="20dp"android:background="@drawable/mainscreen_bg_selector"android:clickable="true"android:src="@drawable/main_menu_normal"/><ImageViewandroid:id="@+id/two"style="@style/main_button"android:layout_alignLeft="@+id/set"android:layout_below="@+id/set"android:layout_marginTop="20dp"android:background="@drawable/mainscreen_bg_selector"android:clickable="true"android:src="@drawable/main_bg_normal"/><ImageViewstyle="@style/main_button"android:layout_alignLeft="@+id/set"android:layout_below="@+id/two"android:layout_marginTop="20dp"android:background="@drawable/mainscreen_bg_selector"android:clickable="true"android:src="@drawable/appmgr_upgrade_edition_brief"/></RelativeLayout></FrameLayout></RelativeLayout>二是GridView的布局，[java]view plaincopy<RelativeLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"><TextViewandroid:id="@+id/left"android:layout_width="20dp"android:layout_height="fill_parent"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"/><GridViewandroid:id="@+id/gridView1"android:layout_width="260dp"android:layout_height="fill_parent"android:layout_alignParentTop="true"android:layout_toRightOf="@+id/left"android:numColumns="2"></GridView><TextViewandroid:id="@+id/right"android:layout_width="50dp"android:layout_height="fill_parent"android:layout_alignParentRight="true"android:layout_alignParentTop="true"/></RelativeLayout>最后就是每一个GridView的item的布局了，就是一个ImageView加上TextView。
[java]view plaincopy<RelativeLayoutxmlns:android="/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/disk_bg_selector"><ImageViewandroid:id="@+id/imageView1"android:layout_width="60dp"android:layout_height="70dp"android:layout_alignParentTop="true"android:layout_centerHorizontal="true"android:layout_marginTop="5dp"/><TextViewandroid: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>
最后看一下效果图，
补充：还有三个我觉得应该实现的地方还没有实现，一个是长按拖动item，一个是滑动页面的时候变换的显示页面的小圈，再就是点击那个箭头屏幕显示设置页面。有时间再去实现，感兴趣的朋友也可以自己尝试一下。
下载地址
