【Android】自己定义控件——仿天猫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。。。
chenbw1
2014/5/8
欢迎转载,转载请注明出处,谢谢
最后吐槽下,原来CSDN有私信啊。。。之前全然就没注意过。。。所以一些信息如今才看到也就不回了,毕竟都过去好久了,抱歉啦。。。。。。。。。。。
【Android】自己定义控件——仿天猫Indicator的更多相关文章
- Android自己定义控件系列五:自己定义绚丽水波纹效果
尊重原创!转载请注明出处:http://blog.csdn.net/cyp331203/article/details/41114551 今天我们来利用Android自己定义控件实现一个比較有趣的效果 ...
- Android自己定义控件:进度条的四种实现方式
前三种实现方式代码出自: http://stormzhang.com/openandroid/2013/11/15/android-custom-loading/ (源代码下载)http://down ...
- android 自己定义控件
Android自己定义View实现非常easy 继承View,重写构造函数.onDraw.(onMeasure)等函数. 假设自己定义的View须要有自己定义的属性.须要在values下建立attrs ...
- Android自己定义控件皮肤
Android自己定义控件皮肤 对于Android的自带控件,其外观仅仅能说中规中矩,而我们平时所示Android应用中,一个简单的button都做得十分美观.甚至于很多button在按下时的外观都有 ...
- android 自己定义控件属性(TypedArray以及attrs解释)
近期在捣鼓android 自己定义控件属性,学到了TypedArray以及attrs.在这当中看了一篇大神博客Android 深入理解Android中的自己定义属性.我就更加深入学习力一番.我就沿着这 ...
- Android自己定义控件之应用程序首页轮播图
如今基本上大多数的Android应用程序的首页都有轮播图.就是像下图这种(此图为转载的一篇博文中的图.拿来直接用了): 像这种组件我相信大多数的应用程序都会使用到,本文就是自己定义一个这种组件,能够动 ...
- Android自己定义控件(状态提示图表)
[工匠若水 http://blog.csdn.net/yanbober 转载烦请注明出处.尊重分享成果] 1 背景 前面分析那么多系统源代码了.也该暂停下来歇息一下,趁昨晚闲着看见一个有意思的需求就操 ...
- Android自己定义控件系列二:自己定义开关button(一)
这一次我们将会实现一个完整纯粹的自己定义控件,而不是像之前的组合控件一样.拿系统的控件来实现.计划分为三部分:自己定义控件的基本部分,自己定义控件的触摸事件的处理和自己定义控件的自己定义属性: 以下就 ...
- Android 自己定义控件开发入门(二)
上一次我们讲了一堆实现自己定义控件的理论基础.列举了View类一些能够重写的方法,我们对这些方法的重写是我们继承View类来派生自己定义控件的关键 我通过一个最简单的样例给大家展示了这一个过程,不管是 ...
随机推荐
- JAVA GUI学习 - 窗体背景图片设置方法:重写paintComponent(Graphics g)方法
public class BackgroundImage extends JFrame { public BackgroundImage() { this.setTitle("窗体背景图片设 ...
- [置顶] NGINX原理分析之SLAB分配机制
一.基础概述 如果使用伙伴系统分配和释放算法,不仅会造成大量的内存碎片,同时处理效率也比较低.SLAB是一种内存管理机制,其核心思想是预分配.SLAB是将空间按照SIZE对内存进行分类管理的,当申请一 ...
- iOS7支持九宫格
Beta4支持九宫格 还没试,等最终版把,现在的有很多bug还比较费电 看网上有人说虽然终于出来了但是还是不如百度搜狗等输入法方便 前几个月在weiphone上还有人问支不支持结果回帖的都说没戏 这算 ...
- <转> 30 个有关 Python 的小技巧
目录[+] 1.1 拆箱 1.2 拆箱变量交换 1.3 扩展拆箱(只兼容python3) 1.4 负数索引 1.5 切割列表 1.6 负数索引切割列表 1.7指定步长切割列表 1.8 负数步长切割列表 ...
- redis的管理工具
phpredisadmin工具 rdbtools管理工具 saltstack管理redis 通过codis完成redis管理 一:phpredisadmin工具:类似于mysqladmin管理mysq ...
- Linux 下github的使用
*初始化git仓库,使用git init命令 *添加文件到git仓库分两步: 1.使用git add filename :可分多次使用,添加多个文件到暂存区 2.使用git commit -m “ ...
- net core开发环境准备
net core开发环境准备 1.1 安装sdk和运行时 浏览器打开网址https://www.microsoft.com/net/download, 到.Net Core下载页面. 根据操作系统, ...
- springmvc+mybatis+redis(转)
最近在学习redis的使用方法,它的本地使用方法比较简单,只需要先启动Redis服务器,然后运行测试代码即可.但是现在我想要在网站上访问数据库的时候采用Redis缓存,问题就出来了.要么是缓存直接失效 ...
- mojo 默认use utf8;
my $endtime=strftime("%Y%m%d%H%M%S",localtime()); my $d=encode_utf8('验证'); if ($a3 =~/$d/) ...
- 基于visual Studio2013解决C语言竞赛题之0501挑选素数
题目