台历控件开发详解0 - jquerymobile-5 back button跟footer

当前位置: 编程技术>移动开发

本页文章导读:

▪台历控件开发详解0 日历控件开发详解0从今天开始，我们将一步步学习如何实现一个Android的日历控件，今天是第一天！一、准备工作之配置参数制作一个日历控件，我们首先要配置一些参数 1.尺寸 dimension.xml .........

▪ jquerymobile-5 back button跟footer jquerymobile-5 back button和footer使用jquerymobile的时候，我们新进入一个页面可能需要添加一个返回按钮，用户返回到上一个页面，我们可以使用上一篇文章中的方法，在Header中添加返回上一个页面.........

▪ 年历控件开发详解1 日历控件开发详解1在前一篇日志中我们已经做好了日历控件的准备工作，今天我们将继续完成这个日历控件。三、日历元素之Border 在Border类中，我们主要完成日历边框的绘制 package com.xys.myc.........

[1]台历控件开发详解0

来源: 互联网发布时间: 2014-02-18

日历控件开发详解0

从今天开始，我们将一步步学习如何实现一个Android的日历控件，今天是第一天！

一、准备工作之配置参数

制作一个日历控件，我们首先要配置一些参数

1.尺寸

dimension.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <!-- 日历边框间距 -->
   <dimen name="margin">10dp</dimen>
   <dimen name="logo_size">48dp</dimen>
   
   <!-- 日历边框 -->
   <dimen name="border_margin">10dp</dimen>
   
   <!-- 日历周名 -->
   <dimen name="weekname_size">18dp</dimen>
   <!-- 日历周名之间间距 -->
   <dimen name="weekname_margin">5dp</dimen>  
   
   <!-- 日期 -->
   <dimen name="day_size">15dp</dimen>
   <dimen name="day_top_offset">11dp</dimen>
   <dimen name="current_day_size">15dp</dimen>  
</resources>

2.颜色

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="calendar_background">#000000</color> 
    <color name="recordremind_background">#FFFFFF</color> 
    

    <color name="border_color">#FFFFFF</color>
    <color name="weekname_color">#FFFFFF</color>
    <color name="day_color">#FFFFFF</color>
    <color name="inner_grid_color">#FFFFFF</color>
    <color name="prev_next_month_day_color">#999999</color>
    
    <color name="text_color">#FFFF00</color>
    <color name="recordremindtext_color">#000000</color>
    
    <color name="current_day_color">#FF0000</color>
    <color name="today_background_color">#FF0000</color>
    <color name="today_color">#FFFFFF</color>
    <color name="weekendColor">#FF0000</color>
    <color name="sunday_saturday_prev_next_month_day_color">#990000</color>
</resources>

二、准备工作之架构设计

1.一个日历控件的绘制可以分解为几个部分，如边框的绘制，周名称的绘制，中间Grid的绘制等。

因此，每种日历的元素都需要能实现onDraw方法，所以我们新建一个interface

package com.xys.mycalender.interfaces;

import android.graphics.Canvas;
/*
 * 提供日历元素绘制图形的方法onDraw，使每一个实现该接口的日历元素类都有一个draw方法
 */
public interface CalendarElement {
	public void onDraw(Canvas canvas);
}

2.然后，我们新建一个Base类去实现这个接口，同时在Base类中去获取这些公共参数的值。

package com.xys.mycalender.base;

import android.app.Activity;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

import com.xys.mycalender.R;
import com.xys.mycalender.interfaces.CalendarElement;
/*
 * 从资源文件中获取该项目的一些公共数据，并使其子类实现onDraw方法
 */
public class CalendarBase implements CalendarElement{

	protected Activity activity;
	protected View view;
	//画笔
	protected Paint paint=new Paint();
	//边距
	protected float boderMargin;
	//周名称边距
	protected float weekNameMargin;
	//周名称大小
	protected float weekNameSize;
	//周末名称颜色
	protected int weekendColor;
	
	public CalendarBase(Activity activity,View view){
		this.activity=activity;
		this.view=view;
		//从资源文件中获取公共数据
		boderMargin=activity.getResources().getDimension(R.dimen.border_margin);
		weekNameMargin=activity.getResources().getDimension(R.dimen.weekname_margin);
		weekNameSize=activity.getResources().getDimension(R.dimen.weekname_size);
		weekendColor=activity.getResources().getColor(R.color.weekendColor);
	}
	
	public void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		
	}

}

到此为止，我们的准备工作就结束了，此时，我们已经配置好了参数，并为每种日历元素实现了Base类，接下来，就是具体绘制每种日历元素了。

[2] jquerymobile-5 back button跟footer

来源: 互联网发布时间: 2014-02-18

jquerymobile-5 back button和footer

