- 现在的应用中有很多这种图片轮播控件,今天就来介绍一下怎么实现的。其实挺简单,只用把我的代码copy过去就好。好吧,下面就来具体实现 一下喽。
- 首先分析图片有图片和文字,哇(图片上面没文字)文字就算是我赠送的。那就创建一个实体类
public class Ad {
private int iconResId;
private String intro;
public Ad(int iconResId, String intro) {
super();
this.iconResId = iconResId;
this.intro = intro;
}
public int getIconResId() {
return iconResId;
}
public void setIconResId(int iconResId) {
this.iconResId = iconResId;
}
public String getIntro() {
return intro;
}
public void setIntro(String intro) {
this.intro = intro;
}
}
- 在activity_main.xml中写布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.connect.viewpager.MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="200dp" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_alignBottom="@id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#77000000"
android:padding="8dp"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#ffffff"
android:textSize="16sp"
android:singleLine="true"
android:ellipsize="end"
android:id="@+id/tv_intro"
android:text="我不是文本" />
<LinearLayout
android:layout_marginTop="3dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/dot_layout"
android:layout_gravity="center_horizontal"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</RelativeLayout>
- 适配器的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView android:layout_width="match_parent"
android:src="@drawable/a"
android:id="@+id/image"
android:scaleType="fitXY"
android:layout_height="match_parent"/>
</LinearLayout>
- 在这里我主要说几个关键点
这几个小原点,通过创建View对象添加到布局中,关键的就是通过状态选择器使被选中的原点里面的颜色不同。(我感觉这一点思路很好)
/**
* 初始化dot
*/
private void initDots(){
for (int i = 0; i < list.size(); i++) {
View view = new View(this);
LayoutParams params = new LayoutParams(8, 8);
if(i!=0){
params.leftMargin = 5;
}
view.setLayoutParams(params);
view.setBackgroundResource(R.drawable.selector_dot);
dot_layout.addView(view);
}
}
- 通过创建handler发送消息试图片和文字还有原点关联起来。
/**
* 更新文本
*/
private void updateIntroAndDot(){
int currentPage = viewPager.getCurrentItem()%list.size();
tv_intro.setText(list.get(currentPage).getIntro());
for (int i = 0; i < dot_layout.getChildCount(); i++) {
dot_layout.getChildAt(i).setEnabled(i==currentPage);
}
}
class HomeHeaderTask implements Runnable {
public void start() {
// 移除之前发送的所有消息, 避免消息重复
handler.removeCallbacksAndMessages(null);
handler.postDelayed(this, 3000);
}
@Override
public void run() {
int currentItem = viewPager.getCurrentItem();
currentItem++;
viewPager.setCurrentItem(currentItem);
// 继续发延时3秒消息, 实现内循环
handler.postDelayed(this, 3000);
}
}
- 这里通过返回10000,是为让用户滑动和自己关联滑动的时候可以不受限制。可以设置为int的最大值。
class MyPagerAdapter extends PagerAdapter{
/**
* 返回多少page
*/
@Override
public int getCount() {
//可以改成返回int类型的最大值,
return 10000;
}
/**
* true: 表示不去创建,使用缓存 false:去重新创建
* view: 当前滑动的view
* object:将要进入的新创建的view,由instantiateItem方法创建
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
/**
* 类似于BaseAdapger的getView方法
* 用了将数据设置给view
* 由于它最多就3个界面,不需要viewHolder
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = View.inflate(MainActivity.this, R.layout.adapter_ad, null);
ImageView imageView = (ImageView) view.findViewById(R.id.image);
Ad ad = list.get(position%list.size());
imageView.setImageResource(ad.getIconResId());
container.addView(view);//一定不能少,将view加入到viewPager中
return view;
}
/**
* 销毁page
* position: 当前需要消耗第几个page
* object:当前需要消耗的page
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// super.destroyItem(container, position, object);
container.removeView((View) object);
}
}
###最后的效果是这样的
###里面的内容是可以修改的。感觉是一个很好轮子。源代码:http://download.csdn.net/detail/code_legend/9744580