Android 使用代码实现一个选词(拖拽)填空题

作者:荣华谢后

地址:http://www.jianshu.com/p/28b7082b7563

声明:本文是荣华谢后原创,已获其授权发布,未经原作者允许请勿转载

写在前面

在上一篇文章《Android 使用代码实现一个填空题》中,我们学习了如何实现一个填空题,今天继续接着上一篇文章的节奏,学习一下如何实现一个选词填空题,由于本文中用到了一些上篇文章中的知识点,还没有看过上篇文章的同学可以>戳这里<了解一下。

首先看下效果图:

学习一些基础知识

选词填空题有一个很重要的功能就是拖拽,我们先来学习一下如何对View进行拖拽操作,写个简单的Demo来学习下:

public class DragActivity extends BaseActivity implements View.OnDragListener {


    @Bind(R.id.tv_tip)
    TextView tvTip;
    @Bind(R.id.rl_container)
    RelativeLayout rlContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drag);
        ButterKnife.bind(this);

        // 目标区域设置拖拽事件监听
        rlContainer.setOnDragListener(this);
    }

    @OnTouch(R.id.iv_icon)
    public boolean onTouch(View v) {
        ClipData.Item item = new ClipData.Item("我来了");
        ClipData data = new ClipData(null, new String[]{ClipDescription.MIMETYPE_TEXT_PLAIN}, item);
        v.startDrag(data, new View.DragShadowBuilder(v), null, 0);
        return true;
    }

    @Override
    public boolean onDrag(View v, DragEvent event) {
        final int action = event.getAction();
        switch (action) {
            case DragEvent.ACTION_DRAG_STARTED: // 拖拽开始
                Log.i("拖拽事件", "拖拽开始");
                return event.getClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN);

            case DragEvent.ACTION_DRAG_ENTERED: // 被拖拽View进入目标区域
                Log.i("拖拽事件", "被拖拽View进入目标区域");
                return true;

            case DragEvent.ACTION_DRAG_LOCATION: // 被拖拽View在目标区域移动
                Log.i("拖拽事件", "被拖拽View在目标区域移动___X:" + event.getX() + "___Y:" + event.getY());
                tvTip.setText("X:" + event.getX() + "   Y:" + event.getY());
                return true;

            case DragEvent.ACTION_DRAG_EXITED: // 被拖拽View离开目标区域
                Log.i("拖拽事件", "被拖拽View离开目标区域");
                return true;

            case DragEvent.ACTION_DROP: // 放开被拖拽View
                Log.i("拖拽事件", "放开被拖拽View");
                // 释放拖放阴影,并获取移动数据
                ClipData.Item item = event.getClipData().getItemAt(0);
                String content = item.getText().toString();
                Toast.makeText(this, content, Toast.LENGTH_SHORT).show();
                return true;

            case DragEvent.ACTION_DRAG_ENDED: // 拖拽完成
                Log.i("拖拽事件", "拖拽完成");
                return true;

            default:
                break;
        }

        return false;
    }
}

看下效果:

看下打印信息:

首先给被拖拽View设置一个触摸事件,在onTouch方法中定义一个ClipData对象,传入文本类型的数据“我来了”,当触摸被拖拽View时调用View的startDrag方法开始移动View,此时移动的是被拖拽View的“影子”,View可以移动了,还需要为它设置一个目标区域,调用目标区域View的setOnDragListener方法设置拖拽事件的监听,实现onDrag方法,在ACTION_DRAG_STARTED(拖拽开始)时判断当前接收的是不是文件类型的数据,如果不是则返回false,不再响应拖拽事件,在ACTION_DROP(放开被拖拽View)时,释放拖拽阴影,并获取传递过来的数据,通过Toast显示出来。

实现

1、首先初始化一些数据

