【 Android 中文開放式課程 】ConstraintLayout 約束佈局 for Android Studio 3

作者： -






影片教學





dependencies {
…
 implementation ‘com.android.support.constraint:constraint-layout:1.0.2'
…
}

<Button
        android:id="@+id/btn_A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_B"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintLeft_toRightOf="@+id/btn_A"
        app:layout_constraintTop_toTopOf="@+id/btn_A" />

    <Button
        android:id="@+id/btn_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        app:layout_constraintStart_toStartOf="@+id/btn_A"
        app:layout_constraintTop_toBottomOf="@+id/btn_A" />

<Button
    android:id="@+id/btn_A"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_B" />

<Button
    android:id="@+id/btn_B"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toRightOf="@+id/btn_A"
    app:layout_constraintRight_toRightOf="parent" />

<Button
    android:id="@+id/btn_A"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_B" />

<Button
    android:id="@+id/btn_B"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="B"
    app:layout_constraintLeft_toRightOf="@+id/btn_A"
    app:layout_constraintRight_toLeftOf="@+id/btn_c" />

<Button
    android:id="@+id/btn_c"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="C"
    app:layout_constraintLeft_toRightOf="@+id/btn_B"
    app:layout_constraintRight_toRightOf="parent" />


<Button
    android:id="@+id/btn_A"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_B" />

<Button
    android:id="@+id/btn_B"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="B"
    app:layout_constraintLeft_toRightOf="@+id/btn_A"
    app:layout_constraintRight_toLeftOf="@+id/btn_c" />

<Button
    android:id="@+id/btn_c"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="C"
    app:layout_constraintLeft_toRightOf="@+id/btn_B"
    app:layout_constraintRight_toRightOf="parent" />


<Button
    android:id="@+id/btn_A"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_B" />

<Button
    android:id="@+id/btn_B"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="B"
    app:layout_constraintLeft_toRightOf="@+id/btn_A"
    app:layout_constraintRight_toLeftOf="@+id/btn_c" />

<Button
    android:id="@+id/btn_c"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="C"
    app:layout_constraintLeft_toRightOf="@+id/btn_B"
    app:layout_constraintRight_toRightOf="parent" />


<Button
    android:layout_width="wrap_content"
    android:layout_height=“wrap_content"
    android:text="HKT"
    app:layout_constraintHorizontal_bias="0.2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />


<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="HKT"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.1" />


<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="HKT"
    app:layout_constraintTop_toTopOf="@+id/guideline_horizontal"
    app:layout_constraintLeft_toLeftOf="@+id/guideline_vertical"/>

<android.support.constraint.Guideline
    android:id=“@+id/guideline_vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.7"/>

<android.support.constraint.Guideline
    android:id="@+id/guideline_horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.8" />


dependencies {
    implementation ‘com.android.support.constraint:constraint-layout:1.1.0-beta3’
}

<Button
    android:id="@+id/btn_A"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/btn_B"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="B"
    app:layout_constraintCircle="@id/btn_A"
    app:layout_constraintCircleAngle="50"
    app:layout_constraintCircleRadius="100dp" />

參考資料：

這個網誌中的熱門文章

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)

