Android 日历控件
2017-03-17 本文已影响333人
那个唐僧
a.gif
想写个日历选择的控件,如上图的效果,我也曾想站在巨人的肩膀上,奈何巨人也是坑哎..
起初,在codeKK上找了个第三方的库,用起来很爽,然后我Demo了之后就网项目里面依赖了,结果和原项目的一个库中的字段有冲突,想着那就该字段吧,转念一想,字段改了岂不是项目中所有用到的这个字段都得改呢.我嫌麻烦,真的嫌麻烦
再说项目依赖的库真的也有点多,所以我准备自己撸出来一个空间,已知原项目中,已有如下的一个库.是WheelView
compile 'com.bigkoo:pickerview:2.0.8'
那么好,既然有了个WheelView的库,那就在这个基础上开始写就好了.于是呢,我就真的开始写了..
我计划用一个dialogFragment 来弹出来选则框.dialogFragment和dialog的区别呢,就不多说了.
然后我就开始了
<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="horizontal"
>
<TextView
android:id="@+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:text="取消"
android:textColor="#99999999"
android:textSize="16sp"
/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<TextView
android:id="@+id/confrim"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:text="确定"
android:textColor="#342564"
android:textSize="16sp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<com.bigkoo.pickerview.lib.WheelView
android:id="@+id/year"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
</com.bigkoo.pickerview.lib.WheelView>
<com.bigkoo.pickerview.lib.WheelView
android:id="@+id/month"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
</com.bigkoo.pickerview.lib.WheelView>
<com.bigkoo.pickerview.lib.WheelView
android:id="@+id/day"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
>
</com.bigkoo.pickerview.lib.WheelView>
</LinearLayout>
</LinearLayout>
以上是布局文件,其中com.bigkoo.pickerview.lib.WheelView为原项目所依赖的库,就是滚轮类似的控件.
布局写完,我开始着手写dialogFragment了
public class SccDateDialog extends DialogFragment {
private static final String TAG = "SccDateDialog";
private TextView confrim, cancel;
private WheelView year, month, day;
private List<String> years;
private List<String> months;
private List<String> days;
private String mStringYear;
private String mStringMonth;
private String mStringDay;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.sccdatedialog, null);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
initViews();
initDatas();
initWheelViews();
getSelected();
}
/**
* 弹出选择的时间
*/
private void getSelected() {
confrim.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getActivity(), mStringYear + "-" + mStringMonth + "-" + mStringDay, Toast.LENGTH_SHORT).show();
dismiss();
}
});
cancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
dismiss();
}
});
}
/**
* 给WheelView添加数据
*/
private void initWheelViews() {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String date = sdf.format(new Date(System.currentTimeMillis()));
String[] strings = date.split("-");
year.setCurrentItem(years.indexOf(strings[0]));
Log.e(TAG, "initWheelViews: setCurrentItem(3)--->"+3 );
mStringYear = years.get(years.indexOf(strings[0]));
Log.e(TAG, "initWheelViews: getCurrentItem()--->"+year.getCurrentItem() );
year.setCyclic(false);
year.setAdapter(new WheelAdapter() {
@Override
public int getItemsCount() {
return years.size();
}
@Override
public Object getItem(int index) {
return years.get(index);
}
@Override
public int indexOf(Object o) {
return years.indexOf(o);
}
});
year.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(int index) {
mStringYear = years.get(year.getCurrentItem());
}
});
month.setCurrentItem(months.indexOf(strings[1]));
mStringMonth = months.get(months.indexOf(strings[1]));
month.setCyclic(false);
month.setAdapter(new WheelAdapter() {
@Override
public int getItemsCount() {
return months.size();
}
@Override
public Object getItem(int index) {
return months.get(index);
}
@Override
public int indexOf(Object o) {
return months.indexOf(o);
}
});
month.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(int index) {
mStringMonth = months.get(month.getCurrentItem());
}
});
day.setCurrentItem(days.indexOf(strings[2]));
mStringDay = days.get(days.indexOf(strings[2]));
day.setCyclic(false);
day.setAdapter(new WheelAdapter() {
@Override
public int getItemsCount() {
return days.size();
}
@Override
public Object getItem(int index) {
return days.get(index);
}
@Override
public int indexOf(Object o) {
return days.indexOf(o);
}
});
day.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(int index) {
mStringDay = days.get(day.getCurrentItem());
}
});
}
/**
* 初始化数据
*/
private void initDatas() {
years = new ArrayList<>();
months = new ArrayList<>();
days = new ArrayList<>();
for (int i = 2014; i < 2021; i++) {
years.add(i + "");
}
for (int i = 1; i <= 12; i++) {
if (i < 10) {
months.add("0" + i);
} else {
months.add(i + "");
}
}
for (int i = 1; i <= 31; i++) {
if (i < 10) {
days.add("0" + i);
} else {
days.add(i + "");
}
}
}
/**
* 初始化控件
*/
private void initViews() {
confrim = (TextView) getView().findViewById(R.id.confrim);
cancel = (TextView) getView().findViewById(R.id.cancel);
year = (WheelView) getView().findViewById(R.id.year);
month = (WheelView) getView().findViewById(R.id.month);
day = (WheelView) getView().findViewById(R.id.day);
}
}
此时,这个库的坑给出来了.
year.setCurrentItem(years.indexOf(strings[0]));
Log.e(TAG, "initWheelViews: setCurrentItem(3)--->"+3 );
mStringYear = years.get(years.indexOf(strings[0]));
Log.e(TAG, "initWheelViews: getCurrentItem()--->"+year.getCurrentItem() );
year.setCyclic(false);
year是显示年的WheelView,setCurrentItem我起初设置为3,然后打印一下,因为set和get的设置值和返回值不一致.所以打印主要是想和getCurrentItem做一个对比. 结果真的对比做出来了..
1212.png
log打印如下, 我当时就起了怪了,set和get得到的值为啥不一样啊,,.这让我怎么搞呢, 出去抽根烟吧.
调整一下情绪和思路,开始看源码.看作者到底是咋搞的..于是,打开了源码
这是源码中的get方法:
public final int getCurrentItem() {
return selectedItem;
}
返回了一个selectedItem这个字段.那搜一下这个字段吧.共两处,第一处是声明,哈哈
private int selectedItem;
第二处是:
if (translateY >= firstLineY && maxTextHeight + translateY <= secondLineY) {
// 中间条目
canvas.clipRect(0, 0, measuredWidth, (int) (itemHeight));
canvas.drawText(contentText, drawCenterContentStart, maxTextHeight - CENTERCONTENTOFFSET, paintCenterText);
int preSelectedItem = adapter.indexOf(visibles[counter]);
if(preSelectedItem != -1){
selectedItem = preSelectedItem;
}
那再看看preSelectedItem字段呗
int preSelectedItem = adapter.indexOf(visibles[counter]);
那就在看看这个visibles[counter],数组就不看了,看一下索引值吧
counter = 0;
while (counter < itemsVisible) {
canvas.save();
// L(弧长)=α（弧度）* r(半径) （弧度制）
// 求弧度--> (L * π ) / (π * r) (弧长X派/半圆周长)
float itemHeight = maxTextHeight * lineSpacingMultiplier;
double radian = ((itemHeight * counter - itemHeightOffset) * Math.PI) / halfCircumference;
// 弧度转换成角度(把半圆以Y轴为轴心向右转90度，使其处于第一象限及第四象限
float angle = (float) (90D - (radian / Math.PI) * 180D);
// 九十度以上的不绘制
if (angle >= 90F || angle <= -90F) {
canvas.restore();
} else {
String contentText = getContentText(visibles[counter]);
//计算开始绘制的位置
measuredCenterContentStart(contentText);
measuredOutContentStart(contentText);
float translateY = (float) (radius - Math.cos(radian) * radius - (Math.sin(radian) * maxTextHeight) / 2D);
//根据Math.sin(radian)来更改canvas坐标系原点，然后缩放画布，使得文字高度进行缩放，形成弧形3d视觉差
canvas.translate(0.0F, translateY);
canvas.scale(1.0F, (float) Math.sin(radian));
if (translateY <= firstLineY && maxTextHeight + translateY >= firstLineY) {
// 条目经过第一条线
canvas.save();
canvas.clipRect(0, 0, measuredWidth, firstLineY - translateY);
canvas.scale(1.0F, (float) Math.sin(radian) * SCALECONTENT);
canvas.drawText(contentText, drawOutContentStart, maxTextHeight, paintOuterText);
canvas.restore();
canvas.save();
canvas.clipRect(0, firstLineY - translateY, measuredWidth, (int) (itemHeight));
canvas.scale(1.0F, (float) Math.sin(radian) * 1F);
canvas.drawText(contentText, drawCenterContentStart, maxTextHeight - CENTERCONTENTOFFSET, paintCenterText);
canvas.restore();
} else if (translateY <= secondLineY && maxTextHeight + translateY >= secondLineY) {
// 条目经过第二条线
canvas.save();
canvas.clipRect(0, 0, measuredWidth, secondLineY - translateY);
canvas.scale(1.0F, (float) Math.sin(radian) * 1.0F);
canvas.drawText(contentText, drawCenterContentStart, maxTextHeight - CENTERCONTENTOFFSET, paintCenterText);
canvas.restore();
canvas.save();
canvas.clipRect(0, secondLineY - translateY, measuredWidth, (int) (itemHeight));
canvas.scale(1.0F, (float) Math.sin(radian) * SCALECONTENT);
canvas.drawText(contentText, drawOutContentStart, maxTextHeight, paintOuterText);
canvas.restore();
} else if (translateY >= firstLineY && maxTextHeight + translateY <= secondLineY) {
// 中间条目
canvas.clipRect(0, 0, measuredWidth, (int) (itemHeight));
canvas.drawText(contentText, drawCenterContentStart, maxTextHeight - CENTERCONTENTOFFSET, paintCenterText);
int preSelectedItem = adapter.indexOf(visibles[counter]);
if(preSelectedItem != -1){
selectedItem = preSelectedItem;
}
} else {
// 其他条目
canvas.save();
canvas.clipRect(0, 0, measuredWidth, (int) (itemHeight));
canvas.scale(1.0F, (float) Math.sin(radian) * SCALECONTENT);
canvas.drawText(contentText, drawOutContentStart, maxTextHeight, paintOuterText);
canvas.restore();
}
canvas.restore();
}
counter++;
}
初始化为0,然后在监听中有++
所以日历控件显示的初始值为今天的话,点击之后获得的值是为0的item下标.哎,不说了,自己去改吧..改完后的代码就是SccDateDialog的代码,其实就是把初始化的值自己获取一下..
其实原作者很厉害,只是差那么一点点就完美了..
