Skip to content

open-android/LoopViewPager

Folders and files

NameName
Last commit message
Last commit date

Latest commit

29ad96d · Jul 16, 2017

History

12 Commits
Mar 11, 2017
Dec 7, 2016
Dec 7, 2016
Jul 16, 2017
Dec 7, 2016
Dec 7, 2016
Dec 7, 2016
Dec 7, 2016

Repository files navigation

LoopViewPager

Android LoopViewPager 页面轮播控件

运行效果

image

  • 爱生活,爱学习,更爱做代码的搬运工,分类查找更方便请下载黑马助手app

黑马助手.png

添加权限

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

添加依赖

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

dependencies {
    compile 'com.github.open-android:LoopViewPager:2.0.0'
}

可配置的属性

    <declare-styleable name="LoopViewPager">
        <!-- 轮播时间,默认值0表示不自动轮播 -->
        <attr name="loopTime" format="integer" />
        <!-- 动画时间 -->
        <attr name="animTime" format="integer" />
        <!-- 动画效果 -->
        <attr name="animStyle" format="enum">
            <!-- 折叠效果 -->
            <enum name="accordion" value="1" />
            <enum name="accordionUp" value="2" />
            <!-- 立方体效果 -->
            <enum name="cube" value="3" />
            <enum name="cubeUp" value="4" />
        </attr>
        <!-- 是否可以手动滚动页面,默认true -->
        <attr name="scrollEnable" format="boolean" />
        <!-- 触摸页面是否停止轮播,默认true -->
        <attr name="touchEnable" format="boolean" />
    </declare-styleable>
    <declare-styleable name="LoopDotsView">
        <!-- 圆点大小 -->
        <attr name="dotSize" format="integer|dimension|reference" />
        <!-- 圆点宽度 -->
        <attr name="dotWidth" format="integer|dimension|reference" />
        <!-- 圆点高度 -->
        <attr name="dotHeight" format="integer|dimension|reference" />
        <!-- 圆点距离 -->
        <attr name="dotRange" format="integer|dimension|reference" />
        <!-- 圆点形状 -->
        <attr name="dotShape">
            <!-- 矩形,默认值 -->
            <enum name="rectangle" value="1" />
            <!-- 圆形 -->
            <enum name="oval" value="2" />
            <!-- 三角形 -->
            <enum name="triangle" value="3" />
            <!-- 菱形 -->
            <enum name="diamond" value="4" />
        </attr>
        <!-- 圆点颜色,默认值0xFFFFFFFF -->
        <attr name="dotColor" format="color|reference" />
        <!-- 圆点选中颜色,默认值0x55000000 -->
        <attr name="dotSelectColor" format="color|reference" />
        <!-- 圆点资源 -->
        <attr name="dotResource" format="reference" />
        <!-- 圆点选中资源 -->
        <attr name="dotSelectResource" format="reference" />
    </declare-styleable>

配置说明

  • 1、loopTime的值应不小于1s,如果值为0,则不自动轮播;
  • 2、animTime的值应小于loopTime;
  • 3、dotWidth、dotHeight、dotRange如果没有设置,则默认值为dotSize;
  • 4、如果设置了dotResource、dotSelectResource,则dotShape、dotColor、dotSelectColor配置不生效;
  • 5、轮播调用start()方法,停止轮播调用stop()方法,start前至少设置setImgData、setImgLength、setTitleData中的其中一个;

代码示例

###XML

    <com.itheima.loopviewpager.LoopViewPager
        android:id="@+id/lvp_pager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:animStyle="accordion"
        app:animTime="1000"
        app:loopTime="3000">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="#55000000"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dp">

            <com.itheima.loopviewpager.LoopTitleView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:maxLines="1"
                android:textColor="#FF0000"
                android:textSize="16sp" />

            <com.itheima.loopviewpager.LoopDotsView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                app:dotShape="oval"
                app:dotSize="10dp" />

        </LinearLayout>

    </com.itheima.loopviewpager.LoopViewPager>

