¿Cómo puedo crear una vista de calendario semanal para una aplicación Android Honeycomb?
https://stackoverflow.com/questions/9355747
-
28-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy trabajando en una aplicación Android (v3.0) que tiene el requisito de imitar el diseño del calendario semanal que se encuentra en el calendario de Google:
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, y cada evento tiene un inicio y finalización de fecha y hora. 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:
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, cada vez que me gustaría agregar un evento que tenga una duración de 1.5 horas, haré un botón de 60dp que coloque en la ubicación exacta en que comience el tiempo (12am = 0dp desde la parte superior, 1pm = 40dp desde la parte superior , 2pm = 80d desde la parte superior, etc.).
Mis preguntas son:
- ¿Hay una mejor manera de hacer esto?
- ¿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 de blog sobre el producto final)
¡Gracias!
Solución
Terminé siguiendo un enfoque similar a mi publicación original. Creé una vista de desplazamiento con un diseño lineal dentro de él. 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 al número de minutos en un día. Esto facilitarí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 de diseño_margintop, cuyo valor igualó la hora de inicio del evento en minutos desde el comienzo del día. Esto parecía funcionar bien.
Aquí hay una vista previa de cómo terminó luciendo:
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 diseño alto de 60 * 24 = 1440dp con 1 dp de alto horizontal ViewS con un fondo gris sólido colocado cada 60dp. Cada uno representa un marcador durante una hora de tiempo.
Otros consejos
1. Esto es lo que encuentro de la fuente de Calendario
Crea una vista personalizada (DayView para la agenda en un día) para todo el diseño en su XML.
Luego dibuja el lienzo usando rectángulo y texto como lo que 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 hora correspondientes (por lo que calculó un montón de tamaño relacionado para evento, margen y evento de día entero cuando la anulación onSizeChanged() se llama), luego inicia la actividad si existe dicho evento, de lo contrario, crea un nuevo evento.
2. necesitas crear una clase extiende la vista, digamos DayView, entonces debes agregar esto a attrs.xml
<resources>
<declare-styleable name="DayView">
</declare-styleable>
</resources>
Luego puede usarlo como una etiqueta XML en diseño con el nombre de su paquete. como aquí:
<xxxxxxx.DayView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@id/ui_schedule_dayview">
Aquí Puedes encontrar la muestra para hacerlo
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
