Xuni for Android のドキュメント
ヘッダーのカスタマイズ
Xuni コントロール > Calendar > 機能 > ヘッダーのカスタマイズ

Xuni Calendar コントロールは、デフォルトのヘッダーとして現在の月または年とナビゲーションボタンを表示します。また、setShowHeader プロパティを False に設定してデフォルトのヘッダーを非表示（削除）し、カスタムヘッダーを適用できます。

次の図は、カスタムヘッダーを含む Xuni Calendar を示します。

Month ラベルをタップすると、カレンダーは、月または年モードに切り替えるオプションを提供します。Today ラベルは、カレンダーを現在の日付にナビゲートします。

次のコード例は、Java で、Xuni Calendar コントロールでカスタムヘッダーを作成して適用する方法を示します。この例では、「クイックスタート」で作成したサンプルを使用します。

サンプルコード

Xuni Calendar コントロールのヘッダーをカスタマイズするには、次の手順を実行します。

  1. MainActivity クラスに、次の import 文を追加します。
    Java
    コードのコピー 
    import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.TextView;

import com.grapecity.xuni.calendar.*;
import com.grapecity.xuni.core.IEventHandler;
    C#
    コードのコピー 
    using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Com.GrapeCity.Xuni.Calendar;
using Com.GrapeCity.Xuni.Core;
using Java.Util;
  2. MainActivity クラスの既存のコードを次のコードに置き換えます。
    Java
    コードのコピー 
    public class MainActivity extends Activity 
{
    private XuniCalendar calendar;
    private Spinner mViewModeSpinner;
        private TextView tvHeader;
        private Button btnToday;    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) 
    
    {
        com.grapecity.xuni.core.LicenseManager.KEY = License.KEY;
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        calendar = (XuniCalendar) findViewById(R.id.calendar);
        mViewModeSpinner = (Spinner) findViewById(R.id.selectViewMode);
                tvHeader = (TextView) findViewById(R.id.header);
                btnToday = (Button) findViewById(R.id.todayBtn);
                btnToday.setOnClickListener(new View.OnClickListener()
                {
                        public void onClick(View v)
                        {
                                Date now = new Date();
                                calendar.setSelectedDate(now);
                                calendar.setDisplayDate(now);

                        }
                });

                calendar.setShowHeader(false);
                calendar.getDisplayModeChanged().addHandler(new IEventHandler()
                {
                        @Override
                        public void call(Object arg0, Object arg1)
                        {
                                if (calendar.getViewMode() == CalendarViewMode.Month)
                                {
                                        mViewModeSpinner.setSelection(0);
                                }
                                else
                                {
                                        mViewModeSpinner.setSelection(1);
                                }

                                updateHeader();
                        }
                }, this);

                calendar.getDisplayDateChanged().addHandler(new IEventHandler()
                {
                        @Override
                        public void call(Object arg0, Object arg1)
                        {
                                updateHeader();
                        }
                }, this);

                ArrayAdapter<CharSequence> adapterViewMode = ArrayAdapter.createFromResource(this, R.array.viewModeSpinnerValues, android.R.layout.simple_spinner_item);
                adapterViewMode.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
                mViewModeSpinner.setAdapter(adapterViewMode);
                mViewModeSpinner.setOnItemSelectedListener(new OnItemSelectedListener()
                {
                        @Override
                        public void onItemSelected(AdapterView<?> parent, View view, int position, long id)
                        {
                                switch (position)
                                {
                                        case 0:
                                                calendar.setViewMode(CalendarViewMode.Month);
                                                break;
                                        case 1:
                                                calendar.setViewMode(CalendarViewMode.Year);
                                                break;
                                }
                        }

                        @Override
                        public void onNothingSelected(AdapterView<?> parent)
                        {
                        }
                });
        }

        private void updateHeader()
        {
                String format = calendar.getViewMode() == CalendarViewMode.Month ? "yyyy MMMM" : "yyyy";
                SimpleDateFormat formatter = new SimpleDateFormat(format, Locale.getDefault());
                tvHeader.setText(formatter.format(calendar.getDisplayDate()));
        }
}
    C#
    コードのコピー 
     public class MainActivity : Activity
    {

        XuniCalendar calendar;
        Spinner selectViewMode;
        TextView calHeader;
        Button btnToday;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            //"main" レイアウトリソースからビューを設定します。
            SetContentView(Resource.Layout.Main);

            btnToday = FindViewById<Button>(Resource.Id.btnToday);
            calHeader = FindViewById<TextView>(Resource.Id.calHeader);
            selectViewMode = FindViewById<Spinner>(Resource.Id.selectViewMode);
            calendar = FindViewById<XuniCalendar>(Resource.Id.calendar);

            ArrayAdapter<CalendarViewMode> arrayAdapter = new ArrayAdapter<CalendarViewMode>(this, Android.Resource.Layout.SimpleSpinnerItem, CalendarViewMode.Values());
            arrayAdapter.SetDropDownViewResource(Android.Resource.Layout.SimpleSpinnerDropDownItem);

            selectViewMode.Adapter = arrayAdapter;
            calendar.ShowHeader = true;
            calendar.DisplayDateChanged += calendar_DisplayDateChanged;
            calendar.DisplayModeChanged += calendar_DisplayModeChanged;
            btnToday.Click += btnToday_Click;
            selectViewMode.ItemSelected += selectViewMode_ItemSelected;      
        }
                                                                
        void btnToday_Click(object sender, System.EventArgs e)
        {
            var today = Utils.ConvertToJavaDate(DateTime.Now);
            today = new Date(2016, 0, 1);
            calendar.ChangeViewMode(CalendarViewMode.Month, today);
        }
        void selectViewMode_ItemSelected(object sender, AdapterView.ItemSelectedEventArgs e)
        {
            switch (e.Position)
            {
                case 0: calendar.ChangeViewMode(CalendarViewMode.Month, calendar.DisplayDate);
                    break;
                case 1: calendar.ChangeViewMode(CalendarViewMode.Year, calendar.DisplayDate);
                    break;
            }
        }
        private void calendar_DisplayModeChanged(object sender, Com.GrapeCity.Xuni.Core.EventArgs e)
        {
            UpdateHeader();
        }

        private void UpdateHeader()
        {
            string format = calendar.ViewMode == CalendarViewMode.Month ? "MMMM yyyy" : "yyyy";
            calHeader.Text = Utils.ConvertFromJavaDate(calendar.DisplayDate).ToString(format);
        }

        private void calendar_DisplayDateChanged(object sender, Com.GrapeCity.Xuni.Core.EventArgs e)
        {
            UpdateHeader();
        }
    }
    public class Utils
    {
     public static DateTime ConvertFromJavaDate(Java.Util.Date date)
        {
            var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
            return epoch.AddMilliseconds(date.Time);
        }

        public static Date ConvertToJavaDate(DateTime date)
        {
            DateTime epoch = new DateTime(1970, 1, 1, 0, 0, 0, 0, DateTimeKind.Utc);
            TimeSpan diff = date.ToUniversalTime() - epoch;
            var javaDate = new Date((long)diff.TotalMilliseconds);
            return javaDate;
        }
    }
  3. Eclipse プロジェクトの YourProjectName\res\values\strings.xml フォルダにある strings.xml ファイルに次の文字列を追加します。
    Java
    コードのコピー 
    <string name="today">Today</string>
    <string-array name="viewModeSpinnerValues">
        <item>Month View</item>
        <item>Year View</item>
    </string-array>
    C#
    コードのコピー 
    This step is not required for Xamarin.Android application
  4. Java の場合は activity_main レイアウトファイル、C# の場合は Main.axml に次の XML コードを追加して、コントロールをデバイスにレンダリングします。
    Java
    コードのコピー 
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:paddingBottom="20dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="20dp" >
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal" >
        
         <Spinner
            android:id="@+id/selectViewMode"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:textColor="#0000FF" />

         <TextView
            android:id="@+id/header"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="#0000FF" />
         
         <Button
            android:id="@+id/todayBtn"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="#00000000"
            android:text="@string/today"
            android:textColor="#0000FF"
            android:textStyle="bold" />
         
         </LinearLayout>

    <com.grapecity.xuni.calendar.XuniCalendar
        android:id="@+id/calendar"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </com.grapecity.xuni.calendar.XuniCalendar>

</LinearLayout>
    C#
    コードのコピー 
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:paddingBottom="20dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="20dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Spinner
            android:id="@+id/selectViewMode"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:textColor="#0000FF" />
        <TextView
            android:id="@+id/calHeader"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:textColor="#0000FF" />
        <Button
            android:id="@+id/btnToday"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="#00000000"
            android:text="Today"
            android:textColor="#0000FF"
            android:textStyle="bold"
            android:layout_weight="1" />
    </LinearLayout>
    <com.grapecity.xuni.calendar.XuniCalendar
        android:id="@+id/calendar"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

 

 

Copyright © GrapeCity inc. All rights reserved.