Now, I am completely finished my chat window, so I will share some of my work with you. The first one is the navigation. (my ngui version is about 2.1.4)
First you should know that English is as a foreign language for me, so there will be some grammar mistakes and inappropriate expressions. And I cannot offer you my code for: 1 this is from my job, 2 my input box have so many other functions such as hyperlinks and flash carat, and 3 I haven’t get touch with Unity3D and NGUI unity this January, so my code is very bad . But, I will provide the way I implement this function.Arrow Key navigation:the First Step:The original UIInput is used a method call GetEndOfLineThatFits
in UIFont.cs. It cut the text and leave some last chars so that the string will not out range the input box, but if you need insert or remove a single character, you cannot use this way to cut the string. We need the UILabel in UIInput cantinas the whole string and display only parts of the string. This sounds a little hard, however fortunately, ngui provide a panel which can clip. OR, change the code in that method.
Add clip on the parents panel.
And give the string processed value to string fit
Now, the surplus contents will not be observed, but the surplus words will not be shown. This will solved later.
the Second Step:In the input script, author already appand the carater ‘|’ after the text, so we need add the local parameter indexOfCarat to store the position of carater. Then, modify the code in method UpdateLabel, let the carat char insert the right place. If we detected the right arrow key, we add the index, and sub the index if left key pressed.
Now, we can see the carat moving, but the now inputs still added after.
The text for UpdateLabel the method needs modify. You need to control the value of this index to constrain the legal value.
We already have the position of carat which user want. So, the new char is not appand at the end but insert in the index of carat.
So, it’s nearly complete.~~ if the length is not very long , this input box works well. But if the length out ranged the size of the label in input box, or adjust the position of the carat too far, there will be an error: the carat misses.
the Third Step.The reason is that the carat is out of the input box.
The way I used to fix this problem is to change the position of the label accrounding the carat. Before solve the problem, we should know a useful method is UIFont.cs: CalculatePrintedSize, which will return the pixel size of a given text in the specific font after multiplied by the font size. So what we should do is to try to keep the carat in to the input box.
Add a Vector2 to store the current position of the label(pivot of this is left, top left or bottom left), another two Vector2 to store the position of the input box(or the clip box) and the size of it.
How? A simple way is to keep the carat on the left side of the input box after pressed the left arrow key or backspace, and on the right side after right arrow and type a letter. This is my solution.
the Last Step:Thus, after the carat moved left, we calculate the length of text before and the then added to the position of the label to judge whether the carat is on the right of the input box. If so, move the whole label right so that the carat just in the box and on the left side.
The green arrow show the value the label should move.
We using the same way to process when the carat move right.
After this step, we can use the key to navigation.