如何为Android Honeycomb应用程序创建每周日历视图?

时间:2012-02-20 03:12:08

标签: android layout android-layout android-3.0-honeycomb android-xml

我正在制作Android(v3.0)应用程序,该应用程序需要模仿Google日历上的每周日历布局:

Google Calendar Weekly Layout

这些活动将基于通过Google Calendar API提出的外部请求(我已经开始使用此部分)。使用API​​,我可以获得一周的事件列表,每个事件都有一个开始和结束日期时间。我想使用这些数据在类似于上面的视图中向应用程序用户显示预定事件。

这是我到目前为止所拥有的:

My Prototype Calendar View

XML出现在下面:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="800dp"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Calendar Title"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true" >

            <TextView
                android:id="@+id/textView2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Sunday" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Monday" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Tuesday" />

            <TextView
                android:id="@+id/textView6"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Wednesday" />

            <TextView
                android:id="@+id/textView7"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Thursday" />

            <TextView
                android:id="@+id/textView8"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Friday" />

            <TextView
                android:id="@+id/textView9"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="Saturday" />
        </LinearLayout>
    </RelativeLayout>

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="0dp"
        android:scrollbars="none" >"

        <RelativeLayout
            android:id="@+id/relativeLayout242"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="0dp" >


            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="0dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="40dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="80dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="120dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="160dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="200dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="240dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="280dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="320dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="360dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="400dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="440dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="480dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="520dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="560dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="600dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="640dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="680dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="720dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="760dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="800dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="840dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="880dp"/>
            <View android:background="#aaa" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="920dp"/>

            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="20dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="60dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="100dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="140dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="180dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="220dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="260dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="300dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="340dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="380dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="420dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="460dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="500dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="540dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="580dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="620dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="660dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="700dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="740dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="780dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="820dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="860dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="900dp"/>
            <View android:background="#777" android:layout_width = "fill_parent" android:layout_height="1dp" android:layout_marginTop="940dp"/>

            <LinearLayout
                android:id="@+id/linearLayout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="0dp" >

                <RelativeLayout
                    android:id="@+id/relativeLayout2"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:padding="0dp" >

                    <View android:background="#aaa" android:layout_width = "1dp" android:layout_height="fill_parent" android:layout_alignParentRight="true"/>

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="0dp"
                        android:gravity="center"
                        android:text="12am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="40dp"
                        android:gravity="center"
                        android:text="1am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="80dp"
                        android:gravity="center"
                        android:text="2am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="120dp"
                        android:gravity="center"
                        android:text="3am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="160dp"
                        android:gravity="center"
                        android:text="4am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="200dp"
                        android:gravity="center"
                        android:text="5am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="240dp"
                        android:gravity="center"
                        android:text="6am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="280dp"
                        android:gravity="center"
                        android:text="7am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="320dp"
                        android:gravity="center"
                        android:text="8am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="360dp"
                        android:gravity="center"
                        android:text="9am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="400dp"
                        android:gravity="center"
                        android:text="10am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="440dp"
                        android:gravity="center"
                        android:text="11am" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="480dp"
                        android:gravity="center"
                        android:text="12pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="520dp"
                        android:gravity="center"
                        android:text="1pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="560dp"
                        android:gravity="center"
                        android:text="2pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="600dp"
                        android:gravity="center"
                        android:text="3pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="640dp"
                        android:gravity="center"
                        android:text="4pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="680dp"
                        android:gravity="center"
                        android:text="5pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="720dp"
                        android:gravity="center"
                        android:text="6pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="760dp"
                        android:gravity="center"
                        android:text="7pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="800dp"
                        android:gravity="center"
                        android:text="8pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="840dp"
                        android:gravity="center"
                        android:text="9pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="880dp"
                        android:gravity="center"
                        android:text="10pm" />

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:layout_marginTop="920dp"
                        android:gravity="center|top"
                        android:text="11pm" />
                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/relativeLayout3"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="14"
                    android:padding="0dp" >

                    <LinearLayout
                        android:id="@+id/linearLayout3"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentTop="true"
                        android:padding="0dp" >

                        <RelativeLayout
                            android:id="@+id/relativeLayout4"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="180dp" android:layout_marginTop="180dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="180dp"
                                android:layout_marginTop="180dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout5"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="180dp" android:layout_marginTop="280dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="180dp"
                                android:layout_marginTop="280dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout6"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="60dp" android:layout_marginTop="40dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="60dp"
                                android:layout_marginTop="40dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout7"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="90dp" android:layout_marginTop="60dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="90dp"
                                android:layout_marginTop="60dp"
                                android:text="Some Event" />

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="120dp" android:layout_marginTop="340dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="120dp"
                                android:layout_marginTop="340dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout8"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="180dp" android:layout_marginTop="380dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="180dp"
                                android:layout_marginTop="380dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout9"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="180dp" android:layout_marginTop="480dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="180dp"
                                android:layout_marginTop="480dp"
                                android:text="Some Event" />

                        </RelativeLayout>

                        <RelativeLayout
                            android:id="@+id/relativeLayout10"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" >

                            <View android:background="#00f" android:layout_width = "fill_parent" android:layout_height="180dp" android:layout_marginTop="340dp"/>

                            <Button
                                android:id="@+id/button1"
                                android:layout_width="fill_parent"
                                android:layout_height="180dp"
                                android:layout_marginTop="340dp"
                                android:text="Some Event" />

                        </RelativeLayout>           

                    </LinearLayout>
                </RelativeLayout>
            </LinearLayout>
        </RelativeLayout>
    </ScrollView>

