アンドロイドのカレンダービュー (Andoroido no karendā byū)

11か月 ago
芽依, 雨夜
4 minutes

このチュートリアルでは、Androidアプリケーション内でCalendarViewクラスを使用してカレンダーウィジェットについて話し合います。

アンドロイドのカレンダービュー

カレンダービューという名前の通り、カレンダーの日付を表示し選択するために使用されます。XMLレイアウトにカレンダービューを追加するには、以下の手順を実行します。

<CalendarView
        android:id="@+id/calendarView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

レイアウトデザインエディタでは、次のように表示されます：デバイス上で上記のアプリケーションを実行すると、現在の日付が表示されます。デフォルトでは、カレンダーは1970年1月1日の日付を表示します。android:maxDateとandroid:minDateは、カレンダーにカスタム範囲を設定するために使用されます。指定する日付の形式はMM/dd/yyyyです。同じことをJavaで行う場合は、setMaxDate（）とsetMinDate（）メソッドを使用して、longインスタンスを渡します。同じためのゲッターメソッドも利用できます。現在の日付を設定するには、CalendarViewインスタンスにsetDate（long date）を行います。setDateメソッドには別の形式があります：setDate（long date、boolean animate、boolean center）。デフォルトでは、2番目と3番目のパラメーターはtrueです。新しい日付を選択すると、それにアニメーションがかかります。日付と週のテキストスタイルを変更するには、android:dateTextAppearanceとandroid:weekTextAppearance、またはそれらに相当するJavaのセッターを使用します。CalendarViewには、次のリスナーが含まれています：

calendarView.setOnDateChangeListener(new CalendarView.OnDateChangeListener() {
            @Override
            public void onSelectedDayChange(@NonNull CalendarView calendarView, int i, int i1, int i2) {
            }
        });

ユーザーによって日付が変更されるたびに、これがトリガーされます。 (Yūzā ni yotte hidzuke ga henkō sa reru tabi ni, kore ga torigā sa remasu.)

  • i = year
  • i1 = month
  • i2 = day

以下のセクションでは、カスタムテーマを持つAndroidアプリケーションを作成し、CalendarViewにカスタム範囲を追加し、アニメーションと非アニメーションの日付変更の違いを表示します。

プロジェクトの構造

コード

styles.xmlファイルには、次の3つのスタイルを追加してください。

 <style name="CalenderViewCustom" parent="Theme.AppCompat">
        <item name="colorAccent">@android:color/holo_blue_dark</item>
        <item name="colorPrimary">@android:color/darker_gray</item>
        <item name="android:textColorPrimary">@color/colorPrimary</item>
    </style>

    <style name="CalenderViewDateCustomText" parent="android:TextAppearance.DeviceDefault.Small">
        <item name="android:textColor">@android:color/holo_orange_dark</item>
    </style>

    <style name="CalenderViewWeekCustomText" parent="android:TextAppearance.DeviceDefault.Small">
        <item name="android:textColor">@android:color/holo_green_dark</item>
    </style>

デフォルトでは、android:textColorPrimaryは白色です。この色は、月日や左右のインジケータに設定されています。activity_main.xmlのコードは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <CalendarView
        android:id="@+id/calendarView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:dateTextAppearance="@style/CalenderViewDateCustomText"
        android:theme="@style/CalenderViewCustom"
        android:weekDayTextAppearance="@style/CalenderViewWeekCustomText"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnWithAnim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="With\nAnim"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btnWithoutAnim"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btnRange" />

    <Button
        android:id="@+id/btnWithoutAnim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Without\nAnim"
        app:layout_constraintBaseline_toBaselineOf="@+id/btnWithAnim"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btnWithAnim" />

    <Button
        android:id="@+id/btnRange"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Custom\nRange"
        app:layout_constraintEnd_toStartOf="@+id/btnWithAnim"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/btnWithAnim" />


</android.support.constraint.ConstraintLayout>

上記のレイアウトには、すべてのカスタムスタイルが追加されています。3つのボタンは、Constraint Layoutで連結されています。MainActivity.javaのコードは以下の通りです。

package com.scdev.androidcalendarview;

import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CalendarView;
import android.widget.Toast;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    Calendar calendar;
    CalendarView calendarView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        calendar = Calendar.getInstance();


        calendar.set(Calendar.MONTH, Calendar.NOVEMBER);
        calendar.set(Calendar.DAY_OF_MONTH, 9);
        calendar.set(Calendar.YEAR, 2012);


        calendar.add(Calendar.DAY_OF_MONTH, 1);
        calendar.add(Calendar.YEAR, 1);


        calendarView = findViewById(R.id.calendarView);

        Button btnRange = findViewById(R.id.btnRange);
        btnRange.setOnClickListener(this);

        Button btnWithoutAnim = findViewById(R.id.btnWithoutAnim);
        btnWithoutAnim.setOnClickListener(this);

        Button btnWithAnim = findViewById(R.id.btnWithAnim);
        btnWithAnim.setOnClickListener(this);

        calendarView.setOnDateChangeListener(new CalendarView.OnDateChangeListener() {
            @Override
            public void onSelectedDayChange(@NonNull CalendarView calendarView, int i, int i1, int i2) {

                String msg = "Selected date Day: " + i2 + " Month : " + (i1 + 1) + " Year " + i;
                Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_SHORT).show();


            }
        });

    }

    @Override
    public void onClick(View view) {

        switch (view.getId()) {
            case R.id.btnWithAnim:
                calendarView.setDate(calendar.getTimeInMillis(), true, true);
                break;

            case R.id.btnWithoutAnim:
                calendar.set(Calendar.DAY_OF_MONTH, 12);
                calendar.set(Calendar.YEAR, 2016);
                calendar.add(Calendar.MONTH, Calendar.MARCH);
                calendarView.setDate(calendar.getTimeInMillis(), false, false);
                break;

            case R.id.btnRange:

                Calendar calendar = Calendar.getInstance();
                calendar.set(Calendar.DATE, calendar.getActualMaximum(Calendar.DATE));
                long endOfMonth = calendar.getTimeInMillis();
                calendar = Calendar.getInstance();
                calendar.set(Calendar.DATE, 1);
                calendar.set(Calendar.HOUR_OF_DAY, 0);
                long startOfMonth = calendar.getTimeInMillis();
                calendarView.setMaxDate(endOfMonth);
                calendarView.setMinDate(startOfMonth);


                String minDateString = new SimpleDateFormat("MM/dd/yyyy").format(new Date(calendarView.getMinDate()));
                String maxDateString = new SimpleDateFormat("MM/dd/yyyy").format(new Date(calendarView.getMaxDate()));

                Toast.makeText(getApplicationContext(), "MMDDYYYY Min date - " + minDateString + " Max Date is " + maxDateString, Toast.LENGTH_LONG).show();

                break;


        }
    }
}

以下の日本語で元の文を言い換えます。１つのオプションだけ必要です：
calendar.getActualMaximum(Calendar.DATE) は現在の日付の月末を取得します。私たちはSimpleDateFormatを使用して日付をカスタムの形式に変換しました。アプリケーションの実行結果は以下の通りです：最初の場合、アニメーションで別の日付に移動します。最後の場合、カスタムの範囲では７月のみ表示されます。インジケーターは無効になっています。このチュートリアルはここで終わりです。プロジェクトは以下のリンクからダウンロードできます。

アンドロイドのカレンダービュー

以下は、ネイティブな日本語での一つのオプションです:
ギットハブのプロジェクトリンク

コメントを残す 0

Your email address will not be published. Required fields are marked *