【问题标题】:Android: designing the view for a calendar appAndroid:为日历应用设计视图
【发布时间】:2015-11-25 09:13:32
【问题描述】:

我正在为 Android 编写一个日历应用程序。日历需要具有类似于默认应用程序或 MS Outlook 的日期显示:网格显示每小时一行,约会显示为矩形。

这是来自 Google 图片的类似示例图片:

我从 Google 的 Android 开源项目下载了日历应用程序的源代码,并看到他们将此显示实现为自定义视图,simplay 使用 Canvas.drawRect() 来绘制矩形,然后他们实现了自己的命中- 测试用户点击的时间,查看点击了哪个约会。

我已经自己写了一些东西,效果很好,而且不太复杂。

问题是我需要矩形内的不同文本行(主题、时间)来链接到各种功能,我想知道我该怎么做。

当我画画时,我已经为每个约会创建了矩形。我在想我也可以为每段文本创建 Rects,将所有这些缓存在 ArrayList 中,然后对缓存的 rects 执行 histt​​est。我只是担心整个事情会太重......这听起来像一个坚实的设计吗?

或者我应该完全避免自定义绘图并以编程方式生成和放置视图(可能是 TextViews?)我是 Android 新手,我不确定我的选择是什么...

感谢您的帮助!

【问题讨论】:

  • 如果您制作自定义布局但自定义视图,您可以测量和布局您想要的任何孩子。您只需要使用接口/时隙或类似的来生成参数。您也不需要自己处理点击。
  • 抱歉,我无法关注您的评论...为每个矩形创建自定义视图?
  • 我可能会在 10 小时内给你一个例子:p 创建一个自定义布局,用你认为合适的视图填充它。
  • 举个例子会很棒 :-) 很抱歉,但我还是个新手,我不确定我是否理解...自定义布局 - 很棒。然后用标准的 Android 视图填充它?像 TextView 等?那会比自定义绘图更轻吗?
  • 这会容易得多,因为您添加的那些视图会自己处理它们的绘图;)

标签: android android-layout android-view


【解决方案1】:

好的,正如所宣布的,这里有一些例子:

如果您只使用自定义视图,则必须保留对象列表并自己绘制它们,而不是使用自定义布局,您只需测量和布局子项。由于您可以只添加一个按钮,因此无需使用命中测试或其他任何方法,因为如果您不搞砸视图,则只会收到 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 将创建那些丑陋的小时/半小时线。 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]);
        }
  }

【讨论】:

  • @Hector 谢谢 :) 几周前我试着为自己做这个......所以......我想我会分享信息:D
  • 感谢您的详细解释。直到现在我才知道 ViewGroup。我一定会检查一下。我可以为每个约会创建一个自定义视图(正方形本身,包括主题、位置、时间等的文本)并从视图组返回这些,对吗?
  • @user884248 是的。继续扩展您的视图并将它们添加到视图组。请务必设置正确的布局参数,以便将其绘制到正确的插槽中。
  • @bleeding182 - 你确定这个例子吗?因为我终于开始实现这个了,而且 ViewGroup 似乎从来没有调用过 onDraw。 Android在线示例也没有使用onDraw:developer.android.com/reference/android/view/ViewGroup.html
  • @user884248 我只是使用布局预览模式进行测试,我并不真正关心视图组的背景,因为它更多的是调试输出。很可能是这个标志setWillNotDraw(false) 将启用视图组绘图,请参见此处developer.android.com/reference/android/view/…
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-05-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多