markdown UI基础知识 - 约束布局

Posted 2021-05-06

<?xml version="1.0" encoding="utf-8"?>
<!-- COMPLETED (17) Surround the Constraint layout with a ScrollView -->
<ScrollView xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- COMPLETED (2) Replace the Relative layout with a ConstraintLayout -->
    <android.support.constraint.ConstraintLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <!-- COMPLETED (3) Create a TextView for the Passenger label and name -->
        <TextView
            android:text="@string/passenger_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textViewPassengerLabel"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            android:letterSpacing="0.5"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginLeft="16dp"
            tools:layout_constraintTop_creator="1"
            tools:layout_constraintLeft_creator="1" />

        <!-- COMPLETED (4) Use tool:text to set the text value -->
        <TextView
            tools:text="@string/passenger_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textViewPassengerName"
            android:textAppearance="@style/TextAppearance.AppCompat.Display1"
            android:textColor="@color/colorPrimary"
            app:layout_constraintTop_toBottomOf="@+id/textViewPassengerLabel"
            android:layout_marginStart="16dp"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginLeft="16dp"
            tools:layout_constraintTop_creator="1" />


        <!-- COMPLETED (5) Create an ImageView for the left rectangle -->
        <!-- COMPLETED (6) Set the background to the shape_rectangle_stroke drawable -->
        <ImageView
            android:id="@+id/leftRectangle"
            android:layout_width="60dp"
            android:layout_height="80dp"
            android:background="@drawable/shape_rectangle_stroke"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textViewPassengerName"
            android:layout_marginLeft="32dp"
            android:layout_marginTop="16dp"
            android:layout_marginStart="32dp" />

        <!-- COMPLETED (7) Create an ImageView for the divider -->
        <ImageView
            android:id="@+id/divider"
            android:background="@color/colorPrimaryLight"
            android:layout_height="1dp"
            android:layout_width="0dp"
            app:layout_constraintLeft_toRightOf="@+id/leftRectangle"
            app:layout_constraintRight_toLeftOf="@+id/rightRectangle"
            app:layout_constraintTop_toBottomOf="@+id/rightRectangle"
            app:layout_constraintBottom_toTopOf="@+id/rightRectangle"
            app:layout_constraintHorizontal_bias="0.0"/>

        <!-- COMPLETED (8) Create an ImageView for the rightRectangle -->
        <ImageView
            android:id="@+id/rightRectangle"
            android:layout_width="60dp"
            android:layout_height="80dp"
            android:background="@drawable/shape_rectangle_stroke"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textViewPassengerName"
            android:layout_marginRight="32dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="32dp" />

        <!-- COMPLETED (9) Create a TextView for the origin code, the destination code and the flight code -->
        <TextView
            tools:text="@string/origin_code"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textViewOriginAirport"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_constraintBottom_toBottomOf="@+id/divider"
            app:layout_constraintRight_toRightOf="@+id/leftRectangle"
            app:layout_constraintTop_toBottomOf="@+id/divider"
            app:layout_constraintLeft_toLeftOf="@+id/leftRectangle" />

        <TextView
            tools:text="@string/destination_code"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textViewDestinationAirport"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_constraintBottom_toBottomOf="@+id/divider"
            app:layout_constraintRight_toRightOf="@+id/rightRectangle"
            app:layout_constraintTop_toBottomOf="@+id/divider"
            app:layout_constraintLeft_toLeftOf="@+id/rightRectangle" />

        <!-- COMPLETED (15) Import the plane image SVG file into the drawable directory and name it art_plane -->
        <!-- COMPLETED (16) Create an ImageView for the plane and set the background to art_plane drawable -->
        <ImageView
            android:id="@+id/imagePlane"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:background="@drawable/art_plane"
            app:layout_constraintBottom_toTopOf="@+id/divider"
            app:layout_constraintLeft_toRightOf="@+id/leftRectangle"
            app:layout_constraintRight_toLeftOf="@+id/rightRectangle"
            android:layout_marginBottom="16dp"
            />


        <TextView
            android:id="@+id/textViewFlightCode"
            tools:text="@string/flight_code"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Display1"
            android:textColor="@color/colorPrimary"

            app:layout_constraintTop_toTopOf="@+id/divider"
            app:layout_constraintLeft_toRightOf="@+id/leftRectangle"
            app:layout_constraintRight_toLeftOf="@+id/rightRectangle"
            android:layout_marginTop="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp" />


        <!-- COMPLETED (10) Create a TextView for the time texts and their corresponding labels -->
        <TextView
            android:id="@+id/textViewBoardingTimeLabel"
            android:text="@string/boarding_time_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            android:letterSpacing="0.3"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/leftRectangle"
            android:layout_marginTop="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp" />


        <TextView
            android:id="@+id/textViewBoardingTime"
            tools:text="@string/boarding_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Display1"
            android:textColor="@android:color/black"
            app:layout_constraintLeft_toLeftOf="@+id/textViewBoardingTimeLabel"
            app:layout_constraintTop_toBottomOf="@+id/textViewBoardingTimeLabel" />


        <TextView
            android:id="@+id/textViewDepartureTimeLabel"
            android:text="@string/departure_time_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            android:letterSpacing="0.3"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/textViewBoardingTime"
            app:layout_constraintLeft_toLeftOf="@+id/textViewBoardingTime" />


        <TextView
            android:id="@+id/textViewDepartureTime"
            tools:text="@string/departure_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorGood"
            app:layout_constraintLeft_toLeftOf="@+id/textViewDepartureTimeLabel"
            app:layout_constraintTop_toBottomOf="@+id/textViewDepartureTimeLabel" />


        <TextView
            android:id="@+id/textViewBoardingInTimeLabel"
            android:text="@string/boarding_in_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            android:letterSpacing="0.3"
            android:layout_marginEnd="40dp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/leftRectangle"
            android:layout_marginTop="16dp"
            android:layout_marginRight="40dp" />


        <TextView
            android:id="@+id/textViewBoardingInCountdown"
            tools:text="@string/boarding_in_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Display1"
            android:textColor="@color/colorBad"
            app:layout_constraintLeft_toLeftOf="@+id/textViewBoardingInTimeLabel"
            app:layout_constraintTop_toBottomOf="@+id/textViewBoardingInTimeLabel" />


        <TextView
            android:id="@+id/textViewArrivalTimeLabel"
            android:text="@string/arrival_time_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            android:letterSpacing="0.3"
            app:layout_constraintTop_toBottomOf="@+id/textViewBoardingInCountdown"
            app:layout_constraintLeft_toLeftOf="@+id/textViewBoardingInCountdown"
            android:layout_marginTop="8dp"/>


        <TextView
            android:id="@+id/textViewArrivalTime"
            tools:text="@string/arrival_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorGood"
            app:layout_constraintLeft_toLeftOf="@+id/textViewArrivalTimeLabel"
            app:layout_constraintTop_toBottomOf="@+id/textViewArrivalTimeLabel" />

        <!-- COMPLETED (11) Create an ImageView for the blue table's header -->
        <ImageView
            android:id="@+id/tableHeaderImage"
            android:background="@color/colorPrimaryLight"
            android:layout_height="24dp"
            android:layout_width="0dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginTop="32dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            app:layout_constraintTop_toBottomOf="@+id/textViewDepartureTime"
            app:layout_constraintHorizontal_bias="0.33" />

        <!-- COMPLETED (12) Create an ImageView for the blue table's body -->
        <ImageView
            android:id="@+id/tableImage"
            android:background="@color/colorPrimary"
            android:layout_height="0dp"
            android:layout_width="0dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tableHeaderImage"
            app:layout_constraintBottom_toBottomOf="@+id/textViewTerminal"/>


        <!-- COMPLETED (13) Create a TextView for each of the labels and text fields in the blue table -->
        <TextView
            android:id="@+id/textViewTerminalLabel"
            android:text="@string/terminal_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            android:textColor="@android:color/black"
            app:layout_constraintBottom_toBottomOf="@+id/tableHeaderImage"
            app:layout_constraintLeft_toLeftOf="@+id/textViewTerminal"
            app:layout_constraintRight_toRightOf="@+id/textViewTerminal"

            app:layout_constraintTop_toTopOf="@+id/tableHeaderImage" />

        <TextView
            android:id="@+id/textViewGateLabel"
            android:text="@string/gate_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            android:textColor="@android:color/black"
            app:layout_constraintBottom_toBottomOf="@+id/tableHeaderImage"
            app:layout_constraintLeft_toLeftOf="@+id/textViewGate"
            app:layout_constraintRight_toRightOf="@+id/textViewGate"
            app:layout_constraintTop_toTopOf="@+id/tableHeaderImage"
            />

        <TextView
            android:id="@+id/textViewSeatLabel"
            android:text="@string/seat_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            android:textColor="@android:color/black"
            app:layout_constraintBottom_toBottomOf="@+id/tableHeaderImage"
            app:layout_constraintRight_toRightOf="@+id/textViewSeat"
            app:layout_constraintLeft_toLeftOf="@+id/textViewSeat"
            app:layout_constraintTop_toTopOf="@+id/tableHeaderImage"
            />

        <TextView
            tools:text="@string/terminal"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:id="@+id/textViewTerminal"
            app:layout_constraintTop_toTopOf="@+id/tableImage"
            app:layout_constraintLeft_toLeftOf="@+id/tableImage"
            app:layout_constraintRight_toRightOf="@+id/tableImage"
            android:textAppearance="@style/TextAppearance.AppCompat.Display2"
            android:textColor="@android:color/white"
            app:layout_constraintHorizontal_bias="0.0"
            android:textAlignment="center" />


        <TextView
            android:id="@+id/textViewGate"
            tools:text="@string/gate"
            android:layout_width="120dp"
            android:layout_height="0dp"
            app:layout_constraintLeft_toLeftOf="@+id/tableImage"
            app:layout_constraintRight_toRightOf="@+id/tableImage"
            android:textAppearance="@style/TextAppearance.AppCompat.Display2"
            android:textColor="@android:color/white"
            android:textAlignment="center"
            app:layout_constraintTop_toBottomOf="@+id/tableHeaderImage"
            app:layout_constraintBottom_toBottomOf="@+id/tableImage"/>

        <TextView
            android:id="@+id/textViewSeat"
            tools:text="@string/seat"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="@+id/tableImage"
            app:layout_constraintLeft_toLeftOf="@+id/tableImage"
            app:layout_constraintRight_toRightOf="@+id/tableImage"
            android:textAppearance="@style/TextAppearance.AppCompat.Display2"
            android:textColor="@android:color/white"
            app:layout_constraintHorizontal_bias="1.0"
            android:textAlignment="center"
            android:layout_width="120dp" />

        <!-- COMPLETED (14) Create an ImageView for the barcode -->
        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:srcCompat="@mipmap/barcode"
            android:id="@+id/barcode"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tableImage"
            android:layout_marginTop="16dp"
            />

    </android.support.constraint.ConstraintLayout>
