偶尔在网上找到的一个类似普通网页的焦点图滚动形式的banner,觉得很不错,下下来自己琢磨了一下,实现方式非常简单
布局main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#ffffff">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="200dip"
>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_gravity="bottom|center_horizontal"
android:gravity="center"
android:background="#33000000"
android:orientation="vertical"
>
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
android:text="图片标题"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dip"
android:orientation="horizontal"
>
<View
android:id="@+id/dot_0"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_focused"
/>
<View
android:id="@+id/dot_1"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_normal"
/>
<View
android:id="@+id/dot_2"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_normal"
/>
<View
android:id="@+id/dot_3"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_normal"
/>
<View
android:id="@+id/dot_4"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_normal"
/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
其中有关于dot_0的background布局dot_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="5dip"/>
<solid android:color="#55000000" />
</shape>
dot_focused.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="5dip"/>
<solid android:color="#aaFFFFFF" />
</shape>
主要的ViewPagerActivity.java
package com.itheima.viewpager;
import java.util.ArrayList;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
public class ViewPagerActivity extends Activity {
private int[] imageIDs;
private String[] titles;
private ArrayList<ImageView> images;
private ArrayList<View> dots;
private TextView title;
private ViewPager viewPager;
private MyAdapter madapter;
private int currrentItem = 0; //记录当前显示页面的位置
private ScheduledExecutorService scheduledExecutorService;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imageIDs = new int[] {
R.drawable.focusone,
R.drawable.focustwo,
R.drawable.focusthree,
R.drawable.focusfour,
R.drawable.focusfive
};
titles = new String[]{
"五谷丰登",
"精品皇家营养套餐",
"健康早餐",
"西门小吃店开门",
"好营养快餐"
};
//用来显示的图片
images = new ArrayList<ImageView>();
for(int i = 0; i < imageIDs.length; i++){
ImageView imageView = new ImageView(getApplicationContext());
imageView.setBackgroundResource(imageIDs[i]);
images.add(imageView);
}
dots = new ArrayList<View>();
dots.add(findViewById(R.id.dot_0));
dots.add(findViewById(R.id.dot_1));
dots.add(findViewById(R.id.dot_2));
dots.add(findViewById(R.id.dot_3));
dots.add(findViewById(R.id.dot_4));
title = (TextView) findViewById(R.id.title);
title.setText(titles[0]);
viewPager = (ViewPager) findViewById(R.id.vp);
madapter = new MyAdapter();
viewPager.setAdapter(madapter);
//设置页面切换的监听事件
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
int oldPosition = 0;
@Override //1-->2当前显示界面切换成功后,调用的方法
public void onPageSelected(int position) {
title.setText(titles[position]);
dots.get(position).setBackgroundResource(R.drawable.dot_focused);
dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
oldPosition = position;
currrentItem = position;
}
@Override
public void onPageScrolled(int position, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int position) {
}
});
}
class MyAdapter extends PagerAdapter{
//切换代码图片的适配器
@Override
public int getCount() {
return images.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public void destroyItem(ViewGroup view, int position, Object object) {
//从viewpager里移除childview
view.removeView(images.get(position));
}
@Override
public Object instantiateItem(ViewGroup view, int position) {
//在viewpager里添加childview
view.addView(images.get(position));
return images.get(position);
}
}
@Override
protected void onStart() {
super.onStart();
//创建定时器
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
//首次启动时5秒后开始执行,接下来5秒执行一次
scheduledExecutorService.scheduleAtFixedRate(new ViewpagerTask(),5, 2, TimeUnit.SECONDS);
}
@Override
protected void onStop() {
super.onStop();
scheduledExecutorService.shutdown();//停止线程任务
}
class ViewpagerTask implements Runnable{
@Override
public void run() {
currrentItem = (currrentItem + 1)%imageIDs.length;
handler.sendEmptyMessage(0);
}
}
private Handler handler = new Handler(){
public void handleMessage(Message msg) {
//根据viewpager里图片的 角标设置当前要显示的图片
viewPager.setCurrentItem(currrentItem);
}
};
}
效果图如上