Androidハニカムアプリケーションの毎週のカレンダービューを作成するにはどうすればよいですか?
-
28-10-2019 - |
質問
私は、Googleカレンダーで見つかった毎週のカレンダーレイアウトを模倣する要件を持つAndroid(v3.0)アプリケーションに取り組んでいます。
イベントは、GoogleカレンダーAPIを介した外部リクエストに基づいています(すでにこのパートが機能しています)。 APIを使用して、1週間のイベントのリストを取得でき、各イベントには開始および終了データタイムがあります。このデータを使用して、上記のものと同様のビューで、スケジュールされたイベントをアプリケーションのユーザーに表示したいと思います。
これが私がこれまでに持っているものです:
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、上から1pm = 40dp 、2pm =上部から80dなど)。
私の質問は次のとおりです。
- これを行うより良い方法はありますか?
- XMLをAndroidプロジェクトに追加できるスタンドアロンビューに変換するにはどうすればよいですか? (私はおそらく最終製品に関するブログ投稿をするつもりです)
ありがとうございました!
解決
最終的には、元の投稿に同様のアプローチに従っていました。内部に線形レイアウトを備えたスクロールビューを作成しました。次に、リニアレイアウトに7つの相対レイアウトを追加しました。それぞれの相対的なレイアウトは1日です。これらのレイアウトの高さが1日の分数に等しいことを確認しました。これにより、1時間= 60分= 60 dpになり、イベントの高さを測定しやすくなります。イベントでは、イベントの開始時間と終了時間とイベントのタイトルを表示できるカスタムビューを作成しました。イベントは、レイアウト_Margintopプロパティを使用して相対レイアウトに追加されました。これはうまく機能しているように見えました。
これがそれがどのように見えるかのプレビューです:
XMLレイアウトは次のとおりです。 http://pastebin.com/jt4wqxeb
コードは、答えに収まるには長すぎます。
ノート: calendar_zebra
単に60 * 24 = 1440dpの高水平レイアウトがあります View
60dpごとに灰色の背景があるs。それぞれが1時間のマーカーを表します。
他のヒント
1.これが私がのソースから理解したものです カレンダー
カスタマイズされたビューを作成します(DayView
XMLのレイアウト全体の1日のアジェンダの場合。
次に、長方形とテキストを使用してキャンバスを描画します。 onDraw()
呼ばれています。
ビューを実装します OnClickListener
と OnLongClickListener
イベントのために。キャンバスをクリックすると、対応する日付と時刻とともにクリック位置をイベントに転送します(したがって、オーバーライドの場合、イベント、マージン、1日のイベントに関連するサイズの多くを計算しました 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">
ここ そうするためのサンプルを見つけることができます