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

来源：互联网发布：云打印软件乐视版编辑：程序博客网时间：2024/05/18 18:03

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

主布局文件main.xml：

view plain
<?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

view plain
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

0 0