I will explain the elements that can be used in the ui implementation of Pythonista!
First of all, the introduction of the types! There is such a ↓, but I think that there are many elements that I have seen if I use a smartphone application, so I will omit the explanation of what it is for.
By making full use of these elements, we will create the screen of the application you want to create. Yes, like this.
Since the operation is intuitive, I think that you can make it without hesitation at this level, but for the time being ↓
① Cover the screen with Custom View
and set BackGround Color
to a subtle color that cannot be said to be blue or gray.
② Place Label
and set the problem statement in Text
③ Place Text Field
for the answer
④ Place Button
and set Text
to OK. Set Background Color
Looking at the screen above, you can see that the parameters of the selected element are on the right. It's almost the same, but some are prepared for each element.
Name
Position
Size
Needless to say around here. abridgement.
Auto-Resizing / Flex
You can set the automatic resizing and placement position when the screen size of the created UI and the terminal that uses the UI are different.
Background Color
Background color. You can choose from the color map, so it's easy to play.
If you want to write in color code, use ** Custom Attribute ** (described later) provided for each element.
Tint Color
If it is not the background color, the selected color will be attached somewhere. The usage of this color differs depending on the element, for example, Text Field
will be the color at the time of selection, and Label
will be the text color.
Border
Boundaries or contours are closer.
Width
specifies the width of the contour, Radius
has 0 rounded corners
Specify with ~ 100. What kind of calculation are you doing?
Border Color
The color of the contour line. If the Width
of ** Border ** is 0, there is no point in specifying it.
Alpha
Transparency. Specify from 0 to 1. 0 is completely transparent.
If you explain everything, there is no end to it, so I will omit what you can understand without explaining it.
Well, I don't explain that much, though. Text Font Color These are omitted. Number of Lines Number of lines. Yes, the end. Alignment Align. Left / center / right. Yes, the end.
Title
Font Size
Bold
Image
Process the text of the button and add an icon.
Action
What do you do when you press the button? Specify the method described in the py file.
ʻAction also exists in each element that has movement, and it is essential to use it when creating the UI of the application. ʻAction
is summarized in Separate article, so please have a look there! !!
Value
The initial position of Slider
. Specify from 0 to 1. 0.5 is specified without any thought.
Action
Similar to Button
. However, the behavior differs depending on the Continuous
specification.
Continuous
ʻSpecify the operating conditions of Action. When set to On (True), ʻAction
will continue to operate as long as the user is moving (touching) the Slider
knob. When set to Off (False), ʻAction` operates when the user finishes moving the knob (releases the touch).
Value
Initial position. Unlike Slider
, it is True / False.
Action
Same as Button
.
Segments
Describe the two choices to be selected with Segment control
.
Action
It's time to explain.
Placeholder
The string to display when Text Field
is empty.
Text Color
Font
Alignment
Omission uuuuuu abbreviation! No explanation required!
Auto-Correction
Determines the behavior of AutoCorrect. There are False (disable), None (system dependent), and True (enable).
Spell-Checking
Determines the behavior of spell checking. There are False (disable), None (system dependent), and True (enable).
Password Field
When enabled, the characters will be hidden (⚫︎) when input.
Action
abridgement!
Editable
Decide whether to edit.
Text Color
Font
Alignment
Auto-Correction
Spell-Checking
Same as Text Field
.
Scale Page to Fit
Whether to match the size of the View to be displayed with the size of the Web View
. True / False.
Row Height
The height of one line.
Editing
Allows user interaction to delete rows.
The Delete Enable
and Move Enabled
described below depend on this.
Data source
For Table View
, the data source to be displayed on the table can also be specified on the pyui side.
However, if you want to get the value of the table dynamically, you cannot write it in pyui. It will be written on the py side. I made a separate article about that.
Delete Enabled
Allows you to delete rows. The one who squeezes to the side.
If you want to use this, enable Editing.
Move Enabled
Allows you to sort the rows.
As with Delete Enable
, enable ʻEditingand use it. **Font** I won't talk. **Number of Lines** Number of lines. The number of rows of the string that fits in one row of the table. **Action** Action when a table value is selected (tapped). Due to the nature of
Table View, there are multiple Actions. ʻAction
passes the line number to the method being called.
Edit Action
An Action that behaves when table values are deleted or sorted.
Accessory Action
The trigger to work is the same as ʻAction`, but it passes the data stored in the line instead of the line number.
Mode
Select from the following four modes.
Date
: Select date
Time
: Select hour and minute
Date and Time
: Select date and time
Countdown
: Select the time to count by hour and minute
Action
This is the behavior when Date Picker
is selected.
Content Size
Specifies the size of the content to place in the Scroll View
.
of course
It can be specified larger than Scroll View
.
Image No explanation needed.
Root View Name
First specify the name to display in the Navigation View
.
The character string to be displayed changes when the screen changes.
Title Color
Title text color
Title Bar Color
Title bar color
Comment
Comment
This is a comment.
Custom Attributes
In addition to the items introduced so far, every element has a Custom Attribute
.
This means that the parameters of each element can be described in Python dictionary format. For example, the display string Text
of Label
can be described here.
{
'text': 'hogehoge'
}
Can be written as. By the way, if you specify both Text and Custom Attribute, Custom Attribute has priority. It seems that it can be used when you want to write an item that specifies a color with a color code. Action For example, in the case of a button, pressing it is not the end, right? Most screen elements are things that do something when you touch or click. By specifying a method that describes arbitrary processing in ʻAction`, you can define the behavior when touched or clicked.
This is a bit long to write in this article, so I've summarized it in a separate article! Play with the UI implementation of Pythonista [Implementation of Action] If you don't understand at all even if you google, please read it!
I introduced what you can use for the time being! While looking at this article, please try to make an app that looks like you like. I played with this and found that it had a catastrophic lack of design sense. It's very easy because you can place elements on the screen by chance without having to do your best to write HTML, JavaScript, or CSS. I wonder how to do a common design for multiple screens.
Well, there are many parameters that you can understand by actually looking at it, so it may have been an article that is not necessary for those who can read the reference smoothly. Now, let's add movement to the designed screen!
Recommended Posts