一丶效果图

二丶需求功能点技术点

1.业务想要的大致模样

呈现地图及省份，高热点地域颜色越红，前五以不同色值标注

2.程序员表示

移动端没有控件及框架，开发的话需要大量时间。前段有相关框架，不如前段做吧...

3.项目经理表示

手机屏幕就那么大，不适合展示整张中国地图，展示的话文字小，体验感也不高，设计师切个半屏图，程序员加点动画展现数据...

最终讨论效果如图

4.技术点

1.根据设计师给的背景图，测量文字显示位置

2.平移呈现动画 ObjectAnimator平移动画即可

三丶看代码

1.造数据

实体类MapViewEntity.Java

public classMapViewEntity implementsSerializable {

publicString overviewName;//区块名称publicString overviewSubName;//区块子名称publicList areaList;//区域列表数据public static classArea implementsSerializable {

public intranking;//排名publicString areaName;//区域名称public intareaCount;//数量}

} 写成public，可省去get set方法

public voidgetData(){

areaList= newArrayList<>();MapViewEntity.Area area1= newMapViewEntity.Area();area1.areaName= "武汉";area1.areaCount= 5;area1.ranking= 1;MapViewEntity.Area area2= newMapViewEntity.Area();area2.areaName= "深圳";area2.areaCount= 4;area2.ranking= 2;MapViewEntity.Area area3= newMapViewEntity.Area();area3.areaName= "北京";area3.areaCount= 3;area3.ranking= 3;MapViewEntity.Area area4= newMapViewEntity.Area();area4.areaName= "上海";area4.areaCount= 2;area4.ranking= 4;MapViewEntity.Area area5= newMapViewEntity.Area();area5.areaName= "惠州";area5.areaCount= 1;area5.ranking= 5;areaList.add(area1);areaList.add(area2);areaList.add(area3);areaList.add(area4);areaList.add(area5);} 这里只造用到的数据

2.MyViewActivity

@Overrideprotected voidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.map_view_activity);MapView mapView = (MapView) findViewById(R.id.mapview);getData();mapView.init(areaList);} xml布局里面就一个TextView和自定义MapView(略)

MapView.Java

public classMapView extendsLinearLayout {

privateDecimalFormat format=newDecimalFormat("###,###,###");publicMapView(Context context) {

super(context);setOrientation(HORIZONTAL);}

publicMapView(Context context,@NullableAttributeSet attrs) {

super(context,attrs);setOrientation(HORIZONTAL);}

publicMapView(Context context,@NullableAttributeSet attrs, intdefStyleAttr) {

super(context,attrs,defStyleAttr);setOrientation(HORIZONTAL);}

intbgHeight= 0,bgWidth= 0;public voidinit(List datas) {

removeAllViews();if(datas == null) {

return;}

//左侧背景图ImageView imageView = newImageView(getContext());Bitmap bg = BitmapFactory.decodeResource(getResources(),R.mipmap.map_bg);if(bg != null) {

imageView.setImageBitmap(bg);bgHeight= bg.getHeight();bgWidth= bg.getWidth();}

addView(imageView);finalLinearLayout itemContainer = newLinearLayout(getContext());itemContainer.setOrientation(VERTICAL);for(inti = 0;i < datas.size();i++) {

View item = LayoutInflater.from(getContext()).inflate(R.layout.map_view_item,itemContainer, false);TextView indexView = (TextView) item.findViewById(R.id.index);TextView textView = (TextView) item.findViewById(R.id.text);GradientDrawable indexDrawable = (GradientDrawable) indexView.getBackground();intcolor = Color.parseColor("#FA7401");switch(i) {

case0:

color = Color.parseColor("#FA7401");break;case1:

color = Color.parseColor("#D2007F");break;case2:

color = Color.parseColor("#006FBF");break;case3:

color = Color.parseColor("#009C85");break;case4:

color = Color.parseColor("#8FC41E");break;}

indexDrawable.setColor(color);indexView.setBackground(indexDrawable);MapViewEntity.Area area=datas.get(i);indexView.setText(area.ranking+ "");textView.setTextColor(color);textView.setText(area.areaName+" "+format.format(area.areaCount));itemContainer.addView(item);}

LayoutParams lp = newLayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);lp.leftMargin= -bgWidth;addView(itemContainer,lp);//修正位置(瞎计算)getViewTreeObserver().addOnPreDrawListener(newViewTreeObserver.OnPreDrawListener() {

@Overridepublic booleanonPreDraw() {

floatdegree0 = (float) Math.sin(Math.PI* 30.0/ 180.0);floatdegree1 = (float) Math.sin(Math.PI* 60.0/ 180.0);floatdegree2 = (float) Math.sin(Math.PI* 90.0/ 180.0);intshift = (int) (getResources().getDisplayMetrics().density* 7);for(inti = 0;i < itemContainer.getChildCount();i++) {

finalView item = itemContainer.getChildAt(i);LayoutParams lp = (LayoutParams) item.getLayoutParams();switch(i) {

case0:

lp.leftMargin= (int) (bgWidth* degree0) + shift * 4;lp.topMargin= (int) (bgHeight* degree0) / 22;break;case1:

lp.leftMargin= (int) (bgWidth* degree1) + shift * 2;lp.topMargin= (int) (bgHeight* degree1) / 16;break;case2:

lp.leftMargin= (int) (bgWidth* degree2) + shift;lp.topMargin= (int) (bgHeight* degree2) / 8;break;case3:

lp.leftMargin= (int) (bgWidth* degree1) + shift * 2;lp.topMargin= (int) (bgHeight* degree2) / 8;break;case4:

lp.leftMargin= (int) (bgWidth* degree0) + shift * 4;lp.topMargin= (int) (bgHeight* degree1) / 16;break;}

item.setLayoutParams(lp);item.setVisibility(View.GONE);item.postDelayed(newRunnable() {

@Overridepublic voidrun() {

ObjectAnimator anim = ObjectAnimator.ofFloat(item,"translationX",-bgWidth,0);anim.setDuration(1000);anim.addListener(newAnimatorListenerAdapter() {

@Overridepublic voidonAnimationStart(Animator animation) {

super.onAnimationStart(animation);item.setVisibility(View.VISIBLE);}

});anim.start();}

},(i + 1) * 300);}

getViewTreeObserver().removeOnPreDrawListener(this);return false;}

});}

} 直接看init()方法,传入要展示的值

1.首先添加背景图，并获取宽高

2.添加LinearLayout设置垂直布局

3.将文字显示需要动画的部分，添加到LinearLayout

map_view_item

<?xml version="1.0"encoding="utf-8"?> 图解：

for循环

根据个数动态添加移动布局，遍历添加对应数值

switch (i)添加不同颜色

最后测量item的显示位置，瞎测量

为什么说瞎测量呢？

背景图的高度，近似等于直径长度，所以top值是可以通过控制被除数调整的

背景图的宽度等于半径+X(当然x你可以通过工具测量)，所得有一个参数+-来调整

各tiem的值同样通过switch (i)分配

动画平移，参考前面文章，不再赘述

四丶跪求关注下载源码，200粉小目标

欢迎关注我的博客及微信公众号

源码下载记得顺便Star哦~

下载链接：https://github.com/JinBoy23520/CoderToDeveloperByTCLer