ANDROID进阶之路 - 五分钟内快速实现轮播图效果

• 

• 第一种方式

 

原作者的Github地址：

https://github.com/Jude95/RollViewPager#usage

• 1

build.gradle 添加：

compile 'com.jude:rollviewpager:1.4.6'

• 1

在需要使用轮播的地方，使用我们引用的第三方控件：

 <com.jude.rollviewpager.RollPagerView
        android:layout_margin="3dp"
        android:id="@+id/carousel_image"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        app:rollviewpager_play_delay="3000"/>

MainActivity：

package com.example.carouselimage;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;

import com.jude.rollviewpager.OnItemClickListener;
import com.jude.rollviewpager.RollPagerView;
import com.jude.rollviewpager.adapter.StaticPagerAdapter;
import com.jude.rollviewpager.hintview.ColorPointHintView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RollPagerView mCarousel;
    private List imagesList=new ArrayList();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {
        mCarousel = (RollPagerView) findViewById(R.id.carousel_image);

        imagesList.add(R.drawable.img_1);
        imagesList.add(R.drawable.img_2);
        imagesList.add(R.drawable.img_3);
        imagesList.add(R.drawable.img_4);
        imagesList.add(R.drawable.img_5);


        //设置轮播图下的点的颜色
        mCarousel.setHintView(new ColorPointHintView(this,Color.RED,Color.WHITE));
        //设置图片轮播时间
        mCarousel.setPlayDelay(2000);
        //设置动画的持续时间
        //设置动画后很别扭，取消与否在与自己
        // mCarousel.setAnimationDurtion(2000);
        mCarousel.setAnimationDurtion(0);
        //设置适配器
        mCarousel.setAdapter(new OurAdapter(imagesList));
        //子条目点击
        mCarousel.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(MainActivity.this,"This item is "+position,Toast.LENGTH_LONG).show();
            }
        });
    }

    public class OurAdapter extends StaticPagerAdapter{
        List lists=new ArrayList();

        public OurAdapter(List lists) {
            this.lists = lists;
        }

        @Override
        public View getView(ViewGroup container, int position) {
            ImageView imageView = new ImageView(container.getContext());
            imageView.setImageResource((Integer) lists.get(position));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
            return imageView;
        }

        @Override
        public int getCount() {
            return lists.size();
        }
    }

MainActivity Xml :

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

    <com.jude.rollviewpager.RollPagerView
        android:layout_margin="3dp"
        android:id="@+id/carousel_image"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        app:rollviewpager_play_delay="3000"/>
</LinearLayout>

• 第二种方式

Effect：

原作者Github地址

build引入：

compile 'com.xhb:xbanner:1.3.5'

• 1

Xml使用（这里用的是圆点样式，自己设置对应的状态颜色）：

  <com.stx.xhb.xbanner.XBanner
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/xbanner"
            android:layout_width="match_parent"
            android:layout_height="130dp"
            android:layout_marginBottom="@dimen/d20"
            android:layout_marginLeft="@dimen/d15"
            android:layout_marginRight="@dimen/d15"
            android:layout_marginTop="@dimen/d20"
            android:background="@mipmap/ic_home_open_bg"
            app:AutoPlayTime="2000"
            app:isShowIndicatorOnlyOne="true"
            app:pageChangeDuration="3000"
            app:pointsPosition="CENTER"
            app:pointNormal="@drawable/shape_noraml"
            app:pointSelect="@drawable/shape_selected"
            app:pointsVisibility="true"
            />

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

onCreate生命周期内：

        /**
         * 加入图片
         * */
        imgLists = new ArrayList<>();
        imgLists.add(R.mipmap.bg_confirm_price);
        imgLists.add(R.mipmap.bg_confirm_price);
        imgLists.add(R.mipmap.bg_confirm_price);
        //第二个参数为提示文字资源集合
        mBanner.setData(imgLists, null);
        //加载图片
         mBanner.setmAdapter(this);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

图片加载：

   @Override
    public void loadBanner(XBanner banner, Object model, View view, int position) {
        Glide.with(this).load(imgLists.get(position)).into((ImageView) view);
    }

• 1
• 2
• 3
• 4

动画设置：

 /**共九种动画模式
    Default,
    Alpha,
    Rotate,
    Cube,
    Flip,
    Accordion,
    ZoomFade,
    ZoomCenter,
    ZoomStack,
    Stack,
    Depth,
    Zoom
    */
 mBanner.setPageTransformer(Transformer.Accordion);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

子条目点击事件：

 mBanner.setmAdapter(this);
        mBanner.setOnItemClickListener(new XBanner.OnItemClickListener() {
            @Override
            public void onItemClick(XBanner banner, int position) {
                Toast.makeText(getActivity(), "点击了第" + position + "图片", Toast.LENGTH_SHORT).show();
            }
        });

• 1
• 2
• 3
• 4
• 5
• 6
• 7

圆点样式，用在
app:pointNormal=”@drawable/shape_noraml”
app:pointSelect=”@drawable/shape_selected”

shape_noraml.xml （直接Copy）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <size android:width="6dp" android:height="6dp" />
    <solid android:color="@android:color/white" />
</shape>

• 1
• 2
• 3
• 4
• 5
• 6

shape_selected.xml（直接Copy）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <size android:width="6dp" android:height="6dp" />
    <solid android:color="#4081D6" />
</shape>

• 1
• 2
• 3
• 4
• 5
• 6

建议（优化代码）：

  @Override
    public void onResume() {
        super.onResume();
        mBanner.startAutoPlay();
    }

    @Override
    public void onStop() {
        super.onStop();
        mBanner.stopAutoPlay();
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

自定义属性说明（如需要一些扩展属性可以查看）

属性名 属性说明 属性值
isAutoPlay 是否支持自动轮播 boolean类型，默认为true
isTipsMarquee 是否支持提示性文字跑马灯效果 boolean类型，默认为false
AutoPlayTime 图片轮播时间间隔 int值，默认为5s
pointNormal 指示器未选中时状态点 drawable，不设置的话为默认状态点
pointSelect 指示器选中时状态点 drawable，不设置的话为默认状态点
pointsVisibility 是否显示指示器 boolean类型，默认为true
pointsPosition 指示点显示位置 LEFT、CENTER、RIGHT类型，默认为CENTER
pointsContainerBackground 指示器背景 可自定义设置指示器背景
pointContainerPosition 指示器显示位置 TOP、BOTTOM类型，默认为BOTTOM
pointContainerLeftRightPadding 指示点容器左右内间距 dimension，默认为10dp
pointTopBottomPadding 指示点上下内间距 dimension，默认为6dp
pointLeftRightPadding 指示点左右内间距 dimension，默认为3dp
tipTextColor 提示文案的文字颜色 reference
tipTextSize 提示文案的文字大小 dimension，默认为10dp
isShowNumberIndicator 是否显示数字指示器 boolean,默认为false不显示
numberIndicatorBacgroud 数字指示器背景 reference
isShowIndicatorOnlyOne 当只有一张图片的时候是否显示指示点 boolean，默认为false，不显示
pageChangeDuration 图片切换速度 int值，默认为1000ms
isHandLoop 是否支持手动无限循环切换图片 boolean类型，默认为false