android ViewPager实现一个无限轮播图

上节我们实现了一个图片可以无限滑动的ViewPager,这一节我们需要自定义一个ViewPager来实现我们想要展现的布局

首先我们需要建一个包,然后新建一个java类,名字随便起

这个类我们需要随便继承自一个viewGroup就行,viewGroup就是可以存放子控件的view,我们的各种layout,比如LinearLayour或者RelativeLayout这种可以在里面放东西的view,而TextView或者ImageView这种只能放内容而不能放其他view的就是普通view

然后我们选中三个构造器

package com.example.viewpager.views;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.RelativeLayout;

import androidx.annotation.NonNull;

import com.example.viewpager.R;

import java.util.AbstractSet;

public class LooperPager extends RelativeLayout {

    public LooperPager(Context context) {

        super(context);
    }
    public LooperPager(Context context,@NonNull AbstractSet abstrs) {

        super(context, (AttributeSet) abstrs);
    }
    public LooperPager(Context context,@NonNull AbstractSet abstrs,int defStyleAttr) {

        super(context, (AttributeSet) abstrs,defStyleAttr);

    }

}

然后我们在新建一个layout文件把想要实现的布局写进去

因为我们是为ViewPager实现一个无限轮播的轮播图,首先当然是写一个ViewPager,然后是一个上方的标题,我们写一个textview,因为想要和悲情区分开来,我们给背景设定为红色,标题设定为白色,然后把文字居中,最后因为我们想要图片在滑动时下方有一排根据图片数量显示滑动时代表图片的标志的样式,我们设定一个在控件底部居中显示的线性布局,然后再线性布局内设定三个白色大小为5dp前后间隔为5dp的view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:background="@color/colorAccent"//背景设为红色
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="我是标题"
        android:background="#ffffff "//背景设为白色
        android:textAlignment="center"//居中
        />
    <LinearLayout
        android:layout_centerHorizontal="true"//设为居中
        android:layout_alignParentBottom="true"//设为底部
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <View
        android:layout_width="5dp"
        android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="#ffffff "/>
        <View
        android:layout_width="5dp"
        android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="#ffffff "/>
        <View
        android:layout_width="5dp"
        android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="#ffffff "/>

    </LinearLayout>

</RelativeLayout>

实现效果就是这样的

接下来就是把我们写好的自定义布局绑定我们的自定义的类,因为我们想要无论调那个构造方法最后像都让他去调我们写绑定的方法,所以我们要把其他方法里面的supper都改成this

package com.example.viewpager.views;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.RelativeLayout;

import androidx.annotation.NonNull;

import com.example.viewpager.R;

import java.util.AbstractSet;

public class LooperPager extends RelativeLayout {

    public LooperPager(Context context) {

        this(context,null);
    }
    public LooperPager(Context context,@NonNull AbstractSet abstrs) {

        this(context,  abstrs,0);
    }
    public LooperPager(Context context,@NonNull AbstractSet abstrs,int defStyleAttr) {

        super(context, (AttributeSet) abstrs,defStyleAttr);
        //自定义布局绑定当前类,this:当前类,ture:确定绑定
        LayoutInflater.from(context).inflate(R.layout.looper_pager,this,true);
    }

}

下一步就是实验我们的自定义控件有没有成功啦,

重新创建一个启动文件然后在再创建一个lauout文件

,这里我们右键刚才的looppager选择

然后在新建的Layout文件里面粘贴设定好宽和高

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.viewpager.views.LooperPager
        android:layout_width="match_parent"
        android:layout_height="120dp"/>

</RelativeLayout>

最后在我们新建的activity里面绑定刚才写好的layout文件

package com.example.viewpager;

import android.os.Bundle;
import android.os.PersistableBundle;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

public class supper_MainActivity extends AppCompatActivity {
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.supper_activity_main);
    }
}

效果就实现了

但刚开始写完之后程序打开就报错,我从凌晨一点开始找错误,找到两点半发现布局文件里面的View写成小写view了,当时的心情不是一般的酸爽.....................

