Android仿学习强国填空题考试界面

很久不写博客了，应为一直真的都很忙，没时间写，正好今天有时间写一下O(∩_∩)O哈哈~。

起因：最近工作中遇到一个需求，使用手机进行填空题考试。

分析：因为涉及到判分，需要答案与文字一一对应，刚开始在网上找一些方案在TextView修改文字样式然后处理事件，感觉样式不是太好控制操作繁琐，然后又注意到学习强国的填空题真的很符合需求，所以就拿来模仿了。

截图如下：左边我，右边学习强国！

效果就是这个样子的。

总体思路：RecyclerView 实现数据的装载，使用TextView和Edittext展示内容与填空处，监听焦点，软件盘退格，并设置焦点，根据屏幕宽度设置一行展示的文字个数。

布局文件：布局文件就不多说了，根据自己需求写，但是要同时包含TextView、EditText

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="27dp"android:layout_height="27dp"android:layout_marginLeft="1.5dp"android:layout_marginTop="2dp"android:layout_marginRight="1.5dp"android:orientation="vertical"><TextViewandroid:id="@+id/tv_text"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textColor="#D9000000"android:textSize="16sp"android:textStyle="bold"android:visibility="gone" /><EditTextandroid:id="@+id/et_text"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/bg_edit_selecter"android:cursorVisible="false"android:gravity="center"android:maxLength="1"android:textColor="#FF16AFF3"android:visibility="gone" /></LinearLayout>

计算一行展示的文字个数

这块注释写的很清楚了，需要去除内外边距计算，其实最后得出的numInLine还可以进行减一操作，为了安全起见，但是也可以不用（int类型除法本来就会丢失精度的）。

//获取屏幕宽度
int screenWidth = getScreenWidth();
//去除padding宽度
int contentWidth = screenWidth - DensityUtils.dp2px(context, Constant.EXAM_PADDING_DP);
//计算出一行字数
int numInLine = contentWidth / DensityUtils.dp2px(context, Constant.EXAM_LETTER_DP);
//设置一行个数
rv_list.setLayoutManager(new GridLayoutManager(context, numInLine));/*** 获取屏幕宽度*/
public int getScreenWidth() {DisplayMetrics dm2 = getResources().getDisplayMetrics();return dm2.widthPixels;
}

数据源

数据源很简单，每个对象代表一个字，标明是否是填空处

public class BlankTextBean {/*** 文字*/private String text;/*** 是否是填空*/private boolean blank;public String getText() {return text;}public void setText(String text) {this.text = text;}public boolean isBlank() {return blank;}public void setBlank(boolean blank) {this.blank = blank;}
}

适配器（用心去感受。。。）

这块主要需求为

1.无论点击哪个填空处，焦点总是在第一个没有字的格子上。

2. 点击退格键，如果当前框有字则删除，否则像钱移动一个格子。

3.填空时，如果填了字，并且后面还有格子焦点自动向后移动一个格子。

