安卓：ViewPager及带指示圆点的

最新推荐文章于 2024-04-22 18:27:38 发布
最新推荐文章于 2024-04-22 18:27:38 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： 安卓 ViewPager(不带标题的)带指示圆点的 文章标签： 安卓 ViewPager不带标题的 带指示圆点的
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my_worldlet/article/details/48706911
版权

打开应用程序看到的滑动页面：滑动时无小圆点


1.在布局文件中加入ViewPager控件：

2.逻辑代码中：

findViewById 找到控件：android.support.v4.view.ViewPager

设置ViewPager的适配器

自定义适配器，继承自PagerAdapter： 注意要使程序在滑到最后一张时不崩溃需在适配器中destroyItem方法里注释掉调用父类的

创建一个整型数组存放图片，定义一个List<ImageView>类型的list

for循环将整型图片转成ImageView对象放在list里



布局文件：

<span style="font-size:18px;"><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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</RelativeLayout>
</span>

逻辑代码文件：

<span style="font-size:18px;">package com.example.day20_viewpager;

import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class MainActivity extends Activity {

	ViewPager vp;
	int imgs[]={R.drawable.a1,R.drawable.a2,R.drawable.a3};
	List<ImageView> list;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vp=(ViewPager) findViewById(R.id.vp);
        
        list=new ArrayList<ImageView>();
        //将imgs转成ImageView对象,然后放在list中
        for (int i = 0; i < imgs.length; i++) {
        	//得到ImageView对象
			ImageView iv=new ImageView(MainActivity.this);
			iv.setImageResource(imgs[i]);
			list.add(iv);
		}
        MyAdapter adapter=new MyAdapter();
        vp.setAdapter(adapter);
    }
    //自定义适配器
    class MyAdapter extends PagerAdapter
    {
    	//得到数据的总条数
		@Override
		public int getCount() {
			return list.size();
		}
		//根据指定下标创建ViewPager展示的item视图
		/*
		 * ViewGroup container:管理当前ViewPager的视图组
		 * int position：指定的下标
		 */
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			//将指定view对象存储到视图组中
			container.addView(list.get(position));
			
			return list.get(position);
		}
		
		//根据指定下标移除视图组中view对象
		/*
		 * ViewGroup container:视图组
		 * int position：指定的下标
		 * Object object：instantiateItem返回的Object对象
		 */
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			//要使滑到最后一张程序不崩，需注释掉此行
			//super.destroyItem(container, position, object);
			
			//从视图组中移除指定下标的view对象
			container.removeView(list.get(position));
		
		}
		
		//表示当前ViewPager展示的view对象是否是instantiateItem创建的对象（即是否是同一对象）
		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {

			return arg0==arg1;
		}
    	
    }
    
}
</span>


不带标题的完整版如图：


在上面的基础上继续：

1.在第一个drawable下中创建一个selector标签的xml文件dot，将选中和未选中情况下显示的图片添加进来

   <item  android:state_enabled="true"   android:drawable="@drawable/icon01"/>

   <item  android:state_enabled="false"   android:drawable="@drawable/icon1"/>

2.布局文件中添加一个LinearLayout，给个id,在里面放3个ImageView控件，并将步骤1建的xml加进来

     android:src="@drawable/dot"

3.逻辑代码中定义一个存放指示图片的ImageView的数组，然后把LinearLayout找出来，for循环遍历将指示图片放进数组里，并设置每个图片是否响应事件，及给其添加下标设置监听

4.给vp设置监听



在第一个drawable下中创建一个selector标签的xml文件dot：

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

    <item 
        android:state_enabled="false"
        android:drawable="@drawable/icon1"/>
 <!--
    state_enabled是否响应事件
    state_selected:选中
    state_focused: 焦点
    state_pressed: 点击 -->
</selector>

布局文件： 

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <LinearLayout 
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="70dp">
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dot"
            android:adjustViewBounds="true"
            android:maxHeight="20dp"
            android:layout_marginLeft="20dp"/>
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dot"
            android:adjustViewBounds="true"
            android:maxHeight="20dp"
            android:layout_marginLeft="10dp"/>
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dot"
            android:adjustViewBounds="true"
            android:maxHeight="20dp"
            android:layout_marginLeft="10dp"/>
    </LinearLayout>

</RelativeLayout>

逻辑代码文件： 

