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

Estoy trabajando en una aplicación Android (v3.0) que tiene el requisito de imitar el diseño de calendario semanal que se encuentra en Google Calendar:

Diseño semanal de Google Calendar

Los eventos se basarán en solicitudes externas a través de la API de Google Calendar (ya tengo esta parte funcionando). Usando la API, puedo obtener una lista de eventos para la semana, con cada evento teniendo un datetime inicial y final. Me gustaría usar estos datos 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:

Mi Prototipo de la Vista del Calendario

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 era hacer 40dp igual a 1 hora de tiempo. Por lo tanto, cuando quisiera agregar un evento que tiene una duración de 1.5 horas, haré un botón de 60dp que pondré en la localización exacta que comienza el tiempo (12am = 0dp de la tapa, 1pm = 40dp de la tapa , 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 a una vista independiente que se podría añadir a cualquier proyecto de Android? (Planeo quizás hacer una entrada del blog sobre el producto final)

¡Gracias!

Terminé siguiendo un acercamiento similar a mi poste original. He creado una vista de desplazamiento con una disposición lineal dentro de ella. A continuación, agregó siete disposiciones relativas 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 eran iguales al número de minutos en un día. Esto haría que 1 hora = 60 minutos = 60 dp, lo que facilita la medición de las alturas de los eventos. Para eventos, he creado 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 era igual al tiempo de inicio del evento en minutos desde el comienzo del día. Esto parecía funcionar bien.

He aquí un vistazo de lo que terminó pareciendo:

Vista previa del calendario

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

El código es demasiado largo para encajar en la respuesta.

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

1. Esto es lo que me imagino de la fuente del calendario

Crea una vista personalizada ( DayView para la agenda en un día) para el diseño completo en su xml.

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

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

2.You necesidad de crear una clase se extiende Vista, por ejemplo DayView , a continuación, debe agregar esto en attrs.xml

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

A continuación, puede utilizarlo como una etiqueta xml en el 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"> 

Aquí puede encontrar la muestra para hacerlo

  • No se puede eliminar la vista de superposición
  • El tutorial de superposición aparece detrás de la interfaz de usuario principal (Android)
  • Cómo cambiar el color de la actual desplazamiento en ScrollView Android?
  • Picasso no conserva la proporción de aspecto al cambiar el tamaño de la imagen
  • Alinear a la derecha TextView utilizando la gravedad en RelativeLayout
  • ¿Hay alguna manera de usar un tamaño de banner de anuncio variable?
  • Android define el valor de cadena en String.xml
  • La vista de la tarjeta Android tiene una línea gris delgada entre las tarjetas
  • Atributos XML personalizados sin vista personalizada en Fragmento
  • XML de Android que corta la mitad inferior del diseño
  • Android selector.xml con atributos personalizados lanzando XmlPullParserException
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.