Case introduction

Remember that it was easy to write a custom view, if you haven’t written for a long time, it is easy to get out of touch. Generally, a custom view has a combined viewgroup, and a view starts from the smallest unit. This time, the custom word fill view is started from the view, and before doing it, I have searched the relevant view. Most of them started from the span of TextView, but the span of TextView would encounter various problems, and it is difficult to expand, so I decided to write a word-choice fill-in-the-blank view related to my product. The effect is seen directly:

Here is divided into two types of word choice fill-in-the-blank questions, divided into the analytic class and the question class, the analytic class will only show the answer is correct or not, the question type will directly fill in the options of the scene. And in the problem class, there are two situations:

  • Options less than Spaces: this is the option can be selected after the selection
  • Option extra space: this option is selected after the option cannot be selected

Functions achieved:

  • Can achieve the selection of space
  • Toggles the selected space
  • Preference is given to the selected space. If there is no selected space, the first space is used by default
  • If this space already has an answer, the next time the space is selected, the answer will be restored, and the state of whether the option is optional will be restored.

General logic is the above points, although it is very clear, but the custom view involves word wrap, underscore a newline, not answer measure, measure the answer text, underline the measurement, and the underline measurement are measured according to have the answer, in has the answer, according to the length of the answer to map the underlined, When there is no answer, the underline is given a default length.

The measurements of writing are:

  • Figure out how much text can fit in the current width using the paint.breakText method, which returns the wordCount count
  • The text is then intercepted according to the substring of the string
  • Adds the captured text to the text collection

Drawing:

  • Because the above has worked out the information of each line of text, so in the process of drawing directly take the text set, encounter text draw text, encounter underline draw underline.

Touch:

  • Since interaction is required, the up event of onTouch is rewritten. When up, it will first get whether the underlined part is clicked, if so, it will judge that the answer has been selected, if so, it will reset the answer, otherwise, the underlined part is selected.
  • If there is an underlined part, the answer is filled in directly. If there is no underlined part, the answer is filled in directly. If there is no underlined part, the answer is filled in directly.

Whether onMeasure process:

  • The total height of the previous view is recorded while filling in the row information. If the total height of the current view has changed from that of the last view, proceedrequestLayout, otherwise directlyinvalidate.
  • In onMeasure, the height and width need to be reset mainly when mode is not exactly.

Use:

  • If you want to have the option styles of the missing layout directly use:
<com.xc.blank.BlankRootView
    android:id="@+id/blank_root_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
Copy the code
  • If you want to define the option view, you can just define BlankView:
<com.xc.blank.BlankView
    android:id="@+id/blankView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/dp_23"
    android:layout_marginTop="20dp"
    android:layout_marginRight="@dimen/dp_16"/>
Copy the code

We will consider adding custom attributes later!!

If you want to see the demo effect for the first time, scan the following QR code:

Github address: enter