Play with Pythonista UI implementation [Screen elements]

Introduction

I will explain the elements that can be used in the ui implementation of Pythonista!

type

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

Parameters of screen elements

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.

Common

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.

Unique to each element

If you explain everything, there is no end to it, so I will omit what you can understand without explaining it.

Label specific

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.

Button specific

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! !!

Slider specific

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).

Switch specific

Value Initial position. Unlike Slider, it is True / False. Action Same as Button.

Segment Control specific

Segments Describe the two choices to be selected with Segment control. Action It's time to explain.

Text Field specific

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!

Text View specific

Editable Decide whether to edit. Text Color Font Alignment Auto-Correction Spell-Checking Same as Text Field.

Web View specific

Scale Page to Fit Whether to match the size of the View to be displayed with the size of the Web View. True / False.

TableView specific

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 ofTable 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.

Date Picker specific

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.

Scroll View specific

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 View specific

Image No explanation needed.

Navigation View specific

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!

in conclusion

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!