android 实现左右拖动的网页焦点图

焦点图在各大网站首页是很常见的一种效果，在Android 上也可以实现，采用Gallery 便可轻松做到！

主布局文件main.xml：

view plain

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent">
6. <com.xmz.face.FocusGallery
7. android:id="@+id/focusGallery"
8. android:layout_width="fill_parent"
9. android:layout_height="180px"
10. />
11. <!--背景-->
12. <LinearLayout
13. android:layout_width="fill_parent"
14. android:layout_height="wrap_content"
15. android:layout_alignBottom="@id/focusGallery"
16. android:gravity="center_horizontal"
17. android:orientation="vertical"
18. android:background="@drawable/focus_bg">
19. <RelativeLayout
20. android:layout_width="fill_parent"
21. android:layout_height="wrap_content">
22. <!--标题-->
23. <TextView
24. android:id="@+id/titleText"
25. android:layout_width="wrap_content"
26. android:layout_height="wrap_content"
27. android:textColor="#fff"
28. android:layout_alignParentLeft="true"
29. />
30. <!--简介-->
31. <TextView
32. android:id="@+id/contentText"
33. android:layout_width="fill_parent"
34. android:layout_height="wrap_content"
35. android:layout_alignLeft="@id/titleText"
36. android:layout_below="@id/titleText"
37. android:textSize="16px"
38. android:textColor="#ccc"
39. android:lines="2"
40. />
41. </RelativeLayout>
43. <!--指针图-->
44. <ImageView
45. android:id="@+id/focusPointImage"
46. android:layout_width="wrap_content"
47. android:layout_height="wrap_content"
48. android:background="@drawable/focus_point_1"
49. />
50. </LinearLayout>
51. </RelativeLayout>

主界面的Activity ---->MainActivity

view plain

1. packagecom.xmz.face;
2. importjava.util.HashMap;
3. importjava.util.Map;
4. importandroid.app.Activity;
5. importandroid.os.Bundle;
6. importandroid.view.View;
7. importandroid.widget.AdapterView;
8. importandroid.widget.Gallery;
9. importandroid.widget.ImageView;
10. importandroid.widget.TextView;
11. importandroid.widget.AdapterView.OnItemSelectedListener;
12. publicclassMainActivityextendsActivity{
13. privateGallerygallery;
14. privateTextViewtitleText;
15. privateTextViewcontentText;
16. privateFocusAdapteradapter;
17. privateImageViewfocusPointImage;
18. @Override
19. publicvoidonCreate(BundlesavedInstanceState){
20. super.onCreate(savedInstanceState);
21. setContentView(R.layout.main);
23. gallery=(Gallery)findViewById(R.id.focusGallery);
24. titleText=(TextView)findViewById(R.id.titleText);
25. contentText=(TextView)findViewById(R.id.contentText);
26. focusPointImage=(ImageView)findViewById(R.id.focusPointImage);
27. adapter=newFocusAdapter(this);
28. gallery.setAdapter(adapter);
30. gallery.setOnItemSelectedListener(newOnItemSelectedListener(){
31. @Override
32. publicvoidonItemSelected(AdapterView<?>arg0,Viewarg1,
33. intposition,longarg3){
34. Mapmap=adapter.getItem(position);
35. titleText.setText(map.get("title").toString());
36. contentText.setText(map.get("content").toString());
37. switch(position){
38. case0:
39. focusPointImage.setBackgroundResource(R.drawable.focus_point_1);
40. break;
41. case1:
42. focusPointImage.setBackgroundResource(R.drawable.focus_point_2);
43. break;
44. case2:
45. focusPointImage.setBackgroundResource(R.drawable.focus_point_3);
46. break;
47. case3:
48. focusPointImage.setBackgroundResource(R.drawable.focus_point_4);
49. break;
50. case4:
51. focusPointImage.setBackgroundResource(R.drawable.focus_point_5);
52. break;
53. }
54. }
55. @Override
56. publicvoidonNothingSelected(AdapterView<?>arg0){
58. }
59. });
61. //添加图片
62. Map<String,Object>map1=newHashMap<String,Object>();
63. map1.put("image",getResources().getDrawable(R.drawable.focus_1));
64. map1.put("title","这是标题1");
65. map1.put("content","这是内容1这是内容1这是内容1这是内容1这是内容1这是内容1这是内容1这是内容1这是内容1这是内容1");
67. Map<String,Object>map2=newHashMap<String,Object>();
68. map2.put("image",getResources().getDrawable(R.drawable.focus_2));
69. map2.put("title","这是标题2");
70. map2.put("content","这是内容2这是内容2这是内容2这是内容2这是内容2这是内容2这是内容2这是内容2这是内容2这是内容2");
72. Map<String,Object>map3=newHashMap<String,Object>();
73. map3.put("image",getResources().getDrawable(R.drawable.focus_3));
74. map3.put("title","这是标题3");
75. map3.put("content","这是内容3这是内容3这是内容3这是内容3这是内容3这是内容3这是内容3这是内容3这是内容3这是内容3");
77. Map<String,Object>map4=newHashMap<String,Object>();
78. map4.put("image",getResources().getDrawable(R.drawable.focus_4));
79. map4.put("title","这是标题4");
80. map4.put("content","这是内容4这是内容4这是内容4这是内容4这是内容4这是内容4这是内容4这是内容4这是内容4这是内容4");
82. Map<String,Object>map5=newHashMap<String,Object>();
83. map5.put("image",getResources().getDrawable(R.drawable.focus_5));
84. map5.put("title","这是标题5");
85. map5.put("content","这是内容5这是内容5这是内容5这是内容5这是内容5这是内容5这是内容5这是内容5这是内容5这是内容5");
87. adapter.addObject(map1);
88. adapter.addObject(map2);
89. adapter.addObject(map3);
90. adapter.addObject(map4);
91. adapter.addObject(map5);
93. titleText.setText(adapter.getItem(0).get("title").toString());
94. contentText.setText(adapter.getItem(0).get("content").toString());
96. }
97. }

贴上工程源代码：http://good.gd/1302172.htm

提醒：测试时，建议用800*480的分辨率，因为焦点图比较大