- 浏览: 10485 次
- 性别:
- 来自: 邯郸市
文章分类
最新评论
想要的图标呢?怎么弄上去。从网上找了几个图标,并做成了字体(为什么做成字体,做成字体,相当于每个图标对应一个字符,如"0"对应着主页的图标,在View里drawText(0),就把对应的图标画上去了(当然要为paint设置字体),方便改变大小,颜色等。怎么做成字体,图标字体(ICONFONT),百度一下),这里只是想介绍一种投机取巧的方法来实现图标显示和之后的颜色渐变。
字体做好了,QEndBarIcon.ttf,0-主页,1-列表,2-消息,3-用户,4-中间的新建,先是这么想的。工程/assets目录右键→新建folder取名fonts,将做好的QEndBarIcon.ttf复制到该目录下。为paint设置字体,构造函数里,new Paint()后:
防锯齿开,设置字体为QEndBarIcon.ttf。onDraw()里:
运行:
注:写字01423变成了字体中设置好的图标,可以理解。
为每个图标设定位置、颜色,定义几个变量:
构造函数初始化变量:
宽度、高度等不能在构造函数(构造函数执行时宽高为0),重载(Source→O/I Mothods)选择onMeasure()(View被部署到屏幕):
通过宽高计算出每个图标位置,存到变量,onDraw()中:
正常颜色画出每个图标,在相同位置画上选中后的图标,通过控制透明度实现单个图标选中效果。运行,是不是想要的效果呢?
为图标添加点击事件,重载onTouchEvent():
根据点击的位置,判断哪个图标该被选中,更改透明度,刷新,运行。
注:这是一个.gif动图,ctrl点击图片查看。
自定义View是否可以很好的理解,做出自己希望的,要多思考,理解它的用途。
字体做好了,QEndBarIcon.ttf,0-主页,1-列表,2-消息,3-用户,4-中间的新建,先是这么想的。工程/assets目录右键→新建folder取名fonts,将做好的QEndBarIcon.ttf复制到该目录下。为paint设置字体,构造函数里,new Paint()后:
paint.setAntiAlias(true); paint.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/QEndBarIcon.ttf"));
防锯齿开,设置字体为QEndBarIcon.ttf。onDraw()里:
canvas.drawText("01423", getWidth()/2-50*3, getHeight()/2, paint);
运行:
注:写字01423变成了字体中设置好的图标,可以理解。
为每个图标设定位置、颜色,定义几个变量:
private int widthAll,heightAll;//总宽度,总高度 private int touchX,touchY;//点击时记录X,Y private float positionItem[]={0,0,0,0,0};//图标位置 private int widthItem;//图标宽度 private int alphaItem[]={255,0,0,0};//图标透明度 private int colorNormal,colorSelect,colorBackground;//几个颜色值 private Paint paintIcon,paintOther;//画笔
构造函数初始化变量:
colorNormal=getResources().getColor(R.color.gray_dark);//获取颜色值 colorSelect=getResources().getColor(R.color.app_theme); colorBackground=getResources().getColor(R.color.white_dark); paintIcon=new Paint();//新建画笔 paintIcon.setAntiAlias(true);//防锯齿 paintIcon.setTextAlign(Align.CENTER);//字体居中 //设置字体 paintIcon.setTypeface(Typeface.createFromAsset(context.getAssets(), "fonts/Icon.ttf")); paintOther=new Paint(); paintOther.setAntiAlias(true);
宽度、高度等不能在构造函数(构造函数执行时宽高为0),重载(Source→O/I Mothods)选择onMeasure()(View被部署到屏幕):
widthAll=getWidth();//获取宽度 heightAll=getHeight();//获取高度 if(widthAll>0&&heightAll>0){ widthItem=(widthAll-getPaddingLeft()-getPaddingRight())/5;//计算Item宽度 positionItem[0]=widthItem/2+getPaddingLeft();//计算Item位置(X) positionItem[1]=widthItem/2*3+getPaddingLeft(); positionItem[2]=widthAll-widthItem/2*3-getPaddingRight(); positionItem[3]=widthAll-widthItem/2-getPaddingRight(); positionItem[4]=heightAll/3*2;//计算Item位置(Y) paintIcon.setTextSize(heightAll/2);//设置图标大小 if(widthItem>heightAll*2){ widthItem=heightAll*2;//限制图标宽度 } }
通过宽高计算出每个图标位置,存到变量,onDraw()中:
paintIcon.setColor(colorNormal);//设置正常颜色 paintIcon.setAlpha(255); canvas.drawText("0", positionItem[0], positionItem[4], paintIcon); canvas.drawText("1", positionItem[1], positionItem[4], paintIcon); canvas.drawText("2", positionItem[2], positionItem[4], paintIcon); canvas.drawText("3", positionItem[3], positionItem[4], paintIcon); paintIcon.setColor(colorSelect);//设置选中颜色 paintIcon.setAlpha(alphaItem[0]); canvas.drawText("0", positionItem[0], positionItem[4], paintIcon); paintIcon.setAlpha(alphaItem[1]); canvas.drawText("1", positionItem[1], positionItem[4], paintIcon); paintIcon.setAlpha(alphaItem[2]); canvas.drawText("2", positionItem[2], positionItem[4], paintIcon); paintIcon.setAlpha(alphaItem[3]); canvas.drawText("3", positionItem[3], positionItem[4], paintIcon); paintOther.setColor(colorSelect);//画中间的圆 canvas.drawCircle(widthAll/2, heightAll/2, widthItem/2, paintOther); paintIcon.setColor(colorBackground); canvas.drawText("4", widthAll/2, positionItem[4], paintIcon);//画中间图标
正常颜色画出每个图标,在相同位置画上选中后的图标,通过控制透明度实现单个图标选中效果。运行,是不是想要的效果呢?
为图标添加点击事件,重载onTouchEvent():
switch(event.getAction()){ case MotionEvent.ACTION_DOWN: touchX=(int)event.getX();//记录点击位置 touchY=(int)event.getY(); break; case MotionEvent.ACTION_UP: int tempX,tempY; tempX=(int)event.getX(); tempY=(int)event.getY();//未滑动,滑动小 if(Math.abs((tempX-touchX))<20&&Math.abs((tempY-touchY))<10){ if(Math.abs(touchX-positionItem[0])<widthItem/2){ alphaItem[0]=255; alphaItem[1]=0;//点击第一个图标 alphaItem[2]=0; alphaItem[3]=0; } else if(Math.abs(touchX-positionItem[1])<widthItem/2){ alphaItem[0]=0; alphaItem[1]=255; alphaItem[2]=0; alphaItem[3]=0; } else if(Math.abs(touchX-widthAll/2)<widthItem/2){ //点击中间图标 } else if(Math.abs(touchX-positionItem[2])<widthItem/2){ alphaItem[0]=0; alphaItem[1]=0; alphaItem[2]=255; alphaItem[3]=0; } else if(Math.abs(touchX-positionItem[3])<widthItem/2){ alphaItem[0]=0; alphaItem[1]=0; alphaItem[2]=0; alphaItem[3]=255; } } postInvalidate();//刷新 break; } return true;//由子类自己处理,并不向下传递
根据点击的位置,判断哪个图标该被选中,更改透明度,刷新,运行。
注:这是一个.gif动图,ctrl点击图片查看。
自定义View是否可以很好的理解,做出自己希望的,要多思考,理解它的用途。
活学巧用——2016/10/25
发表评论
-
20、长图的加载显示
2017-06-18 16:24 546有时候图片很长,预览只是其一部分,有个类似按钮 ... -
19、GIF动图显示
2017-06-18 16:28 754有时候需要显示动图,可安卓有没有现成的控件,很 ... -
18、ListView显示图片
2017-06-18 16:23 454ListView显示 ... -
17、网络图片加载
2017-06-17 20:57 397如上节,有时候需要显示网络图片,QListVi ... -
15、ListView Item设置
2017-06-17 20:52 450当然想要ListView显示自定义的布局,显示 ... -
16、后台异步处理
2017-06-17 20:56 625大多时候,需要后台(异步)去执行一些费时操作。 ... -
14、自定义ListView
2017-06-13 22:05 658实现了显示的效果,接着来实现一些监听器(接口) ... -
13、自定义ListView
2017-06-13 21:58 479下拉刷新,上拉加载,很流行的啊,总的来说有两种 ... -
12、Dp Notes内容-列表(ListView使用)
2017-06-12 22:48 467完成了一些空架子,开始填内容,从列表开始吧(主 ... -
11、Dp Notes顶部导航栏
2017-06-10 23:05 443完成了底部导航栏,再来顶部导航栏(叫什么?菜单 ... -
10、Dp Notes底部导航栏
2017-06-10 11:48 492有卡顿的现象(可能模拟器原因),滑动时没有渐变 ... -
9、Dp Notes底部导航栏
2017-06-10 11:41 495将ViewPager和QEndBar结合起来, ... -
8、Dp Notes底部导航栏
2017-06-07 21:59 590实现了点击切换效果(只是图标状态变化),如何结 ... -
6、Dp Notes底部导航栏(自定义控件(View))
2017-06-05 21:40 556已经看到了安卓的一角,正式开始Dp Notes ... -
5、控件美化(drawable使用)
2017-06-04 11:19 629先前的回复页面虽然搭好了,功能也实现了,但页面 ... -
4、第一行代码
2017-06-03 09:12 624上节完成了回复功能的页面搭建,可是想要的功能并 ... -
3、基本控件
2017-06-03 09:01 510控件,很好 ... -
2、你好,世界
2017-06-01 20:23 428开发一个安 ... -
1、初衷
2017-05-31 21:18 338接触安卓已经有一段时间了,从一开始接触J2M ...
相关推荐
3. 不同项目中S7-1200 与 S7-300 集成 DP 口之间 DP 主从通信,S7-1200 通过CM1243-5作为 DP 主站,S7-300 集成 DP 口作为 DP 从站,S7-1200 使用STEP7 V14 SP1编程组态,S7-300 使用 STEP 7 V5.6 编程组态;...
app底部导航栏 使用: 添加依赖 1.项目gradle添加一下配置: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } 2.module中的gradle添加依赖: dependencies { implementation '...
以前做项目大多用的radiobutton,今天用tablayout来做一个tab切换页面的的效果. 实现的效果就是类似QQ.微信的页面间(也就是Fragment间)的切换.如图: ... app:tabIndicatorHeight=0dp//将指示器去掉
不同项目中S7-1200 与 S7-300 集成 DP 口之间 DP 主从通信,S7-1200 通过CM1243-5作为 DP 主站,S7-300 集成 DP 口作为 DP 从站,双方 CPU 都采用 TIA V14 SP1 编程组态
S7-1500 如何使用 DP 通信模块作为 DP 从站连接到 S7-300 CPU(STEP7).pdf
Sandisk SD7DP24F-4G Datasheet,eMCP 4GB Flash+4Gb DDR。高清完整版
区间DP概率DP树形DP插头DP,每种DP一道典型例题,有助于初学者
S7-1200 PROFIBUS DP 通信!Siemens 西门子PLC 1200系列!
VESA官网的DP1.4标准协议
通过试验验证Siemens S7-300/400之间,以及PLC与分布式从站之间的Profibus DP通讯方式,进一步掌握Profibus DP通讯协议的特点以及Siemens产品中适用于Profibus通信的CPU及CP模块的特性。
BubbleTabBar BubbleTabBar是底部导航栏,带有可自定义的气泡(如标签)用法 < ...
TIA Portal V13中使用S7-300 ProfibusDP 通信入门!!!!
得宝 迪普乐DP-F850 DP-F650 DP-F620 DP-F550 DP-F520 制版印刷一体机 维修手册
蓝牙A2DP最新协议版本,A2DP_v1.3.2.pdf;蓝牙A2DP最新协议版本,A2DP_v1.3.2.pdf;蓝牙A2DP最新协议版本,A2DP_v1.3.2.pdf;蓝牙A2DP最新协议版本,A2DP_v1.3.2.pdf;蓝牙A2DP最新协议版本,A2DP_v1.3.2.pdf;蓝牙A...
3. 不同项目中S7-1200 与 S7-300 CP342-5 之间 DP 主从通信,S7-1200 通过CM1243-5作为 DP 主站,CP342-5作为 DP 从站,S7-1200 使用STEP7 V14 SP1编程组态,S7-300 使用 STEP 7 V5.6 编程组态; 4. 同一项目中S7-...
西门子S7-300和伦茨i550的DP通讯DP通讯
S-1500使用DP通信模块合其它CPU的主从通信教程示例
DP83848中文数据手册 DP83848中文文档 全篇翻译无排版 DP83848C / I / VYB / YB PHYTER™QFP单端口10/100 Mb / s以太网物理层收发器 从–40°C到105°C的多个温度范围•IEEE 802.3 ENDEC,10BASE-T收发器和 • 低...
基于 TIA Portal 的 S7-300 集成 DP 口之间 的 DP 通信
7 DP软件的升级 34 7.1 DP软件支持的各版本间升级 35 7.2 DP软件升级方法 35 8 DP软件的迁移 37 8.1 Client (Agent) 端的迁移 37 8.2 Server (Cell Manager) 端的迁移 38 9 HP对DP软件的技术支持 38 9.1 DP软件技术...