Android 在控件上画区域并且随手势可放大缩小移动

这个控件如果找到正确的方法实现起来并不难,之前由于思路错误,导致走了很多弯路

注:使用可放大缩小的图片控件,之后在上面绘制区域不可行,绘制的区域不能放大缩小和移动

之后在网上找到一个可放大缩小的Fragmentlayout控件,在该控件布局包裹下的控件均可以实现放大缩小和移动,这个问题才得以解决

下面是控件地址:
一个可随手势拖拽布局

  1. 拿到背景图片之后先计算图片占区域的高度,用屏幕高度减去状态栏和其他布局高度可得出此高度,然后根据图片的宽高比来计算出图片所占区域的宽度,从而算图片出在布局中的位置
((RecView2) view).setImageBitmap(bitmap);
                                    //获取图片和屏幕的缩放比例
                                    DisplayMetrics dm = new DisplayMetrics();
                                    getWindowManager().getDefaultDisplay().getMetrics(dm);
                                    //获取屏幕信息
                                    //720
                                    int screenWidth = dm.widthPixels;
                                    //1280
                                    int screenHeight = dm.heightPixels;

                                    final float scale1 = HiddenPhotoActivity.this.getResources().getDisplayMetrics().density;
                                    //966
                                    int rlHeight = screenHeight - (int) ((114 + 162) * scale1 + TDevice.getStatusBarHeight(HiddenPhotoActivity.this));
                                    //720
                                    int rlWidth = screenWidth;
                                    float imageHeight = bitmap.getHeight();//basedata.getData().getImageHeight();
                                    float imageWidth = bitmap.getWidth();//basedata.getData().getImageWidth();
                                    RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) mRecView2.getLayoutParams();
                                    if ((imageHeight / rlHeight) > (imageWidth / rlWidth)) {
                                        scale = imageHeight / rlHeight;
                                        lp.width = (int) (imageWidth / scale);
                                        lp.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
                                        lp.height = rlHeight;
                                    } else {
                                        scale = imageWidth / screenWidth;
                                        lp.width = screenWidth;
                                        lp.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
                                        lp.height = (int) (imageHeight / scale);
                                    }
                                    mRecView2.setLayoutParams(lp);

2.根据宽高缩放比例,从新计算每一组区域中每一个区域原点和宽高的大小,放入三组集合用于之后切换三个按钮时使用

3.切换按钮时,通过上述集合动态给拖拽布局内添加imageButton,具体在哪个区位显示由刚刚算出两个点决定,顺便把显示图片数量和imageView和textView定位到区域中间。每点击按钮清除之前的view,加载新的view

private void drawSingleAreas(List<HouseInformation> list){
        mFrameLayout.removeAllViews();
        int templeft, tempTop;
        for(int i = 0; i < list.size(); i ++){
            final HouseInformation lbInfo = list.get(i);
            ImageButton ib = new ImageButton(HiddenPhotoActivity.this);
            ImageView iv = new ImageView(HiddenPhotoActivity.this);
            TextView tv = new TextView(HiddenPhotoActivity.this);

            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams((int)lbInfo.getWidth(), (int)lbInfo.getHeight());
                params.width = (int) lbInfo.getWidth();
                params.height = (int) lbInfo.getHeight();
                params.setMargins((int)lbInfo.getOriginX(), (int)lbInfo.getOriginY(), 0 , 0);
                templeft = (int)lbInfo.getOriginX() + (int) lbInfo.getWidth() / 2 - 30;
                tempTop = (int)lbInfo.getOriginY() + (int) lbInfo.getHeight() / 2 - 60;
            if(lbInfo.getPhotoNum() > 0){
                ib.setBackgroundDrawable(getResources().getDrawable(R.drawable.shape_house_uploaded_photo));
            }else{
                ib.setBackgroundDrawable(getResources().getDrawable(R.drawable.shape_house_no_upload_photo));
            }
            ib.setLayoutParams(params);


            FrameLayout.LayoutParams ivParams = new FrameLayout.LayoutParams(60, 60);
            ivParams.setMargins(templeft, tempTop, 0 , 0);
            iv.setLayoutParams(ivParams);
            iv.setImageResource(R.drawable.behalf_pic_no_empty_icon);

            FrameLayout.LayoutParams tvParams = new FrameLayout.LayoutParams(60, 60);
            tvParams.setMargins(templeft , tempTop , 0 , 0);
            if(lbInfo.getPhotoNum() > 0){
                tv.setText(lbInfo.getPhotoNum() + "");
            }else{
                tv.setText("0");
            }
            tv.setTextSize(10);
            tv.setGravity(Gravity.CENTER);
            tv.setLayoutParams(tvParams);

            ib.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
              
                    }
                }
            });

            mFrameLayout.addView(ib);
            mFrameLayout.addView(iv);
            mFrameLayout.addView(tv);
        }
    }

最终实现效果

Android 在控件上画区域并且随手势可放大缩小移动_第1张图片

你可能感兴趣的:(Android)