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

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

主布局文件main.xml：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <com.xmz.face.FocusGallery android:id="@+id/focusGallery" android:layout_width="fill_parent" android:layout_height="180px" /> <!-- 背景 --> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignBottom="@id/focusGallery" android:gravity="center_horizontal" android:orientation="vertical" android:background="@drawable/focus_bg"> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <!-- 标题 --> <TextView android:id="@+id/titleText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#fff" android:layout_alignParentLeft="true" /> <!-- 简介 --> <TextView android:id="@+id/contentText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignLeft="@id/titleText" android:layout_below="@id/titleText" android:textSize="16px" android:textColor="#ccc" android:lines="2" /> </RelativeLayout> <!--指针图 --> <ImageView android:id="@+id/focusPointImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/focus_point_1" /> </LinearLayout> </RelativeLayout>

主界面的Activity ---->MainActivity

package com.xmz.face; import java.util.HashMap; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.Gallery; import android.widget.ImageView; import android.widget.TextView; import android.widget.AdapterView.OnItemSelectedListener; public class MainActivity extends Activity { private Gallery gallery; private TextView titleText; private TextView contentText; private FocusAdapter adapter; private ImageView focusPointImage; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); gallery=(Gallery)findViewById(R.id.focusGallery); titleText=(TextView)findViewById(R.id.titleText); contentText=(TextView)findViewById(R.id.contentText); focusPointImage=(ImageView)findViewById(R.id.focusPointImage); adapter = new FocusAdapter(this); gallery.setAdapter(adapter); gallery.setOnItemSelectedListener(new OnItemSelectedListener(){ @Override public void onItemSelected(AdapterView<?> arg0, View arg1, int position, long arg3) { Map map = adapter.getItem(position); titleText.setText(map.get("title").toString()); contentText.setText(map.get("content").toString()); switch(position){ case 0: focusPointImage.setBackgroundResource(R.drawable.focus_point_1); break; case 1: focusPointImage.setBackgroundResource(R.drawable.focus_point_2); break; case 2: focusPointImage.setBackgroundResource(R.drawable.focus_point_3); break; case 3: focusPointImage.setBackgroundResource(R.drawable.focus_point_4); break; case 4: focusPointImage.setBackgroundResource(R.drawable.focus_point_5); break; } } @Override public void onNothingSelected(AdapterView<?> arg0) { } }); //添加图片 Map<String, Object> map1 = new HashMap<String,Object>(); map1.put("image", getResources().getDrawable(R.drawable.focus_1)); map1.put("title","这是标题1"); map1.put("content","这是内容1这是内容1这是内容1这是内容1这是内容1这是内容1这是内容1这是内容1这是内容1这是内容1"); Map<String, Object> map2 = new HashMap<String,Object>(); map2.put("image", getResources().getDrawable(R.drawable.focus_2)); map2.put("title","这是标题2"); map2.put("content","这是内容2这是内容2这是内容2这是内容2这是内容2这是内容2这是内容2这是内容2这是内容2这是内容2"); Map<String, Object> map3 = new HashMap<String,Object>(); map3.put("image", getResources().getDrawable(R.drawable.focus_3)); map3.put("title","这是标题3"); map3.put("content","这是内容3这是内容3这是内容3这是内容3这是内容3这是内容3这是内容3这是内容3这是内容3这是内容3"); Map<String, Object> map4 = new HashMap<String,Object>(); map4.put("image", getResources().getDrawable(R.drawable.focus_4)); map4.put("title","这是标题4"); map4.put("content","这是内容4这是内容4这是内容4这是内容4这是内容4这是内容4这是内容4这是内容4这是内容4这是内容4"); Map<String, Object> map5 = new HashMap<String,Object>(); map5.put("image", getResources().getDrawable(R.drawable.focus_5)); map5.put("title","这是标题5"); map5.put("content","这是内容5这是内容5这是内容5这是内容5这是内容5这是内容5这是内容5这是内容5这是内容5这是内容5"); adapter.addObject(map1); adapter.addObject(map2); adapter.addObject(map3); adapter.addObject(map4); adapter.addObject(map5); titleText.setText(adapter.getItem(0).get("title").toString()); contentText.setText(adapter.getItem(0).get("content").toString()); } }

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

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