Android高仿360安全卫士--布局篇（2）

 一、概述

之前写过一篇文章也是关于360安全卫士布局的，发现有很多朋友比较感兴趣，鉴于此这次继续再完善一下。先说一下思路：

  1、继续使用ViewPager来滑动切换页面

  2、使用GridView来显示各个图片和文字

  二、代码

1、ViewPager的实现：

[java] view plaincopy

1. import java.util.ArrayList;  
2. import com.example.demo_360.MainActivity.ImageInfo;  
3. import com.example.demo_360.R;  
4. import android.content.Context;  
5. import android.os.Vibrator;  
6. import android.support.v4.view.PagerAdapter;  
7. import android.support.v4.view.ViewPager;  
8. import android.util.Log;  
9. import android.view.LayoutInflater;  
10. import android.view.View;  
11. import android.view.ViewGroup;  
12. import android.widget.AdapterView;  
13. import android.widget.AdapterView.OnItemLongClickListener;  
14. import android.widget.BaseAdapter;  
15. import android.widget.GridView;  
16. import android.widget.ImageView;  
17. import android.widget.TextView;  
18.   
19. public class MyPagerAdapter extends PagerAdapter {  
20.   
21.     private Vibrator vibrator;  
22.     private ArrayList<ImageInfo> data;  
23.     private Context context;  
24.   
25.     public MyPagerAdapter(Context context, ArrayList<ImageInfo> data) {  
26.         this.context = context;  
27.         this.data = data;  
28.         vibrator = (Vibrator) context.getSystemService(Context.VIBRATOR_SERVICE);  
29.     }  
30.   
31.     @Override  
32.     public int getCount() {  
33.         return 2;  
34.     }  
35.   
36.     @Override  
37.     public boolean isViewFromObject(View arg0, Object arg1) {  
38.         return arg0 == arg1;  
39.     }  
40.   
41.     @Override  
42.     public Object instantiateItem(ViewGroup container, final int index) {  
43.         Log.v("test", index + "index");  
44.         View view = LayoutInflater.from(context).inflate(R.layout.grid, null);  
45.         GridView gridView = (GridView) view.findViewById(R.id.gridView1);  
46.         gridView.setNumColumns(2);  
47.         gridView.setVerticalSpacing(5);  
48.         gridView.setHorizontalSpacing(5);  
49.         gridView.setAdapter(new BaseAdapter() {  
50.   
51.             @Override  
52.             public int getCount() {  
53.                 return 8;  
54.             }  
55.   
56.             @Override  
57.             public Object getItem(int position) {  
58.                 return position;  
59.             }  
60.   
61.             @Override  
62.             public long getItemId(int position) {  
63.                 return position;  
64.             }  
65.   
66.             @Override  
67.             public View getView(int position, View convertView, ViewGroup parent) {  
68.                 View item = LayoutInflater.from(context).inflate(  
69.                         R.layout.grid_item, null);  
70.                 ImageView iv = (ImageView) item.findViewById(R.id.imageView1);  
71.                 iv.setImageResource((data.get(index * 8 + position)).imageId);  
72.                 TextView tv = (TextView) item.findViewById(R.id.msg);  
73.                 tv.setText((data.get(index * 8 + position)).imageMsg);  
74.                 return item;  
75.             }  
76.         });  
77.   
78.         gridView.setOnItemLongClickListener(new OnItemLongClickListener() {  
79.   
80.             @Override  
81.             public boolean onItemLongClick(AdapterView<?> arg0, View arg1,  
82.                     int arg2, long arg3) {  
83.                 View view = arg1;  
84.                 view.setVisibility(View.INVISIBLE);  
85.                 vibrator.vibrate(2500);  
86.                 return true;  
87.             }  
88.         });  
89.   
90.         ((ViewPager) container).addView(view);  
91.   
92.         return view;  
93.     }  
94. }  

  对于ViewPager的用法，不明白的朋友可以看一下我之前的文章，里面有介绍。

2、Activity的实现，