</ScrollView>

<resources>
    <string name="app_name">BoardingPass</string>
    <string name="passenger_label">PASSENGER</string>
    <string name="passenger_name">MR. JAMES BOND</string>
    <string name="origin_code">SFO</string>
    <string name="destination_code">LAX</string>
    <string name="flight_code">UDA 2465</string>
    <string name="boarding_time_label">BOARDING TIME</string>
    <string name="boarding_time">02:10 PM</string>
    <string name="departure_time_label">DEPARTURE</string>
    <string name="departure_time">02:40 PM</string>
    <string name="arrival_time">12:40 AM</string>
    <string name="arrival_time_label">ARRIVAL</string>
    <string name="boarding_in_time">00:15</string>
    <string name="boarding_in_label">BOARDING IN</string>
    <string name="terminal_label">TERMINAL</string>
    <string name="gate_label">GATE</string>
    <string name="seat_label">SEAT</string>
    <string name="terminal">2</string>
    <string name="gate">58B</string>
    <string name="seat">24A</string>
    <string name="countDownFormat" >%1$02d:%2$02d</string>
    <string name="timeFormat">hh:mm a</string>
</resources>

...
...

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:25.1.0'

    // Add the compile dependency for the constraint layout support library
    compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
}

## Views
Views are the base class of all view components in Android.
They handle DRAWING and EVENT HANDLING logic.

