本文出自：/dt23514/article/details/78133932
一丶效果图
二丶需求功能点技术点
1.业务想要的大致模样
呈现地图及省份，高热点地域颜色越红，前五以不同色值标注
2.程序员表示
移动端没有控件及框架，开发的话需要大量时间。前段有相关框架，不如前段做吧...
3.项目经理表示
手机屏幕就那么大，不适合展示整张中国地图，展示的话文字小，体验感也不高，设计师切个半屏图，程序员加点动画展现数据...
最终讨论效果如图
4.技术点
1.根据设计师给的背景图，测量文字显示位置
2.平移呈现动画ObjectAnimator平移动画即可
三丶看代码
1.造数据
实体类MapViewEntity.Java
public class MapViewEntity implements Serializable {public String overviewName;//区块名称public String overviewSubName;//区块子名称public List<Area> areaList;//区域列表数据public static class Area implements Serializable {public int ranking;//排名public String areaName;//区域名称public int areaCount;//数量}}
写成public，可省去get set方法
public void getData(){areaList = new ArrayList<>();MapViewEntity.Area area1= new MapViewEntity.Area();area1.areaName = "武汉";area1.areaCount = 5;area1.ranking = 1;MapViewEntity.Area area2= new MapViewEntity.Area();area2.areaName = "深圳";area2.areaCount = 4;area2.ranking = 2;MapViewEntity.Area area3= new MapViewEntity.Area();area3.areaName = "北京";area3.areaCount = 3;area3.ranking = 3;MapViewEntity.Area area4= new MapViewEntity.Area();area4.areaName = "上海";area4.areaCount = 2;area4.ranking = 4;MapViewEntity.Area area5= new MapViewEntity.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 void onCreate(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 class MapView extends LinearLayout {private DecimalFormat format=new DecimalFormat("###,###,###");public MapView(Context context) {super(context);setOrientation(HORIZONTAL);}public MapView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);setOrientation(HORIZONTAL);}public MapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);setOrientation(HORIZONTAL);}int bgHeight = 0, bgWidth = 0;public void init(List<MapViewEntity.Area> datas) {removeAllViews();if (datas == null) {return;}//左侧背景图ImageView imageView = new ImageView(getContext());Bitmap bg = BitmapFactory.decodeResource(getResources(), R.mipmap.map_bg);if (bg != null) {imageView.setImageBitmap(bg);bgHeight = bg.getHeight();bgWidth = bg.getWidth();}addView(imageView);final LinearLayout itemContainer = new LinearLayout(getContext());itemContainer.setOrientation(VERTICAL);for (int i = 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();int color = Color.parseColor("#FA7401");switch (i) {case 0:color = Color.parseColor("#FA7401");break;case 1:color = Color.parseColor("#DF");break;case 2:color = Color.parseColor("#006FBF");break;case 3:color = Color.parseColor("#009C85");break;case 4: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 = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);lp.leftMargin = -bgWidth;addView(itemContainer, lp);//修正位置(瞎计算)getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {@Overridepublic boolean onPreDraw() {float degree0 = (float) Math.sin(Math.PI * 30.0 / 180.0);float degree1 = (float) Math.sin(Math.PI * 60.0 / 180.0);float degree2 = (float) Math.sin(Math.PI * 90.0 / 180.0);int shift = (int) (getResources().getDisplayMetrics().density * 7);for (int i = 0; i < itemContainer.getChildCount(); i++) {final View item = itemContainer.getChildAt(i);LayoutParams lp = (LayoutParams) item.getLayoutParams();switch (i) {case 0:lp.leftMargin = (int) (bgWidth * degree0) + shift * 4;lp.topMargin = (int) (bgHeight * degree0) / 22;break;case 1:lp.leftMargin = (int) (bgWidth * degree1) + shift * 2;lp.topMargin = (int) (bgHeight * degree1) / 16;break;case 2:lp.leftMargin = (int) (bgWidth * degree2) + shift;lp.topMargin = (int) (bgHeight * degree2) / 8;break;case 3:lp.leftMargin = (int) (bgWidth * degree1) + shift * 2;lp.topMargin = (int) (bgHeight * degree2) / 8;break;case 4:lp.leftMargin = (int) (bgWidth * degree0) + shift * 4;lp.topMargin = (int) (bgHeight * degree1) / 16;break;}item.setLayoutParams(lp);item.setVisibility(View.GONE);item.postDelayed(new Runnable() {@Overridepublic void run() {ObjectAnimator anim = ObjectAnimator.ofFloat(item, "translationX", -bgWidth, 0);anim.setDuration(1000);anim.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationStart(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"?><LinearLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_vertical"android:orientation="horizontal"android:padding="0dp"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/map_view_line_item" /><TextViewandroid:id="@+id/index"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:background="@drawable/round"android:gravity="center"android:text="1"android:textColor="@android:color/white"android:textSize="15sp"android:textStyle="bold" /><TextViewandroid:id="@+id/text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:text="呵呵"android:textColor="@android:color/black"android:textSize="16sp"android:textStyle="bold" /></LinearLayout>
图解：
for循环
根据个数动态添加移动布局，遍历添加对应数值
switch (i)添加不同颜色
最后测量item的显示位置，瞎测量
为什么说瞎测量呢？
背景图的高度，近似等于直径长度，所以top值是可以通过控制被除数调整的
背景图的宽度等于半径+X(当然x你可以通过工具测量)，所得有一个参数+-来调整
各tiem的值同样通过switch (i)分配
动画平移，参考前面文章，不再赘述
四丶跪求关注下载源码，200粉小目标
欢迎关注我的博客及微信公众号
源码下载记得顺便Star哦~
下载链接：/JinBoy23520/CoderToDeveloperByTCLer
如果觉得《Android 自定义View之中国地图热点区域分布》对你有帮助，请点赞、收藏，并留下你的观点哦！