作者： -
圖片
【Flutter 程式設計入門實戰 30 天】 線上教學課程目錄  使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。 HKT 講師，相關課程 HKT 講師，相關課程： 🎬 從零開始學 kotlin 程式設計 免費講義 https://bit.ly/2Kx7GrM 🎬 從零開始學 Jetpack Compose 程式設計 https://bit.ly/3JF4SFA 🎬Android 入門開發實戰：口罩地圖(Kotlin) 免費講義 https://bit.ly/2KKZcju 🎬從零開始學 Dart 程式設計 免費講義 https://bit.ly/2OJW6hl 🎬 Flutter 程式設計入門實戰 免費講義 https://bit.ly/37L47Ij 🎬從零開始學 Java 程式設計 免費講義 https://bit.ly/2WlCn6y 🎬 從零開始學 Swift 程式設計 免費講義 https://bit.ly/3ekjsEP 2024 最新 Flutter 教學：Flutter 終極指南 https://www.youtube.com/playlist?list=PL9muXAsyRXOEBEXU2gqKKIhanPqREbvsm Flutter 程式設計入門實戰 30 天 學習 Flutter 程式語言最佳指南，Flutter 程式語言基礎入門課程 課程說明 Flutter 是由 Google 主導的 Dart 程式語言研發出來的開源跨平台軟體框架 (Framework)，可開發 Android、iOS APP 行動應用程式、Web 網頁服務、Windows、macOS、Linux 和下一世代神秘 Fuchsia 作業系統桌面應用程式。且具有相當高效率 120FPS 的渲染性能，豐富的UI元件，媲美 Native 原生效能體驗。眾多優勢之下使得 Flutter 成為今年最熱門的新技術。看得出來 Google 未來將透過 Flutter 一統江山。只需要用一套程式語言就可以在多平台上任遊運行。 這門課程完全適合初學者，無須任何編寫過程式碼經驗，我們將從零基礎開始介紹，編寫程式語言需具備的基礎知識。完全從零開始，初學者無痛上手，將會了解如何使用 Dart 程式語言，由淺入深，快速掌握開發 Flutter ...
Read more »

2022 最新入門基礎課程 Dart教學【從零開始學 Dart 程式設計】Dart 教學課程目錄 (IntelliJ IDEA 開發教學)

作者： -
圖片
【從零開始學 Dart 程式設計】 線上教學課程目錄  ，Flutter 先修班， Dart 程式語言基礎入門課程。 HKT 講師，相關課程 HKT 講師，相關課程： 🎬 從零開始學 kotlin 程式設計 免費講義 https://bit.ly/2Kx7GrM 🎬 從零開始學 Jetpack Compose 程式設計 https://bit.ly/3JF4SFA 🎬Android 入門開發實戰：口罩地圖(Kotlin) 免費講義 https://bit.ly/2KKZcju 🎬從零開始學 Dart 程式設計 免費講義 https://bit.ly/2OJW6hl 🎬 Flutter 程式設計入門實戰 免費講義 https://bit.ly/37L47Ij 🎬從零開始學 Java 程式設計 免費講義 https://bit.ly/2WlCn6y 🎬 從零開始學 Swift 程式設計 免費講義 https://bit.ly/3ekjsEP 2024 最新 Flutter 教學：Flutter 終極指南 https://www.youtube.com/playlist?list=PL9muXAsyRXOEBEXU2gqKKIhanPqREbvsm 從零開始學 Dart 程式設計 Flutter 先修班，學習 Dart 程式語言最佳指南， Dart 程式語言基礎入門課程 課程說明 Dart 是由 Google 主導開發的程式語言，適用於多項平台上的應用程式。搭配 Flutter 開源跨平台軟體框架 (Framework)，可開發 Android、iOS APP 行動應用程式、Web 網頁服務、Windows、macOS、Linux 和下一世代神秘 Fuchsia 作業系統桌面應用程式。且具有相當高效率 120FPS 的渲染性能，豐富的UI元件，媲美 Native 原生效能體驗。著名的 Google AdWords 前端技術，即是使用 Dart 開發，Flutter 使用 Dart 程式語言，KT 建議學習與使用 Flutter 之前，能有 Dart 程式語言一定的認識與基礎程式概念。這麼多的優勢之下，KT 預估 Dart 程式語言將成為未來熱門的程式語言，學習者將能成為明日之星。 這門課程完全適合初學者，無須任何編寫過程式碼經驗，我們將從零基礎開始介...
Read more »

16天記下7000單字

作者： -
圖片
最近剛好在看7000單字，正不知道怎麼下手來解碼這龐大的一隻害蟲， 在網路上正好看到了這個「800個句子背下7000個單詞」，又名「16天記下7000單字」， 顧名思義一天只要看懂50個句子，16天後就可以看懂800個句子也記下7000個單字。 感覺好像還蠻厲害的。但出處不明，不知那個好心人士分享的，所以我也無法註明出處， 這點到是有點可惜。 相關文章: 16天記下7000單字 傳說中的100句英語可以幫你背7000單詞-公開大解密 傳說中的7000單字由來??? 800個有趣句子幫你記憶7000個單字   1. With my own ears I clearly heard the heart beat of the nuclear bomb. 我親耳清楚地聽到原子彈的心臟的跳動。 2. Next year the bearded bear will bear a dear baby in the rear. 明年，長鬍子的熊將在後方產一頭可愛的小崽。 3. Early I searched through the earth for earthenware so as to research in earthquake. 早先我在泥土中搜尋陶器以研究地震。 4. I learn that learned earnest men earn much by learning. 我得知有學問而認真的人靠學問掙很多錢。 5. She swears to wear the pearls that appear to be pears. 她發誓要戴那些看起來像梨子的珍珠。 6. I nearly fear to tear the tearful girl's test paper. 我幾乎害怕撕那個淚流滿面的女孩的試卷。 7. The bold folk fold up the gold and hold it in hand. 大膽的人們將黃金折疊起來拿在手裡。 8. The customers are accustomed to the disgusting custom. 顧客們習慣了令人討厭的風俗。 ...
Read more »

【從零開始學 Dart 程式設計】安裝 Dart 開發環境

作者： -
圖片
【從零開始學 Dart 程式設計】 線上教學課程目錄  ，Flutter 先修班， Dart 程式語言基礎入門課程。 此篇「安裝 Dart 開發環境」以 macOS 作業系統介紹為主，其他作業系統如何安裝，可以參考 Dart 官網介紹： Get the Dart SDK 安裝 Dart 開發環境 開啟終端機 透過 Homebrew 套件管理工具安裝 Dart brew tap dart-lang/dart brew install dart 過程中，若出現「-bash: brew: command not found」，代表尚未安裝 Homebrew ，請先執行： /usr/bin/ruby -e " $(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install) " 完成安裝 Homebrew 再執行上方安裝 Dart指令。 下載並安裝 IntelliJ IDEA 整合程式碼編輯器 「從零開始學 Dart 程式設計」，此套課程 KT 將使用 IntelliJ IDEA 程式碼編輯器來介紹如何開發 Dart。KT 會選 IntelliJ IDEA 因為它可以單純建立一個很乾淨、很簡單的 Dart 專案來練習語法，可以把他想像成小孩子的遊樂場。 IntelliJ IDEA 下載點： IntelliJ IDEA Community 透過上方連結，連結到下載頁，選擇自己當下作業系統，如KT電腦是 macOS，就選 macOS。然後選擇下方右側的 Community ，為免費版本且無使用天數上的限制，練習 Dart 或是 開發 Flutter 應用程式綽綽有餘。 安裝 Dart 套件 安裝完直接開啟 IntelliJ IDEA ，點選 Preferences 選單 安裝 Dart 套件：Plugins -> Dart -> Install 。安裝完點擊 Restart IDE ，將重新開啟 Intellj IDEA 整合程式碼編輯器 DartPad 但如果真的有空間與運行資源的考量，需要練習 Dart 程式語言也可以到  DartPad  線上練...
Read more »

【從零開始學 Java 程式設計】JButton 按鈕元件與 Event Listener 事件監聽

作者： -
圖片
【從零開始學 Java 程式設計】  線上教學課程目錄 ，使用 Java 程式語言，開發應用程式。 JButton JButton 按鈕元件，通常用來被點擊後來觸發執行特定事件 範例 新增一個 JButton 按鈕元件，並註冊監聽按鈕事件 (addActionListener)，每點一下按鈕，紀錄被點ㄧ下。 關鍵程式碼 int click_count = 0 ; public void addComponentsToPane ( Container pane ) { pane . setLayout ( new BorderLayout ( ) ) ; JButton btn = new JButton ( "點我" ) ; btn . setFont ( new Font ( "Courier New" , Font . BOLD , 30 ) ) ; btn . addActionListener ( new ActionListener ( ) { @Override public void actionPerformed ( ActionEvent e ) { btn . setText ( "我已經被點：" + click_count ++ + " 下" ) ; } } ) ; pane . add ( btn ) ; } 完整程式碼 import javax . swing . * ; import java . awt . * ; import java . awt . event . ActionEvent ; import java . awt . event . ActionListener ; public class DemoJButton { int click_count = 0 ; public void addComponentsToPane ( Container pane )...
Read more »