ViewPager底部添加小圆点
转自:https://blog.csdn.net/qq_26239671/article/details/70038228
在APP的ViewPager引导页面中, 我们通常可以看到底部有小圆点显示当前是第几页, 我们来试一下这个效果是怎么实现的, 效果图如下:
目录
基础配置
创建适配器控件
创建适配器
添加数据
创建适配器对象, 设置适配器
重点教程(小圆点)
在drawable文件夹下创建xml图形
生成小圆点
监听滑动
基础配置
首先要创建出一个滑动页面,可以阅读我以前的文章, 也可以直接读以下文档.
创建适配器控件
在布局中.添加 viewpager控件
, 并在MainActivity中 绑定控件
.
1.布局中:
<?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:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.dell.lunbo.MainActivity"><android.support.v4.view.ViewPagerandroid:id="@+id/main_viewpager"android:layout_width="match_parent"android:layout_height="match_parent" /><LinearLayoutandroid:id="@+id/main_linear"android:layout_width="match_parent"android:layout_height="50dp"android:layout_alignParentBottom="true"android:gravity="center"android:orientation="horizontal" /></RelativeLayout>
- MainActivity中:
import android.os.Bundle;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.widget.LinearLayout;import static com.example.dell.lunbo.R.id.main_linear;public class MainActivity extends AppCompatActivity {private ViewPager mViewPager;private LinearLayout mLinearLayout;//ImageView动态数组private List<ImageView> mImageList = new ArrayList<ImageView>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);bindID();}/*** 绑定ID*/private void bindID() {mViewPager = (ViewPager) findViewById(R.id.main_viewpager);mLinearLayout = (LinearLayout) findViewById(main_linear);}}
创建适配器
- 在MainActivity中,创建一个内部适配器类:
/*** 适配器*/private class MyAdapter extends PagerAdapter {//大小@Overridepublic int getCount() {return mImageList.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {//获取图片viewImageView imageView = mImageList.get(position);//设置到容器,也就是ViewPagercontainer.addView(imageView);//返回控件return imageView;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {//从容器中删除container.removeView(mImageList.get(position));}}
添加数据
在图片资源资源文件夹下面放入三张图片, 然后将每个图片给ImageView设置为背景并添加到动态数组中
- 添加图片数组
//图片数组private int[] mPics = new int[]{R.drawable.guide1, R.drawable.guide2, R.drawable.guide3};
- 创建getData()方法, 生成ImageView设置背景图片并放入ImageView数组中, 在onCreate()中调用.
/*** 获取数据*/private void getData() {//设置图片ImageView imageView;View view;for (int pic : mPics) {imageView = new ImageView(MainActivity.this);imageView.setBackgroundResource(pic);//添加到数组mImageList.add(imageView);}}
创建适配器对象, 设置适配器
- 创建initAdaper()方法在onCreate()中调用给ViewPager设置适配器.
/*** 设置适配器*/private void initAdapter() {mAdapter = new MyAdapter();mViewPager.setAdapter(mAdapter);}
重点教程(小圆点)
在drawable文件夹下创建xml图形
- 在xml文件夹下创建一个enable.xml文件(选中时白色的小圆点文件)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><!--白色--><solid android:color="#ffffff" /><!--半径--><corners android:radius="10dp" />
</shape>
- 在drawable文件夹下创建一个disable.xml文件(未选中是灰色的小圆点)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><!--灰色--><solid android:color="@android:color/darker_gray" /><!--半径--><corners android:radius="10dp" />
</shape>
- 在drawable文件夹下创建一个background.xml文件(将前两种圆点背景合成一个文件)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/enable" android:state_enabled="true" /><item android:drawable="@drawable/disable" android:state_enabled="false" />
</selector>
生成小圆点
- 修改getData()方法, 有多少个图片资源,就生成多少个小圆点,设置到LinearLayout中.
/*** 获取数据*/private void getData() {//设置图片ImageView imageView;View view;for (int pic : mPics) {imageView = new ImageView(MainActivity.this);imageView.setBackgroundResource(pic);//添加到数组mImageList.add(imageView);//创建底部指示器(小圆点)view = new View(MainActivity.this);view.setBackgroundResource(R.drawable.background);view.setEnabled(false);//设置宽高LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(30, 30);//设置间隔if (pic != mPics[0]) {layoutParams.leftMargin = 10;}//添加到LinearLayoutmLinearLayout.addView(view, layoutParams);}}
监听滑动
- 进入页面后, 第一个小圆点高亮,在onCreate()中写入一下代码:
//第一次显示小白点mLinearLayout.getChildAt(0).setEnabled(true);
- 使用监听滑动 , 滑到一个页面就将哪个小圆点高亮显示
1). 将MainActivity implements ViewPager.OnPageChangeListener
, 并重写三个方法
2). 给ViewPager注册监听
//注册mViewPager.addOnPageChangeListener(this);
- 在重写的三个方法中, 如下写入:
@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {mLinearLayout.getChildAt(mNum).setEnabled(false);mLinearLayout.getChildAt(position).setEnabled(true);mNum = position;}@Overridepublic void onPageScrollStateChanged(int state) {}
好了,运行一下发下完美无误了.
ViewPager底部添加小圆点相关推荐
- ViewPager添加小圆点
ViewPager添加小圆点很简单,但是如果是网络图片可能就不太好做了,所以我这里给出一种方法,当然你也可以用其他的 1.主界面xml <?xml version="1.0" ...
- RiPro主题二级菜单添加小圆点图标
RiPro主题二级菜单添加小圆点图标 效果展示 在ripro/assets/css/diy.css 中添加下列CSS .lanse{box-sizing:border-box;content:''; ...
- echarts折线图曲线,每个值上面添加小圆点或者小圆圈
在折线图中,我们可能会在每个数值上面加小圆点或者小圆圈,只需要在series中加symbol即可,以下是两种效果,当symbol值为none的时候,则没有小圆点或者小圆圈,当值为false或者' '时 ...
- 给li标签添加 小圆点
盒子: <body> <div class="box"> <ul> <li>展示第1个li标签</li> <li& ...
- Android滑动页面 底部小圆点,Android ViewPager无限循环实现底部小圆点动态滑动
页面拖动到最后一页 再向下滑动回复到 第一页,第一页向前滑动回到 最后一页 同时,底部红色小圆点随着页面的滑动距离比例随时改变位置 布局: xmlns:android="http://sch ...
- ViewPager底部圆点指示器
在APP的ViewPager引导页面中, 我们通常可以看到底部有小圆点显示当前是第几页, 我们来试一下这个效果是怎么实现的, 效果图如下: {% cq %} 代码是最为耐心.最能忍耐和最令人愉快的伙伴 ...
- Android:ViewPager详解(异步网络加载图片,带图片缓存,并带导航小圆点)
android 应用中,如欢迎指引页面, 和图片轮播功能, 或者更多的内容在一页显示不了,要分成多个页面,这时候viewpager是很好用的. 首先看下效果: 下面是一个例子,带异步网络加载图片,并带 ...
- ViewPager 添加广告页面小圆点指示器效果
介绍 我们的应用几乎都有启动引导页介绍,通常是3~4张引导图,然后进入我们的主界面.大家可以发现,我们大部分引导界面都会有一种指示器(也就是小圆点,这里比较常见).除了引导页以外呢,我们常见的广告页也 ...
- iOS: 教你给UI控件添加Badge(消息提醒小圆点)
PPBadgeView 1.前言 最近项目的一个需求是在UIView, UITabBarItem, UIBarButtonItem 这三种类型的控件上添加消息提醒小圆点(Badge),一开始找了一个星 ...
最新文章
- SAP SD基础知识之创建并处理外向交货单
- adb和adbd详尽分析
- 【转】Virtualbox虚拟机配置安装CentOS 6.5图文教程
- Java wait forever_彻底搞清楚Java并发 (一) 基础
- python数据结构中文版_Python官方入门教程_中文版_5.数据结构
- PYTHON——多线程:Thread类与线程函数
- php session 统计在线人数,利用文件属性结合session实现在线人数统计_php实例
- ubuntu LVS+keepalived 笔记
- 软考网规论文-论企业内部网的安全策略
- socket编程:简单TCP服务器/客户端编程
- 向量图svg转jpg、png不清晰问题
- VS2010 移除源文件又增加源文件,无法编译问题
- Kafka:分布式消息系统
- ctf比赛涉及的方面以及所需知识
- 【详解】MySQL分区表,分区的过程,四种分区类型
- jspdf添加宋体_JSPDF支持中文(思源黑体)采坑之旅,JSPDF中文字体乱码解决方案...
- qt保存文件的默认路径_Qt将文件保存到指定目录下(另存为的功能)
- python资源论坛_五个亲测可用的Python论坛类网站开源框架
- 什么是C语言的合法正确标识符?什么是C语言关键字?
- linux的文本处理