过期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;
}
}