</LinearLayout>

我的方法是使40dp等于1小时的时间。因此,每当我想要添加持续时间为1.5小时的事件时,我将制作一个60dp的按钮,我将放置在时间开始的确切位置(从上到下12点= 0dp,从顶部开始下午1点= 40dp) ,2pm = 80d从顶部等)。

我的问题是:

  1. 有更好的方法吗?
  2. 如何将我的XML转换为可以添加到任何Android项目的独立视图? (我打算制作关于最终产品的博客文章)
  3. 谢谢!

2 个答案:

答案 0 :(得分:18)

我最后采用了与原帖相似的方法。我在其中创建了一个带有线性布局的滚动视图。然后我在线性布局中添加了七个相对布局。每个相对布局都是一天。我确保这些布局的高度等于一天中的分钟数。这将使1小时= 60分钟= 60 dp,这使得测量事件的高度更容易。对于事件,我创建了一个自定义视图,可以显示事件的开始和结束时间,以及事件的标题。事件已添加到具有layout_marginTop属性的相对布局中,该属性的值等于事件的开始时间(以分钟为单位),从一天开始。这似乎工作得很好。

以下是它最终结果的预览:

Calendar preview

以下是XML布局:http://pastebin.com/jT4wQxeb

代码太长,无法适应答案。

注意:calendar_zebra只是一个60 * 24 = 1440dp的高布局,1 dp高水平View s,每60dp放置一个纯灰色背景。每个代表一小时的标记。

答案 1 :(得分:3)

1。 以下是我从Calendar

的来源中得出的结论

它为xml中的整个布局创建一个自定义视图(一天中的议程DayView)。

然后使用矩形和文本绘制画布,就像调用onDraw()时在应用程序中看到的那样。

View为该事件实施OnClickListenerOnLongClickListener。当您单击画布时,它会将您的点击位置转移到具有相应日期和时间的事件(因此,当调用覆盖onSizeChanged()时,它会计算事件,边距,整天事件的大量相关大小),然后如果存在此类事件,则启动活动,否则创建新事件。

2.你需要创建一个类扩展视图,比如说DayView,然后你应该把它添加到attrs.xml中

<resources>
  <declare-styleable name="DayView">
  </declare-styleable>
</resources>

然后,您可以在布局中将其用作包名称的xml标记。像这里:

<xxxxxxx.DayView
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:id="@id/ui_schedule_dayview">

Here你可以找到这样做的样本