Android:设计日历应用的视图
Android: designing the view for a calendar app
我正在为 Android 编写日历应用程序。日历需要有一个类似于默认应用程序或 MS Outlook 的日期显示:一个网格显示一条线表示每个小时,约会显示为矩形。
这是来自 Google 图片的类似示例图片:
我从 Google 的 Android 开源项目下载了日历应用程序的源代码,看到他们将此显示实现为 simplay 使用的自定义视图 Canvas.drawRect () 来绘制矩形,然后他们在用户单击时实现了自己的命中测试,以查看单击了哪个约会。
我已经自己写了一些东西,效果很好,也不太复杂。
问题是我需要矩形内的不同文本行(主题、时间)链接到各种功能,我想知道我该怎么做。
当我画画的时候,我已经为每个约会创建了矩形。我在想我也可以为每段文本创建 Rects,将所有这些缓存在 ArrayList 中,然后对缓存的 rects 执行 histtest。我只是担心整个东西会太重...这听起来像是一个可靠的设计吗?
或者我应该完全避免自定义绘图并以编程方式生成和放置视图(也许是 TextViews?)我是一个 Android 新手,我不确定我的选择是什么...
感谢您的帮助!
好的,正如宣布的那样,这里有一些例子:
如果您只使用自定义视图,则必须保留对象列表并自己绘制它们,而不是自定义布局,您只需测量和布置子项。因为你可以只添加一个按钮,所以不需要使用命中测试或任何东西,因为如果你不搞砸视图将只接收 onClick()
调用。
此外,如果您正确实现了布局参数,则可以轻松地在编辑器中预览您的布局。这使得开发 快得多 。
例如您可以定义自己的布局参数
<resources>
<declare-styleable name="TimeLineLayout_Layout">
<attr name="time_from" format="string"/>
<attr name="time_to" format="string"/>
</declare-styleable>
</resources>
然后像这样使用它们...
<com.github.bleeding182.timelinelayout.TimeLineLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#22662222">
<TextView
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_dark"
android:padding="8dp"
android:text="12:00 - 16:00"
app:time_from="12:00"
app:time_to="16:00"/>
</com.github.bleeding182.timelinelayout.TimeLineLayout>
结果看起来像这样(我知道它很难看,但我做这个只是为了测试:/)
为此,您创建一个基本布局,您可以在其中测量和布置视图。然后,您可以将任何视图添加到您的布局中,通过设置从/到的时间并正确测量/布局,您可以轻松显示各种项目。
屏幕截图的代码附在下面,onDraw
将创建那些丑陋的 hour/half 小时线。 onMeasure
用于计算视图高度,onLayout
用于将视图绘制到正确的时间段。
我希望这对您有所帮助,它肯定比在一个视图中处理所有内容更容易使用。
public class TimeLineLayout extends ViewGroup {
private int tIntervalSpan = 24 * 60;
private float mMeasuredMinuteHeight;
public TimeLineLayout(Context context) {
super(context);
}
public TimeLineLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TimeLineLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public TimeLineLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
for (int i = 0; i < getChildCount(); i++) {
final View child = getChildAt(i);
ViewGroup.LayoutParams layoutParams = child.getLayoutParams();
if (layoutParams instanceof LayoutParams) {
LayoutParams params = (LayoutParams) layoutParams;
final int top = (int) (params.tFrom * mMeasuredMinuteHeight);
child.layout(l, top, child.getMeasuredWidth(), top + child.getMeasuredHeight());
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
mMeasuredMinuteHeight = getMeasuredHeight() / (float) tIntervalSpan;
for (int i = 0; i < getChildCount(); i++) {
final View child = getChildAt(i);
ViewGroup.LayoutParams layoutParams = child.getLayoutParams();
if (layoutParams instanceof LayoutParams) {
LayoutParams params = (LayoutParams) layoutParams;
child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec((int) ((params.tTo - params.tFrom) * mMeasuredMinuteHeight), MeasureSpec.EXACTLY));
}
}
}
@Override
protected void onDraw(Canvas canvas) {
final float height = mMeasuredMinuteHeight * 60;
Paint paint = new Paint();
paint.setColor(Color.RED);
for(int i = 0; i < 24; i++) {
paint.setStrokeWidth(2f);
paint.setAlpha(255);
canvas.drawLine(0, i * height, getMeasuredWidth(), i*height, paint);
if(i < 23) {
paint.setStrokeWidth(1f);
paint.setAlpha(50);
canvas.drawLine(0, i * height + 30 * mMeasuredMinuteHeight, getMeasuredWidth(), i * height + 30 * mMeasuredMinuteHeight, paint);
}
}
}
@Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
return p instanceof LayoutParams;
}
@Override
public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
return new LayoutParams(getContext(), attrs);
}
public static class LayoutParams extends ViewGroup.LayoutParams {
private final int tFrom;
private final int tTo;
public LayoutParams(Context c, AttributeSet attrs) {
super(c, attrs);
TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.TimeLineLayout_Layout);
final String from = a.getString(R.styleable.TimeLineLayout_Layout_time_from);
final String to = a.getString(R.styleable.TimeLineLayout_Layout_time_to);
a.recycle();
tFrom = Integer.parseInt(from.split(":")[0]) * 60 + Integer.parseInt(from.split(":")[1]);
tTo = Integer.parseInt(to.split(":")[0]) * 60 + Integer.parseInt(to.split(":")[1]);
}
}
我正在为 Android 编写日历应用程序。日历需要有一个类似于默认应用程序或 MS Outlook 的日期显示:一个网格显示一条线表示每个小时,约会显示为矩形。
这是来自 Google 图片的类似示例图片:
我从 Google 的 Android 开源项目下载了日历应用程序的源代码,看到他们将此显示实现为 simplay 使用的自定义视图 Canvas.drawRect () 来绘制矩形,然后他们在用户单击时实现了自己的命中测试,以查看单击了哪个约会。
我已经自己写了一些东西,效果很好,也不太复杂。
问题是我需要矩形内的不同文本行(主题、时间)链接到各种功能,我想知道我该怎么做。
当我画画的时候,我已经为每个约会创建了矩形。我在想我也可以为每段文本创建 Rects,将所有这些缓存在 ArrayList 中,然后对缓存的 rects 执行 histtest。我只是担心整个东西会太重...这听起来像是一个可靠的设计吗?
或者我应该完全避免自定义绘图并以编程方式生成和放置视图(也许是 TextViews?)我是一个 Android 新手,我不确定我的选择是什么...
感谢您的帮助!
好的,正如宣布的那样,这里有一些例子:
如果您只使用自定义视图,则必须保留对象列表并自己绘制它们,而不是自定义布局,您只需测量和布置子项。因为你可以只添加一个按钮,所以不需要使用命中测试或任何东西,因为如果你不搞砸视图将只接收 onClick()
调用。
此外,如果您正确实现了布局参数,则可以轻松地在编辑器中预览您的布局。这使得开发 快得多 。
例如您可以定义自己的布局参数
<resources>
<declare-styleable name="TimeLineLayout_Layout">
<attr name="time_from" format="string"/>
<attr name="time_to" format="string"/>
</declare-styleable>
</resources>
然后像这样使用它们...
<com.github.bleeding182.timelinelayout.TimeLineLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#22662222">
<TextView
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_dark"
android:padding="8dp"
android:text="12:00 - 16:00"
app:time_from="12:00"
app:time_to="16:00"/>
</com.github.bleeding182.timelinelayout.TimeLineLayout>
结果看起来像这样(我知道它很难看,但我做这个只是为了测试:/)
为此,您创建一个基本布局,您可以在其中测量和布置视图。然后,您可以将任何视图添加到您的布局中,通过设置从/到的时间并正确测量/布局,您可以轻松显示各种项目。
屏幕截图的代码附在下面,onDraw
将创建那些丑陋的 hour/half 小时线。 onMeasure
用于计算视图高度,onLayout
用于将视图绘制到正确的时间段。
我希望这对您有所帮助,它肯定比在一个视图中处理所有内容更容易使用。
public class TimeLineLayout extends ViewGroup {
private int tIntervalSpan = 24 * 60;
private float mMeasuredMinuteHeight;
public TimeLineLayout(Context context) {
super(context);
}
public TimeLineLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TimeLineLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public TimeLineLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
for (int i = 0; i < getChildCount(); i++) {
final View child = getChildAt(i);
ViewGroup.LayoutParams layoutParams = child.getLayoutParams();
if (layoutParams instanceof LayoutParams) {
LayoutParams params = (LayoutParams) layoutParams;
final int top = (int) (params.tFrom * mMeasuredMinuteHeight);
child.layout(l, top, child.getMeasuredWidth(), top + child.getMeasuredHeight());
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
mMeasuredMinuteHeight = getMeasuredHeight() / (float) tIntervalSpan;
for (int i = 0; i < getChildCount(); i++) {
final View child = getChildAt(i);
ViewGroup.LayoutParams layoutParams = child.getLayoutParams();
if (layoutParams instanceof LayoutParams) {
LayoutParams params = (LayoutParams) layoutParams;
child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec((int) ((params.tTo - params.tFrom) * mMeasuredMinuteHeight), MeasureSpec.EXACTLY));
}
}
}
@Override
protected void onDraw(Canvas canvas) {
final float height = mMeasuredMinuteHeight * 60;
Paint paint = new Paint();
paint.setColor(Color.RED);
for(int i = 0; i < 24; i++) {
paint.setStrokeWidth(2f);
paint.setAlpha(255);
canvas.drawLine(0, i * height, getMeasuredWidth(), i*height, paint);
if(i < 23) {
paint.setStrokeWidth(1f);
paint.setAlpha(50);
canvas.drawLine(0, i * height + 30 * mMeasuredMinuteHeight, getMeasuredWidth(), i * height + 30 * mMeasuredMinuteHeight, paint);
}
}
}
@Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
return p instanceof LayoutParams;
}
@Override
public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
return new LayoutParams(getContext(), attrs);
}
public static class LayoutParams extends ViewGroup.LayoutParams {
private final int tFrom;
private final int tTo;
public LayoutParams(Context c, AttributeSet attrs) {
super(c, attrs);
TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.TimeLineLayout_Layout);
final String from = a.getString(R.styleable.TimeLineLayout_Layout_time_from);
final String to = a.getString(R.styleable.TimeLineLayout_Layout_time_to);
a.recycle();
tFrom = Integer.parseInt(from.split(":")[0]) * 60 + Integer.parseInt(from.split(":")[1]);
tTo = Integer.parseInt(to.split(":")[0]) * 60 + Integer.parseInt(to.split(":")[1]);
}
}