[JAVA] [Android] Ich habe versucht, das Koordinatorlayout zu verwenden.

Hallo zusammen. ** Traumtänzer **. Dieses Mal möchte ich über ** Coordinator Layout ** von Android Support Design schreiben.

Einführung

Nach der Ankündigung von Material Design bei GOOGLE vor etwa zwei Jahren wurde es für Entwickler wichtig, auch die Benutzeroberfläche zu entwerfen. Das Koordinatorlayout ist keine grundlegende API, sondern unterstützt DESIGN WIDGET. Hinzugefügt aus SDK 22.2.0.

Quelle: https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-behavior

Ich war überrascht, dies zuerst zu sehen. Dieses Mal werde ich einen Bildschirm wie den obigen erstellen.

Die Testumgebung sieht folgendermaßen aus:

Hauptpapier

Neues Projekt

Zunächst möchte ich ein neues Projekt erstellen.

Die linke Seite ist ein Sicherheitsproblem, daher habe ich es gelöscht. Wenn Sie Android Studio öffnen, wird normalerweise dieser Bildschirm angezeigt.

1. Klicken Sie auf Neues Android Studio-Projekt starten.

2. Schreiben Sie den Namen und die Domain des Projekts. klicken

3. Ich beginne immer mit dieser Einstellung. Fühlen Sie sich frei zu wählen. klicken

4. Wählen Sie Leere Aktivität. klicken

5. Aktivitätsname frei. .. klicken

Bibliothek hinzugefügt.

Jeder ist ein Android-Meister, also denke ich, dass es einfach ist.

1. Klicken Sie auf ** build.gradle **, um die Abhängigkeit hinzuzufügen.

build.gragle

    compile 'com.android.support:design:25.3.1'
    compile 'com.android.support:cardview-v7:25.3.1'

2. Sync now

Bis zu diesem Punkt sind die Grundeinstellungen ohne Probleme abgeschlossen.

Dokumentenvorbereitung

Ich mag Keyakizaka im Winter, deshalb habe ich auf die Fotos und den Text auf der folgenden Seite verwiesen.

Winter Illumination at Keyakizaka-dori Street

Bereiten Sie die Fotos und Texte vor, die Sie verwenden möchten.

1. PASTE.
2. Fügen Sie das zu verwendende Symbol hinzu.

--drawble Rechtsklick → Neu → Bild Asset.

--Wählen Sie die Symbole für Aktionsleiste und Registerkarte als Symboltyp.

• Clip Art icon Click

• Suchen Sie nach dem Symbol, das Sie verwenden möchten.

In meinem Fall habe ich die Favoriten- und Zugriffszeit verwendet. Fühlen Sie sich frei zu wählen. Zusätzlich zu dieser Methode können Sie mit KOKO! Symbole herunterladen und hinzufügen. Verwenden Sie daher eine bequeme Methode.

Fügen Sie einen String in string.xml hinzu.

Dies ist keine feste Sache, also zögern Sie nicht, sie zu betreten.

string.xml

 <string name="news_title">WINTER ILLUMINATION AT KEYAKIZAKA-DORI STREET</string>
 <string name="cont">In winter, beautiful illumination shines all over the Tokyo.
                     When I see beautiful illumination, I’m excited even though cold 
                     night.Many other illumination events or installation are held at 
                     Roppongi Hills. All of them ends at December 25th.</string>
 <string name="published_date">2017-05-02 12:13:43</string>

Layout Coding

Sie können es mit Java-Datei hinzufügen, aber ich möchte mit XML damit spielen. ..

1. Klicken Sie auf activity_main.xml.

2. Erstellen Sie einen Komponentenbaum.

Ich habe das getan, was ich mir als Komponentenbaum vorgestellt habe.

Diejenigen, die schwer zu sehen sind, können verstehen, indem sie nach unten schauen.

3. Codierung

AppBarLayout-Teil.

activity_main.xml

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:fitsSystemWindows="true"
            app:expandedTitleTextAppearance="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:contentDescription="@string/app_name"
                android:scaleType="centerCrop"
                android:src="@drawable/keyaki"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:title="@string/news_title"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">


            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

Dies ist der NestedScrollView-Teil.

activity_main.xml

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            app:cardElevation="5dp"
            app:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:padding="12dp"
                    android:text="@string/news_title"
                    android:textColor="@color/colorPrimaryText"
                    android:textSize="20sp"
                    android:textStyle="bold" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="12dp">

                    <ImageView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:contentDescription="@string/app_name"
                        android:src="@drawable/ic_clock" />

                    <TextView
                        android:layout_gravity="center_vertical"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="9"
                        android:padding="12dp"
                        android:text="@string/published_date"
                        android:textColor="@color/colorPrimaryText"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                </LinearLayout>
                <TextView
                    android:layout_gravity="center_vertical"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:lineSpacingMultiplier="1.5"
                    android:layout_marginTop="12dp"
                    android:padding="12dp"
                    android:text="@string/new_cont"
                    android:textSize="13sp"
                    />

            </LinearLayout>


        </android.support.v7.widget.CardView>

    </android.support.v4.widget.NestedScrollView>

FloatingActionButton-Teil.

activity_main.xml

<android.support.design.widget.FloatingActionButton
        app:elevation="6dp"
        android:src="@drawable/ic_fav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:pressedTranslationZ="12dp"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|right"/>

Inflation

MainActivity.java

   @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.tool_bar);
        setSupportActionBar(toolbar);
        if (getSupportActionBar() != null){
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }
    }

Fazit

Ich habe RUN ausprobiert.

erledigt. .. ..

Der Quellcode ist mein Github. https://github.com/JAICHANGPARK/Coordinator-Layout101

Es gibt verschiedene Methoden, aber ich hoffe, Sie finden es hilfreich für diejenigen, die bisher gelesen haben. Beim Erstellen eines Layouts mit XML ist es wichtig, zuerst ** Component Tree ** zu schreiben. Und es ist viel Übung erforderlich.

Danke fürs Lesen. Wir sehen uns im nächsten Beitrag! Ich wünsche Ihnen eine schöne goldene Woche

Dreamwalker。

References

1. http://coolphotojapan.com/coolphotojapan/category/culture/current/winter-illumination-at-keyakizaka-dori-street
2. https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html
3. https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-behavior