仿天猫安卓客户端Banner的Indicator

今天来说说类似天猫的Banner中的小圆点是怎么做的(图中绿圈部分)

在学习自定义控件之前,我用的是非常二的方法,直接在布局中放入多个ImageView,然后代码中根据Pager切换来改变图片。这种方法虽然可以在切换完成后正确显示小圆点,但是却做不到如下图中的切换中的状态显示:

今天学到了自定义控件,正好可以把这个坑填上。

说一下思路:

在ViewPager翻动的时候,会调用

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

其中positionOffset为翻动的百分比,所以只要将这个参数传入自定义控件,就可以计算出实心圆点的坐标

实战:

PagerIndicator.java

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class PagerIndicator extends View {
	// 空心圆半径
	private int RADIUS = 10;
	// 空心圆画笔
	private Paint mBgPaint;
	// 实心圆画笔(当前页)
	private Paint mPaint;
	// 圆点个数,默认为5,设计布局时可以预览
	private int mCount = 5;
	// 当前实心圆的位置
	private int mPosition;
	// 偏移量(百分比)
	private float mOffset;
	// 第一个空心圆的圆心坐标
	private int startY;
	private int startX;

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		// 画出空心的小圆点
		for (int i = 0; i < mCount; i++) {
			canvas.drawCircle(startX + i * 3 * RADIUS, startY, RADIUS, mBgPaint);
		}

		// 画出指示当前位置的原点,由于高度固定,所以只计算了X坐标
		float x = startX + (mPosition + mOffset) * 3 * RADIUS;
		canvas.drawCircle(x, startY, RADIUS - 1, mPaint);
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		// 获取第一个空心圆的圆心坐标
		startX = w - 3 * RADIUS * mCount;
		startY = h / 2;
		super.onSizeChanged(w, h, oldw, oldh);
	}

	// 设置圆个数
	public void setCount(int count) {
		mCount = count;
	}

	// 获取偏移量并重绘indicator
	public void onPageScrolled(int position, float offset) {
		mPosition = position;
		mOffset = offset;
		invalidate();
	}

	// 创建带AttributeSet参数的构造方法使控件可以直接拖动到布局中并预览
	public PagerIndicator(Context context, AttributeSet attrs) {
		super(context, attrs);
		initPaint();
	}

	// 初始化画笔
	private void initPaint() {
		// 空心圆画笔
		mBgPaint = new Paint();
		mBgPaint.setColor(Color.GRAY);
		mBgPaint.setAntiAlias(true);
		mBgPaint.setStyle(Paint.Style.STROKE);
		mBgPaint.setStrokeWidth(2);
		// 实心圆画笔
		mPaint = new Paint();
		mPaint.setColor(Color.rgb(197, 135, 87));
		mPaint.setAntiAlias(true);

	}

}

布局的设置:

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp" >

    <android.support.v4.view.ViewPager
        android:id="@+id/banner_pager"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#C0FFFF" />

    <这里改成你自己的包名.PagerIndicator
        android:id="@+id/pagerIndicate1"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="#C0C0C0"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true" />

</RelativeLayout>

在使用到的地方:

初始化的方法,反正只要比使用早调用到就行

private void initPagerIndicator() {
	mPagerIndicator = (PagerIndicator) mLayout.findViewById(R.id.pagerIndicate1);
	//此处直接设置为7,有需求可自己更改成其他值
	mPagerIndicator.setCount(7);
}

设置ViewPager监听器:

mPager.setOnPageChangeListener(new OnPageChangeListener() {

	@Override
	public void onPageSelected(int arg0) {
	}

	@Override
	public void onPageScrolled(int position, float offset, int arg2) {
		//重点在这里,调用控件内的方法
		mPagerIndicator.onPageScrolled(position , offset);
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
	}
});

完成的效果:

颜色选得比较随意,觉得难看自己换掉吧,毕竟我没有美工QAQ。。。

最后吐槽下,原来CSDN有私信啊。。。之前完全就没注意过。。。所以一些信息现在才看到也就不回了,毕竟都过去好久了,抱歉啦。。。。。。。。。。。

仿天猫安卓客户端Banner的Indicator

时间: 2024-10-07 11:59:33

仿天猫安卓客户端Banner的Indicator的相关文章

Android应用源码仿暴风影音安卓客户端源码

Android应用源码仿暴风影音安卓客户端源码 本项目是一个模仿暴风影音的UI项目源码,仿照的界面有菜单页,主页,分类页等,项目内的所有数据都使用的本地模拟数据,仿照度一般在大分辨设备上布局显示会有问题,480x800的分辨率应该正合适,默认编译版本4.2.2编码GBK,注释不多,需要的朋友可以下载看一下. 下载地址:http://www.devstore.cn/code/info/133.html 运行截图:     版权声明:本文为博主原创文章,未经博主允许不得转载.

