¿Cómo puedo crear una vista de calendario semanal para una aplicación Android Honeycomb?

Question

Estoy trabajando en una aplicación para Android (versión 3.0) que tiene un requisito de imitar el diseño de calendario semanal encontrado en Google Calendar:

Los eventos se basa en las peticiones externas a través de Google Calendar API (ya tengo esta parte funcionando). Utilizando la API, puedo obtener una lista de eventos para la semana, con cada evento teniendo un horario de inicio y finalización. Me gustaría utilizar esta información para mostrar los eventos programados a los usuarios de la aplicación en una vista similar a la anterior.

Esto es lo que tengo hasta ahora:

El XML aparece a continuación:

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

Mi enfoque 40dp era hacer igual a 1 hora de tiempo. Por lo tanto, cada vez que me gustaría agregar un evento que tiene una duración de 1,5 horas, crearé un botón de 60 pb que colocaré en la ubicación exacta en que comienza el tiempo (12am = 0dp desde la parte superior, 1pm = 40dp desde la parte superior , 2pm = 80d desde la parte superior, etc.).

Mis preguntas son:

1. ¿Hay una mejor manera de hacer esto?
2. ¿Cómo puedo convertir mi XML para que sea una vista independiente que podría agregarse a cualquier proyecto de Android? (Planeo quizás hacer una publicación en el blog sobre el producto final)

¡Gracias!

Answer 1

Terminé siguiendo un enfoque similar a mi publicación original. Creé una vista de desplazamiento con un diseño lineal dentro de ella. Luego agregué siete diseños relativos al diseño lineal. Cada uno de los diseños relativos es un día. Me aseguré de que las alturas de estos diseños fueran iguales a la cantidad de minutos en un día. Esto haría 1 hora = 60 minutos = 60 dp, lo que facilita la medición de las alturas de los eventos. Para los eventos, creé una vista personalizada que puede mostrar la hora de inicio y finalización del evento, así como el título del evento. Los eventos se agregaron a los diseños relativos con una propiedad layout_marginTop, cuyo valor equivalía a la hora de inicio del evento en minutos desde el comienzo del día. Esto pareció funcionar bien.

He aquí una muestra de lo que terminó pareciéndose a:

Aquí es el diseño XML: http://pastebin.com/jT4wQxeb

el código es demasiado largo para caber en la respuesta.

Nota: calendar_zebra es simplemente un alto diseño 60 * 24 = 1440dp con 1 dp alto horizontal View s con un fondo gris sólido colocado cada 60dp. Cada uno representa un marcador por una hora.

Answer 2

1. Esto es lo que averigüe de la fuente de Calendar

Se crea una vista personalizada (DayView de la agenda en un día) durante todo el diseño en su XML.

Luego se dibuja el lienzo con el rectángulo y el texto como lo que se puede ver en la aplicación cuando el onDraw() se llama.

La vista implementa OnClickListener y OnLongClickListener para el evento. Cuando hace clic en el lienzo, transfiere su posición de clic al Evento con la fecha y la hora correspondientes (por lo que calculó un montón de tamaño relacionado para evento, margen, evento de día completo cuando se sobrescribe onSizeChanged()), luego inicia la Actividad si tal evento existe, de lo contrario crea un nuevo evento.

2.You tiene que crear una clase extiende Ver, por ejemplo DayView, a continuación, se debe añadir esto en attrs.xml

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

entonces usted puede utilizar como etiqueta XML en diseño con el nombre del paquete. como aquí:

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

Here se encuentra la muestra de hacerlo