[java] view plaincopy

1. import java.util.ArrayList;  
2. import com.example.adapter.MyPagerAdapter;  
3. import android.os.Bundle;  
4. import android.app.Activity;  
5. import android.support.v4.view.ViewPager;  
6. import android.view.Menu;  
7.   
8. /** 
9.  * @author wang 
10.  */  
11.   
12. public class MainActivity extends Activity {  
13.   
14.     private ArrayList<ImageInfo> data;  
15.   
16.     @Override  
17.     public void onCreate(Bundle savedInstanceState) {  
18.         super.onCreate(savedInstanceState);  
19.         setContentView(R.layout.activity_main);  
20.   
21.         initData();  
22.   
23.         ViewPager vpager = (ViewPager) findViewById(R.id.vPager);  
24.         vpager.setAdapter(new MyPagerAdapter(MainActivity.this, data));  
25.         vpager.setPageMargin(50);//设置页面之间的差距  
26.     }  
27.   
28.     private void initData() {  
29.         data = new ArrayList<ImageInfo>();  
30.         data.add(new ImageInfo("抢火车票", R.drawable.tool_box_ticket));  
31.         data.add(new ImageInfo("系统体检", R.drawable.tool_box_system_exam));  
32.         data.add(new ImageInfo("快速拨号", R.drawable.tool_box_quickdial));  
33.         data.add(new ImageInfo("网络设置", R.drawable.tool_box_network));  
34.         data.add(new ImageInfo("流量监控", R.drawable.tool_box_feescan));  
35.         data.add(new ImageInfo("宝盒", R.drawable.tool_box_baohe));  
36.         data.add(new ImageInfo("短信监控", R.drawable.smsunread));  
37.         data.add(new ImageInfo("设置监控",  
38.                 R.drawable.tabicon_black_white_list_normal));  
39.         data.add(new ImageInfo("通话监控", R.drawable.tabicon_call_record_normal));  
40.         data.add(new ImageInfo("信息设置", R.drawable.tabicon_sms_record_normal));  
41.         data.add(new ImageInfo("恶意广告拦截", R.drawable.title_bar_set_logout));  
42.         data.add(new ImageInfo("交通趋势", R.drawable.traffic_list_unchecked));  
43.         data.add(new ImageInfo("内存监控", R.drawable.traffic_main_unchecked));  
44.         data.add(new ImageInfo("防火墙", R.drawable.traffic_main_unchecked));  
45.         data.add(new ImageInfo("交通趋势", R.drawable.traffic_list_unchecked));  
46.         data.add(new ImageInfo("内存监控", R.drawable.traffic_main_unchecked));  
47.         data.add(new ImageInfo("防火墙", R.drawable.traffic_main_unchecked));  
48.     }  
49.   
50.     @Override  
51.     public boolean onCreateOptionsMenu(Menu menu) {  
52.         getMenuInflater().inflate(R.menu.activity_main, menu);  
53.         return true;  
54.     }  
55.   
56.     public class ImageInfo {  
57.         public String imageTitle;  
58.         public int imageId;  
59.   
60.         public ImageInfo(String title, int id) {  
61.             imageId = id;// 图片资源  
62.             imageTitle = title;//图片标题  
63.         }  
64.     }  
65. }  

 3、xml布局：
   布局主要涉及到三个，一是Activity的布局，需要用到ViewPager控件了。

[java] view plaincopy

