devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android 在图片的指定位置添加标记

作者：小丑西瓜9 | 2024-06-08 10:37:46

赞

踩

Android 在图片的指定位置添加标记

  这些天，项目里加了一个功能效果，场景是： 假如有一个家居图片，图片里，有各样的家居用品： 桌子，毛巾，花瓶等等，需要在指定的商品处添加标记，方便用户直接看到商品，点击该标记，可以进入到商品详情页 。实现的效果图如下：


  要实现如上效果，有两个思路。

  思路1，通过addView，在容器（如FrameLayout）的特定位置，添加标记组件，同事在将ImageView页添加进容器中，保证容器的大小和ImageView的大小相同，这样可以确认标记点的位置不会出现错差。 

  思路2，通过绘制Bitmap，将背景图片和标记点绘制成同一张图片。

  比较两种方法，思路2有些不太妥的地方，1是不好实现标记图标的点击事件；2是不太容易扩展，比如标记点不仅仅是一个图片，而是一个弹框组件，有图有文。 所以，考虑再三后，决定选择第一种实现方式。


1. 自定义布局，包含放置标记图标的容器及显示底部图片的ImageView。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content">
  5.  
  6.     <ImageView
  7.         android:id="@+id/imgBg"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content"
  10.         android:layout_gravity="center"
  11.         android:adjustViewBounds="true"
  12.         android:maxHeight="1000dp"
  13.         android:scaleType="centerCrop" />
  14.  
  15.     <FrameLayout
  16.         android:id="@+id/layouPoints"
  17.         android:layout_width="match_parent"
  18.         android:layout_height="wrap_content"
  19.         android:layout_gravity="center" />
  20.  
  21. </FrameLayout>

2. 自定义组件，便于添加标记图标、加载背景图 

  1. import android.content.Context;
  2. import android.graphics.drawable.AnimationDrawable;
  3. import android.util.AttributeSet;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.widget.FrameLayout;
  8. import android.widget.ImageView;
  9. import android.widget.LinearLayout;
  10. import android.widget.Toast;
  11.  
  12. import com.bumptech.glide.Glide;
  13. import com.lnyp.imgdots.R;
  14. import com.lnyp.imgdots.bean.PointSimple;
  15.  
  16. import java.util.ArrayList;
  17.  
  18. public class ImageLayout extends FrameLayout implements View.OnClickListener {
  19.  
  20.     ArrayList<PointSimple> points;
  21.  
  22.     FrameLayout layouPoints;
  23.  
  24.     ImageView imgBg;
  25.  
  26.     Context mContext;
  27.  
  28.     public ImageLayout(Context context) {
  29.         this(context, null);
  30.     }
  31.  
  32.     public ImageLayout(Context context, AttributeSet attrs) {
  33.         this(context, attrs, 0);
  34.     }
  35.  
  36.     public ImageLayout(Context context, AttributeSet attrs, int defStyleAttr) {
  37.         super(context, attrs, defStyleAttr);
  38.  
  39.         initView(context, attrs);
  40.     }
  41.  
  42.  
  43.     private void initView(Context context, AttributeSet attrs) {
  44.  
  45.         mContext = context;
  46.  
  47.         View imgPointLayout = inflate(context, R.layout.layout_imgview_point, this);
  48.  
  49.         imgBg = (ImageView) imgPointLayout.findViewById(R.id.imgBg);
  50.         layouPoints = (FrameLayout) imgPointLayout.findViewById(R.id.layouPoints);
  51.     }
  52.  
  53.     public void setImgBg(int width, int height, String imgUrl) {
  54.  
  55.         ViewGroup.LayoutParams lp = imgBg.getLayoutParams();
  56.         lp.width = width;
  57.         lp.height = height;
  58.  
  59.         imgBg.setLayoutParams(lp);
  60.  
  61.         ViewGroup.LayoutParams lp1 = layouPoints.getLayoutParams();
  62.         lp1.width = width;
  63.         lp1.height = height;
  64.  
  65.         layouPoints.setLayoutParams(lp1);
  66.  
  67.         Glide.with(mContext).load(imgUrl).asBitmap().into(imgBg);
  68.  
  69.         addPoints(width, height);
  70.  
  71.     }
  72.  
  73.     public void setPoints(ArrayList<PointSimple> points) {
  74.  
  75.         this.points = points;
  76.     }
  77.  
  78.     private void addPoints(int width, int height) {
  79.  
  80.         layouPoints.removeAllViews();
  81.  
  82.         for (int i = 0; i < points.size(); i++) {
  83.  
  84.             double width_scale = points.get(i).width_scale;
  85.             double height_scale = points.get(i).height_scale;
  86.  
  87.  
  88.             LinearLayout view = (LinearLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_img_point, this, false);
  89.             ImageView imageView = (ImageView) view.findViewById(R.id.imgPoint);
  90.             imageView.setTag(i);
  91.  
  92.             AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
  93.             animationDrawable.start();
  94.  
  95.             LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();
  96.  
  97.             layoutParams.leftMargin = (int) (width * width_scale);
  98.             layoutParams.topMargin = (int) (height * height_scale);
  99.  
  100.             imageView.setOnClickListener(this);
  101.  
  102.             layouPoints.addView(view, layoutParams);
  103.         }
  104.     }
  105.  
  106.  
  107.     @Override
  108.     public void onClick(View view) {
  109.         int pos = (int) view.getTag();
  110.         Toast.makeText(getContext(), "pos : " + pos, Toast.LENGTH_SHORT).show();
  111.     }
  112. }
  来看看ImageLayout源码，里面有两个重要的方法：

