过期Gallery取代方案horizontalscrollView之京东效果

效果

-------------------------------------------------------------------------------------

素材

-------------------------------------------------------------------------------------

activity_main.xml

-------------------------------------------------------------------------------------

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/RelativeLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

 

    <HorizontalScrollView

        android:id="@+id/hsv"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_gravity="center"

        android:spacing="0dp"  android:scrollbars="none">

 

        <com.horizontalscrollView03.MyGallery

            android:id="@+id/gallery"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:orientation="horizontal" >

        </com.horizontalscrollView03.MyGallery>

    </HorizontalScrollView>

 

    <!-- 自动切换图片下面的红色横条开始 -->

 

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"  android:layout_below="@id/hsv">

 

        <TextView

            android:id="@+id/te1"

            android:layout_width="fill_parent"

            android:layout_height="2dp"

            android:layout_weight="1"

            android:background="@drawable/product_card_normal" />

 

        <TextView

            android:id="@+id/te2"

            android:layout_width="fill_parent"

            android:layout_height="2dp"

            android:layout_weight="1"

            android:background="@drawable/product_card_normal"

            android:visibility="invisible" />

 

        <TextView

            android:id="@+id/te3"

            android:layout_width="fill_parent"

            android:layout_height="2dp"

            android:layout_weight="1"

            android:background="@drawable/product_card_normal"

            android:visibility="invisible" />

 

        <TextView

            android:id="@+id/te4"

            android:layout_width="fill_parent"

            android:layout_height="2dp"

            android:layout_weight="1"

            android:background="@drawable/product_card_normal"

            android:visibility="invisible" />

 

        <TextView

            android:id="@+id/te5"

            android:layout_width="fill_parent"

            android:layout_height="2dp"

            android:layout_weight="1"

            android:background="@drawable/product_card_normal"

            android:visibility="invisible" />

    </LinearLayout>

</RelativeLayout>

MainActivity.java

-------------------------------------------------------------------------------------

package com.horizontalscrollView03;

import java.util.ArrayList;

import java.util.List;

import java.util.Timer;

import java.util.TimerTask;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.util.DisplayMetrics;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemSelectedListener;

import android.widget.FrameLayout;

import android.widget.HorizontalScrollView;

import android.widget.TextView;

/**

 * 

 * 项目名称：com.horizontalscrollView03   

 * 类  名  称：MainActivity   

 * 类  描  述：幻灯片效果  

 * 创  建  人：fy   

 * 创建时间：2014-3-21 下午4:53:31   

 * Copyright (c) 方勇-版权所有

 */

public class MainActivity extends Activity {

/* 横向滚动菜单 */

private HorizontalScrollView horizontalScrollView;

/* 自定义画廊Gallery */

private MyGallery mGallery;

/* 记录选中的图片位置 */

private int index = 0;

/* 记录幻灯片的 图片资源 */

private int[] mImages = { R.drawable.show1, R.drawable.show2, R.drawable.show3, R.drawable.show4, R.drawable.show5 };

/* 记录幻灯片的 数量 */

private final int IMAGE_COUNT = mImages.length;

/* 屏幕宽度（像素） */

private int width;

/* 红线 */

private TextView te1, te2, te3, te4, te5;

/* 红线集合 */

private List<View> list;

 

/* 开一个线程执行耗时操作,用于更新主线程的UI控件 */

private Handler handler = new Handler() {

@Override

public void handleMessage(Message msg) {

super.handleMessage(msg);

switch (msg.what) {

case 2:

int pos = index % IMAGE_COUNT;

mGallery.setItemSelected(pos);

break;

default:

break;

}

}

};

 

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

findViews();

setListeners();

setScreens();

initViews();

}

 

/* 手机屏幕属性 */

private void setScreens() {

// 定义DisplayMetrics 对象

DisplayMetrics metric = new DisplayMetrics();

// 取得窗口属性

getWindowManager().getDefaultDisplay().getMetrics(metric);

width = metric.widthPixels; // 屏幕宽度（像素）

}

 

private void findViews() {

horizontalScrollView = (HorizontalScrollView) findViewById(R.id.hsv);

mGallery = (MyGallery) findViewById(R.id.gallery);

mGallery.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT));

