markdown UI基础知识 - 响应式布局

Posted 2021-05-06

package com.example.android.boardingpass;

/*
* Copyright (C) 2016 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*      http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import com.example.android.boardingpass.databinding.ActivityMainBinding;
import com.example.android.boardingpass.utilities.FakeDataUtils;

import java.text.SimpleDateFormat;
import java.util.Locale;
import java.util.concurrent.TimeUnit;

public class MainActivity extends AppCompatActivity {

    ActivityMainBinding mBinding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        /*
         * DataBindUtil.setContentView replaces our normal call of setContent view.
         * DataBindingUtil also created our ActivityMainBinding that we will eventually use to
         * display all of our data.
         */
        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        BoardingPassInfo fakeBoardingInfo = FakeDataUtils.generateFakeBoardingPassInfo();
        displayBoardingPassInfo(fakeBoardingInfo);
    }

    private void displayBoardingPassInfo(BoardingPassInfo info) {

        mBinding.textViewPassengerName.setText(info.passengerName);
        // @@ Use the flightInfor attribute in mBinding below to get the appropiate text Views
        mBinding.flightInfo.textViewOriginAirport.setText(info.originCode);
        mBinding.flightInfo.textViewFlightCode.setText(info.flightCode);
        mBinding.flightInfo.textViewDestinationAirport.setText(info.destCode);

        SimpleDateFormat formatter = new SimpleDateFormat(getString(R.string.timeFormat), Locale.getDefault());
        String boardingTime = formatter.format(info.boardingTime);
        String departureTime = formatter.format(info.departureTime);
        String arrivalTime = formatter.format(info.arrivalTime);

        mBinding.textViewBoardingTime.setText(boardingTime);
        mBinding.textViewDepartureTime.setText(departureTime);
        mBinding.textViewArrivalTime.setText(arrivalTime);

        long totalMinutesUntilBoarding = info.getMinutesUntilBoarding();
        long hoursUntilBoarding = TimeUnit.MINUTES.toHours(totalMinutesUntilBoarding);
        long minutesLessHoursUntilBoarding =
                totalMinutesUntilBoarding - TimeUnit.HOURS.toMinutes(hoursUntilBoarding);

        String hoursAndMinutesUntilBoarding = getString(R.string.countDownFormat,
                hoursUntilBoarding,
                minutesLessHoursUntilBoarding);

        mBinding.textViewBoardingInCountdown.setText(hoursAndMinutesUntilBoarding);
        //  @@ Use the boardingInfo attribute in mBinding below to get the appropiate text Views
        mBinding.boardingInfo.textViewTerminal.setText(info.departureTerminal);
        mBinding.boardingInfo.textViewGate.setText(info.departureGate);
        mBinding.boardingInfo.textViewSeat.setText(info.seatNumber);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <ScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.constraint.ConstraintLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <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" />


            <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" />

<!--
        @@ Add an include tag in activity_main to include flightInfo in the right position
-->

            <include
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textViewPassengerName"
                android:layout_marginTop="16dp"
                android:id="@+id/flight_info"
                layout="@layout/flight_info"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintRight_toRightOf="parent" />


            <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/flight_info"
                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/flight_info"
                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" />

<!--
        @@ Add an include tag in activity_main to include boardingInfo in the right position
-->
            <include
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textViewArrivalTime"
                android:layout_marginTop="16dp"
                android:id="@+id/boarding_info"
                layout="@layout/boarding_info"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintRight_toRightOf="parent"
                android:layout_marginStart="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginRight="16dp"/>


            <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/boarding_info"
                android:layout_marginTop="16dp"
                />

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

<?xml version="1.0" encoding="utf-8"?>

<!-- @@
        // Create a new xml file called flight_info in the layout directory
        // Move all Views in the flight information section from activity_main to flight_info
-->

<layout 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.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/leftRectangle"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:background="@drawable/shape_rectangle_stroke"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="16dp"
        android:layout_marginStart="32dp" />

    <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"/>

    <ImageView
        android:id="@+id/rightRectangle"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:background="@drawable/shape_rectangle_stroke"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="32dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="32dp" />

    <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" />

    <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" />


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

<?xml version="1.0" encoding="utf-8"?>

<!-- @@
        // Create a new xml file called boarding_info in the layout directory
        // Move all Views in the boarding information table from activity_main to boarding_info
-->

<layout 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.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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"
        app:layout_constraintTop_toBottomOf="@+id/textViewDepartureTime"
        app:layout_constraintHorizontal_bias="0.33" />

    <ImageView
        android:id="@+id/tableImage"
        android:background="@color/colorPrimary"
        android:layout_height="0dp"
        android:layout_width="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tableHeaderImage"
        app:layout_constraintBottom_toBottomOf="@+id/textViewTerminal"/>



    <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" />

</android.support.constraint.ConstraintLayout>

</layout>

## You can create a entirely new layout just for the landscape mode.

Create a new folder called layout-land inside the res directory. 
Do not use the Android Studio to create this folder, use your fiile explorer.

res -> layout-land

Copy the activity_main.xml file inside the layout-land folder.
Make all the modifications in this file.

To make your code reusable, create mini layouts and use them 
inside both the default and the landscape xml. This will reduce duplicity.