1
/
5

【Android】カレンダーを自作する【株式会社ライトコード】

はじめに

カレンダー機能を実装する場合、ライブラリを使用するとうまくデザインを実現できないことがあると思います
そこで今回、RecyclerView と ViewPager2 を使ってカレンダーを自作してみました

カレンダーの実装

RecyclerView の GridLayoutManager を使用してカレンダーの見た目、ViewPager2 を使用してカレンダーの横スクロールを実装していきます

View の作成

メインとなる画面に、年月とボタンを表示する View と カレンダーを表示する ViewPager2 を配置し、 View を作成する
また、年月とボタンの View に罫線を追加するため、drawable で枠線を作成し、backgound に設定します

// res/drawable/header_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="@color/gray" />
</shape>
// res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:fitsSystemWindows="true">

<LinearLayout
android:id="@+id/llHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/header_border"
android:baselineAligned="false"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<ImageButton
android:id="@+id/btPreviousMonth"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/previous_month_button"
android:src="@drawable/baseline_arrow_back_ios_new_24"
app:tint="#ff000000" />

<TextView
android:id="@+id/tvMonth"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:textAlignment="center" />

<ImageButton
android:id="@+id/btNextMonth"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/next_month_button"
android:src="@drawable/baseline_arrow_forward_ios_24"
app:tint="#ff000000" />

</LinearLayout>

<androidx.viewpager2.widget.ViewPager2
android:id="@+id/calendarPager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/llHeader" />

</androidx.constraintlayout.widget.ConstraintLayout>


次に、カレンダーを表示するため、 RecyclerView を配置した View を作成する

// res/layout/fragment_calendar.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rvCalendar"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

最後に、日付を表示するための View を作成する
また、View に罫線を追加するため、drawable で枠線を作成し、backgound に設定します

// res/drawable/day_item_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="0.5dp" android:color="@color/gray" />
</shape>
// res/layout/day_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/day_item_border">

<TextView
android:id="@+id/tvDay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

カレンダーの日付部を実装

RecyclerView にカレンダーを表示するための処理を実装する

記事の続きは下のリンクをクリック!

https://rightcode.co.jp/blogs/46679


エンジニア積極採用中です!

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です!

採用ページはこちら:https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら:https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか?(転職者向け)

特設ページはこちら: https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です!

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

  • もっと大きなことに挑戦したい!
  • エンジニアとしてもっと成長したい!
  • モダンな技術に触れたい!

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか?

ネット上では、ちょっとユルそうな会社に感じると思いますが(笑)、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

  • ライトコードの魅力を知っていただきたい!
  • 社風や文化なども知っていただきたい!
  • 技術に対して熱意のある方に入社していただきたい!

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。

【コーポレートサイト】https://rightcode.co.jp/

【採用募集】https://rightcode.co.jp/recruit(こちらからの応募がスムーズ)

【wantedlyぺージ】https://www.wantedly.com/companies/rightcode

株式会社ライトコード's job postings

Weekly ranking

Show other rankings
Invitation from 株式会社ライトコード
If this story triggered your interest, have a chat with the team?