到此这篇关于android ViewPager实现一个无限轮播图的文章就介绍到这了,更多相关android ViewPager轮播图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android使用RollViewPager实现轮播图

    记录Android中轮播图的学习与使用,供大家参考,具体内容如下 1.build.gradle(:app)文件里面加依赖 implementation 'com.jude:rollviewpager:1.2.9' 2.activity_main.xml <com.jude.rollviewpager.RollPagerView android:id="@+id/roll_view_pager" android:layout_width="match_parent&quo

  • Android Viewpager实现无限循环轮播图

    在网上找了很多viewpager实现图片轮播的,但是大多数通过以下方式在PagerAdapter的getCount()返回一个无限大的数,来实现 伪无限 @Override public int getCount() { return Integer.MAX_VALUE;//返回一个无限大的值,可以 无限循环 } 虽然通过这种方式是能达到效果,但是从严格意义上来说并不是真正的无限. 假如有五张轮播图 item的编号为(0,1,2,3,4) 要想实现 无限循环  我们在这五张的头部和尾部各加一张即

  • Android Viewpager实现轮播广告图

    本文实例为大家分享了Android Viewpager轮播广告图的具体代码,供大家参考,具体内容如下 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layou

  • Android使用viewpager实现自动无限轮播图

    1.具体步骤 说下大概实现步骤,一般我们有两种,一种是viewpager+作为游标的点 .另外一种是重写viewpager. 效果图: 1.1 布局,直接viewpager+一个viewgroup就好. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:

  • android ViewPager实现一个无限轮播图

    上节我们实现了一个图片可以无限滑动的ViewPager,这一节我们需要自定义一个ViewPager来实现我们想要展现的布局 首先我们需要建一个包,然后新建一个java类,名字随便起 这个类我们需要随便继承自一个viewGroup就行,viewGroup就是可以存放子控件的view,我们的各种layout,比如LinearLayour或者RelativeLayout这种可以在里面放东西的view,而TextView或者ImageView这种只能放内容而不能放其他view的就是普通view 然后我们

  • android ViewPager实现自动无限轮播和下方向导圆点

    一.布局 小圆点形状的生成shape.xml文件 使用空心还是实心的把对应的注释去掉就可以了. <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false&quo

  • Android仿京东快报无限轮播效果

    我们常用的京东有一个非常好看的效果: 首页的京东快播有一个无限轮播的公告栏,先看效果: 公告内容大概每3s从中间向上滑出,同时下一条内容从底部向上滑动进入.整个过程还伴随有内容的渐变消失,动画效果很流畅. 采用ViewFlipper来实现更为简单. 看看ViewFlipper类官方注释: Simple {@link ViewAnimator} that will animate between two or more views that have been added to it. Only

  • Flutter 封装一个 Banner 轮播图效果的实例代码

    实际业务开发中,首页一般都会存在一个轮播图. 在 Flutter 中,如何开发一个轮播? 了解需求 首先,我们在开发一个功能的时候要了解这个功能的需求,那一个轮播需要有什么功能? 1. 可以自定义高度和一些属性 2. 展示图片 3. 自动翻页播放 4. 点击事件 5. 指示器 6. 人为拖动的时候关闭自动播放 其中「人为拖动的时候关闭自动播放」是比较难的,我们后续会说,那先一个一个功能来实现. 自定义高度和一些属性 这里主要是做一些前期的工作,如果我们的 Banner 要开源让别人来使用,那我们

  • Android Banner本地和网络轮播图使用介绍

    目录 加载本地图片 第一步:先在build.gradle中加入banner和glide的依赖 第二步:xml布局 第三步:MainActivity 加载网络图片 下载网络图片的时候要记得添加网络权限 样式一:CIRCLE_INDICATOR:无标题,有小圆点 样式二:CIRCLE_INDICATOR_TITLE_INSIDE:小圆点和标题在同一栏 样式三:CIRCLE_INDICATOR_TITLE:标题和小圆点同时出现 现在恰好有个项目需要做个轮播图效果,这个需求也是很常见的需求,于是就做个笔

  • Android自定义控件实现简单的轮播图控件

    最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了. 效果图: 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图.指示器我们可以用一个线性布局来根据要展示的轮播图

  • Android下拉刷新与轮播图滑动冲突解决方案

    最近在开发中遇到了这样一个问题,在下拉刷新组件中包含了一个轮播图组件,当左右滑动的图片时很容易触发下拉刷新,如下图所示: 如图中红色箭头所示方向切换轮播图,很容易触发下拉刷新.网上查了很多方法,发现都不能很好的解决,于是自己研究了下. 我选用的第三方控件 1.下拉刷新我选用的是chanven的CommonPullToRefresh(系统自带的SwipeRefreshLayout也应该是一样的道理); 2.轮播图选用的是daimajia的AndroidImageSlider(用ViewPager也

  • viewpager实现自动循环轮播图

    本文实例为大家分享了viewpager自动循环轮播图的具体代码,供大家参考,具体内容如下 布局文件 android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <RelativeLayout android:layout_width="match_parent" and

  • Android实现简单的banner轮播图

    本文实例为大家分享了Android实现简单banner轮播图的具体代码,供大家参考,具体内容如下 说明:想玩一个简单的轮播图效果  用的第三方的框架玩一下,支持设置轮播图多种样式 1.效果图 2.添加依赖 implementation 'com.youth.banner:banner:1.4.10' implementation "com.github.bumptech.glide:glide:4.6.1" 3.主界面 package com.example.myapplication

随机推荐