public class DragFillBlankView extends RelativeLayout implements View.OnDragListener,
        View.OnLongClickListener {

    private TextView tvContent;
    private LinearLayout llOption;
    // 初始数据
    private String originContent;
    // 初始答案范围集合
    private List<AnswerRange> originAnswerRangeList;
    // 填空题内容
    private SpannableStringBuilder content;
    // 选项列表
    private List<String> optionList;
    // 答案范围集合
    private List<AnswerRange> answerRangeList;
    // 答案集合
    private List<String> answerList;
    // 选项位置
    private int optionPosition;
    // 一次拖拽填空是否完成
    private boolean isFillBlank;

    public DragFillBlankView(Context context) {
        this(context, null);
    }

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

    public DragFillBlankView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    private void initView() {
        LayoutInflater inflater = LayoutInflater.from(getContext());
        inflater.inflate(R.layout.layout_drag_fill_blank, this);

        tvContent = (TextView) findViewById(R.id.tv_content);
        llOption = (LinearLayout) findViewById(R.id.ll_option);
    }

    ...
}

2、定义一个设置数据的方法,供外部调用

/**

 * 设置数据
 *
 * @param originContent   源数据
 * @param optionList      选项列表
 * @param answerRangeList 答案范围集合
 */
public void setData(String originContent, List<String> optionList, List<AnswerRange> answerRangeList) {
    if (TextUtils.isEmpty(originContent) || optionList == null || optionList.isEmpty()
            || answerRangeList == null || answerRangeList.isEmpty()) {
        return;
    }

    // 初始数据
    this.originContent = originContent;
    // 初始答案范围集合
    this.originAnswerRangeList = new ArrayList<>();
    this.originAnswerRangeList.addAll(answerRangeList);
    // 获取课文内容
    this.content = new SpannableStringBuilder(originContent);
    // 选项列表
    this.optionList = optionList;
    // 答案范围集合
    this.answerRangeList = answerRangeList;

    // 避免重复创建拖拽选项
    if (llOption.getChildCount() < 1) {
        // 拖拽选项列表
        List<Button> itemList = new ArrayList<>();
        for (String option : optionList) {
            Button btnAnswer = new Button(getContext());
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            params.setMargins(0, 0, dp2px(10), 0);
            btnAnswer.setLayoutParams(params);
            btnAnswer.setBackgroundColor(Color.parseColor("#4DB6AC"));
            btnAnswer.setTextColor(Color.WHITE);
            btnAnswer.setText(option);
            btnAnswer.setOnLongClickListener(this);
            itemList.add(btnAnswer);
        }

        // 显示拖拽选项
        for (int i = 0; i < itemList.size(); i++) {
            llOption.addView(itemList.get(i));
        }
    } else {
        // 不显示已经填空的选项
        for (int i = 0; i < llOption.getChildCount(); i++) {
            Button button = (Button) llOption.getChildAt(i);
            String option = button.getText().toString();
            if (!answerList.isEmpty() && answerList.contains(option)) {
                button.setVisibility(INVISIBLE);
            } else {
                button.setVisibility(VISIBLE);
            }
        }
    }

    // 设置下划线颜色
    for (AnswerRange range : this.answerRangeList) {
        ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#4DB6AC"));
        content.setSpan(colorSpan, range.start, range.end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    // 答案集合
    answerList = new ArrayList<>();
    for (int i = 0; i < answerRangeList.size(); i++) {
        answerList.add("");
    }

    // 设置填空处点击事件
    for (int i = 0; i < this.answerRangeList.size(); i++) {
        AnswerRange range = this.answerRangeList.get(i);
        BlankClickableSpan blankClickableSpan = new BlankClickableSpan(i);
        content.setSpan(blankClickableSpan, range.start, range.end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    // 填空处设置触摸事件
    tvContent.setMovementMethod(new TouchLinkMovementMethod());
    tvContent.setText(content);
    tvContent.setOnDragListener(this);
}

首先初始化一些全局数据,这个稍后会用到,然后创建拖拽选项,为了避免重复创建选项,先判断选项是否已经创建过了,如果已经创建过了,则把已经填空的选项隐藏,然后接下来的逻辑就和普通填空题一样了,代码里已经写了注释,不再多说,重点看下填空处设置触摸事件这里,由于拖拽是触摸事件而不是点击事件,在这里就需要定义一个TouchLinkMovementMethod来响应触摸事件,最后对填空题区域进行拖拽监听,看下TouchLinkMovementMethod类:

public class TouchLinkMovementMethod extends LinkMovementMethod {


    @Override
    public boolean onTouchEvent(TextView widget, Spannable buffer, MotionEvent event) {
        int action = event.getAction();

        if (action == MotionEvent.ACTION_DOWN) {
            int x = (int) event.getX();
            int y = (int) event.getY();

            x -= widget.getTotalPaddingLeft();
            y -= widget.getTotalPaddingTop();
            x += widget.getScrollX();
            y += widget.getScrollY();

            Layout layout = widget.getLayout();
            int line = layout.getLineForVertical(y);
            int off = layout.getOffsetForHorizontal(line, x);

            ClickableSpan[] link = buffer.getSpans(off, off, ClickableSpan.class);
            if (link.length != 0) {
                link[0].onClick(widget);
                return true;
            } else {
                Selection.removeSelection(buffer);
            }
        }

        return super.onTouchEvent(widget, buffer, event);
    }
}

当手指按下的时候,回调ClickableSpan的onClick方法,并且不再响应点击事件。

3、拖拽开始

@Override

public boolean onLongClick(View v) {
    startDrag(v);
    return true;
}

/**
 * 开始拖拽
 *
 * @param v 当前对象
 */
private void startDrag(View v) {
    // 选项内容
    String optionContent = ((Button) v).getText().toString();
    // 记录当前答案选项的位置
    optionPosition = getOptionPosition(optionContent);
    // 开始拖拽后在列表中隐藏答案选项
    v.setVisibility(INVISIBLE);

    ClipData.Item item = new ClipData.Item(optionContent);
    ClipData data = new ClipData(null, new String[]{ClipDescription.MIMETYPE_TEXT_PLAIN}, item);
    v.startDrag(data, new DragShadowBuilder(v), null, 0);
}

/**
 * 获取选项位置
 *
 * @param option 选项内容
 * @return 选项位置
 */
private int getOptionPosition(String option) {
    for (int i = 0; i < llOption.getChildCount(); i++) {
        Button btnOption = (Button) llOption.getChildAt(i);
        if (btnOption.getText().toString().equals(option)) {
            return i;
        }
    }
    return 0;
}

在初始化拖拽选项时,我们为每个Button都设置了一个长按监听事件,下面来看看它是如何工作的,首先获取到当前拖拽选项上的答案,作为参数进行传递,然后记录选项的位置,这个是为了当拖拽未完成时,重新显示选项用的,最后在列表中隐藏当前拖拽的选项。现在选项已经可以移动了,还记得在设置数据的时候我们为填空题区域设置了拖拽监听,看下它是如何进行响应的:

@Override

public boolean onDrag(View v, DragEvent event) {
    final int action = event.getAction();
    switch (action) {
        case DragEvent.ACTION_DRAG_STARTED: // 拖拽开始
            return event.getClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN);

        case DragEvent.ACTION_DRAG_ENTERED: // 被拖拽View进入目标区域
            return true;

        case DragEvent.ACTION_DRAG_LOCATION: // 被拖拽View在目标区域移动
            return true;

        case DragEvent.ACTION_DRAG_EXITED: // 被拖拽View离开目标区域
            return true;

        case DragEvent.ACTION_DROP: // 放开被拖拽View
            int position = 0;

            // 获取TextView的Layout对象
            Layout layout = tvContent.getLayout();

            // 当前x、y坐标
            float currentX = event.getX();
            float currentY = event.getY();

            // 如果拖拽答案没有进行填空则return
            boolean isContinue = false;

            for (int i = 0; i < answerRangeList.size(); i++) {
                AnswerRange range = answerRangeList.get(i);

                // 获取TextView中字符坐标
                Rect bound = new Rect();
                int line = layout.getLineForOffset(range.start);
                layout.getLineBounds(line, bound);

                // 字符顶部y坐标
                int yAxisTop = bound.top - dp2px(10);
                // 字符底部y坐标
                int yAxisBottom = bound.bottom + dp2px(5);
                // 字符左边x坐标
                float xAxisLeft = layout.getPrimaryHorizontal(range.start) - dp2px(10);
                // 字符右边x坐标
                float xAxisRight = layout.getSecondaryHorizontal(range.end) + dp2px(10);

                if (xAxisRight > xAxisLeft) { // 填空在一行
                    if (currentX > xAxisLeft && currentX < xAxisRight &&
                            currentY < yAxisBottom && currentY > yAxisTop) {
                        position = i;
                        isContinue = true;
                        break;
                    }
                } else { // 跨行填空
                    if ((currentX > xAxisLeft || currentX < xAxisRight) &&
                            currentY < yAxisBottom && currentY > yAxisTop) {
                        position = i;
                        isContinue = true;
                        break;
                    }
                }
            }

            if (!isContinue) {
                return true;
            }

            // 释放拖放阴影,并获取移动数据
            ClipData.Item item = event.getClipData().getItemAt(0);
            String answer = item.getText().toString();

            // 重复拖拽,在答案列表中显示原答案
            String oldAnswer = answerList.get(position);
            if (!TextUtils.isEmpty(oldAnswer)) {
                llOption.getChildAt(getOptionPosition(oldAnswer)).setVisibility(VISIBLE);
            }

            // 填写答案
            fillAnswer(answer, position);
            isFillBlank = true;
            return true;

        case DragEvent.ACTION_DRAG_ENDED: // 拖拽完成
            if (!isFillBlank) {
                llOption.getChildAt(optionPosition).setVisibility(VISIBLE);
            } else {
                isFillBlank = false;
            }
            return true;

        default:
            break;
    }

    return false;
}

如何才能判断拖拽选项是否到达了某一个填空处呢?别担心,在TextView中我们可以获取到每一个字符的坐标,当放开拖拽选项的时候,判断一下是不是处于某一个填空区域就大功告成了,别忘了还有填空处跨行的问题需要特殊处理一下。到达指定位置后,我们就要把选项中的答案填到题目中了,接下来该轮到fillAnswer方法大显身手了:

/**

* 填写答案 * * @param answer 当前填空处答案 * @param position 填空位置 */ private void fillAnswer(String answer, int position) { answer = " " + answer + " "; // 替换答案 AnswerRange range = answerRangeList.get(position); content.replace(range.start, range.end, answer); // 更新当前的答案范围 AnswerRange currentRange = new AnswerRange(range.start, range.start + answer.length()); answerRangeList.set(position, currentRange); // 答案设置下划线 content.setSpan(new UnderlineSpan(), currentRange.start, currentRange.end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); // 将答案添加到集合中 answerList.set(position, answer.replace(" ", "")); // 更新内容 tvContent.setText(content); for (int i = 0; i < answerRangeList.size(); i++) { if (i > position) { // 获取下一个答案原来的范围 AnswerRange oldNextRange = answerRangeList.get(i); int oldNextAmount = oldNextRange.end - oldNextRange.start; // 计算新旧答案字数的差值 int difference = currentRange.end - range.end; // 更新下一个答案的范围 AnswerRange nextRange = new AnswerRange(oldNextRange.start + difference, oldNextRange.start + difference + oldNextAmount); answerRangeList.set(i, nextRange); } } }

首先把填空处的下划线或旧答案替换成新答案,然后更新一下当前的答案范围,由于下划线已经被答案替换了,所以需要为答案设置一条下划线,最后把答案更新到集合中,这样一个填空就完成了。But,当一个填空处的答案范围改变后,后面所有的填空处答案范围都要跟着改变,所以还需要再更新一下后面填空处的答案范围。首先获取下一个答案原来的范围,计算一下需要向前或向后移动的距离,然后更新一下答案范围就可以了。

在效果图中我们可以看到,当填空完成后,触摸填空处还可以继续拖拽的,继续往下看:

/**

* 触摸事件 */ class BlankClickableSpan extends ClickableSpan { private int position; public BlankClickableSpan(int position) { this.position = position; } @Override public void onClick(final View widget) { // 显示原有答案 String oldAnswer = answerList.get(position); if (!TextUtils.isEmpty(oldAnswer)) { answerList.set(position, ""); updateAnswer(answerList); startDrag(llOption.getChildAt(getOptionPosition(oldAnswer))); } } @Override public void updateDrawState(TextPaint ds) { // 不显示下划线 ds.setUnderlineText(false); } } /** * 更新答案 * * @param answerList 答案列表 */ public void updateAnswer(List<String> answerList) { // 重新初始化数据 setData(originContent, optionList, originAnswerRangeList); // 重新填写已经存在的答案 if (answerList != null && !answerList.isEmpty()) { for (int i = 0; i < answerList.size(); i++) { String answer = answerList.get(i); if (!TextUtils.isEmpty(answer)) { fillAnswer(answer, i); } } } }

当触摸填空处时,如果此填空处已经填写了答案,则调用updateAnswer方法把当前填空处的答案清除,然后调用startDrag方法开始进行拖拽。

4、最后看下如何设置数据

public class MainActivity extends AppCompatActivity {

@BindView(R.id.dfbv_content) DragFillBlankView dfbvContent; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); initData(); } private void initData() { String content = "纷纷扬扬的________下了半尺多厚。天地间________的一片。我顺着________工地走了四十多公里," + "只听见各种机器的吼声,可是看不见人影,也看不见工点。一进灵官峡,我就心里发慌。"; // 选项集合 List<String> optionList = new ArrayList<>(); optionList.add("白茫茫"); optionList.add("雾蒙蒙"); optionList.add("铁路"); optionList.add("公路"); optionList.add("大雪"); // 答案范围集合 List<AnswerRange> rangeList = new ArrayList<>(); rangeList.add(new AnswerRange(5, 13)); rangeList.add(new AnswerRange(23, 31)); rangeList.add(new AnswerRange(38, 46)); dfbvContent.setData(content, optionList, rangeList); } }

源码已托管到GitHub上,欢迎Fork,觉得还不错就Start一下吧!

GitHub传送门:https://github.com/alidili/Demos/tree/master/DragFillBlankQuestionDemo

欢迎同学们吐槽评论,如果你觉得本篇博客对你有用,那么就留个言或者点下喜欢吧(^-^)

原文发布于微信公众号 - Android先生(cyg_24kshign)

原文发表时间:2017-10-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android常用基础

简单好用的RecyclerView适配器

给大家推荐个好用RecyclerView适配器,也就是在百篮应用里用到的适配器。为了大家学习方便,这里简单的写下如何使用这个适配器,不做代码具体的分析,有兴趣的...

1233
来自专栏用户2442861的专栏

ListView 原理的介绍 qt也可以吧想通的Android

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/44996879

421
来自专栏木头编程 - moTzxx

androidannotions开发框架在Eclipse中的配置

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1592
来自专栏向治洪

android异步操作

为了使UI在数据获取时不僵死,数据获取需要在新开Worker线程中进行,然后将返回结果在UI线程中进行读取并渲染页面。面对这种异步处理,到底如何写才简洁,先后面...

2228
来自专栏开发之途

Android DataBinding 从入门到进阶

2213
来自专栏一直在跳坑然后爬坑

RxJava2操作符之“Buffer”

这里贴一下观察者,为了能更清晰的看到发射出来的内容,我们将每一个item都打印出来

691
来自专栏Android先生

VLayout适配器的万能封装

传统的RecyclerView高级应用,还是挺麻烦的,阿里开源了Vlayout,采用代理模式独立承担各式各样的布局,大大的减少了程序媛的工作量,...

1704
来自专栏向治洪

android之listview缓存图片(缓存优化)

网上关于这个方面的文章也不少,基本的思路是线程+缓存来解决。下面提出一些优化: 1、采用线程池 2、内存缓存+文件缓存 3、内存缓存中网上很多是采用SoftRe...

3399
来自专栏求索之路

MVVM架构之自动增删改的极简RecycleView的实现

介绍图 先上个源代码的链接:https://github.com/whenSunSet/MVVMRecycleView RecycleView是Google替...

3936
来自专栏俞其荣的博客

Android Architecture Component之Lifecycle解析HeaderLifecyclePart 1Part 2Part 3Footer

终于到了最后的关头,Android Architecture Component 系列的最后一节内容。今天给大家带来的就是 Lifecycle 的解析。

1654

扫码关注云+社区

领取腾讯云代金券