0 x1, introduction

2333, see this title know is not what serious technology article, spend some time, wrote a “useless good product”, later please call me “Android community Edison — fan Shaohuang”, crab crab ~

Recently the company APP version iteration, a person wrote interface, I really want to vomit:

Some passers-by might say: Don’t like writing, you can’t drag the controls, Han.

I9 9900K, 850 PRO, 64G DDR4, drag control silky smooth, I do not know the human suffering… If you are like your younger brother and use the company’s i3 home desktop, you will become “Zuan” in seconds.

Drag and drop is not flexible, drag and drop into the code to adjust, sometimes not as efficient as hand knocking. ConstraintLayout, which Google used a long time ago, is useful because it requires a bunch of properties, such as ConstraintLayout, for each control:

Although AS automatic completion, but writing, the efficiency is not very high. One of the most important criteria for an “Android developer with experience in 4-point multi-stack layouts” is to look at a design and immediately mentally parse out the “hierarchy of page layouts” such as this personal-centric page:

A.

Constraint layout

Relative to the layout

The back Button

Title - TextView

Card view

Constraint layout

Head - ImageView

Login hint -TextView

More arrows -ImageView

Card view

Constraint layout

Order icon -ImageView

Order text-TextView

Order more -ImageView

Exchange icon -ImageView

Exchange text -TextView

Exchange more -ImageView

.slightly

Copy the code

The analysis is quite simple, regardless of the knock up, most of the machine repeat,. Not long ago, I saw this passage on Bihu:

Feel quite reasonable, really need a kind of knowledge and ability to improve, from such a “time mire” out of the.

The idea of template code came to mind:

The method of creating a layout template is a little different from that of the AS. It is accurate to the control level. Keywords are used to match the corresponding template code of the control.

When I type TV, I import a bunch of code, and when I type TVC, I import another bunch of code. But this idea was abandoned after I wrote a TextView, TM so many controls, how many sets to write, and many attributes are redundant…

That didn’t work, so another thought came up:

“Define your own set of syntax rules, write a few, and script them into XML files in AS”

Well, well, well, that also means yes

“You can write layout files out of Android Studio more efficiently than typing XML letter by letter!”

How cool is it that you can “write a layout on a post-it note on the subway and then translate it into AN XML layout with a script at work”?

0x2, Rule => Rule

Before we define this set of syntax rules, let’s look at the rules of XML layout:

# XML is composed of tags (nodes), divided into: single tag and double tag (nested), such as:

<TextView ./> 和 <LinearLayout .></LinearLayout> 



# then tag composition

<The control of 

attribute:value

attribute:value

    ./>

Copy the code

To sum up, it is not difficult to draw two rules:

① There are actually three kinds of labels: open label, close label, close label, to distinguish ② label = < control name several attributes: value >

In addition, Android recommends that each control has an ID attribute. It is not difficult to define a class to represent a tag:

class Node:

    def __init__(self, widget=None, id=None, kv=None):

        self.widget = widget

        self.id = id

        self.kv = kv

Copy the code

1, the distinction of labels

As mentioned above, there are three types of tags. Here we introduce three symbols to mark (+-*), for example:

+ Linear layout

* Text view

- Linear layout

Copy the code

Create a configuration file config.ini to save the “custom abbreviation and control mapping relationship”

Note: you can define the abbreviation as you like, even in Chinese! Config_getter. py: config_getter.py: config_getter.py: config_getter.py

Create a new input source test.txt file with the following contents:

Finally write a script to read TXT files, read according to the line, filter space and newline, according to the first character of the string for filtering:

When run, you can see the output XML file:

Heap together, see nothing, format to see the effect:

Tut, tut, tut, tut, tut, tut.

2, attributes,

A control can have multiple properties. How can multiple properties be divided? I’m going to say > and then how do I separate the property from the value? Is originally want to use: or |, used to found behind and finally decided to split with “-“. A simple example is as follows:

*Bt > BT_back > W-56 > H-56 > T - Returns

Copy the code

The code above represents:

Define a button with id bt_back, 56dp wide, 56dp high, and text return

In addition, some common attribute-values can be simplified, such as:

android:layout_width="wrap_content"



Theta can be written as

w-wrap_content



# simplified

w-w



# to simplify

ww

Copy the code

Android :layout_width=”wrap_content”

Program processing needs to distinguish between: W-W and WW, the distinction method is also very simple:

Len (split(“-“)) == 1, indicating the latter, otherwise the former

Tut, tut, yes, go on

3, value

The case for values is slightly more complicated, and the following are common:

android:gravity="center|start"

android:layout_width="match_parent"

android:background="@drawable/ic_back_white"

android:layout_marginStart="60dp"

app:layout_constraintDimensionRatio="16:9"

Copy the code

In fact, the author needs to distinguish only three types

  • ① Direct fill -> property =” XXX”
  • ② Digital dp -> attribute =” XDP”
  • ③ @ resource reference -> attribute =”@x/y”

So the process:

Step 2: use the re to determine whether the type is @. If yes, extract the type and value. Otherwise, skip Step3. Step3: check whether the attribute is included

It’s very simple, then it’s time to write code to assemble our “old eight Secret Burger”!!

0x3, Assemble Lao Ba Secret small hamburger

First, complete the configuration file: config.ini

AutoTranslate. Py reads a wave of configuration information at the beginning of AutoTranslate.

Then define a method to read the list of nodes:

Define a method to parse the content of the translation node:


Finally, define a method to write to a file:

Then take a few minutes to write a layout TXT file:

The transformation script calls the related methods below:

Run a wave and you can see that a test.xml layout file is generated. Open it and take a look:

TSK TSK, formatting?

Copy the XML into the project and see what happens?

There should be applause! Spluttered pa!

0x4 Ollie here, eat baba

We have a rough prototype of the script, and we can optimize the interaction and small details later, but it doesn’t feel technical? Coincidentally, recently in the brush problem, add an algorithm to play? Let’s take a look at LeetCode’s original title “valid parentheses”, which is described as follows:

Match symbol open and close, very similar to our scenario wow, match the open and close node:

# Open and closed nodes need one-to-one correspondence, for example:

+cly

-cly



# More, less, no good (both of the following are false)

+cly

+cly

-cly



+cly

+ly

-cly

-ly

Copy the code

How to solve it? The most standard solution is to use the stack, relatively simple, direct code:

Next call:

Write the wrong node intentionally, run and see:

Yes, we are done

0 x 5, summary

Long time to touch fish leisure time, to everyone do an old eight secret production small 🍔, bah…

“Android Layout Translator”

With it, you can write Android layouts using text editors, notes, and more at 🚇🚍. Of course, the current prototype, you can according to their own needs, dynamic configuration, optimization, etc., in order to improve your efficiency ~ at this time I suddenly remembered: once threatened to buy Apple, now live with goods Lao Luo, originally proposed TNT system, combined with this script, write layout can rely on shout:

Text box > Center > Black > Large > Bold…

Tut, tut, tut, tut, tut, tut, tut, tut, tut, tut, tut, tut

  • Github Repository: github.com/coder-pig/A…