[JAVA] [Android] J'ai essayé d'utiliser la disposition du coordinateur.

Bonjour à tous. ** Dreamwalker **. Cette fois, je voudrais écrire sur ** la disposition du coordinateur ** de la conception du support Android.

introduction

Après avoir annoncé la conception de matériaux chez GOOGLE il y a environ deux ans, il est devenu important pour les développeurs de concevoir également l'interface utilisateur. Coordinator Layout n'est pas une API de base, mais un WIDGET de conception de support. Ajouté à partir du SDK 22.2.0.

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

J'ai été surpris de voir cela en premier. Cette fois, je vais créer un écran comme celui ci-dessus.

L'environnement de test ressemble à ceci:

Papier principal

Nouveau projet

Tout d'abord, j'aimerais créer un nouveau projet.

Le côté gauche est un problème de sécurité, je l'ai donc supprimé. Lorsque vous ouvrez Android Studio, vous verrez généralement cet écran.

1. Cliquez sur Démarrer un nouveau projet Android Studio.

2. N'hésitez pas à écrire le nom et le domaine du projet. cliquez

3. Je commence toujours par ce paramètre. N'hésitez pas à choisir. cliquez

4. Sélectionnez Activité vide. cliquez

5. Nom de l'activité librement. .. cliquez sur

Bibliothèque ajoutée.

Tout le monde est un maître Android, donc je pense que c'est facile à faire.

1. Cliquez sur ** build.gradle ** pour ajouter une dépendance.

build.gragle

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

2. Sync now

Jusqu'à ce point, les réglages initiaux sont complets sans aucun problème.

Préparation de documents

J'aime Keyakizaka en hiver, je me suis donc référé aux photos et au texte sur le site ci-dessous.

Winter Illumination at Keyakizaka-dori Street

Préparez les photos et les textes que vous souhaitez utiliser.

1. PASTE.
2. Ajoutez l'icône à utiliser.

--drawble Clic droit → Nouveau → Image Asset.

• Sélectionnez les icônes Action Bar et Tab pour le type d'icône.

• Clip Art icon Click

• Recherchez l'icône que vous souhaitez utiliser.

Dans mon cas, j'ai utilisé le temps de favori et le temps d'accès. N'hésitez pas à choisir. En plus de cette méthode, vous pouvez télécharger et ajouter des icônes avec KOKO!, alors utilisons une méthode pratique.

Ajoutez une chaîne dans string.xml.

Ce n'est pas une chose fixe, alors n'hésitez pas à y entrer.

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

Vous pouvez l'ajouter avec un fichier java, mais je veux jouer avec avec xml. ..

1. Cliquez sur activity_main.xml.

2. Créez une arborescence de composants.

J'ai fait ce que je considérais comme un arbre de composants.

Ceux qui sont difficiles à voir peuvent comprendre en baissant les yeux.

3. Codage

Partie AppBarLayout.

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>

Il s'agit de la partie NestedScrollView.

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>

Partie FloatingActionButton.

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);
        }
    }

Conclusion

J'ai essayé RUN.

terminé. .. ..

Le code source est mon Github. https://github.com/JAICHANGPARK/Coordinator-Layout101

Il existe différentes méthodes, mais j'espère que vous la trouverez utile pour ceux qui ont lu jusqu'ici. Lors de la construction d'une mise en page avec XML, il est important d'écrire d'abord ** Component Tree **. Et beaucoup de pratique est nécessaire.

Merci pour la lecture. Rendez-vous dans le prochain post! Passez une belle semaine en or

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