android之自动轮播的ViewPager

原创 2016年08月29日 18:42:37

Android之自动轮播的ViewPager

1、前言

看到其他APP的自动轮播的ViewPager时,感觉效果挺炫酷的,所以今天自己动手一试,效果挺好,为此记录一番。同时记录下来给广大码农,欢迎大家的批评指正,有不足之处还请留言。

2、说明

我在项目中用到了butterknife框架,一个很实用的框架,我们不用再手动的findViewById,不用手动的添加控件的点击事件,在android studio里面可以一键生成,极大缩减了我们的代码量,再也不用做这种搬砖的事啦。在此,我推荐一篇博客,有意要学习的可以去看看:butterknife的使用,若是使用该框架,只需在module的build.gradle的dependencies节点下添加如下:
compile 'com.jakewharton:butterknife:7.0.1'

3、实现

相关的代码的说明我写在了代码的注释中,若有不懂的,可以留言

1.Mainactivity

package com.example.minhuawang.loopviewpager;
import android.os.Bundle;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;
import java.util.logging.Handler;

import butterknife.Bind;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.viewpager)
    ViewPager viewpager;
    @Bind(R.id.tv_desc)
    TextView tvDesc;
    @Bind(R.id.ll_point)
    LinearLayout llPoint;
    private int[] images;
    private List<ImageView> imageViewList;
    private String[] desc;
    private android.os.Handler handler = new android.os.Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            viewpager.setCurrentItem(viewpager.getCurrentItem()+1);
        }
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        initUI();

        initData();

        initAdapter();

        autoRoll();
    }

    /**
     * 自动滚动
     */
    private void autoRoll() {
        Timer timer = new Timer();
        TimerTask task = new TimerTask() {
            @Override
            public void run() {
                //发消息更新UI
                Message msg = Message.obtain();
                handler.sendMessage(msg);
            }
        };
        timer.scheduleAtFixedRate(task,2000,4000);
    }

    private void initUI() {
       viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
           @Override
           public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
               //滚动是调用
           }
           @Override
           public void onPageSelected(int position) {
               int newPosition = position%imageViewList.size();
               //新的条目选中是调用
               for (int i = 0;i<desc.length;i++){
                   llPoint.getChildAt(i).setEnabled(false);
               }
               llPoint.getChildAt(newPosition).setEnabled(true);
               tvDesc.setText(desc[newPosition]);
           }
           @Override
           public void onPageScrollStateChanged(int state) {
               //滚动状态发生改变的时候
           }
       });
    }

    private void initAdapter() {
        llPoint.getChildAt(0).setEnabled(true);
        tvDesc.setText(desc[0]);
        viewpager.setAdapter(new MyAdapter());

        //保证向右滑动
        viewpager.setCurrentItem(1025);
    }

    private void initData() {
        desc = new String[]{"狂拽炫酷吊炸天", "狂拽炫酷吊炸天","狂拽炫酷吊炸天","狂拽炫酷吊炸天","狂拽炫酷吊炸天"};
        imageViewList = new ArrayList<ImageView>();
        images = new int[]{R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d,R.mipmap.e};
        ImageView image;
        View point;
        for(int i = 0;i< images.length;i++){
            image = new ImageView(this);
            image.setBackgroundResource(images[i]);
            imageViewList.add(image);
            //添加小白点,指示器
            point = new View(this);
            point.setEnabled(false);
            point.setBackgroundResource(R.drawable.selector_bg_point);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10,10);
            params.leftMargin = 14;
            llPoint.addView(point,params);

        }
    }

    private class MyAdapter extends PagerAdapter{


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

        //当滑到新的条目,有返回,是否可以复用
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        //返回要显示的内容
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // container 当前的viewPager
            //把View对象添加到容器中
            int newPosition = position % imageViewList.size();//循环公式
            ImageView image = imageViewList.get(newPosition);
            container.addView(image);
            //把view 对象返回给框架,适配器
            return image;//必须重写,否则报错
        }

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

2.布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.minhuawang.loopviewpager.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160dp">

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

        <LinearLayout
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:background="#33000000"
            android:orientation="vertical"
            android:padding="5dp"
            android:layout_height="40dp">
            <TextView
                android:id="@+id/tv_desc"
                android:layout_width="match_parent"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:textColor="@android:color/white"/>

            <LinearLayout
                android:id="@+id/ll_point"
                android:orientation="horizontal"
                android:gravity="center_horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">



            </LinearLayout>

        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>

3.相关资源文件

selector_bg_point.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/shape_bg_point_enable"/>

    <item android:state_enabled="false" android:drawable="@drawable/shape_bg_point_disable"/>
</selector>
shape_bg_point_enable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <corners android:radius="8dp"/>
    <solid android:color="#FFFFFF"/>


</shape>

shape_bg_point_disable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <corners android:radius="8dp"/>
    <solid android:color="@android:color/darker_gray"/>


</shape>




版权声明:本文为博主原创文章,未经博主允许不得转载。欢迎读者评论和指正

android 图片轮播 viewpager

效果如下。 1,一个activity.代码有注释。直接用。 package com.example.lenovo.bean.retrof...

Android TextView加上阴影效果

转载于:http://blog.csdn.net/hewence1/article/details/39993415 字体阴影需要四个相关参数: 1. android:shadow...

android TV开发:使用ViewPager实现图片自动轮播效果

1.实现效果:可以ViewPager的子view响应点击事件+遥控器按键从子view直接跳到旁边控件(由于gif最大只能是2M,就只能录屏时间短一点,建议csdn可以上传容量更大的图片)...
  • meetings
  • meetings
  • 2016年10月26日 21:43
  • 18842

【Android】viewpager banner 广告 自动轮播 小圆点

1.首先自定义一个LinearLayout
  • zhi0720
  • zhi0720
  • 2014年04月23日 10:38
  • 5955

Android自动滚动 轮播循环的ViewPager

项目已开源Android Auto Scroll ViewPager@Github 示例代码地址见AutoScrollViewPagerDemo,效果图如下: 1、实现 没有通过Schedu...

android:ViewPager自动轮播图(简单版)

实现原理:使用ViewPager每个Pager就是一个ImageView,里面只有一张图片; 整个布局是一个相对布局,下面标题和指示点是一个线性布局; 给ViewPager设置一个页面改变的监听,当页...

android:使用viewpager实现自动无线轮播

这是本人第一次写博客,主要也是为了我自己积累点东西,在平常的时候我写代码,总喜欢百度,写过一次,还是会忘记,自己上班也不是很累,提升一下自己! 无线轮播我是借鉴夏神的代码上改的,下面是地址:http...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android之自动轮播的ViewPager
举报原因:
原因补充:

(最多只允许输入30个字)