您的位置:首页 > 移动开发 > Android开发

Android中可无限循环轮播的ViewPager

2017-03-19 20:01 344 查看
编写不易,如有转载,请声明出处: 梦回河口:http://blog.csdn.net/zxc514257857/article/details/63688217

  技术要点:伪无限循环,加载本地图片,带标题和指示器,长按停止滚动,也可通过按钮控制滚动及停止。

  布局代码如下:

//(layout)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=".activity.MainActivity" >

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="200dp" >
</android.support.v4.view.ViewPager>

<RelativeLayout
android:id="@+id/ll_title"
android:layout_alignBottom="@id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#66000000"
android:padding="6dp">

<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:textColor="#ffffff"
android:textSize="16sp"
android:singleLine="true"
android:ellipsize="end"
android:text="标题" />

<LinearLayout
android:id="@+id/ll_dot"
android:layout_marginTop="3dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="horizontal" >

</LinearLayout>
</RelativeLayout>

<Button
android:id="@+id/stop"
android:text="停止轮播"
android:textSize="16sp"
android:layout_marginTop="50dp"
android:layout_below="@id/viewPager"
android:layout_width="match_parent"
android:layout_height="40dp"
android:onClick="stop"/>

<Button
android:id="@+id/start"
android:text="开始轮播"
android:textSize="16sp"
android:layout_marginTop="20dp"
android:layout_below="@id/stop"
android:layout_width="match_parent"
android:layout_height="40dp"
android:onClick="start"/>
</RelativeLayout>
-----------------------------------------------------------

//(layout)adapter_ad.xml
<?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="@mipmap/p1"
android:id="@+id/image"
android:scaleType="fitXY"
android:layout_height="match_parent"/>
</LinearLayout>
-----------------------------------------------------------

//(drawable)dot_focus.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#ffffff"/>
</shape>
-----------------------------------------------------------

//(drawable)dot_unfocus.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#44000000"/>
</shape>
-----------------------------------------------------------

//(drawable)selector_dot.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="@drawable/dot_focus"></item>
<item android:drawable="@drawable/dot_unfocus"></item>
</selector>
-----------------------------------------------------------


  Activity代码如下:

//(activity)MainActivity
package com.test.myviewpager.activity;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.test.myviewpager.R;
import com.test.myviewpager.adapter.MyViewPagerAdapter;
import com.test.myviewpager.bean.AdInfo;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

private static final int NEXT = 1;
private ViewPager mViewPager;
private TextView mTv_title;
private LinearLayout mLl_dot;
//默认是不停止的
private boolean isStop = false;

private ArrayList<AdInfo> list = new ArrayList<>();
//使用handler设置定时任务
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
switch(msg.what){
case NEXT:
if(!isStop){
mViewPager.setCurrentItem(mViewPager.getCurrentItem()+1);
handler.sendEmptyMessageDelayed(NEXT, 3000);
}
break;
}
}
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
start();
initView();
setListener();
initData();
}

@Override
protected void onStop() {
handler.removeMessages(NEXT);
super.onStop();
}

private void initView(){
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mTv_title = (TextView) findViewById(R.id.tv_title);
mLl_dot = (LinearLayout) findViewById(R.id.ll_dot);
}

private void initData(){
initList();
initDots();
//改变pic
changePic();
//改变dot和title
changeDotAndTitle();
}

private void initList(){
//轮播pic
int[] pic = {R.mipmap.p1, R.mipmap.p2, R.mipmap.p3, R.mipmap.p4, R.mipmap.p5};
//图片标题
String[] title = {"美女图片1" ,"美女图片2" ,"美女图片3","美女图片4","美女图片5" };
list.add(new AdInfo(pic[0] , title[0]));
list.add(new AdInfo(pic[1] , title[1]));
list.add(new AdInfo(pic[2] , title[2]));
list.add(new AdInfo(pic[3] , title[3]));
list.add(new AdInfo(pic[4] , title[4]));
}

private void initDots(){
for(int i = 0 ; i < list.size() ; i++){
View view = new View(MainActivity.this);
//设置dot的大小为8px
//这里的LayoutParams要选择dot的父控件
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8,8);
//设置除第一个dot外左边距为10px
if(i!=0){
params.leftMargin = 10;
}
view.setLayoutParams(params);
view.setBackgroundResource(R.drawable.selector_dot);
mLl_dot.addView(view);
}
}

//改变pic
private void changePic(){
mViewPager.setAdapter(new MyViewPagerAdapter(list, MainActivity.this));
mViewPager.setCurrentItem(Integer.MAX_VALUE / 2 - ((Integer.MAX_VALUE / 2 )% list.size()));
}

//改变dot和title
private void changeDotAndTitle(){
int currentPage = mViewPager.getCurrentItem()%list.size();
mTv_title.setText(list.get(currentPage).getTitle());

for (int i = 0; i < mLl_dot.getChildCount(); i++) {
//设置setEnabled为true的话 在选择器里面就会对应的使用白色颜色
mLl_dot.getChildAt(i).setEnabled(i==currentPage);
}
}

//点击按钮停止轮播
public void stop(View view){
isStop = true;
handler.removeMessages(NEXT);
}

//点击按钮开始轮播
public void start(View view){
isStop = false;
handler.sendEmptyMessageDelayed(NEXT , 3000);
}

//停止轮播
public void stop(){
isStop = true;
handler.removeMessages(NEXT);
}

//开始轮播
public void start(){
isStop = false;
handler.sendEmptyMessageDelayed(NEXT , 3000);
}

//设置监听器
private void setListener(){
//将pic滚动和dot及title的改变绑定
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
Log.e("Activity", "position: "+position);
changeDotAndTitle();
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageScrollStateChanged(int state) {

}
});

//设置轮播的触摸事件  长按停止轮播
mViewPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction()){
case MotionEvent.ACTION_DOWN:
stop();
break;

case MotionEvent.ACTION_UP:
start();
break;

//按下并拖动到轮播控件外
case MotionEvent.ACTION_CANCEL:
start();
break;

default:
break;
}
return false;
}
});
}
}
-----------------------------------------------------------


  Adapter代码如下:

//(adapter)MyViewPagerAdapter
package com.test.myviewpager.adapter;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.test.myviewpager.R;
import com.test.myviewpager.bean.AdInfo;
import java.util.List;

public class MyViewPagerAdapter extends PagerAdapter {
//由于ListView的Adapter需要传入集合和上下文,通过构造传递进来
private List<AdInfo> list;
private Context context;

public MyViewPagerAdapter(List<AdInfo> list, Context context) {
this.list = list;
this.context = context;
}

@Override
public int getCount() {
return Integer.MAX_VALUE;
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
//对应添加子布局中的图片
View view = View.inflate(context , R.layout.adapter_ad ,null);
ImageView imageView = (ImageView)view.findViewById(R.id.image);
AdInfo adInfo = list.get(position % list.size());
imageView.setImageResource(adInfo.getPic());
//将子布局添加到容器
container.addView(view);
return view;
}
}


Demo下载请移步:http://download.csdn.net/detail/zxc514257857/9827625

———-因本人才疏学浅,如博客或Demo中有错误的地方请大家随意指出,与大家一起讨论,共同进步,谢谢!———-
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息