###Java

    private LoopViewPager loopViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_simple_demo2);
        loopViewPager = (LoopViewPager) findViewById(R.id.lvp_pager);
        loopViewPager.setImgData(DataFactory.imgListString());
        loopViewPager.setTitleData(DataFactory.titleListString());
        loopViewPager.start();
    }

    private List<String> imgListString() {
        List<String> imageData = new ArrayList<>();
        imageData.add("http://d.hiphotos.baidu.com/image/h%3D200/sign=72b32dc4b719ebc4df787199b227cf79/58ee3d6d55fbb2fb48944ab34b4a20a44723dcd7.jpg");
        imageData.add("http://pic.4j4j.cn/upload/pic/20130815/31e652fe2d.jpg");
        imageData.add("http://pic.4j4j.cn/upload/pic/20130815/5e604404fe.jpg");
        imageData.add("http://pic.4j4j.cn/upload/pic/20130909/681ebf9d64.jpg");
        imageData.add("http://d.hiphotos.baidu.com/image/pic/item/54fbb2fb43166d22dc28839a442309f79052d265.jpg");
        return imageData;
    }

    private List<String> titleListString() {
        List<String> titleData = new ArrayList<>();
        titleData.add("1、在这里等着你");
        titleData.add("2、在你身边");
        titleData.add("3、打电话给你就是想说声“嗨”");
        titleData.add("4、不介意你对我大喊大叫");
        titleData.add("5、期待你总是尽全力");
        return titleData;
    }

如何自定义

public class SimpleDemo2 extends AppCompatActivity {

    private List<View> viewList;
    private LoopViewPager loopViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_simple_demo2);
        loopViewPager = (LoopViewPager) findViewById(R.id.lvp_pager);
        initData();

        // 自定义View
        loopViewPager.setOnCreateItemViewListener(new OnCreateItemViewListener() {
            @Override
            public View getItemView(int position) {
                return viewList.get(position);
            }
        });
        //处理点击事件
        loopViewPager.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(SimpleDemo2.this, "position=" + position, Toast.LENGTH_SHORT).show();
            }
        });
        // 自定义动画
        loopViewPager.setPageTransformer(1500, new LoopVerticalTransformer() {
            @Override
            public void transformViewPage(View view, float position) {
                view.setPivotX(view.getMeasuredWidth() * 0.5f);
                view.setPivotY(position <= 0 ? view.getMeasuredHeight() : 0);
                view.setRotationX(-90f * position);
            }
        });
        loopViewPager.setImgLength(viewList.size());
//        loopViewPager.setTitleData(DataFactory.titleListString());
        loopViewPager.start();
    }

    private void initData() {
        viewList = new ArrayList<>();
        for (int i = 1; i <= 5; i++) {
            View view = null;
            if (i == 2) {
                ImageView imageView = new ImageView(this);
                Glide.with(SimpleDemo2.this).load("http://pic.58pic.com/58pic/13/72/07/55Z58PICKka_1024.jpg").centerCrop().into(imageView);
                view = imageView;
            } else if (i == 4) {
                ImageView imageView = new ImageView(this);
                Glide.with(SimpleDemo2.this).load("http://www.bz55.com/uploads/allimg/120615/1-120615140A8.jpg").centerCrop().into(imageView);
                view = imageView;
            } else {
                TextView textView = new TextView(this);
                textView.setGravity(Gravity.CENTER);
                textView.setTextColor(Color.BLUE);
                textView.setTextSize(36);
                textView.setText("TextView " + i);
                textView.setBackgroundColor(Color.rgb(new Random().nextInt(255), new Random().nextInt(255), new Random().nextInt(255)));
                view = textView;
            }
            viewList.add(view);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        loopViewPager.stop();
    }

}
  • 详细的使用方法在DEMO里面都演示啦,如果你觉得这个库还不错,请赏我一颗star吧~~~

  • 欢迎关注微信公众号

回到顶部

About

Android LoopViewPager 轮播控件

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages