python kivy app實作計算APP - 上

 

前面都有稍微介紹了kivy的優勢與大概想做的方向，所以這篇就開始進入了小雷這次的實作內容，完整的程式碼有放在Github，.apk檔案則是放在雲端，有需要的朋友可以自行下載

 

基本的架構預想是長這樣子，其他功能目前還未實裝，就先預留著空位，一開始不想弄得太過於複雜，希望先以簡單的版型為主

一開始安裝kivy

pip install kivy

 

實作完的APP長的是這個樣子，希望以簡單乾淨，功能操作方便為主，所以沒有甚麼美化，需要特別注意的是，主檔案的名稱一定要是”main.py”，否則打包時會無法執行!

 

匯入需要的函式庫

ScrollView >> 頁面滾動

Config.set >> 手機控制的配置項目，keyboard_mode打字時需要顯示手機鍵盤

Webbrowser >> 開啟手機瀏覽器

from re import MULTILINE
from kivy.core.window import Window
from kivy.uix.scrollview import ScrollView
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button
from kivy.uix.image import Image
from kivy.uix.label import Label
from kivy.core.text import LabelBase
from kivy.uix.gridlayout import GridLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.app import App
import webbrowser
from kivy.config import Config
Config.set('kivy', 'system', 'keyboard_mode')  # 控制手機系統與鍵盤

 

一開始有幾個設定需要預先處理，第一個是字體的問題，kivy並沒有支援繁體中文，所以需要準備一個要替換掉的字型檔案，跟main.py放在一起，程式碼需要放到最上方讓程式啟動時就執行載入

# 導入字體
LabelBase.register(
    # 系統字形
    name='Roboto',
    # 更換的字形
    fn_regular='NotoSansCJKtc-Regular.otf')

 

背景色的部分有替換掉原始的黑色，所以需要清除更換顏色，配色的部分採用的是RGBA，可以找找想替換的顏色，有些網站也提供轉換色碼

# 清除背景色
Window.clearcolor = (244, 221, 53, 1)

 

設定想要連到的網頁，點擊Button後開啟瀏覽器連結

def webLink(instance):
    # 連結的網址
    webbrowser.open("https://rexli01010629.wixsite.com/rex-li")

 

若是有統一規格的按鈕，標籤等也可以先設定好字體對齊方式、大小、背景色等

# 按鈕設定
class MyButton(Button):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        # 字體對齊、字形大小、背景色
        self.halign = 'center'
        self.font_size = self.width / 2
        self.background_color = '#00E3E3'

 

部件的設定有基本的步驟，設定所需部件(Button、Label、Text) > 綁定執行函式(bind) > 將部件添加到布局之中(add_widget)

On_press >> 按壓後要執行的函式

        self.top_right = Button(
            background_normal="link_one.png",
            background_down="link_two.png",
            size_hint=(1, 0.1)
        )
        self.top_right.bind(on_press=webLink)
        self.window.add_widget(self.top_right)

 

 

Kivy的程式碼中開始與執行APP並沒有想像中的複雜，開始與結尾執行的設置如下，同時也把要連結網頁與滾動的布局帶進去調用。

GridLayout >> 選擇的布局方式

Cols >> 需要多少欄位，若不是GridLayout就不是設置cols

Size_hint >> 這個Layout的大小設定，(x, y)，1為最大

Spacing >> 部件的間隔多少pixel

Pos_hint >> 以dic的形式進行設定

Create_scrollview >> 調用滾動函式

# App主體
class CalculationApp(App):
    def build(self):
        # 設定主要面板布局
        self.window = GridLayout()
        # 設定欄位數
        self.window.cols = 1
        # Layout的大小設定
        self.window.size_hint = (0.8, 1)
        # 間隔
        self.window.spacing = 10
        # APP位置的定位
        self.window.pos_hint = {"center_x": 0.5, "center_y": 0.5}
 
        # 頂部的Button連結
        self.top_right = Button(
            background_normal="link_one.png",
            background_down="link_two.png",
            size_hint=(1, 0.1)
        )
        self.top_right.bind(on_press=webLink)
        self.window.add_widget(self.top_right)
 
        # 輸出位置
        self.outputresult = Label(
            text="Out put result \n 結果輸出處",
            font_size="55",  # 原始為60
            color='#000000',
            size_hint=(1, 0.5),
            pos_hint={"center_x": 0.5, "center_y": 0.2}
        )
        self.window.add_widget(self.outputresult)
        # 調用滾動
        self.create_scrollview()
 
        return self.window
 
# 執行
if __name__ == "__main__":
    CalculationApp().run()

執行的方式只要從終端機操作，就可以測試APP是否有錯誤