支付宝刚刚升级到9.5.1,看了一眼里面的芝麻信用分,仪表盘挺好看的,之前也做了一个关于芝麻信用分的,不过那个是芝麻信用分解读,很多人以为是仪表盘,所以去下载,结果不言而喻,在此非常抱歉,现在想着来写一个这个版本的仪表盘,不说完全一模一样,只是为了猜测支付宝在做这个的时候是如何设计的,在此记录一下
先看看支付宝9.5.1的效果:
上图顶部有文本,中间是个仪表盘,仪表进度变化时用户的信用分会随着显示,同时背景颜色会随着变化,下面分别是芝麻分解读与信用提升,大体就是这样,底部猜测只是布局就能实现,所以不对它进行模仿
再看看做的效果:
模拟器上效果不是很好,在手机上是挺完美的,在此附上手机上的效果:
说说思路:
控件里各个区域的view位置准备采用View宽高的百分比来放置,这样顶部的位置就能确定了
中间仪表盘,里面的刻度值不规律,分别为350,550,600,650,700,750,950,之前一直没有想到什么办法,最后猜测支付宝是把这些值传递过来的,并且传递的值按照大概象限区分,即350-550算较差,550-600算中等,以此类推。所以仪表盘的内容基本上就可以写成实体对象,如:
package com.view.panel;
import java.io.Serializable;
import java.lang.String;import java.util.ArrayList;
/**
* Created by wanghan on 16/1/22.
*/
public class SesameModel implements Serializable {
private int userTotal;//用户信用分
private String assess;//评价
private int totalMin;//区间最小值
private int totalMax;//区间最大值
private String firstText;//第一个文本值:BETA
private String fourText;//第四个文本:评估时间
private String topText;//顶部文本
private ArrayList<SesameItemModel> sesameItemModels;
public String getTopText() {
return topText;
}
public void setTopText(String topText) {
this.topText = topText;
}
public String getFirstText() {
return firstText;
}
public void setFirstText(String firstText) {
this.firstText = firstText;
}
public String getFourText() {
return fourText;
}
public void setFourText(String fourText) {
this.fourText = fourText;
}
public int getUserTotal() {
return userTotal;
}
public void setUserTotal(int userTotal) {
this.userTotal = userTotal;
}
public String getAssess() {
return assess;
}
public void setAssess(String assess) {
this.assess = assess;
}
public int getTotalMin() {
return totalMin;
}
public void setTotalMin(int totalMin) {
this.totalMin = totalMin;
}
public int getTotalMax() {
return totalMax;
}
public void setTotalMax(int totalMax) {
this.totalMax = totalMax;
}
public ArrayList<SesameItemModel> getSesameItemModels() {
return sesameItemModels;
}
public void setSesameItemModels(ArrayList<SesameItemModel> sesameItemModels) {
this.sesameItemModels = sesameItemModels;
}
}
package com.view.panel;
import java.io.Serializable;
/**
* Created by wanghan on 16/1/22.
*/
public class SesameItemModel implements Serializable {
private String area;//区域:良好,中等,较差...
private int min;//该区域最小值
private int max;//该区域最大值
public String getArea() {
return area;
}
public void setArea(String area) {
this.area = area;
}
public int getMax() {
return max;
}
public void setMax(int max) {
this.max = max;
}
public int getMin() {
return min;
}
public void setMin(int min) {
this.min