android 仿nice实现在图片上打标签

如果有玩过nice这款APP的话,里面有个在图片上打标签的功能,如图

实现原理：

1：实现自定义一个ViewGroup类型,设置好它的背景,

2：在onTouch  down的时候,获取相对于view的按下的x,y坐标,然后遍历所有的子view判断是否重叠因为每个view其实都是一个矩形,Rect类方法中可以判断该点是否在view上,

大概就这些,下面是实现的源码：

PictureTagLayout.java

package com.example.tagview.view;
import com.example.tagview.view.TagView.Direction;
import com.example.tagview.view.TagView.Status;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.RelativeLayout;


public class PictureTagLayout extends RelativeLayout implements OnTouchListener {
private static final int CLICKRANGE = 5;
private static final String TAG = PictureTagLayout.class.getSimpleName();
private View touchView,clickView;//单机和触摸都可以打标签
private int startX;//按下的x轴坐标
private int startY;//按下的y轴坐标
@SuppressLint("ClickableViewAccessibility")
public PictureTagLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setOnTouchListener(this);
}


public PictureTagLayout(Context context, AttributeSet attrs) {
this(context, attrs,0);
}


public PictureTagLayout(Context context) {
this(context,null);
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touchView = null;
if(clickView!=null){//这个clickView什么时候给它赋值呢?
((TagView)clickView).setStatus(Status.Normal);
clickView = null;
}
startX = (int) event.getX();//获取按下的x轴坐标  相对于view本身的左上角
startY = (int) event.getY();//获取按下的y轴坐标,相对于view本身
if(!hasView(startX,startY)){//表示重叠
addItem(startX,startY);
}
break;
case MotionEvent.ACTION_UP:
int endX = (int) event.getX();
int endY = (int) event.getY();
//如果挪动的范围很小，则判定为单击
if(touchView!=null&&Math.abs(endX - startX)<CLICKRANGE&&Math.abs(endY - startY)<CLICKRANGE){
//当前点击的view进入编辑状态
((TagView)touchView).setStatus(Status.Edit);
clickView = touchView;
}
touchView = null;
break;
}
return true;
}
   //循环获取子view，判断xy是否在子view上，即判断是否按住了子view
private boolean hasView(int x,int y){
for(int index = 0; index < this.getChildCount(); index ++){//遍历相对布局中所有的子view然后生成一个矩形,
View view = this.getChildAt(index);
int left = (int) view.getX();
int top = (int) view.getY();
int right = view.getRight();
int bottom = view.getBottom();
Rect rect = new Rect(left, top, right, bottom);//生成一个矩形
Rect newRect = new Rect(x,y,x+TagView.getViewWidth(),y+TagView.getViewHeight());
boolean isContains = rect.intersect(newRect);//判断view是否交互
//如果没有交互
if(isContains){
touchView = view;
touchView.bringToFront();//置为父view之上
return true;
}
}
touchView = null;
return false;
}
private void addItem(int x,int y){
View view = null;//就要新生成一个新的view
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
if(x>getWidth()*0.5){//如果x坐标大于view宽度的一半 用来判断是在左边还是右边
// params.leftMargin = x - TagView.getViewWidth();
params.leftMargin = x;
view = new TagView(getContext(),Direction.Right);//生成一个view对象
}
else{
params.leftMargin = x;
view = new TagView(getContext(),Direction.Left);
}
params.topMargin = y;//向上就是他的y坐标
//上下位置在视图内
if(params.topMargin<0)params.topMargin =0;//边界判断
else if((params.topMargin+TagView.getViewHeight())>getHeight()){//判断这个view 在 这个图片上 防止部分
params.topMargin = getHeight() - TagView.getViewHeight();
}
this.addView(view, params);
}
}

TagView.java 标签view

package com.example.tagview.view;
import com.example.tagview.R;
import android.content.Context;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;
/**
 * tag view
 * @author Adminis
 *
 */
public class TagView extends RelativeLayout implements OnEditorActionListener {
private TextView tvPictureTagLabel;
private EditText etPictureTagLabel;
private View loTag;

private InputMethodManager mInputMethodManager;
public enum Status{Normal,Edit}//标签是编辑状态还是正常的状态
public enum Direction{Left,Right}
private Direction direction = Direction.Left;//标签是左边还是右边
private Context mContext;

private static final int ViewWidth = 80;//单位像素
private static final int ViewHeight = 50;
public TagView(Context context, Direction direction) {
super(context);
this.direction = direction;
this.mContext = context;
initViews();
init();
initEvents();
}
private void init() {
mInputMethodManager = (InputMethodManager)mContext.getSystemService(Context.INPUT_METHOD_SERVICE);
directionChange();
}
private void directionChange() {
switch(direction){
case Left:
loTag.setBackgroundResource(R.drawable.bg_picturetagview_tagview_left);
break;
case Right:
loTag.setBackgroundResource(R.drawable.bg_picturetagview_tagview_right);
break;
}
}
/**
* 初始化view
*/
private void initViews() {
LayoutInflater.from(mContext).inflate(R.layout.activity_tag_view, this,true);
tvPictureTagLabel = (TextView) findViewById(R.id.tvPictureTagLabel);
etPictureTagLabel = (EditText) findViewById(R.id.etPictureTagLabel);
loTag = findViewById(R.id.loTag);
}
/** 初始化事件 **/
protected void initEvents(){
etPictureTagLabel.setOnEditorActionListener(this);
}
public static int getViewWidth(){
return ViewWidth;
}
public static int getViewHeight(){
return ViewHeight;
}
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
setStatus(Status.Normal);
return true;
}
public void setStatus(Status status){
switch(status){
case Normal:
tvPictureTagLabel.setVisibility(View.VISIBLE);
etPictureTagLabel.clearFocus();
tvPictureTagLabel.setText(etPictureTagLabel.getText());
etPictureTagLabel.setVisibility(View.GONE);
//隐藏键盘
mInputMethodManager.hideSoftInputFromWindow(etPictureTagLabel.getWindowToken() , 0); 
break;
case Edit:
tvPictureTagLabel.setVisibility(View.GONE);
etPictureTagLabel.setVisibility(View.VISIBLE);
etPictureTagLabel.requestFocus();
//弹出键盘
mInputMethodManager.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
break;
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
View parent = (View) getParent();//父view就是PictureTagLayout
int halfParentW = (int) (parent.getWidth()*0.5);//获取父view宽度的一半
int center = (int) (l + (this.getWidth()*0.5));
if(center<=halfParentW){
direction = Direction.Left;
}
else{
direction = Direction.Right;
}
directionChange();
}
}

activity_tag_view.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal" >
    <RelativeLayout
        android:id="@+id/loTag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_picturetagview_tagview_left" >
        <TextView
            android:id="@+id/tvPictureTagLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:gravity="center_vertical"
            android:hint="标签"
            android:singleLine="true"
            android:textColor="@android:color/white"
            android:textColorHint="@android:color/white"
            android:textSize="12dp" />
        <EditText
            android:id="@+id/etPictureTagLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:gravity="center_vertical"
            android:hint="标签"
            android:imeOptions="actionDone"
            android:maxEms="20"
            android:singleLine="true"
            android:textColor="@android:color/white"
            android:textColorHint="@android:color/white"
            android:textSize="12dp"
            android:visibility="gone" />
    </RelativeLayout>
</LinearLayout>

最终的效果：