PS:在适当时机调用clearList()；注意保存并设置临时填空数据；

    class TextAdapter extends BaseQuickAdapter<BlankTextBean, BaseViewHolder> {private List<EditText> editTextList = new ArrayList<>();private boolean isDelete = false;public TextAdapter(@Nullable List<BlankTextBean> data) {super(R.layout.item_blank_text, data);}public void clearList() {editTextList.clear();}/*** 获取首个焦点位置** @return*/private int getFirstFocusPosition() {for (int i = 0; i < editTextList.size(); i++) {if (!editTextList.get(i).getText().toString().isEmpty()) {if (i == (editTextList.size() - 1)) {return i;}} else {return i;}}return 0;}/*** 获取点击的edittext在集合的位置** @param editText* @return*/private int getEdittextPosition(EditText editText) {for (int i = 0; i < editTextList.size(); i++) {if (editText.hashCode() == editTextList.get(i).hashCode()) {return i;}}return 0;}@Overrideprotected void convert(BaseViewHolder helper, BlankTextBean item) {TextView tv_text = helper.getView(R.id.tv_text);EditText et_text = helper.getView(R.id.et_text);tv_text.setText(item.getText());if (item.isBlank()) {editTextList.add(et_text);//设置答案文字if (ExamBlankView.this.questionBean != null && ExamBlankView.this.questionBean.getUserAnswer() != null) {if (editTextList.size() <= ExamBlankView.this.questionBean.getUserAnswer().length()) {editTextList.get(editTextList.size() - 1).setText(String.valueOf(ExamBlankView.this.questionBean.getUserAnswer().charAt(editTextList.size() - 1)));}}tv_text.setVisibility(View.GONE);et_text.setVisibility(View.VISIBLE);} else {tv_text.setVisibility(View.VISIBLE);et_text.setVisibility(View.GONE);}/*** 设置获取焦点事件，使得焦点在第一个没字的edittext上，如果都有字停留在最后一个格子处*/et_text.setOnFocusChangeListener((v, hasFocus) -> {if (hasFocus && !isDelete) {editTextList.get(getFirstFocusPosition()).requestFocus();}});/*** 焦点的转移*/et_text.addTextChangedListener(new TextWatcher() {@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {}@Overridepublic void afterTextChanged(Editable s) {int edittextPosition = getEdittextPosition(et_text);//当前点击的edittext在几何中的位置if (s.toString().length() >= 1 && (edittextPosition + 1) < editTextList.size()) {//增加editTextList.get(edittextPosition + 1).requestFocus();} else if (s.toString().length() < 1 && (edittextPosition - 1) >= 0) {//删除isDelete = true;editTextList.get(edittextPosition - 1).requestFocus();isDelete = false;}}});/*** 退格键删除空时的操作*/et_text.setOnKeyListener((v, keyCode, event) -> {int edittextPosition = getEdittextPosition(et_text);if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN) {if (et_text.getText().toString().isEmpty()) {//当前文字为空isDelete = true;if (edittextPosition - 1 >= 0) {editTextList.get(edittextPosition - 1).requestFocus();} else {editTextList.get(edittextPosition).requestFocus();}isDelete = false;return true;} else if (!et_text.getText().toString().isEmpty()) {//当前文字不为空isDelete = true;et_text.setText("");if (edittextPosition - 1 >= 0) {editTextList.get(edittextPosition - 1).requestFocus();} else {editTextList.get(edittextPosition).requestFocus();}isDelete = false;return true;}return false;}return false;});}}

Demo代码转送门

Android仿学习强国填空题考试界面相关推荐

一步步教你如何定制一个Android「填空题」控件（仿学习强国填空题控件）
一.写在前面开始之前,老规矩,絮絮叨叨. 本文讲解的是如何自定义一个填空题控件,实现的方式其实有很多,最重要的是了解其中实现的思路和想法,正所谓条条大路通罗马嘛. 在Android系统中,我们最常使 ...
Flutter仿学习强国填空题
下面是学习强国的效果然后看下我实现的效果重点有两个部分: 使用RichText,然后根据答案的长度,动态设置需要填空的个数.RichText中有WidgetSpan,使用这个就能方便地在RichT ...
小程序仿学习强国填空题
效果图如下: 概述: 和后台人员商议好题目中答案的代表符号,我这边是根据_分割,答案有多少字数就写几个_. 例如: 题目:新时代政法队伍"五个过硬":__过硬.__过硬.责任过硬. ...
Android 仿PhotoShop调色板应用(三) 主体界面绘制
版权声明:本文为博主原创文章,未经博主允许不得转载. Android 仿PhotoShop调色板应用(三) 主体界面绘制关于PhotoShop调色板应用的实现我总结了两个最核心的部分: 1 ...
数据库复习题选择题+判断题+填空题(考试续命必备
数据库复习题选择题+判断题+填空题(考试续命必备一些选择题 1.从计算机数据管理的角度看,信息就是数据,数据就是信息.(B ) A.对 B.错 (描述事物的符号记录称为数据数据库的数据项之间无联系 ...
boss直聘Android找工作界面,Android仿Boss直聘我的界面滑动效果
最近在找工作,我在使用boss投简历的时候,看到boss的我的界面蛮有意思的,就想如何去实现它,可能是职业病吧,所以就打算仿一下.先看下仿的效果. image 其实我们拿到这个效果的时候,看到滑动,折 ...
音乐歌单Android,仿网易云音乐歌单界面 Header滑动效果
这是我的第一篇博客,做Android 开发2年多以来,曾经也有过写一些技术博客的想法,但因为有时候因为懒,有时候工作忙加班多而力不从心,所以迟迟没有开始写自己的博客.最近正好工作不忙,想写一些博客,记 ...
Android 仿Win8的metro的UI界面（上）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23441455 昨晚没事手机下载了一些APP,发现现在仿win8的主界面越来越多, ...
Android仿平行空间炫酷欢迎界面实现
前言平行空间的欢迎界面实现是比较复杂的,整个布局是ViewPager,手机中的画面是由HorizontalScrollView,然后在滑动的时候对背景实现颜色的渐变. 效果~ 1.布局使用Relat ...

Android仿学习强国填空题考试界面

Android仿学习强国填空题考试界面相关推荐

最新文章

热门文章