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

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

主布局文件main.xml：

view plain

<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns: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

view plain

packagecom.xmz.face;
importjava.util.HashMap;
importjava.util.Map;
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.view.View;
importandroid.widget.AdapterView;
importandroid.widget.Gallery;
importandroid.widget.ImageView;
importandroid.widget.TextView;
importandroid.widget.AdapterView.OnItemSelectedListener;
publicclassMainActivityextendsActivity{
privateGallerygallery;
privateTextViewtitleText;
privateTextViewcontentText;
privateFocusAdapteradapter;
privateImageViewfocusPointImage;
@Override
publicvoidonCreate(BundlesavedInstanceState){
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=newFocusAdapter(this);
gallery.setAdapter(adapter);
gallery.setOnItemSelectedListener(newOnItemSelectedListener(){
@Override
publicvoidonItemSelected(AdapterView<?>arg0,Viewarg1,
intposition,longarg3){
Mapmap=adapter.getItem(position);
titleText.setText(map.get("title").toString());
contentText.setText(map.get("content").toString());
switch(position){
case0:
focusPointImage.setBackgroundResource(R.drawable.focus_point_1);
break;
case1:
focusPointImage.setBackgroundResource(R.drawable.focus_point_2);
break;
case2:
focusPointImage.setBackgroundResource(R.drawable.focus_point_3);
break;
case3:
focusPointImage.setBackgroundResource(R.drawable.focus_point_4);
break;
case4:
focusPointImage.setBackgroundResource(R.drawable.focus_point_5);
break;
}
}
@Override
publicvoidonNothingSelected(AdapterView<?>arg0){
}
});
//添加图片
Map<String,Object>map1=newHashMap<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=newHashMap<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=newHashMap<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=newHashMap<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=newHashMap<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的分辨率，因为焦点图比较大

更多相关文章

随机推荐