使用ViewPager实现轮播图 / 使用开源的Banner实现轮播图

目录

 

一.使用ViewPager自己手写一个轮播图,主要是用于练习ViewPager

二.使用Banner快速实现轮播图

---

 

一.使用ViewPager自己手写一个轮播图,主要是用于练习ViewPager

 效果图:

实现的效果:无限自动滚动,左右都可以滑动,长按会停止,松开会继续滚动,

有一个小bug:长按的同时手指移动,滚动会停止,再次点击就恢复了,这个我参考了另外一个APP也没有解决这个问题

 点状图的背景

drawable/point_bg_normal.xml

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

 drawable/point_bg_press.xml

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

drawable/selector_point_bg.xml

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

 

view_myviewpager.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_main"
        android:layout_width="match_parent"
        android:layout_height="180dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/vp_main"
        android:background="#44000000"
        android:orientation="vertical"
        android:padding="5dp">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="小猫咪"
            android:textColor="#fff" />

        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_width="w