te1 = (TextView) this.findViewById(R.id.te1);

te2 = (TextView) this.findViewById(R.id.te2);

te3 = (TextView) this.findViewById(R.id.te3);

te4 = (TextView) this.findViewById(R.id.te4);

te5 = (TextView) this.findViewById(R.id.te5);

}

 

/* 红线的位置 */

public void showLink(int position) {

switch (position) {

case 0:

for (int i = 0; i < list.size(); i++) {

if (i != 0) {

list.get(i).setVisibility(View.INVISIBLE);

} else {

list.get(i).setVisibility(View.VISIBLE);

}

}

break;

case 1:

for (int i = 0; i < list.size(); i++) {

if (i != 1) {

list.get(i).setVisibility(View.INVISIBLE);

} else {

list.get(i).setVisibility(View.VISIBLE);

}

}

break;

case 2:

for (int i = 0; i < list.size(); i++) {

if (i != 2) {

list.get(i).setVisibility(View.INVISIBLE);

} else {

list.get(i).setVisibility(View.VISIBLE);

}

}

break;

case 3:

for (int i = 0; i < list.size(); i++) {

if (i != 3) {

list.get(i).setVisibility(View.INVISIBLE);

} else {

list.get(i).setVisibility(View.VISIBLE);

}

}

break;

case 4:

for (int i = 0; i < list.size(); i++) {

if (i != 4) {

list.get(i).setVisibility(View.INVISIBLE);

} else {

list.get(i).setVisibility(View.VISIBLE);

}

}

break;

}

}

 

private void setListeners() {

/* 设置小圆点显示，position会一直增加，如果要循环显示图片，需要对position取余，否则数组越界 */

mGallery.setOnItemSelectedListener(new OnItemSelectedListener() {

@Override

public void onItemSelected(AdapterView<?> arg0, View arg1, int position, long arg3) {

// TODO Auto-generated method stub

int pos = position % IMAGE_COUNT;

// 显示红线

showLink(position);

if (pos == (IMAGE_COUNT - 1)) {

// 已经是最后一张图片了，重来（从0位置开始）

horizontalScrollView.scrollTo(0, 0);

}

// 移动X宽度=当前位置*屏幕宽度

horizontalScrollView.scrollTo(pos * width, 0);

}

@Override

public void onNothingSelected(AdapterView<?> parent) {

}

});

}

 

/* 初始化幻灯片小圆点、画廊、定时器 */

private void initViews() {

// 红线集合

list = new ArrayList<View>();

list.add(te1);

list.add(te2);

list.add(te3);

list.add(te4);

list.add(te5);

 

ImageAdapter adapter = new ImageAdapter(this, width, mImages);

// 设置画廊Gallery适配器

mGallery.setAdapter(adapter);

// 定时器,使用Message传递消息

Timer timer = new Timer();

// 每隔2秒执行一次调度，延迟2秒执行

timer.schedule(new TimerTask() {

@Override

public void run() {

Message message = new Message();

message.what = 2;

index = mGallery.getSelectedItemPosition();

index++;

if (index > IMAGE_COUNT - 1) {

index = 0;

}

if (index < 0) {

index = list.size() - 1;

}

handler.sendMessage(message);

}

}, 2000, 2000);

}

 

}

MyGallery.java

-------------------------------------------------------------------------------------

package com.horizontalscrollView03;

import android.content.Context;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

import android.widget.AdapterView;

import android.widget.BaseAdapter;

import android.widget.LinearLayout;

/**

 * 

 * 项目名称：com.horizontalscrollView03  

 * 类  名  称：MyGallery   

 * 类  描  述：自定义Gallery画廊

 * 创  建  人：fy   

 * 创建时间：2014-3-21 下午2:27:03   

 * Copyright (c) 方勇-版权所有

 */

