6、Dp Notes底部导航栏(自定义控件(View))

最新推荐文章于 2018-01-22 09:58:36 发布

zdphpn

最新推荐文章于 2018-01-22 09:58:36 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

分类专栏： Code/Android/Dp Notes 文章标签：安卓学习总结安卓开发安卓实例 Dp Notes

本文链接：https://blog.youkuaiyun.com/zdphpn/article/details/84897249

Code/Android/Dp Notes 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在安卓应用中自定义底部导航栏，并通过创建自定义View实现图标颜色渐变效果，提供了一种实现微信风格导航栏的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[size=medium] 已经看到了安卓的一角，正式开始Dp Notes开发工作。安卓开发一般是先有美工设计设计好界面，按照界面再布局（没正式开发过，不太清楚）。没有美工（美学，什么？），直接按自己想的来好了。

主要实现一个底部的导航栏，一般软件底部都有导航栏，包含3-5项，点击时切换不同的页面。像微信，不止可以点，还可以滑动，而且滑动时导航栏图标还会有不同的变化，仿一下这个效果。图标颜色的的渐变，不可能有那么多张颜色不同的图片。不知道微信用的什么原理，这里用自定义View来实现一下（之前说过安卓很多控件的基类都是View，那定义一个类来继承View，实现想要的效果，就是自定义控件）。[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2458/812e4922-2020-368b-a6ce-2d43d5f0f789.jpg[/img]
[color=gray][size=medium]注：后来做好截的图。[/size][/color]

[size=medium] 工程名，右键新建一个包，包名右键新建一个类，名字QEndBar，Superclass选择View，确定。软件新建了一个QEndBar.java文件并已打开，但提示有错误，鼠标悬停，是因为没有一个构造方法（类初始化会调用，可以做一些变量的初始化），改正提示选择第二个（可以在xml中引用），加入构造方法。再引入一个重要的方法菜单Source→O/I Mothods→onDraw(Canvas)：[/size]


public class QEndBar extends View {

	public QEndBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
	}

}

[size=medium] onDraw(Canvas canvas)，名字看就是画，View呈现在屏幕上的就是这里画上去的。Canvas就相当于一个画布（屏幕的一块区域）。可以调用Canvas的drawXXX()，绘制各种，如canvas.drawText("你好，世界！", 0, 0, paint);参数：文字，x坐标，y坐标，Paint（一个画笔，可以设置不同的字体，颜色，大小等）。定义一个Paint对象Paint paint，构造函数里初始化paint=new Paint()：[/size]


public class QEndBar extends View {

	private Paint paint;

	public QEndBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		paint=new Paint();
		paint.setTextSize(50);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		canvas.drawText("你好，世界！", 50, 50, paint);
		super.onDraw(canvas);
	}

}

[size=medium] 类定义好了，在xml中引用，layout/activity_main.xml，引入，像普通控件一样（但要加入具体路径（包名））如：com.zdphpn.dpnotes.qview.QEndBar：[/size]


<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000" >

    <com.zdphpn.dpnotes.qview.QEndBar
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="#FFFFFF" />


</RelativeLayout>

[size=medium] 预览可能显示不出效果（一般可以，复杂就不行了），运行，“你好，世界！”显示在屏幕下方白色区域内。怎么不在中间，强迫症，修改x，y坐标canvas.drawText("你好，世界！", getWidth()/2-50*3, getHeight()/2, paint)，宽度/2-3个字，高度/2（其实不准确），查看效果。[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/2460/b2835c4e-1a6d-38c8-b851-29324ddb52f5.jpg[/img]
[color=gray][size=medium]注：屏幕下方显示你好，世界！，不同于TextView。[/size][/color]

[align=right][size=medium]日积月累——2016/10/24[/size][/align]