- 浏览: 11547 次
- 性别:
- 来自: 邯郸市
文章分类
最新评论
想要的图标呢?怎么弄上去。从网上找了几个图标,并做成了字体(为什么做成字体,做成字体,相当于每个图标对应一个字符,如"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 590有时候图片很长,预览只是其一部分,有个类似按钮 ... -
19、GIF动图显示
2017-06-18 16:28 836有时候需要显示动图,可安卓有没有现成的控件,很 ... -
18、ListView显示图片
2017-06-18 16:23 516ListView显示 ... -
17、网络图片加载
2017-06-17 20:57 443如上节,有时候需要显示网络图片,QListVi ... -
15、ListView Item设置
2017-06-17 20:52 508当然想要ListView显示自定义的布局,显示 ... -
16、后台异步处理
2017-06-17 20:56 665大多时候,需要后台(异步)去执行一些费时操作。 ... -
14、自定义ListView
2017-06-13 22:05 719实现了显示的效果,接着来实现一些监听器(接口) ... -
13、自定义ListView
2017-06-13 21:58 545下拉刷新,上拉加载,很流行的啊,总的来说有两种 ... -
12、Dp Notes内容-列表(ListView使用)
2017-06-12 22:48 504完成了一些空架子,开始填内容,从列表开始吧(主 ... -
11、Dp Notes顶部导航栏
2017-06-10 23:05 499完成了底部导航栏,再来顶部导航栏(叫什么?菜单 ... -
10、Dp Notes底部导航栏
2017-06-10 11:48 549有卡顿的现象(可能模拟器原因),滑动时没有渐变 ... -
9、Dp Notes底部导航栏
2017-06-10 11:41 550将ViewPager和QEndBar结合起来, ... -
8、Dp Notes底部导航栏
2017-06-07 21:59 646实现了点击切换效果(只是图标状态变化),如何结 ... -
6、Dp Notes底部导航栏(自定义控件(View))
2017-06-05 21:40 627已经看到了安卓的一角,正式开始Dp Notes ... -
5、控件美化(drawable使用)
2017-06-04 11:19 663先前的回复页面虽然搭好了,功能也实现了,但页面 ... -
4、第一行代码
2017-06-03 09:12 657上节完成了回复功能的页面搭建,可是想要的功能并 ... -
3、基本控件
2017-06-03 09:01 545控件,很好 ... -
2、你好,世界
2017-06-01 20:23 494开发一个安 ... -
1、初衷
2017-05-31 21:18 393接触安卓已经有一段时间了,从一开始接触J2M ...
相关推荐
在Android应用开发中,底部导航栏(Bottom Navigation Bar)是一种常见的设计模式,它允许用户在应用的多个顶级视图之间快速切换。Fragment是Android SDK提供的一种组件,它可以帮助开发者构建可重用的UI块,非常...
在Android应用开发中,底部导航栏(Bottom Navigation Bar)是一种常见的用户界面元素,它允许用户在应用的几个主要功能之间快速切换。这个“Android底部导航栏实现”项目提供了一个简单的试用版本,适用于普通应用...
在Xamarin Android开发中,使用Fragment作为底部导航栏是一种常见的做法,这允许用户在不同的内容区域之间轻松切换,而无需加载新的Activity。Fragment是Android应用中的一个可重用的UI组件,可以在同一个Activity中...
在Android应用开发中,底部导航栏(Bottom Navigation)是一种常见的用户界面组件,它允许用户在应用的几个主要功能之间快速切换。本篇文章将详细介绍如何自定义实现底部导航栏,并特别关注中间凸起的设计效果。 ...
- 底部导航栏应确保在不同分辨率和屏幕尺寸的设备上都能正确显示,可以使用dp单位和百分比布局来实现响应式设计。 10. **无障碍功能**: - 为了满足无障碍需求,确保RadioButton具有合适的accessibility labels和...
在Android应用开发中,底部导航栏(BottomNavigationView)是一个常用组件,它允许用户在多个顶层导航之间进行切换,通常位于屏幕底部。这个控件在Android Design Support Library中提供,可以帮助开发者实现符合...
FragmentTabHost 和 FrameLayout 实现底部导航栏 FragmentTabHost 和 FrameLayout 是 Android 中实现底部导航栏的常见方法。下面将详细介绍如何使用 FragmentTabHost 和 FrameLayout 实现底部导航栏,并提供一个...
在Android应用开发中,创建一个具有底部导航栏的滑动界面是常见的需求,这能提供良好的用户体验,使得用户可以方便地在多个视图之间切换。本教程将详细讲解如何使用`ViewPager`和`Fragment`来实现这样的底部导航滑动...
在Android应用开发中,底部导航栏(Bottom Navigation)是一种常见的用户界面设计,它允许用户在应用的几个主要功能之间快速切换。实现底部导航栏中间菜单凸起效果是为用户提供更直观、更具吸引力的交互体验。下面...
"Android实现带有指示器的自定义底部导航栏" Android实现带有指示器的自定义底部导航栏是Android应用程序中常用的功能模块之一,本文将详细介绍如何实现带有指示器的自定义底部导航栏。 知识点1:自定义控件的...
在Android应用开发中,创建一个底部Tab导航栏是常见的需求,用于在多个页面间进行切换。`TabLayout`是Android Design Support Library中的一个重要组件,它提供了美观且易于使用的标签页功能,可以与`ViewPager`结合...
在Android程序开发中,底部导航栏(Bottom Navigation)是一种常见的用户界面元素,它允许用户在应用的几个主要功能之间快速切换。本文将详细介绍如何使用Fragment来实现底部导航栏,这对于构建多视图应用程序至关...
在Android应用开发中,"底部菜单中间部分凸起"通常是指设计一个底部导航栏(Bottom Navigation)时,其中的一个选项卡或按钮呈现出突出效果,以此吸引用户的注意力或者表示当前选中的状态。这样的设计常见于多页面...
"android实现底部导航栏" Android 实现底部导航栏是 Android 开发中的一种常见需求,通过使用 FragmentTabHost 和 Fragment 可以轻松实现底部导航栏的功能。本文将详细介绍如何使用 FragmentTabHost 和 Fragment ...
在Android应用开发中,创建一个具有底部导航栏的界面是常见的需求,这能提供良好的用户体验,使得用户可以轻松地在不同的功能模块之间切换。本文将详细介绍如何使用`TabLayout`和`ViewPager`来快速实现这样一个底部...
在Android应用开发中,BottomNavigationView(底部导航栏)是一个常用组件,用于在多个主功能间进行切换。在标准的Android SDK中,谷歌提供了预设的BottomNavigationView,但开发者经常需要根据设计需求对其进行...
Android 底部导航栏实现技术详解 Android 底部导航栏是 Android 应用程序中非常常见的组件,它提供了一个简洁的方式来帮助用户快速切换不同的页面。本文将详细介绍如何使用简单的几行代码来实现 Android 底部导航栏...
在Android应用开发中,底部导航(Bottom Navigation)是一种常见的用户界面设计模式,它允许用户在三个到五个主要功能之间快速切换。在这个场景中,我们将探讨如何利用`TabLayout`和`RadioGroup`来实现这样的功能。 ...