[JAVA] [Android] Erstellen Sie einen Kalender mit GridView
Unter iOS gibt es viele Möglichkeiten, einen Kalender mit UICollectionView zu erstellen. Unter Android gibt es jedoch nicht viele Möglichkeiten, einen Kalender mit GridView zu erstellen. Es handelt sich also um ein Memo.
Vollständiges Formular
Es ist so.
Lassen Sie uns sie der Reihe nach erstellen.
Definieren Sie Farbressourcen
Definieren Sie einfach die Farben, die in XML verwendet werden sollen. Insbesondere der Kalender und GridView sind nicht miteinander verbunden ...;
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="grayColor">#777</color>
<color name="blueColor">#00F</color>
<color name="redColor">#F00</color>
<color name="whiteColor">#FFF</color>
<color name="blackColor">#000</color>
</resources>
Beschreiben Sie das Layout der Hauptaktivität
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
android:background="@color/grayColor"
tools:context="jp.co.apps.workout.calendarsample.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="@color/whiteColor">
<TextView
android:id="@+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2018.2"
android:textSize="20sp"
android:layout_centerInParent="true"/>
<Button
android:id="@+id/prevButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Prev"
android:layout_alignParentLeft="true"
android:layout_marginVertical="10dp"
android:layout_marginLeft="10dp"
android:background="@color/colorAccent"/>
<Button
android:id="@+id/nextButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Next"
android:layout_alignParentRight="true"
android:layout_marginVertical="10dp"
android:layout_marginRight="10dp"
android:background="@color/colorAccent"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginVertical="1dp">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginHorizontal="1dp"
android:textAlignment="center"
android:text="Tag"
android:background="@color/whiteColor"
android:textColor="@color/redColor"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:background="@color/whiteColor"
android:text="Mond"
android:textColor="@color/blackColor"
android:textAlignment="center"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="1dp"
android:textAlignment="center"
android:text="Feuer"
android:textColor="@color/blackColor"
android:background="@color/whiteColor"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="1dp"
android:textAlignment="center"
android:text="Wasser"
android:textColor="@color/blackColor"
android:background="@color/whiteColor"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="1dp"
android:textAlignment="center"
android:text="Holz"
android:textColor="@color/blackColor"
android:background="@color/whiteColor"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="1dp"
android:textAlignment="center"
android:text="Geld"
android:textColor="@color/blackColor"
android:background="@color/whiteColor"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginRight="1dp"
android:textAlignment="center"
android:text="Boden"
android:textColor="@color/blueColor"
android:background="@color/whiteColor"/>
</LinearLayout>
<GridView
android:id="@+id/calendarGridView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15"
android:horizontalSpacing="1dp"
android:layout_marginLeft="1dp"
android:numColumns="7"
android:stretchMode="columnWidth"
android:verticalSpacing="1dp"></GridView>
</LinearLayout>
Es ist schwierig, einen Rand zu zeichnen, daher färbe ich den Hintergrund und zeichne einen Rand mit einem Rand.
Erstellen Sie eine Zellenlayoutdatei für die Rasteransicht
Da diesmal nur das Datum angezeigt wird, muss möglicherweise keine benutzerdefinierte Zelle erstellt werden, ich werde sie jedoch für zukünftige Erweiterungen erstellen.
calendar_cell.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/dateText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"/>
<!--Hier erweiterbar-->
</RelativeLayout>
Erstellen Sie eine DateManager-Klasse
Da der Kalender häufig Datumsangaben bearbeitet, erstellen Sie eine dedizierte Klasse.
DateManager.java
package jp.co.apps.workout.calendarsample;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.Locale;
public class DateManager {
Calendar mCalendar;
public DateManager(){
mCalendar = Calendar.getInstance();
}
//Holen Sie sich die Elemente des Monats
public List<Date> getDays(){
//Aktuellen Zustand beibehalten
Date startDate = mCalendar.getTime();
//Berechnen Sie die Gesamtzahl der in GridView angezeigten Zellen
int count = getWeeks() * 7 ;
//Berechnen Sie die Anzahl der Tage für den vorherigen Monat, die im Kalender für den aktuellen Monat angezeigt werden
mCalendar.set(Calendar.DATE, 1);
int dayOfWeek = mCalendar.get(Calendar.DAY_OF_WEEK) - 1;
mCalendar.add(Calendar.DATE, -dayOfWeek);
List<Date> days = new ArrayList<>();
for (int i = 0; i < count; i ++){
days.add(mCalendar.getTime());
mCalendar.add(Calendar.DATE, 1);
}
//Zustand wiederherstellen
mCalendar.setTime(startDate);
return days;
}
//Überprüfen Sie, ob es diesen Monat ist
public boolean isCurrentMonth(Date date){
SimpleDateFormat format = new SimpleDateFormat("yyyy.MM", Locale.US);
String currentMonth = format.format(mCalendar.getTime());
if (currentMonth.equals(format.format(date))){
return true;
}else {
return false;
}
}
//Holen Sie sich die Anzahl der Wochen
public int getWeeks(){
return mCalendar.getActualMaximum(Calendar.WEEK_OF_MONTH);
}
//Holen Sie sich den Tag
public int getDayOfWeek(Date date) {
Calendar calendar = Calendar.getInstance();
calendar.setTime(date);
return calendar.get(Calendar.DAY_OF_WEEK);
}
//Bis zum nächsten Monat
public void nextMonth(){
mCalendar.add(Calendar.MONTH, 1);
}
//Zum Vormonat
public void prevMonth(){
mCalendar.add(Calendar.MONTH, -1);
}
}
Erstellen Sie eine Adapterklasse, die in GridView festgelegt werden soll
Dieses Mal habe ich auch eine Methode definiert, um den Monat in der Adapterklasse zu ändern, und ich trage ein wenig seitwärts. Bitte entschuldigen Sie. .. ..
CalendarAdapter.java
package jp.co.apps.workout.calendarsample;
import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Locale;
public class CalendarAdapter extends BaseAdapter {
private List<Date> dateArray = new ArrayList();
private Context mContext;
private DateManager mDateManager;
private LayoutInflater mLayoutInflater;
//Definieren Sie nach dem Erweitern der benutzerdefinierten Zelle hier Wiget
private static class ViewHolder {
public TextView dateText;
}
public CalendarAdapter(Context context){
mContext = context;
mLayoutInflater = LayoutInflater.from(mContext);
mDateManager = new DateManager();
dateArray = mDateManager.getDays();
}
@Override
public int getCount() {
return dateArray.size();
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mLayoutInflater.inflate(R.layout.calendar_cell, null);
holder = new ViewHolder();
holder.dateText = convertView.findViewById(R.id.dateText);
convertView.setTag(holder);
} else {
holder = (ViewHolder)convertView.getTag();
}
//Geben Sie die Zellengröße an
float dp = mContext.getResources().getDisplayMetrics().density;
AbsListView.LayoutParams params = new AbsListView.LayoutParams(parent.getWidth()/7 - (int)dp, (parent.getHeight() - (int)dp * mDateManager.getWeeks() ) / mDateManager.getWeeks());
convertView.setLayoutParams(params);
//Nur das Datum anzeigen
SimpleDateFormat dateFormat = new SimpleDateFormat("d", Locale.US);
holder.dateText.setText(dateFormat.format(dateArray.get(position)));
//Andere Zellen als diesen Monat grau färben
if (mDateManager.isCurrentMonth(dateArray.get(position))){
convertView.setBackgroundColor(Color.WHITE);
}else {
convertView.setBackgroundColor(Color.LTGRAY);
}
//Sonntag bis rot, Samstag bis blau
int colorId;
switch (mDateManager.getDayOfWeek(dateArray.get(position))){
case 1:
colorId = Color.RED;
break;
case 7:
colorId = Color.BLUE;
break;
default:
colorId = Color.BLACK;
break;
}
holder.dateText.setTextColor(colorId);
return convertView;
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public Object getItem(int position) {
return null;
}
//Anzeigemonat abrufen
public String getTitle(){
SimpleDateFormat format = new SimpleDateFormat("yyyy.MM", Locale.US);
return format.format(mDateManager.mCalendar.getTime());
}
//Anzeige für nächsten Monat
public void nextMonth(){
mDateManager.nextMonth();
dateArray = mDateManager.getDays();
this.notifyDataSetChanged();
}
//Anzeige des Vormonats
public void prevMonth(){
mDateManager.prevMonth();
dateArray = mDateManager.getDays();
this.notifyDataSetChanged();
}
}
Beschreiben Sie die Hauptaktivität
MainActivity.java
package jp.co.apps.workout.calendarsample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.GridView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private TextView titleText;
private Button prevButton, nextButton;
private CalendarAdapter mCalendarAdapter;
private GridView calendarGridView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
titleText = findViewById(R.id.titleText);
prevButton = findViewById(R.id.prevButton);
prevButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mCalendarAdapter.prevMonth();
titleText.setText(mCalendarAdapter.getTitle());
}
});
nextButton = findViewById(R.id.nextButton);
nextButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mCalendarAdapter.nextMonth();
titleText.setText(mCalendarAdapter.getTitle());
}
});
calendarGridView = findViewById(R.id.calendarGridView);
mCalendarAdapter = new CalendarAdapter(this);
calendarGridView.setAdapter(mCalendarAdapter);
titleText.setText(mCalendarAdapter.getTitle());
}
}
Das funktioniert den ganzen Weg. Wenn Sie bei Auswahl eines Kalenders arbeiten möchten, setzen Sie in GridView "setOnItemClickListener" und verwickeln Sie "getItem" und "getItemId" von CalendarAdapter.
Eigentlich wäre es besser, einen DateManager mit MainActivity zu generieren und an den Adapter zu übergeben, aber diesmal ist es so. .. ..
Recommended Posts