public class MyGallery extends LinearLayout {

/* 上下文 */

private Context mContext;

/* 适配器 */

private BaseAdapter adapter;

/* 适配器-->条目选中事件 */

private AdapterView.OnItemSelectedListener onItemSelectedListener;

public static int selectedId = 0;

 

public MyGallery(Context context) {

super(context);

mContext = context;

setOrientation(HORIZONTAL);

}

 

public MyGallery(Context context, AttributeSet attrs) {

super(context, attrs);

mContext = context;

setOrientation(HORIZONTAL);

}

 

/* 适配器-->设置数据 */

public void setAdapter(BaseAdapter adapter) {

this.adapter = adapter;

// 设置条目touch事件

for (int i = 0; i < adapter.getCount(); i++) {

// 条目

View view = adapter.getView(i, null, null);

// 条目位置编号

final int position = i;

// 条目ID

final long id = adapter.getItemId(position);

// 条目touch事件

view.setOnTouchListener(new OnTouchListener() {

@Override

public boolean onTouch(View v, MotionEvent event) {

if (onItemSelectedListener != null) {

/**

 * <p>Callback method to be invoked when an item in this view has been

 * selected. This callback is invoked only when the newly selected

 * position is different from the previously selected position or if

 * there was no selected item.</p>

 *

 * Impelmenters can call getItemAtPosition(position) if they need to access the

 * data associated with the selected item.

 *

 * @param parent The AdapterView where the selection happened

 * @param view The view within the AdapterView that was clicked

 * @param position The position of the view in the adapter

 * @param id The row id of the item that is selected

 */

onItemSelectedListener.onItemSelected(null, v, position, id);

}

// 选中的位置

selectedId = position;

return true;

}

});

this.addView(view, new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

}

}

 

/* 设置条目选中 */

public void setItemSelected(int position) {

//Toast.makeText(mContext, "" + position, Toast.LENGTH_SHORT).show();

// 选中的位置

selectedId = position;

// 选中的视图

View view = (View) adapter.getView(position, null, null);

onItemSelectedListener.onItemSelected(null, view, position, getItemIdAtPosition(position));

}

 

/* 获取条目位置 */

public int getSelectedItemPosition() {

return selectedId;

}

 

/* 得到条目ID,通过条目位置 */

public long getItemIdAtPosition(int position) {

return (adapter == null || position < 0) ? null : adapter.getItemId(position);

}

 

/* 设置条目选中事件 */

public void setOnItemSelectedListener(AdapterView.OnItemSelectedListener onItemSelectedListener) {

this.onItemSelectedListener = onItemSelectedListener;

}

}

ImageAdapter.java

-------------------------------------------------------------------------------------

package com.horizontalscrollView03;

import android.content.Context;

import android.view.Gravity;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewGroup.LayoutParams;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.LinearLayout;

/**

 * 

 * 项目名称：com.horizontalscrollView03  

 * 类  名  称：ImageAdapter   

 * 类  描  述：图片适配器   

 * 创  建  人：fy   

 * 创建时间：2014-3-21 下午5:08:56   

 * Copyright (c) 方勇-版权所有

 */

public class ImageAdapter extends BaseAdapter {

private Context context;

/* 手机宽度 */

private int width;

/* 图片资源 */

private int[] mImages;

 

public ImageAdapter(Context context) {

this.context = context;

}

 

public ImageAdapter(Context context, int width,int[] images) {

this.context = context;

this.width = width;

this.mImages = images;

}

 

@Override

public int getCount() {

return mImages.length;// 实现循环显示

}

 

@Override

public Object getItem(int position) {

return position;

}

 

@Override

public long getItemId(int position) {

return position;

}

 

@Override

public View getView(int position, View convertView, ViewGroup parent) {

LinearLayout layout;

if (null == convertView) {

layout = new LinearLayout(context);

} else {

layout = (LinearLayout) convertView;

}

//Log.i("fy", width + "");

layout.setLayoutParams(new LayoutParams(width, LayoutParams.WRAP_CONTENT));

layout.setGravity(Gravity.BOTTOM);

 

ImageView imageView = new ImageView(context);

imageView.setLayoutParams(new LayoutParams(width, LayoutParams.WRAP_CONTENT));

imageView.setImageResource(mImages[position]);

// 图片自动拉伸

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

layout.addView(imageView);

return layout;

}

}