基于jquery仿天猫分类导航banner切换

分享一款基于jquery天猫分类导航banner切换.这是一款仿最新天猫商品分类导航控制banner图片切换代码.效果图如下: 在线预览   源码下载 部分代码: <div class="yHeader"> <div class="yNavIndex"> <div class="pullDown"> <h2 class="pullDownTitle"> 所有商品分类 </h

仿暴风影音安卓客户端应用源码

本项目是一个模仿暴风影音的UI项目源码,仿照的界面有菜单页,主页,分类页等,项目内的所有数据都使用的本地模拟数据,仿照度一般在大分辨设备上布局显示会有问题,480x800的分辨率应该正合适,默认编译版本4.2.2编码GBK,注释不多,需要的朋友可以下载看一下. 源码下载: http://code.662p.com/view/8949.html public class MainActivity extends TabActivity { private SlideMenu slideMenu;

XMPP(二)-基于asmack+openfire的安卓客户端(仿QQ)的介绍以及个人心得

关于XMPP第一篇-openfire的搭建写完后,就一直在赶本篇所要介绍的这个基于asmack+openfire的安卓客户端,费了不少精力,因为有不少同学在还在焦急的等待着(自恋了呵呵),所以紧赶慢赶,现在算做出来了一个比较初级的版本,很多功能还不完善,不过先放出来,供大家一起参考研究,提出问题,共同学习,当然,该项目本人是会不断完善,增加新功能,甚至到后来的群组,有兴趣的话,大家可以继续关注^-^ 好了,接下来介绍下本项目实现的功能吧: 1.注册: 2.登录: 3.依昵称查找人员: 4.添加好

#仿知乎安卓客户端滑动删除撤销ListView

标签(空格分隔): Android 新版的知乎安卓客户端有一个有趣的功能,就是在一个item里,向右滑动时整个item会越来越透明,滑动到一半时,整个item就不见了,放开手指就是删除,删除后还可以撤销,第一次看见这个功能觉得很有意思,用了几天业余时间,我仿造里一个,效果如下: 那下面就来想想看怎么实现的,大概可以先分解为三部分: 手指滑动删除item 删除item后的撤销功能 滑动时的效果处理 提醒一下如果你对scroller不熟悉,可以先看一下scroller实现原理 先来看最主要的类Cus

高仿拉手网-客户端+服务器完整教程

本套课程完整再现了拉手网的开发过程,从手机客户端和服务端接口的实现,真实还原项目开发的全过程,真正体现在开发过程中可能遇到的各种问题. 在本套课程中,讲师将和大家以及分享多年来在开发项目中的经验与教训,为大家将来的工作提供一个借鉴,在项目中用到的框架和组件都是经过一次次 的项目实践和教训总结出相对比较优秀的组合,并且在本次课程中会一一的讲述使用方法和注意事项,本套课程将成为大家在学习开发的过程中不可缺少 的一把利器,尽早的体验真实的开发过程,排除开发过程中的障碍. 因为本套课程的目标是高仿经典项

CSS3实战开发:仿天猫首页图片展示动画特效实战开发

各位网友大家好,我是陌上花会开,人称陌陌.今天我带领大家开发一个仿天猫首页图片展示动画特效的案例.一如往常,我既不提供源码给大家,也不提供Demo给大家,只是希望大家能跟着我的讲解,然后将代码一步步复制到本地,本人可以保证,页面上的代码复制到本地,绝对百分百运行,且得到与陌陌一样的运行效果.我这么做只为激起大伙的动手能力,望大家能明白我的用心. 好了,不废话了,直接本篇的实战开发吧. 我们看一下我们今天要做的实战案例效果图: 1. 鼠标划过前: 2. 鼠标划过右侧的图片时: 可能大伙看这个静态截

高仿淘宝客户端

高仿淘宝客户端 仿淘宝安卓客户端的demo源码,主要实现了:商品的基本展示.宝贝详情,图片展示的放大缩小功能.界面之间切换的动画.购物车多项删除.弹窗的动画效果.首页广告的轮播效果.获得本机具有传感器的列表.listView的上拉刷新,下拉加载功能.二维码扫描.刮刮乐等功能和效果. 下载地址:http://www.devstore.cn/code/info/925.html 运行截图:    

Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签

之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻客户端Tab标签的功能,ActionBarSherlock是在3.0以下的机器支持ActionBar的功能,有兴趣的可以看看开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端,今天用到的是JakeWharton的另一开源控件ViewPageIndicator,ViewPager想必大家都知道,Indicator指示器的意思,所以ViewPageIndica