Android 自定義View之中國地圖熱點區域分布

本文出自：http://blog.csdn.net/dt235201314/article/details/78133932

一丶效果圖

1gif.gif

二丶需求功能點技術點

1.業務想要的大致模樣

image.png

呈現地圖及省份，高熱點地域顏色越紅，前五以不同色值標注

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

@Override
protected 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("#D2007F");
                    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() {
            @Override
            public 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() {
                        @Override
                        public void run() {
                            ObjectAnimator anim = ObjectAnimator.ofFloat(item, "translationX", -bgWidth, 0);
                            anim.setDuration(1000);
                            anim.addListener(new AnimatorListenerAdapter() {
                                @Override
                                public 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="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="0dp">
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/map_view_line_item" />
 
    <TextView
        android: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" />
 
    <TextView
        android: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>

圖解：

image.png

for循環

根據個數動態添加移動布局，遍歷添加對應數值

switch (i)添加不同顏色

最后測量item的顯示位置，瞎測量

為什么說瞎測量呢？

背景圖的高度，近似等于直徑長度，所以top值是可以通過控制被除數調整的

背景圖的寬度等于半徑+X(當然x你可以通過工具測量)，所得有一個參數+-來調整

各tiem的值同樣通過switch (i)分配

動畫平移，參考前面文章，不再贅述

四丶下載鏈接,歡迎star

https://github.com/JinBoy23520/CoderToDeveloperByTCLer

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 【Android 動畫】 動畫分類補間動畫(Tween動畫)幀動畫(Frame 動畫)屬性動畫(Property ...
    Rtia閱讀 6,213評論 1贊 38
  • 出自http://my.oschina.net/are1OfBlog/blog/420034 摘要 現在很多社交、...
    JJO閱讀 4,169評論 4贊 19
  • http://www.cnblogs.com/kenshincui/p/4125570.html 摘要: 現在很多...
    大崔老師閱讀 3,314評論 1贊 2
  • 姓名 孔燕波 企業名稱 寧波華光精密儀器有限公司 組別 340期 謙虛二組 【日精進打卡第54天】 【知~學習】 ...
    華光燕子閱讀 95評論 0贊 0
  • 甘肅省，武威市，2016年8月。 提示：本篇較長，約1500字。 冰雪遮蓋著伏爾加河 冰河上跑著三套車 有人在唱著...
    馮曉暉閱讀 591評論 1贊 2