package com.example.day20_viewpager;

import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

	ViewPager vp;
	int imgs[]={R.drawable.a1,R.drawable.a2,R.drawable.a3};
	List<ImageView> list;
	//存放小圆点指示图片的数组
	ImageView icons[]=new ImageView[imgs.length];
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vp=(ViewPager) findViewById(R.id.vp);
        
        list=new ArrayList<ImageView>();
        //将imgs转成ImageView对象,然后放在list中
        for (int i = 0; i < imgs.length; i++) {
        	//得到ImageView对象
			ImageView iv=new ImageView(MainActivity.this);
			iv.setImageResource(imgs[i]);
			list.add(iv);
		}
        MyAdapter adapter=new MyAdapter();
        vp.setAdapter(adapter);
        
        //初始化小圆点图片指示
        init();
        vp.setOnPageChangeListener(new OnPageChangeListener() {
			//当前vp被选中时回调此方法
        	//int arg0：当前选中的下标
			@Override
			public void onPageSelected(int arg0) {
				for (int i = 0; i < imgs.length; i++) {
					icons[i].setEnabled(true);
				}
				//将当前下标的指示图片  选中
				icons[arg0].setEnabled(false);
			}
			/**
			 * vp正在滑动时回调的方法
			 * int arg0:滚动viewpager的下标
			 * float arg1:滚动的偏移量[0,1]
			 *  int arg2:  偏移量  像素
			 * 
			 */
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			/**
			 * 当前vp状态改变时回调
			 * 
			 * SCROLL_STATE_DRAGGING:正在滑动的状态
			 * SCROLL_STATE_IDLE:静止状态
			 * SCROLL_STATE_SETTLING:选中的状态
			 */
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
    }
    
	//自定义适配器
    class MyAdapter extends PagerAdapter
    {
    	//得到数据的总条数
		@Override
		public int getCount() {
			return list.size();
		}
		//根据指定下标创建ViewPager展示的item视图
		/*
		 * ViewGroup container:管理当前ViewPager的视图组
		 * int position：指定的下标
		 */
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			//将指定view对象存储到视图组中
			container.addView(list.get(position));
			
			return list.get(position);
		}
		
		//根据指定下标移除视图组中view对象
		/*
		 * ViewGroup container:视图组
		 * int position：指定的下标
		 * Object object：instantiateItem返回的Object对象
		 */
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			//要使滑到最后一张程序不崩，需注释掉此行
			//super.destroyItem(container, position, object);
			
			//从视图组中移除指定下标的view对象
			container.removeView(list.get(position));
		
		}
		
		//表示当前ViewPager展示的view对象是否是instantiateItem创建的对象（即是否是同一对象）
		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {

			return arg0==arg1;
		}				    	
    }
    
    
    public void init()
	{
		LinearLayout layout=(LinearLayout) findViewById(R.id.layout);
		
		for (int i = 0; i < icons.length; i++) {
			//将布局中的指示图片放进数组里
			icons[i]=(ImageView) layout.getChildAt(i);
			//设置是否响应事件
			icons[i].setEnabled(true);
			//给指示图片添加下标
			icons[i].setTag(i);
			icons[i].setOnClickListener(new OnClickListener() {
				
				@Override
				public void onClick(View v) {
					
					vp.setCurrentItem((Integer) v.getTag());
				}
			});
			icons[0].setEnabled(true);
		}
	}
}








