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

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

主要实现一个底部的导航栏，一般软件底部都有导航栏，包含3-5项，点击时切换不同的页面。像微信，不止可以点，还可以滑动，而且滑动时导航栏图标还会有不同的变化，仿一下这个效果。图标颜色的的渐变，不可能有那么多张颜色不同的图片。不知道微信用的什么原理，这里用自定义View来实现一下（之前说过安卓很多控件的基类都是View，那定义一个类来继承View，实现想要的效果，就是自定义控件）。

注：后来做好截的图。

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

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);
	}

}

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

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);
	}

}

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

<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>

预览可能显示不出效果（一般可以，复杂就不行了），运行，“你好，世界！”显示在屏幕下方白色区域内。怎么不在中间，强迫症，修改x，y坐标canvas.drawText("你好，世界！", getWidth()/2-50*3, getHeight()/2, paint)，宽度/2-3个字，高度/2（其实不准确），查看效果。

注：屏幕下方显示你好，世界！，不同于TextView。

日积月累——2016/10/24

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

猜你喜欢