·public void setImgBg(int width, int height, String imgUrl) 该方法主要根据图片的大小，设置标记图容器的大小，然后加载背景图。


·private void addPoints(int width, int height)  该方法主要向记图容器中添加标记图。

3.PointSimple.java

  1. public class PointSimple {
  2.  
  3.     // 标记点相对于横向的宽度的比例
  4.     public double width_scale;
  5.     // 标记点相对于横向的高度的比例
  6.     public double height_scale;
  7.  
  8. }


4. 添加背景图和标记图

 4.1 首先，准备一些测试数据

  1.  private void initData() {
  2.  
  3.         imgSimples = new ArrayList<>();
  4.  
  5.         ImgSimple imgSimple1 = new ImgSimple();
  6.         imgSimple1.url = "http://o79w6dswy.bkt.clouddn.com/img5.png";
  7.         imgSimple1.scale = 1.6f;
  8.  
  9.         ArrayList<PointSimple> pointSimples = new ArrayList<>();
  10.         PointSimple pointSimple1 = new PointSimple();
  11.         pointSimple1.width_scale = 0.36f;
  12.         pointSimple1.height_scale = 0.75f;
  13.  
  14.         PointSimple pointSimple2 = new PointSimple();
  15.         pointSimple2.width_scale = 0.64f;
  16.         pointSimple2.height_scale = 0.5f;
  17.  
  18.  
  19.         PointSimple pointSimple3 = new PointSimple();
  20.         pointSimple3.width_scale = 0.276f;
  21.         pointSimple3.height_scale = 0.764f;
  22.  
  23.         PointSimple pointSimple4 = new PointSimple();
  24.         pointSimple4.width_scale = 0.638f;
  25.         pointSimple4.height_scale = 0.74f;
  26.  
  27.         PointSimple pointSimple5 = new PointSimple();
  28.         pointSimple5.width_scale = 0.796f;
  29.         pointSimple5.height_scale = 0.526f;
  30.  
  31.         PointSimple pointSimple6 = new PointSimple();
  32.         pointSimple6.width_scale = 0.486f;
  33.         pointSimple6.height_scale = 0.364f;
  34.  
  35.         pointSimples.add(pointSimple1);
  36.         pointSimples.add(pointSimple2);
  37.         pointSimples.add(pointSimple3);
  38.         pointSimples.add(pointSimple4);
  39.         pointSimples.add(pointSimple5);
  40.         pointSimples.add(pointSimple6);
  41.  
  42.         imgSimple1.pointSimples = pointSimples;
  43.  
  44.  
  45.         ImgSimple imgSimple2 = new ImgSimple();
  46.         imgSimple2.url = "http://o79w6dswy.bkt.clouddn.com/img3.png";
  47.         imgSimple2.scale = 1.6f;
  48.  
  49.         ArrayList<PointSimple> pointSimples2 = new ArrayList<>();
  50.         PointSimple pointSimple7 = new PointSimple();
  51.         pointSimple7.width_scale = 0.36f;
  52.         pointSimple7.height_scale = 0.75f;
  53.  
  54.         PointSimple pointSimple8 = new PointSimple();
  55.         pointSimple8.width_scale = 0.64f;
  56.         pointSimple8.height_scale = 0.5f;
  57.  
  58.  
  59.         PointSimple pointSimple9 = new PointSimple();
  60.         pointSimple9.width_scale = 0.276f;
  61.         pointSimple9.height_scale = 0.764f;
  62.  
  63.  
  64.         pointSimples2.add(pointSimple7);
  65.         pointSimples2.add(pointSimple8);
  66.         pointSimples2.add(pointSimple9);
  67.  
  68.         imgSimple2.pointSimples = pointSimples2;
  69.  
  70.  
  71.         ImgSimple imgSimple3 = new ImgSimple();
  72.         imgSimple3.url = "http://o79w6dswy.bkt.clouddn.com/421428.jpg";
  73.         imgSimple3.scale = 0.75f;
  74.  
  75.         ArrayList<PointSimple> pointSimples3 = new ArrayList<>();
  76.         PointSimple pointSimple11 = new PointSimple();
  77.         pointSimple11.width_scale = 0.1f;
  78.         pointSimple11.height_scale = 0.3f;
  79.  
  80.         PointSimple pointSimple12 = new PointSimple();
  81.         pointSimple12.width_scale = 0.3f;
  82.         pointSimple12.height_scale = 0.5f;
  83.  
  84.  
  85.         PointSimple pointSimple13 = new PointSimple();
  86.         pointSimple13.width_scale = 0.5f;
  87.         pointSimple13.height_scale = 0.8f;
  88.  
  89.  
  90.         pointSimples3.add(pointSimple11);
  91.         pointSimples3.add(pointSimple12);
  92.         pointSimples3.add(pointSimple13);
  93.  
  94.         imgSimple3.pointSimples = pointSimples3;
  95.  
  96.         imgSimples.add(imgSimple1);
  97.         imgSimples.add(imgSimple2);
  98.         imgSimples.add(imgSimple3);
  99.     }

 4.2 加载图片和添加标记物，因为要做可以滑动展示的效果，所以在ViewPager的PagerAdapter中进行功能添加。 

  1. import android.app.Activity;
  2. import android.support.v4.view.PagerAdapter;
  3. import android.support.v4.view.ViewPager;
  4. import android.util.DisplayMetrics;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import android.widget.LinearLayout;
  9.  
  10. import com.lnyp.imgdots.R;
  11. import com.lnyp.imgdots.bean.ImgSimple;
  12. import com.lnyp.imgdots.bean.PointSimple;
  13. import com.lnyp.imgdots.view.ImageLayout;
  14.  
  15. import java.util.ArrayList;
  16. import java.util.List;
  17.  
  18. public class ImgBrowsePagerAdapter extends PagerAdapter {
  19.  
  20.     List<ImgSimple> imgSimples;
  21.  
  22.     List<View> views;
  23.  
  24.     Activity mContext;
  25.  
  26.     private int width;
  27.  
  28.     public ImgBrowsePagerAdapter(Activity context, List<ImgSimple> imgSimples) {
  29.  
  30.         this.mContext = context;
  31.         this.imgSimples = imgSimples;
  32.  
  33.         this.views = new ArrayList<>();
  34.  
  35.         DisplayMetrics dm = new DisplayMetrics();
  36.         context.getWindowManager().getDefaultDisplay().getMetrics(dm);
  37.  
  38.         width = dm.widthPixels;
  39.     }
  40.  
  41.     @Override
  42.     public int getCount() { // 获得size
  43.         return imgSimples.size();
  44.     }
  45.  
  46.     @Override
  47.     public boolean isViewFromObject(View arg0, Object arg1) {
  48.         return arg0 == arg1;
  49.     }
  50.  
  51.     @Override
  52.     public void destroyItem(ViewGroup container, int position, Object object) {
  53.  
  54.         ((ViewPager) container).removeView((View) object);
  55.     }
  56.  
  57.     @Override
  58.     public Object instantiateItem(ViewGroup container, int position) {
  59.  
  60.         LinearLayout view = (LinearLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_img_browse, null);
  61.         ImageLayout layoutContent = (ImageLayout) view.findViewById(R.id.layoutContent);
  62.  
  63.         try {
  64.  
  65.             String imgUrl = imgSimples.get(position).url;
  66.             float scale = imgSimples.get(position).scale;
  67.             ArrayList<PointSimple> pointSimples = imgSimples.get(position).pointSimples;
  68.  
  69.             layoutContent.setPoints(pointSimples);
  70.  
  71.             int height = (int) (width * scale);
  72.  
  73.             layoutContent.setImgBg(width, height, imgUrl);
  74.         } catch (Exception e) {
  75.             e.printStackTrace();
  76.         }
  77.  
  78.         ((ViewPager) container).addView(view);
  79.  
  80.         return view;
  81.     }
  82. }
  4.3 适配器的布局文件layout_img_browse.xml，其中包含了上方自定义的组件ImageLayout 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:gravity="center"
  6.     android:orientation="vertical">
  7.  
  8.     <com.lnyp.imgdots.view.ImageLayout
  9.         android:id="@+id/layoutContent"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content"
  12.         android:layout_centerInParent="true" />
  13.  
  14. </LinearLayout>


  此处，稍微讲下ImgBrowsePagerAdapter的instantiateItem(ViewGroup container, int position)方法，在该方法中，我们 根据屏幕的宽度，对图片进行等比缩放，计算出了缩放后图片的大小（height和width）， 该height和width也就是我们将要添加标记物所在的容器的大小。

  通过加载了布局文件，获取ImageLayout对象； 然后，有了这个对象，及计算出的height和width，我们就可以动态的添加背景图及标记物的位置。

  因为图片是经过等比缩放的，而标记物的位置是相对于图片的，所以在相同大小的容器添加标记物，它的位置不会出现偏差。


  通过以上几步，便可以实现前面动态图中的功能效果了。

  如有疑问或建议，欢迎进QQ群讨论：487786925（ Android研发村 ）

 

项目github地址：https://github.com/zuiwuyuan/ImgDots

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/689468
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号