先看一下效果图
1.创建一个类
MiuiWeatherView
public class MiuiWeatherView extends View {
private static int DEFAULT_BULE = 0XFF00BFFF;
private static int DEFAULT_GRAY = Color.GRAY;
private int backgroundColor;
private int minViewHeight; //控件的最低高度
private int minPointHeight;//折线最低点的高度
private int lineInterval; //折线线段长度
private float pointRadius; //折线点的半径
private float textSize; //字体大小
private float pointGap; //折线单位高度差
private int defaultPadding; //折线坐标图四周留出来的偏移量
private float iconWidth; //天气图标的边长
private int viewHeight;
private int viewWidth;
private int screenWidth;
private int screenHeight;
private Paint linePaint; //线画笔
private Paint textPaint; //文字画笔
private Paint circlePaint; //圆点画笔
private List<WeatherBean> data = new ArrayList<>(); //元数据
private List<Pair<Integer, String>> weatherDatas = new ArrayList<>(); //对元数据中分组后的集合
private List<Float> dashDatas = new ArrayList<>(); //之间虚线的x坐标集合
private List<PointF> points = new ArrayList<>(); //折线拐点的集合
private int maxTemperature;//元数据中的最高和最低温度
private int minTemperature;
private VelocityTracker velocityTracker;
private Scroller scroller;
private ViewConfiguration viewConfiguration;
public MiuiWeatherView(Context context) {
this(context, null);
}
public MiuiWeatherView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MiuiWeatherView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
scroller = new Scroller(context);
viewConfiguration = ViewConfiguration.get(context);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MiuiWeatherView);
minPointHeight = (int) ta.getDimension(R.styleable.MiuiWeatherView_min_point_height, dp2pxF(context, 60));
lineInterval = (int) ta.getDimension(R.styleable.MiuiWeatherView_line_interval, dp2pxF(context, 60));
backgroundColor = ta.getColor(R.styleable.MiuiWeatherView_background_color, Color.WHITE);
ta.recycle();
setBackgroundColor(backgroundColor);
initSize(context);
initPaint(context);
}
/**
* 初始化默认数据
*/
private void initSize(Context c) {
screenWidth = getResources().getDisplayMetrics().widthPixels;
screenHeight = getResources().getDisplayMetrics().heightPixels;
minViewHeight = 3 * minPointHeight; //默认3倍
pointRadius = dp2pxF(c, 2.5f);
textSize = sp2pxF(c, 10);
defaultPadding = (int) (0.5 * minPointHeight); //默认0.5倍
iconWidth = (1.0f / 3.0f) * lineInterval; //默认1/3倍
}
/**
* 计算折线单位高度差
*/
private void calculatePontGap() {
int lastMaxTem = -Integer.MAX_VALUE;
int lastMinTem = Integer.MAX_VALUE;
for (WeatherBean bean : data) {
if (bean.temperature > lastMaxTem) {
maxTemperature = bean.temperature;
lastMaxTem = bean.temperature;
}
if (bean.temperature < lastMinTem) {
minTemperature = bean.temperature;
lastMinTem = bean.temperature;
}
}
float gap = (maxTemperature - minTemperature) * 1.0f;
gap = (gap == 0.0f ? 1.0f : gap); //保证分母不为0
pointGap = (viewHeight - minPointHeight - 2 * defaultPadding) / gap;
}
private void initPaint(Context c) {
linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
linePaint.setStrokeWidth(dp2px(c, 1));
textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
textPaint.setTextSize(textSize);
textPaint.setColor(Color.BLACK);
textPaint.setTextAlign(Paint.Align.CENTER);
circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setStrokeWidth(dp2pxF(c, 1));
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
initSize(getContext());
calculatePontGap();
}
/**
* 公开方法，用于设置元数据
*
* @param data
*/
public void setData(List<WeatherBean> data) {
if (data == null) {
return;
}
this.data = data;
notifyDataSetChanged();
}
public List<WeatherBean> getData(){
return data;
}
public void notifyDataSetChanged(){
if(data == null){
return;
}
weatherDatas.clear();
points.clear();
dashDatas.clear();
initWeatherMap(); //初始化相邻的分组
requestLayout();
invalidate();
}
/**
* 根据元数据中连续相同的做分组,
* pair中的first值为连续相同的数量，second值为对应天气
*/
private void initWeatherMap() {
weatherDatas.clear();
String lastWeather = "";
int count = 0;
for (int i = 0; i < data.size(); i++) {
WeatherBean bean = data.get(i);
if (i == 0) {
lastWeather = bean.weather;
}
if (bean.weather != lastWeather) {
Pair<Integer, String> pair = new Pair<>(count, lastWeather);
weatherDatas.add(pair);
count = 1;
} else {
count++;
}
lastWeather = bean.weather;
if (i == data.size() - 1) {
Pair<Integer, String> pair = new Pair<>(count, lastWeather);
weatherDatas.add(pair);
}
}
for (int i = 0; i < weatherDatas.size(); i++) {
int c = weatherDatas.get(i).first;
String w = weatherDatas.get(i).second;
Log.d("ccy", "weatherMap i =" + i + ";count = " + c + ";weather = " + w);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (heightMode == MeasureSpec.EXACTLY) {
viewHeight = Math.max(heightSize, minViewHeight);
} else {
viewHeight = minViewHeight;
}
int totalWidth = 0;
if (data.size() > 1) {
totalWidth = 2 * defaultPadding + lineInterval * (data.size() - 1);
}
viewWidth = Math.max(screenWidth, totalWidth); //默认控件最小宽度为屏幕宽度
setMeasuredDimension(viewWidth, viewHeight);
calculatePontGap();
Log.d("ccy", "viewHeight = " + viewHeight + ";viewWidth = " + viewWidth);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (data.isEmpty()) {
return;
}
drawAxis(canvas);
drawLinesAndPoints(canvas);
drawTemperature(canvas);
drawWeatherDash(canvas);
drawWeatherIcon(canvas);
}
/**
* 画时间轴
*
* @param canvas
*/
private void drawAxis(Canvas canvas) {
canvas.save();
linePaint.setColor(DEFAULT_GRAY);
linePaint.setStrokeWidth(dp2px(getContext(), 1));
canvas.drawLine(defaultPadding,
viewHeight - defaultPadding,
viewWidth - defaultPadding,
viewHeight - defaultPadding,
linePaint);
float centerY = viewHeight - defaultPadding + dp2pxF(getContext(), 15);
float centerX;
for (int i = 0; i < data.size(); i++) {
String text = data.get(i).time;
centerX = defaultPadding + i * lineInterval;
Paint.FontMetrics m = textPaint.getFontMetrics();
canvas.drawText(text, 0, text.length(), centerX, centerY - (m.ascent + m.descent) / 2, textPaint);
}
canvas.restore();
}
/**
* 画折线和它拐点的园
*
* @param canvas
*/
private void drawLinesAndPoints(Canvas canvas) {
canvas.save();
linePaint.setColor(DEFAULT_BULE);
linePaint.setStrokeWidth(dp2pxF(getContext(), 1));
linePaint.setStyle(Paint.Style.STROKE);
Path linePath = new Path(); //用于绘制折线
points.clear();
int baseHeight = defaultPadding + minPointHeight;
float centerX;
float centerY;
for (int i = 0; i < data.size(); i++) {
int tem = data.get(i).temperature;
tem = tem - minTemperature;
centerY = (int) (viewHeight - (baseHeight + tem * pointGap));
centerX = defaultPadding + i * lineInterval;
points.add(new PointF(centerX, centerY));
if (i == 0) {
linePath.moveTo(centerX, centerY);
} else {
linePath.lineTo(centerX, centerY);
}
}
canvas.drawPath(linePath, linePaint); //画出折线
//接下来画折线拐点的园
float x, y;
for (int i = 0; i < points.size(); i++) {
x = points.get(i).x;
y = points.get(i).y;
//先画一个颜色为背景颜色的实心园覆盖掉折线拐角
circlePaint.setStyle(Paint.Style.FILL_AND_STROKE);
circlePaint.setColor(backgroundColor);
canvas.drawCircle(x, y,
pointRadius + dp2pxF(getContext(), 1),
circlePaint);
//再画出正常的空心园
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setColor(DEFAULT_BULE);
canvas.drawCircle(x, y,
pointRadius,
circlePaint);
}
canvas.restore();
}
/**
* 画温度描述值
*
* @param canvas
*/
private void drawTemperature(Canvas canvas) {
canvas.save();
textPaint.setTextSize(1.2f * textSize); //字体放大一丢丢
float centerX;
float centerY;
String text;
for (int i = 0; i < points.size(); i++) {
text = data.get(i).temperatureStr;
centerX = points.get(i).x;
centerY = points.get(i).y - dp2pxF(getContext(), 13);
Paint.FontMetrics metrics = textPaint.getFontMetrics();
canvas.drawText(text,
centerX,
centerY - (metrics.ascent + metrics.descent)/2,
textPaint);
}
textPaint.setTextSize(textSize);
canvas.restore();
}
/**
* 画不同温度之间的虚线
*
* @param canvas
*/
private void drawWeatherDash(Canvas canvas) {
canvas.save();
linePaint.setColor(DEFAULT_GRAY);
linePaint.setStrokeWidth(dp2pxF(getContext(), 0.5f));
linePaint.setAlpha(0xcc);
//设置画笔画出虚线
float[] f = {dp2pxF(getContext(), 5), dp2pxF(getContext(), 1)}; //两个值分别为循环的实线长度、空白长度
PathEffect pathEffect = new DashPathEffect(f, 0);
linePaint.setPathEffect(pathEffect);
dashDatas.clear();
int interval = 0;
float startX, startY, endX, endY;
endY = viewHeight - defaultPadding;
//0坐标点的虚线手动画上
canvas.drawLine(defaultPadding,
points.get(0).y + pointRadius + dp2pxF(getContext(), 2),
defaultPadding,
endY,
linePaint);
dashDatas.add((float) defaultPadding);
for (int i = 0; i < weatherDatas.size(); i++) {
interval += weatherDatas.get(i).first;
if(interval > points.size()-1){
interval = points.size()-1;
}
startX = endX = defaultPadding + interval * lineInterval;
startY = points.get(interval).y + pointRadius + dp2pxF(getContext(), 2);
dashDatas.add(startX);
canvas.drawLine(startX, startY, endX, endY, linePaint);
}
//这里注意一下，当最后一组的连续天气数为1时，是不需要计入虚线集合的，否则会多画一个天气图标
//若不理解，可尝试去掉下面这块代码并观察运行效果
if(weatherDatas.get(weatherDatas.size()-1).first == 1
&& dashDatas.size() > 1){
dashDatas.remove(dashDatas.get(dashDatas.size()-1));
}
linePaint.setPathEffect(null);
linePaint.setAlpha(0xff);
canvas.restore();
}
/**
* 若相邻虚线都在屏幕内，图标的x位置即在两虚线的中间
* 若有一条虚线在屏幕外，图标的x位置即在屏幕边沿到另一条虚线的中间
* 若两条都在屏幕外，图标x位置紧贴某一条虚线或屏幕中间
* @param canvas
*/
private void drawWeatherIcon(Canvas canvas) {
canvas.save();
textPaint.setTextSize(0.9f * textSize); //字体缩小一丢丢
boolean leftUsedScreenLeft = false;
boolean rightUsedScreenRight = false;
int scrollX = getScrollX(); //范围控制在0 ~ viewWidth-screenWidth
float left, right;
float iconX, iconY;
float textY; //文字的x坐标跟图标是一样的，无需额外声明
iconY = viewHeight - (defaultPadding + minPointHeight / 2.0f);
textY = iconY + iconWidth / 2.0f + dp2pxF(getContext(), 10);
Paint.FontMetrics metrics = textPaint.getFontMetrics();
for (int i = 0; i < dashDatas.size() - 1; i++) {
left = dashDatas.get(i);
right = dashDatas.get(i + 1);
//以下校正的情况为：两条虚线都在屏幕内或只有一条在屏幕内
if (left < scrollX && //仅左虚线在屏幕外
right < scrollX + screenWidth) {
left = scrollX;
leftUsedScreenLeft = true;
}
if (right > scrollX + screenWidth && //仅右虚线在屏幕外
left > scrollX) {
right = scrollX + screenWidth;
rightUsedScreenRight = true;
}
if (right - left > iconWidth) { //经过上述校正之后左右距离还大于图标宽度
iconX = left + (right - left) / 2.0f;
} else { //经过上述校正之后左右距离小于图标宽度，则贴着在屏幕内的虚线
if (leftUsedScreenLeft) {
iconX = right - iconWidth / 2.0f;
} else {
iconX = left + iconWidth / 2.0f;
}
}
//以下校正的情况为：两条虚线都在屏幕之外
if (right < scrollX) { //两条都在屏幕左侧，图标紧贴右虚线
iconX = right - iconWidth / 2.0f;
} else if (left > scrollX + screenWidth) { //两条都在屏幕右侧，图标紧贴左虚线
iconX = left + iconWidth / 2.0f;
} else if (left < scrollX && right > scrollX + screenWidth) { //一条在屏幕左一条在屏幕右，图标居中
iconX = scrollX + (screenWidth / 2.0f);
}
leftUsedScreenLeft = rightUsedScreenRight = false; //重置标志位
}
textPaint.setTextSize(textSize);
canvas.restore();
}
private float lastX = 0;
private float x = 0;
@Override
public boolean onTouchEvent(MotionEvent event) {
if (velocityTracker == null) {
velocityTracker = VelocityTracker.obtain();
}
velocityTracker.addMovement(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (!scroller.isFinished()) { //fling还没结束
scroller.abortAnimation();
}
lastX = x = event.getX();
return true;
case MotionEvent.ACTION_MOVE:
x = event.getX();
int deltaX = (int) (lastX - x);
if (getScrollX() + deltaX < 0) { //越界恢复
scrollTo(0, 0);
return true;
} else if (getScrollX() + deltaX > viewWidth - screenWidth) {
scrollTo(viewWidth - screenWidth, 0);
return true;
}
scrollBy(deltaX, 0);
lastX = x;
break;
case MotionEvent.ACTION_UP:
x = event.getX();
velocityTracker.computeCurrentVelocity(1000); //计算1秒内滑动过多少像素
int xVelocity = (int) velocityTracker.getXVelocity();
if (Math.abs(xVelocity) > viewConfiguration.getScaledMinimumFlingVelocity()) { //滑动速度可被判定为抛动
scroller.fling(getScrollX(), 0, -xVelocity, 0, 0, viewWidth - screenWidth, 0, 0);
invalidate();
}
break;
}
return super.onTouchEvent(event);
}
@Override
public void computeScroll() {
super.computeScroll();
if (scroller.computeScrollOffset()) {
scrollTo(scroller.getCurrX(), scroller.getCurrY());
invalidate();
}
}
//工具类
public static int dp2px(Context c, float dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, c.getResources().getDisplayMetrics());
}
public static int sp2px(Context c, float sp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, c.getResources().getDisplayMetrics());
}
public static float dp2pxF(Context c, float dp) {
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, c.getResources().getDisplayMetrics());
}
public static float sp2pxF(Context c, float sp) {
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, c.getResources().getDisplayMetrics());
}
}
2.在values文件下创建attr布局
<resources>
<declare-styleable name="MiuiWeatherView">
<attr name="line_interval" format="dimension"/>
<attr name="min_point_height" format="dimension"/>
<attr name="background_color" format="color"/>
</declare-styleable>
</resources>
3.创建一个bean类
WeatherBean
public class WeatherBean {
public String weather; //取值
public int temperature; //温度值
public String temperatureStr; //温度的描述值
public String time; //时间值
public WeatherBean( int temperature,String time) {
this.temperature = temperature;
this.time = time;
this.temperatureStr = temperature + "℃";
}
}
4.XML布局
<包名.MiuiWeatherView
android:id="@+id/weather"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:line_interval="60dp"
app:min_point_height="60dp"
app:background_color="#ffffff"></包名.MiuiWeatherView>
5.MainActivity
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MiuiWeatherView weatherView = (MiuiWeatherView) findViewById(R.id.weather);
List<WeatherBean> data = new ArrayList<>();
WeatherBean b1 = new WeatherBean(26,"00:00");
WeatherBean b2 = new WeatherBean(28,"01:00");
WeatherBean b3 = new WeatherBean(30,"02:00");
WeatherBean b4 = new WeatherBean(34,"03:00");
WeatherBean b5 = new WeatherBean(35,"04:00");
WeatherBean b6 = new WeatherBean(36,"05:00");
WeatherBean b7 = new WeatherBean(37,"06:00");
WeatherBean b8 = new WeatherBean(38,"07:00");
WeatherBean b9 = new WeatherBean(39,"08:00");
WeatherBean b10 = new WeatherBean(36,"09:00");
WeatherBean b11= new WeatherBean(37,"10:00");
WeatherBean b12= new WeatherBean(38,"11:00");
WeatherBean b13= new WeatherBean(34,"12:00");
WeatherBean b14= new WeatherBean(36,"13:00");
WeatherBean b15= new WeatherBean(35,"14:00");
WeatherBean b16= new WeatherBean(37,"15:00");
WeatherBean b17= new WeatherBean(40,"16:00");
WeatherBean b18= new WeatherBean(36,"17:00");
WeatherBean b19= new WeatherBean(38,"18:00");
WeatherBean b20= new WeatherBean(35,"19:00");
WeatherBean b21= new WeatherBean(37,"20:00");
WeatherBean b22= new WeatherBean(34,"21:00");
WeatherBean b23= new WeatherBean(36,"22:00");
WeatherBean b24= new WeatherBean(38,"23:00");
//...b3、b4......bn
data.add(b1);
data.add(b2);
data.add(b3);
data.add(b4);
data.add(b5);
data.add(b6);
data.add(b7);
data.add(b8);
data.add(b9);
data.add(b10);
data.add(b11);
data.add(b12);
data.add(b13);
data.add(b14);
data.add(b15);
data.add(b16);
data.add(b17);
data.add(b18);
data.add(b19);
data.add(b20);
data.add(b21);
data.add(b22);
data.add(b23);
data.add(b24);
weatherView.setData(data);
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