1. <RelativeLayout 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.     android:background="@drawable/main_screen_bg" >  
6.   
7.     <ImageView  
8.         android:id="@+id/logo"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:paddingLeft="10dp"  
12.         android:paddingTop="10dp"  
13.         android:src="@drawable/main_notify_logo" />  
14.   
15.     <ImageView  
16.         android:layout_width="wrap_content"  
17.         android:layout_height="wrap_content"  
18.         android:layout_alignBottom="@+id/logo"  
19.         android:layout_toRightOf="@+id/logo"  
20.         android:src="@drawable/main_screen_logo" />  
21.   
22.     <FrameLayout  
23.         android:layout_width="fill_parent"  
24.         android:layout_height="fill_parent"  
25.         android:layout_below="@+id/logo"  
26.         android:focusable="false"  
27.         android:focusableInTouchMode="false" >  
28.   
29.         <android.support.v4.view.ViewPager  
30.             android:id="@+id/vPager"  
31.             android:layout_width="fill_parent"  
32.             android:layout_height="wrap_content" />  
33.   
34.         <RelativeLayout  
35.             android:layout_width="fill_parent"  
36.             android:layout_height="wrap_content"  
37.             android:focusable="false"  
38.             android:focusableInTouchMode="false" >  
39.   
40.             <ImageView  
41.                 android:id="@+id/set"  
42.                 style="@style/main_button"  
43.                 android:layout_alignParentRight="true"  
44.                 android:layout_alignTop="@+id/vPager"  
45.                 android:layout_marginRight="5dp"  
46.                 android:layout_marginTop="20dp"  
47.                 android:background="@drawable/mainscreen_bg_selector"  
48.                 android:clickable="true"  
49.                 android:src="@drawable/main_menu_normal" />  
50.   
51.             <ImageView  
52.                 android:id="@+id/two"  
53.                 style="@style/main_button"  
54.                 android:layout_alignLeft="@+id/set"  
55.                 android:layout_below="@+id/set"  
56.                 android:layout_marginTop="20dp"  
57.                 android:background="@drawable/mainscreen_bg_selector"  
58.                 android:clickable="true"  
59.                 android:src="@drawable/main_bg_normal" />  
60.   
61.             <ImageView  
62.                 style="@style/main_button"  
63.                 android:layout_alignLeft="@+id/set"  
64.                 android:layout_below="@+id/two"  
65.                 android:layout_marginTop="20dp"  
66.                 android:background="@drawable/mainscreen_bg_selector"  
67.                 android:clickable="true"  
68.                 android:src="@drawable/appmgr_upgrade_edition_brief" />  
69.         </RelativeLayout>  
70.     </FrameLayout>  
71.   
72. </RelativeLayout>  

二是GridView的布局，

[java] view plaincopy

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.     <TextView  
6.         android:id="@+id/left"  
7.         android:layout_width="20dp"  
8.         android:layout_height="fill_parent"  
9.         android:layout_alignParentLeft="true"  
10.         android:layout_alignParentTop="true" />  
11.   
12.     <GridView  
13.         android:id="@+id/gridView1"  
14.         android:layout_width="260dp"  
15.         android:layout_height="fill_parent"  
16.         android:layout_alignParentTop="true"  
17.         android:layout_toRightOf="@+id/left"  
18.         android:numColumns="2" >  
19.     </GridView>  
20.   
21.     <TextView  
22.         android:id="@+id/right"  
23.         android:layout_width="50dp"  
24.         android:layout_height="fill_parent"  
25.         android:layout_alignParentRight="true"  
26.         android:layout_alignParentTop="true" />  
27.   
28. </RelativeLayout>  

 最后就是每一个GridView的item的布局了，就是一个ImageView加上TextView。

[java] view plaincopy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="wrap_content"  
3.     android:layout_height="wrap_content"  
4.     android:background="@drawable/disk_bg_selector" >  
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.   
14.     <TextView  
15.         android:id="@+id/msg"  
16.         android:layout_width="wrap_content"  
17.         android:layout_height="wrap_content"  
18.         android:layout_below="@+id/imageView1"  
19.         android:layout_centerHorizontal="true"  
20.         android:paddingBottom="10dp"  
21.         android:textColor="#ffffff" />  
22.   
23. </RelativeLayout>  

最后看一下效果图，

                                           

                                          

     补充：还有三个我觉得应该实现的地方还没有实现，一个是长按拖动item，一个是滑动页面的时候变换的显示页面的小圈，再就是点击那个箭头屏幕显示设置页面。有时间再去实现，感兴趣的朋友也可以自己尝试一下。

下载地址