简介
最新看到某星的系统自带的天气系统展示的24小时的天气感觉不错，打算动手实现个。主要效果：展示24小时每个小时的天气信息，并且可滑动，加入滚动显示动画。效果图如下：
效果图
天气.gif
实现
我们根据效果图一一分析下如何实现，根据效果图的展示，我们先不考虑滑动，只看界面来，首先有两条温度线，一条0-24的时间轴，时间轴上方是圆角矩形展示的风力，温度线中间展示温度折线。这样分析出来 那么感觉很简单了，剩下的就是滑动了，我们可以使用横向的HorizontalScrollView重写onDraw方法实现。步骤如下：
1、初始化展示温度数据（这里用了一个bean类包含了天气信息，会贴出）
2、绘制时间轴、温度线、风力等信息（代码会在下面直接贴出）
3、设置滑动效果
天气bean类
public class HourItem {
public String time; //时间点
public Rect windyBoxRect; //表示风力的box
public int windy; //风力
public int temperature; //温度
public Point tempPoint; //温度的点坐标
public int res = -1; //图片资源(有则绘制)
}
整个View的源码：
/**
* 作者: Sunshine
* 时间: 2016/10/28.
* 邮箱: [email protected]
* 描述: 24小时天气类
*/
public class Today24HourView extends View {
private static final String TAG = Today24HourView.class.getSimpleName();
private static final int ITEM_SIZE = 24; //24小时
private static final int ITEM_WIDTH = 140; //每个Item的宽度
private static final int MARGIN_LEFT_ITEM = 100; //左边预留宽度
private static final int MARGIN_RIGHT_ITEM = 100; //右边预留宽度
private static final int windyBoxAlpha = 80;
private static final int windyBoxMaxHeight = 80;
private static final int windyBoxMinHeight = 20;
private static final int windyBoxSubHight = windyBoxMaxHeight - windyBoxMinHeight;
private static final int bottomTextHeight = 60;
private int mHeight, mWidth;
private int tempBaseTop; //温度折线的上边Y坐标
private int tempBaseBottom; //温度折线的下边Y坐标
private Paint bitmapPaint, windyBoxPaint, linePaint, pointPaint, dashLinePaint;
private TextPaint textPaint;
private List listItems;
private int maxScrollOffset = 0;//滚动条最长滚动距离
private int scrollOffset = 0; //滚动条偏移量
private int currentItemIndex = 0; //当前滚动的位置所对应的item下标
private int currentWeatherRes = -1;
private int maxTemp = 26;
private int minTemp = 21;
private int maxWindy = 5;
private int minWindy = 2;
private static final int TEMP[] = {22, 23, 23, 23, 23,
22, 23, 23, 23, 22,
21, 21, 22, 22, 23,
23, 24, 24, 25, 25,
25, 26, 25, 24};
private static final int WINDY[] = {2, 2, 3, 3, 3,
4, 4, 4, 3, 3,
3, 4, 4, 4, 4,
2, 2, 2, 3, 3,
3, 5, 5, 5};
private static final int WEATHER_RES[] ={R.mipmap.w0,
R.mipmap.w1,
R.mipmap.w3,
-1,
-1,
R.mipmap.w5,
R.mipmap.w7,
R.mipmap.w9,
-1, -1
,-1,
R.mipmap.w10,
R.mipmap.w15, -1, -1
,-1, -1, -1, -1, -1
,R.mipmap.w18, -1, -1,
R.mipmap.w19};
public Today24HourView(Context context) {
this(context, null);
}
public Today24HourView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public Today24HourView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mWidth = MARGIN_LEFT_ITEM + MARGIN_RIGHT_ITEM + ITEM_SIZE * ITEM_WIDTH;
mHeight = 500; //暂时先写死
tempBaseTop = (500 - bottomTextHeight)/4;
tempBaseBottom = (500 - bottomTextHeight)*2/3;
initHourItems();
initPaint();
}
private void initPaint() {
pointPaint = new Paint();
pointPaint.setColor(Color.WHITE);
pointPaint.setAntiAlias(true);
pointPaint.setTextSize(8);
linePaint = new Paint();
linePaint.setColor(Color.WHITE);
linePaint.setAntiAlias(true);
linePaint.setStyle(Paint.Style.STROKE);
linePaint.setStrokeWidth(5);
dashLinePaint = new Paint();
dashLinePaint.setColor(Color.WHITE);
PathEffect effect = new DashPathEffect(new float[]{5, 5, 5, 5}, 1);
dashLinePaint.setPathEffect(effect);
dashLinePaint.setStrokeWidth(3);
dashLinePaint.setAntiAlias(true);
dashLinePaint.setStyle(Paint.Style.STROKE);
windyBoxPaint = new Paint();
windyBoxPaint.setTextSize(1);
windyBoxPaint.setColor(Color.WHITE);
windyBoxPaint.setAlpha(windyBoxAlpha);
windyBoxPaint.setAntiAlias(true);
textPaint = new TextPaint();
textPaint.setTextSize(ConvertUtils.sp2px(getContext(), 12));
textPaint.setColor(Color.WHITE);
textPaint.setAntiAlias(true);
bitmapPaint = new Paint();
bitmapPaint.setAntiAlias(true);
}
//简单初始化下，后续改为由外部传入
private void initHourItems(){
listItems = new ArrayList<>();
for(int i=0; i=0; k--){
if(listItems.get(k).res != -1)
return listItems.get(k).res;
}
return -1;
}
//画底部风力的BOX
private void onDrawBox(Canvas canvas, Rect rect, int i) {
// 新建一个矩形
RectF boxRect = new RectF(rect);
HourItem item = listItems.get(i);
if(i == currentItemIndex) {
windyBoxPaint.setAlpha(255);
canvas.drawRoundRect(boxRect, 4, 4, windyBoxPaint);
//画出box上面的风力提示文字
Rect targetRect = new Rect(getScrollBarX(), rect.top - ConvertUtils.dp2px(getContext(), 20)
, getScrollBarX() + ITEM_WIDTH, rect.top - ConvertUtils.dp2px(getContext(), 0));
Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
int baseline = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
textPaint.setTextAlign(Paint.Align.CENTER);
canvas.drawText("风力" + item.windy + "级", targetRect.centerX(), baseline, textPaint);
} else {
windyBoxPaint.setAlpha(windyBoxAlpha);
canvas.drawRoundRect(boxRect, 4, 4, windyBoxPaint);
}
}
//温度的折线,为了折线比较平滑，做了贝塞尔曲线
private void onDrawLine(Canvas canvas, int i) {
linePaint.setColor(Color.YELLOW);
linePaint.setStrokeWidth(3);
Point point = listItems.get(i).tempPoint;
if(i != 0){
Point pointPre = listItems.get(i-1).tempPoint;
Path path = new Path();
path.moveTo(pointPre.x, pointPre.y);
if(i % 2 == 0)
path.cubicTo((pointPre.x+point.x)/2, (pointPre.y+point.y)/2-7, (pointPre.x+point.x)/2, (pointPre.y+point.y)/2+7, point.x, point.y);
else
path.cubicTo((pointPre.x+point.x)/2, (pointPre.y+point.y)/2+7, (pointPre.x+point.x)/2, (pointPre.y+point.y)/2-7, point.x, point.y);
canvas.drawPath(path, linePaint);
}
}
//绘制底部时间
private void onDrawText(Canvas canvas, int i) {
//此处的计算是为了文字能够居中
Rect rect = listItems.get(i).windyBoxRect;
Rect targetRect = new Rect(rect.left, rect.bottom, rect.right, rect.bottom + bottomTextHeight);
Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
int baseline = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
textPaint.setTextAlign(Paint.Align.CENTER);
String text = listItems.get(i).time;
canvas.drawText(text, targetRect.centerX(), baseline, textPaint);
}
public void drawLeftTempText(Canvas canvas, int offset){
//画最左侧的文字
textPaint.setTextAlign(Paint.Align.LEFT);
canvas.drawText(maxTemp + "°", ConvertUtils.dp2px(getContext(), 6) + offset, tempBaseTop, textPaint);
canvas.drawText(minTemp + "°", ConvertUtils.dp2px(getContext(), 6) + offset, tempBaseBottom, textPaint);
}
//设置scrollerView的滚动条的位置，通过位置计算当前的时段
public void setScrollOffset(int offset, int maxScrollOffset){
this.maxScrollOffset = maxScrollOffset;
scrollOffset = offset;
int index = calculateItemIndex(offset);
currentItemIndex = index;
invalidate();
}
//通过滚动条偏移量计算当前选择的时刻
private int calculateItemIndex(int offset){
// Log.d(TAG, "maxScrollOffset = " + maxScrollOffset + " scrollOffset = " + scrollOffset);
int x = getScrollBarX();
int sum = MARGIN_LEFT_ITEM - ITEM_WIDTH/2;
for(int i=0; i= ITEM_SIZE || startPoint == null)
return listItems.get(ITEM_SIZE-1).tempPoint.y;
endPoint = listItems.get(i+1).tempPoint;
Rect rect = listItems.get(i).windyBoxRect;
int y = (int)(startPoint.y + (x - rect.left)*1.0/ITEM_WIDTH * (endPoint.y - startPoint.y));
return y;
}
}
HorizontalScrollView的设置
/**
* 作者: Sunshine
* 时间: 2016/10/28.
* 邮箱: [email protected]
* 描述: IndexHorizontalScrollView
*/
public class IndexHorizontalScrollView extends HorizontalScrollView {
private static final String TAG = IndexHorizontalScrollView.class.getSimpleName();
private Paint textPaint;
private Today24HourView today24HourView;
public IndexHorizontalScrollView(Context context) {
this(context, null);
}
public IndexHorizontalScrollView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public IndexHorizontalScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
textPaint = new Paint();
textPaint.setTextSize(ConvertUtils.sp2px(getContext(), 12));
textPaint.setAntiAlias(true);
textPaint.setColor(new Color().WHITE);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int offset = computeHorizontalScrollOffset();
int maxOffset = computeHorizontalScrollRange() - ScreenUtils.getScreenWidth(getContext());
if(today24HourView != null){
// today24HourView.drawLeftTempText(canvas, offset);
today24HourView.setScrollOffset(offset, maxOffset);
}
}
public void setToday24HourView(Today24HourView today24HourView){
this.today24HourView = today24HourView;
}
}
最后的展示设置：
public class Today24HourActivity extends AppCompatActivity {
private IndexHorizontalScrollView indexHorizontalScrollView;
private Today24HourView today24HourView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_today24_hour);
indexHorizontalScrollView = (IndexHorizontalScrollView)findViewById(R.id.indexHorizontalScrollView);
today24HourView = (Today24HourView)findViewById(R.id.today24HourView);
indexHorizontalScrollView.setToday24HourView(today24HourView);
}
}