my_worldlet
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
打造Android 最实用的ViewPager 指示器控件
钟钟的专栏
02-14 5967
为什么我说它是最实用的 ViewPager 指示器控件呢？ 它有以下几个特点： 1、通过自定义 View 来实现，代码简单易懂； 2、使用起来非常方便； 3、通用性高，大部分涉及到 ViewPager 指示器的地方都能使用此控件； 4、实现了两种指示器效果，传统版指示器和流行版指示器（具体请看效果图）
android 水平滑动分页指示器_Android开发——打造简单的Viewpager指示器（小圆点指示器）...
weixin_39579726的博客
12-22 501
准备工作：1.两张不同颜色的小圆点图片,可以去阿里巴巴矢量图网站搜索我把我使用的图片贴出来2.一个简单的Viewpager的实现下面是简单的Viewpager实现步骤：1.布局文件使用Viewpager2.定义一个适配器类使其继承PagerAdapter，复写其中的四个方法，分别是getCount，isViewFromObject，instantiateItem和destroyItem@Overr...
Android滚动页面位置指示器：CircleIndicator
weixin_34040079的博客
08-03 260
Android滚动页面位置指示器：CircleIndicatorCircleIndicator是github上的一个开源的用于页面滚动时候的位置指示器，指示当前页面在总的页面中的位置和前后位置关系，github上的项目主页是：https://github.com/ongakuer/CircleIndicator其效果如图所示：可以看到，选中和未被选中时候的球的大小并不相同，且颜色在Circ...
Android关于ViewPager你所不知道的一些优化
最新发布
datian1234的博客
04-22 1046
提到ViewPager想必各位同学一点都不陌生，它是Android中最常用的组件之一，一般配合Fragment一起使用。网上关于它的基本使用和常规优化方式也有很多，在这里我就不一一赘述，而是直接进入这篇文章的主题--**ViewPager一些新的优化方式**。
Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
modabobo
12-29 431
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/42160391，本文出自：【张鸿洋的博客】 我参加了博客之星评选，如果你喜欢我的博客，求投票~~http://vote.blog.csdn.net/blogstar2014/selection?username=lmj623565791#content 1、概述 哈，今天给大家带...
Android 左右滑动小圆点(ViewPager)布局有两种方法
彬sir哥的博客
11-06 2191
第一种方法： 第二种方法： 一、测试如下： 二、准备工作 1.在drawable创建dot.xml,设置小圆点 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true"> <shape android:shape
ViewPager的下方小圆点指示器（使用LinearLayout实现）
Lancerr的博客
04-30 3752
我们在平时使用ViewPager肯定都看到过他的下方使用一连串的小圆点一样的指示器就像这图一样，今天我们就是用LinearLayout来实现这个指示器吧(直接上代码了)//可以通过在LinearLayout中填充自己画的小圆点，然后随着ViewPager的移动切换背景颜色实现 //1.填充小圆点 private void getcircle(){ Vie...
ViewPagerDemo:viewpager轮播图 带示意圆点 图片数量动态
05-15
【ViewPagerDemo】是一个基于Java开发的项目，主要展示了如何在Android应用中实现一个带有指示圆点的图片轮播功能。ViewPager是Android SDK中的一个组件，它允许用户在多个视图间进行平滑滚动，通常用于实现类似轮播...
app引导页的viewPager带圆点指示器
07-08
在Android应用开发中，"app引导页的viewPager带圆点指示器"是一个常见的功能，用于初次使用应用时向用户展示一系列特色功能或操作指南。ViewPager是Android SDK提供的一种滑动视图容器，它可以实现页面间的左右滑动...
Android自定义ViewPager指示器
09-01
【Android自定义ViewPager指示器详解】 在Android应用开发中，ViewPager是一种常见的滑动视图组件，用于展示多个页面，常用于实现类似轮播图或标签页的效果。然而，原生的ViewPager并不自带指示器，而指示器对于...
ViewPagerIndicator:viewPager指示器
05-25
ViewPagerIndicator 是一个专门为 Android 应用程序设计的库，它为 ViewPager 提供了各种样式的指示器。ViewPager 是 Android SDK 中的一个组件，用于展示多个页面并允许用户通过滑动来切换这些页面。...
android 自定义酷炫ViewPager切换效果带页面弹性指示器动画
09-02
在本教程中，我们将深入探讨如何创建一个自定义的ViewPager，使其具有酷炫的页面切换动画以及带有弹性效果的页面指示器。 首先，我们需要理解ViewPager的基本工作原理。ViewPager是Android Support Library的一部分...
Android自定义横条指示器,【Android】顶部Tab指示器(自定义LinearLayout+Viewpager)
weixin_42131261的博客
05-25 773
2016-11-13 第一篇 ViewPagerIndicator根据鸿洋的视频编写，然后自己添加了可以滑动的图形方式，直线或者三角形。还添加了可以在xml中自定义样式的功能。最后效果演示图ChangeablePagerIndicator类(顶部的指示器类)重写父类主要的方法:1.dispatchDraw(Canvas canvas) 绘制直线或者三角形2.onFinishInflate()...
Android 快速实现 ViewPager 滑动页卡切换（可用作整个 app上导航）
钟钟的专栏
03-10 5690
我记得在前面，我写了一篇Android 微信6.1 tab栏图标和字体颜色渐变的实现，如果大家仅仅认为这篇文章的功能只是模仿微信颜色渐变效果，那就大错特错了！认真阅读了这篇文章的朋友，肯定知道，这里面代码可用作 app 通用的底部栏导航，通过它能快速的实现类似微信6.0版本以底部导航的整体框架，并且在 MainActivity 中需要编写的代码非常简洁。如果有兴趣的朋友可以去看看。 效果：
Android 实现带指示器的自动轮播式ViewPager
蓝天白云梦的csdn博客
10-04 8740
前言最近在做项目的时候，有个需求就是实现自动轮播式的ViewPager，最直观的例子就是知乎日报顶部的ViewPager，它内部有着好几个子view，每个一段时间便自动滑动到下一个item view，而底部的指示器也随之跟着改变。抱着学习和分享的目的，笔者把轮播式ViewPager写成了一个独立的控件，以方便以后的使用。
Android 自定义View之ViewPagerIndicator
crazyZhangxl的博客
11-07 1089
Android 自定义View实现滑动指示器 1. 使用文本+线条View+setLayoutParams()布局方式实现 2. 线性布局实现少数条目 3. 继承自ScrollView实现tab滑动，满足指示器 文本调整 三角指示器等综合需求 4.Todo 仿微博实现蚯蚓滑动效果
安卓实训之——页面滑动ViewPager
pamguangyou的专栏
04-24 390
制作滑动页面 第一步： 新建四个布局文件：page1.xml;page2.xml;page3.xml;并在每个xml中添加 pager1.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" an
Android 推荐几款好用的开源作品（一）之ViewPager指示器
热门推荐
小铭同学的专栏
07-10 1万+
今天介绍的这款ViewPager指示器叫做，MagicIndicator，一款高扩展性ViewPager指示器，曾经用过ViewPagerIndicator作为指示器，但是后来需求中需要定制，扩展不方便，所以就放弃使用了，然而这款MagicIndicator，扩展极其方便，而且内置指示器也非常多，有图有真相：
Android滑动页面ViewPager的详细总结
wenzhi的博客
12-12 1万+
ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它，我们可以做很多事情，从最简单的导航，到页面菜单等等。
Android studio中如何添加圆点指示器
04-17
在Android Studio中添加圆点指示器可以通过ViewPager和TabLayout来实现。下面是具体的步骤： 1. 首先，在你的布局文件中添加ViewPager和TabLayout组件。例如： ```xml <androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> <com.google.android.material.tabs.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:tabIndicatorColor="@color/colorAccent" app:tabIndicatorHeight="4dp" app:tabMode="scrollable" app:tabTextColor="@android:color/white" /> ``` 2. 在你的Activity或Fragment中，获取ViewPager和TabLayout的实例，并设置适配器。例如： ```java ViewPager viewPager = findViewById(R.id.viewPager); TabLayout tabLayout = findViewById(R.id.tabLayout); // 创建适配器 PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager()); // 设置适配器 viewPager.setAdapter(pagerAdapter); // 将TabLayout与ViewPager关联起来 tabLayout.setupWithViewPager(viewPager); ``` 3. 创建PagerAdapter类，继承自FragmentPagerAdapter或FragmentStatePagerAdapter，并实现必要的方法。例如： ```java public class PagerAdapter extends FragmentPagerAdapter { private static final int NUM_PAGES = 3; // 页面数量 public PagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { // 返回对应位置的Fragment实例 return YourFragment.newInstance(position); } @Override public int getCount() { // 返回页面数量 return NUM_PAGES; } @Override public CharSequence getPageTitle(int position) { // 返回对应位置的页面标题 return "Page " + (position + 1); } } ``` 4. 创建你的Fragment类，并在其中设置对应页面的布局和逻辑。例如： ```java public class YourFragment extends Fragment { private static final String ARG_PAGE = "page"; private int mPage; public static YourFragment newInstance(int page) { YourFragment fragment = new YourFragment(); Bundle args = new Bundle(); args.putInt(ARG_PAGE, page); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { mPage = getArguments().getInt(ARG_PAGE); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // 加载对应页面的布局文件 View view = inflater.inflate(R.layout.fragment_your, container, false); // 设置页面逻辑 return view; } } ``` 这样，你就可以在Android Studio中添加圆点指示器了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值