Other views like TextView, Buttons, Radio Buttons, ImageView inherit from View Class.

## ViewGroup
- FrameLayout
- Linear Layout
- Grid Layout
- Relative Layout
- Constraint Layout

ViewGroups also inherit from ViewClass and all other layouts inherit from ViewGroups.

## Gravity
gravity:center - Will center align inside the widget
layout_gravity:center - Will center the widget within its parent

## Visibility
- VISIBLE
- INVISIBLE
- GONE

## Installing the Constraint Layout Library
To continue building the Boarding Pass app, you'll need to make sure you have the latest Constraint Layout library. To ensure you have the latest Constraint Layout library:

- 1 Click Tools > Android > SDK Manager.
- 2 Click the SDK Tools tab.
- 3 Expand Support Repository and then check ConstraintLayout for Android and Solver for ConstraintLayout. Check Show Package Details and take note of the version you're downloading (you'll need this below).
- 4 Click OK.
- 5 Add the ConstraintLayout library as a dependency in your module-level build.gradle file:
 dependencies {
     compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
 }
- 6 The library version you download may be higher, so be sure the value you specify here matches the version from step 3.
- 7 In the toolbar or sync notification, click Sync Project with Gradle Files.
- 8 Now you're ready to build your layout with ConstraintLayout.

## Adding a Vector Image
- Search for a SVG image online
- Right click on res folder -> New -> Vector Assets
- Asset Type -> Local File
- Browse for the downloaded image and give it a name
- Size -> Ovveride 
- Enable Auto Mirroring for RTL (Right to Left Layouts)
- Click Next -> Finish

## Layouts Best Practises
Flatter trees perform better and help with loading time which can lead to happier users.