AndroidはGridLayoutを使ってユーザー定義のカレンダーコントロールを描きます。
19281 ワード
効果図
考え方:まずGridlayoutの行列数を設定して、中に一定数のユーザー定義のカレンダーボタンコントロールを置いて、最後にカレンダーの論理を実現すればいいです。
ステップ:
最初のステップ:ユーザー定義のカレンダーコントロール(初期)
第二ステップ:カスタムの日付ボタンコントロールを実現する
第3ステップ:第2ステップで得られたコントロールを第1ステップのレイアウトに動的に追加し、日付論理を実現する。
第四ステップ:単一日付を作成し、モニターインターフェースをクリックする
最初のステップ:ユーザー定義のカレンダーコントロール(初期)
第二ステップ:単一の日付ボタンのコントロールをカスタマイズします。
第3ステップ:第2ステップで得られたコントロールをjavaコードに第1ステップのレイアウトに追加し、関連ロジックを追加します。
ステップ3に方法を追加します。
考え方:まずGridlayoutの行列数を設定して、中に一定数のユーザー定義のカレンダーボタンコントロールを置いて、最後にカレンダーの論理を実現すればいいです。
ステップ:
最初のステップ:ユーザー定義のカレンダーコントロール(初期)
第二ステップ:カスタムの日付ボタンコントロールを実現する
第3ステップ:第2ステップで得られたコントロールを第1ステップのレイアウトに動的に追加し、日付論理を実現する。
第四ステップ:単一日付を作成し、モニターインターフェースをクリックする
最初のステップ:ユーザー定義のカレンダーコントロール(初期)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:orientation="vertical"
android:background="@color/lightGreen" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textColor="@color/white"
android:textSize="9pt"
android:text="2016 10 " />
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="30dp"
android:layout_height="20dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:background="@drawable/back" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignTop="@+id/imageButton1"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:layout_toLeftOf="@+id/textView1"
android:background="@drawable/pre" />
<ImageButton
android:id="@+id/imageButton3"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_centerVertical="true"
android:layout_alignTop="@+id/textView1"
android:layout_marginLeft="16dp"
android:layout_toRightOf="@+id/textView1"
android:background="@drawable/back11" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp" >
<GridLayout
android:id="@+id/gridLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<--! -->
</GridLayout>
</LinearLayout>
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
</LinearLayout>
package com. .myCalendarView;
import java.util.Calendar;
import java.util.Date;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.widget.GridLayout;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.xuy849.utils.Info;
import com.xuy849.weightapp.R;
public class MyCalendar extends LinearLayout implements OnClickListener{
Context context;
TextView tv_yearAndMonth;
ImageButton ib_pre;
ImageButton ib_next;
ImageButton ib_back;
GridLayout gl_calendar;
View view;
CalendarButton buttons[];
int sideLength;
String week[] = {" "," "," "," "," "," "," "};
Date date;
Calendar calendar;
int year,month,day;
int res;
public MyCalendar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
// TODO Auto-generated constructor stub
init();
}
public MyCalendar(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
// TODO Auto-generated constructor stub
init();
}
public MyCalendar(Context context) {
super(context);
this.context = context;
// TODO Auto-generated constructor stub
init();
}
private void init(){
this.view = LayoutInflater.from(context).inflate(R.layout.my_calendar_view, this);
}
}
効果図:(ListViewを無視してください。)第二ステップ:単一の日付ボタンのコントロールをカスタマイズします。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/background01"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:id="@+id/linearLayout01"
android:layout_height="wrap_content"
android:background="@color/calendarBackground"
android:orientation="vertical"
android:layout_marginBottom="1dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible"
android:src="@drawable/selected_date" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="8pt"
android:text="20" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:textColor="@color/blue"
android:visibility="invisible"
android:text="65.1" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>
package com. .myCalendarView;
import java.util.Date;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.xuy849.utils.Info;
import com.xuy849.weightapp.R;
class CalendarButton extends LinearLayout{
Context context;
TextView tv_date;
TextView tv_data;
ImageView iv_note;
LinearLayout ll_container;
View view;
Date date;
public CalendarButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
// TODO Auto-generated constructor stub
init();
}
public CalendarButton(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
// TODO Auto-generated constructor stub
init();
}
public void setTotalEnable(boolean b){
this.setEnabled(b);
}
public CalendarButton(Context context) {
super(context);
this.context = context;
// TODO Auto-generated constructor stub
init();
}
public void setDate(Date date){
this.date = date;
}
public Date getDate(){
return this.date;
}
private void init(){
view = LayoutInflater.from(context).inflate(R.layout.date_button, this);
//findViewById
tv_date =(TextView)view.findViewById(R.id.textView1);
tv_data = (TextView)view.findViewById(R.id.textView2);
iv_note = (ImageView)view.findViewById(R.id.imageView1);
ll_container = (LinearLayout)view.findViewById(R.id.linearLayout01);
}
public void setDateText(String text){
tv_date.setText(text);
}
public void setDateTextColor(int color){
tv_date.setTextColor(color);
}
}
}
効果図:第3ステップ:第2ステップで得られたコントロールをjavaコードに第1ステップのレイアウトに追加し、関連ロジックを追加します。
package com. .myCalendarView;
import java.util.Calendar;
import java.util.Date;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.widget.GridLayout;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.xuy849.utils.Info;
import com.xuy849.weightapp.R;
public class MyCalendar extends LinearLayout implements OnClickListener{
Context context;
TextView tv_yearAndMonth;
ImageButton ib_pre;
ImageButton ib_next;
ImageButton ib_back;
GridLayout gl_calendar;
View view;
CalendarButton buttons[];
int sideLength;
String week[] = {" "," "," "," "," "," "," "};
Date date;
Calendar calendar;
int year,month,day;
int res;
public MyCalendar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
// TODO Auto-generated constructor stub
init();
}
public MyCalendar(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
// TODO Auto-generated constructor stub
init();
}
public MyCalendar(Context context) {
super(context);
this.context = context;
// TODO Auto-generated constructor stub
init();
}
private void init(){
this.view = LayoutInflater.from(context).inflate(R.layout.my_calendar_view, this);
WindowManager ww = (WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE);
sideLength = ww.getDefaultDisplay().getWidth()/Info.COLUMN_COUNT;
//
myFindViewById();
//
initCalendarLayout();
//
initButton();
}
private void initButton(){
ib_pre.setOnClickListener(this);
ib_next.setOnClickListener(this);
ib_back.setOnClickListener(this);
}
private void myFindViewById(){
tv_yearAndMonth = (TextView)view.findViewById(R.id.textView1);
ib_pre = (ImageButton)view.findViewById(R.id.imageButton2);
ib_next = (ImageButton)view.findViewById(R.id.imageButton3);
ib_back = (ImageButton)view.findViewById(R.id.imageButton1);
gl_calendar =(GridLayout)view.findViewById(R.id.gridLayout01);
//
buttons = new CalendarButton[Info.COLUMN_COUNT*Info.ROW_COUNT];
}
// calendar,
private void initCalendar(Calendar calendar){
int year = calendar.get(Calendar.YEAR);
int month = (calendar.get(Calendar.MONTH)+1);
int date = calendar.get(Calendar.DATE);
//
String todayStr = String.format("%04d %02d ", calendar.get(Calendar.YEAR),(calendar.get(Calendar.MONTH)+1));
tv_yearAndMonth.setText(todayStr);
//
calendar.set(Calendar.DAY_OF_MONTH, 1);
int currentMonthFirstDateInWeek = calendar.get(Calendar.DAY_OF_WEEK)-1;
calendar.set(Calendar.DAY_OF_MONTH, date);
int currentMonthDaysSum = calendar.getActualMaximum(Calendar.DAY_OF_MONTH);
calendar.roll(Calendar.MONTH, -1);
int lastMonthDaysSum = calendar.getActualMaximum(Calendar.DAY_OF_MONTH);
int i;
calendar.roll(Calendar.MONTH, 1);
Log.w(" ", currentMonthDaysSum+" ");
Log.w(" ", lastMonthDaysSum +" ");
/*
*
*/
//
Log.w("currentMonthFirstDateInWeek",currentMonthFirstDateInWeek+"");
Log.w("currentMonthFirstDateInWeek%7111",currentMonthDaysSum+currentMonthFirstDateInWeek%7+"");
for(i=currentMonthFirstDateInWeek%7+7;i<=(currentMonthDaysSum+currentMonthFirstDateInWeek%7+7-1)&&i<Info.COLUMN_COUNT*Info.ROW_COUNT;i++){
buttons[i].changeToState(Info.STATE_NORMAL_NORECORED);
buttons[i].setDateText((i-currentMonthFirstDateInWeek%7-7+1)+"");
buttons[i].setDateTextColor(Color.BLACK);
buttons[i].setEnabled(true);
buttons[i].setDate(new Date(year,month,i-(currentMonthFirstDateInWeek%7+7)+1));
}
//
for(i=7;i<(currentMonthFirstDateInWeek%7+7)&&i<Info.COLUMN_COUNT*Info.ROW_COUNT;i++){
buttons[i].changeToState(Info.STATE_NORMAL_NORECORED);
buttons[i].setDateTextColor(Color.GRAY);
buttons[i].setDateText(lastMonthDaysSum-(currentMonthFirstDateInWeek%7-i%7)+1+"");
buttons[i].setEnabled(false);
}
//
for(i =currentMonthDaysSum+currentMonthFirstDateInWeek%7+7;i<Info.ROW_COUNT*Info.COLUMN_COUNT;i++){
buttons[i].changeToState(Info.STATE_NORMAL_NORECORED);
buttons[i].setDateTextColor(Color.GRAY);
buttons[i].setDateText((i-(currentMonthDaysSum+currentMonthFirstDateInWeek%7+7)+1)+"");
buttons[i].setEnabled(false);
}
//
if(year==this.year&&month==this.month&&day==this.day)
buttons[date+currentMonthFirstDateInWeek%7+7-1].changeToState(Info.STATE_TODAY_NORECORED);
//
if(res!=0)
initLayout(res);
}
private void initCalendarLayout(){
// ,
gl_calendar.setRowCount(Info.ROW_COUNT);
gl_calendar.setColumnCount(Info.COLUMN_COUNT);
/*
*
*/
int i;
int sum = Info.ROW_COUNT*Info.COLUMN_COUNT;
//
for(i=0;i<Info.COLUMN_COUNT;i++){
buttons[i] = new CalendarButton(context);
buttons[i].setDateText(week[i]);
buttons[i].setLayoutParams(new LayoutParams(sideLength, sideLength));
gl_calendar.addView(buttons[i], i);
buttons[i].setEnabled(false);
}
for(i = Info.COLUMN_COUNT;i<sum;i++){
buttons[i] = new CalendarButton(context);
buttons[i].setDateText("55");
buttons[i].setLayoutParams(new LayoutParams(sideLength, sideLength));
gl_calendar.addView(buttons[i], i);
}
//
calendar = Calendar.getInstance();
year = calendar.get(Calendar.YEAR);
month = calendar.get(Calendar.MONTH)+1;
day = calendar.get(Calendar.DATE);
initCalendar(calendar);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch(v.getId()){
//
case R.id.imageButton2:{
calendar.roll(Calendar.MONTH, -1);
initCalendar(calendar);
break;
}
//
case R.id.imageButton3:{
calendar.roll(Calendar.MONTH, 1);
initCalendar(calendar);
break;
}
}
}
public void setOnClickButtonListener(OnClickListener l,int index){
buttons[index].setOnClickListener(l);
}
public Date getDate(int index){
return buttons[index].getDate();
}
public void setData(float f,int index){
buttons[index].tv_data.setText(String.format("%.1f", f));
buttons[index].tv_data.setVisibility(TextView.VISIBLE);
}
public void initLayout(int res){
switch(res){
case Info.VIEW_WEIHT:{
break;
}
default:{
break;
}
}
}
public void setRes(int res){
this.res = res;
}
}
第四ステップ:単一日付を作成し、モニターインターフェースをクリックするステップ3に方法を追加します。
// index
public void setOnClickButtonListener(OnClickListener l,int index){
buttons[index].setOnClickListener(l);
}
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。