使用jquerymobile的时候，我们新进入一个页面可能需要添加一个返回按钮，用户返回到上一个页面，我们可以使用上一篇文章中的方法，在Header中添加返回上一个页面的链接，但是这样有一点不好，如果这个页面有多个入口（即可以从多个页面跳入本页面），那么我们这个返回就得做判断了。在这种情况下我们可以使用jquerymobile的data-add-back-btn属性，并将其值设为true。这样jquerymobile会自动为我们记住该返回哪个页面。下面看一个例子代码：

<!DOCTYPE html>
<html>
<head>
<title>Back Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>

<body>
<div data-role="page">
	<div data-role="header"><h1>My Header</h1></div>	
	<div data-role="content">
	<p>
		<a href="#subpage">Go to the sub page...</a>
	</p>
	</div>		
</div>

<div data-role="page" id="subpage" data-add-back-btn="true">
	<div data-role="header"><h1>Sub Page</h1></div>	
	<div data-role="content">
	<p>
		<a href="" data-rel="back">Go back...</a>
	</p>
	</div>		
</div>
</body>
</html>

我们做手机应用的时候，一般会在下面添加一些按钮，这时候我们就可以在footer上添加按钮了。这里我们不使用真正的按钮，而是使用CSS来将A标签，做成按钮一下，在上面的程序中添加如下的代码：

<div data-role="footer" >
  <a href="/blog_article/credits.html">Credits</a>
  <a href="/blog_article/contact.html">Contact</a>
</div>

会有如下的效果：

这里使用了一个ui-bar的样式，这个会使a标签增强为按钮的样式。

本人也刚开始学习，如果哪里写错了，还请指出。

[3] 年历控件开发详解1

来源: 互联网发布时间: 2014-02-18

日历控件开发详解1

在前一篇日志中我们已经做好了日历控件的准备工作，今天我们将继续完成这个日历控件。

三、日历元素之Border

在Border类中，我们主要完成日历边框的绘制

package com.xys.mycalender.element;

import android.app.Activity;
import android.graphics.Canvas;
import android.view.View;

import com.xys.mycalender.R;
import com.xys.mycalender.base.CalendarBase;
/*
 * 绘制日历边框
 */
public class Border extends CalendarBase {
	
	//日历边框的位置大小
	float left;
	float right;
	float top;
	float bottom;
	
	public Border(Activity activity, View view) {
		super(activity, view);
		// 获取日历边框的颜色
		paint.setColor(activity.getResources().getColor(R.color.border_color));
	}

	@Override
	public void onDraw(Canvas canvas) {
		left=boderMargin;
		right=view.getMeasuredWidth()-boderMargin;
		top=boderMargin;
		bottom=view.getMeasuredHeight()-boderMargin;
		
		// 绘制日历边框
		canvas.drawLine(left, top, right, top, paint);
		canvas.drawLine(left, top, left, bottom, paint);
		canvas.drawLine(left, bottom, right, bottom, paint);
		canvas.drawLine(right, top, right, bottom, paint);
	}
	
	
}

四、日历元素之Week名称

在Week类中我们主要完成一周名称的绘制

package com.xys.mycalender.element;

import android.app.Activity;
import android.graphics.Canvas;
import android.view.View;

import com.xys.mycalender.R;
import com.xys.mycalender.base.CalendarBase;
/*
 * 绘制一周的名称
 */
public class Week extends CalendarBase {
	//参数
	private float left;
	private float top;
	private float eachWeekWidth;
	private float eachWeekHeight;
	
	//一周的名称
	private String[] weeknames;
	//一周名称的颜色1-5
	private int weekdayColor;
	
	public Week(Activity activity, View view) {
		super(activity, view);
		//获取一周名称颜色1-5
		weekdayColor=activity.getResources().getColor(R.color.weekname_color);
		//获取一周名称
		weeknames=activity.getResources().getStringArray(R.array.week_name);
		//设置一周名称大小
		paint.setTextSize(weekNameSize);
		paint.setFakeBoldText(true);
	}

	@Override
	public void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		left=boderMargin;
		top=boderMargin;
		eachWeekWidth=(view.getMeasuredWidth()-boderMargin*2)/7;
		eachWeekHeight=eachWeekWidth;
		for (int i = 0; i < weeknames.length; i++) {
			//周六日
			if (i==0||i==weeknames.length-1) {
				paint.setColor(weekendColor);
			}else {
				//平日
				paint.setColor(weekdayColor);
			}
			//文字绘制在每一格的中间 measureText返回文字的长度
			left=boderMargin+eachWeekWidth*i+(eachWeekWidth-paint.measureText(weeknames[i]))/2;
			top=boderMargin+weekNameMargin+paint.getTextSize();
			//开始绘制
			canvas.drawText(weeknames[i], left, top, paint);
		}
	}
	
}

绘制一周名称的关键在于要将文字绘制在格子的中间，这点的实现见程序倒数2、3行。