编程知识 cdmana.com

[Android] mise en page et événements dans le développement Android

【Android】Mise en page et événements dans le développement Android

1、Android StudioTélécharger la configuration

Très simple Baidu et cliquez sur télécharger pour installer.Notez que,J'allais utiliser l'évaluation.GenymotionCe logiciel agit comme une machine virtuelle,Téléchargement de la version BaleVirtualBoxSans parler de,Impossible de démarrer après l'installation,Je l'ai cherché toute l'après - midi et je ne l'ai pas résolu.,En fin de compte,VirtualBoxPas encore désinstallé.,C'est une grosse tête,Donc finalement utiliséASMachine virtuelle autonome.

Comment configurer une machine virtuelle,Pour l'empêcher de téléchargerCDisque,Une variable d'environnement doit être modifiée

ANDROID_SDK_HOME
D:\Environment\Android\avd

image-20220113203706486

Redémarrer aprèsASJ'ai trouvé que les fichiers de la machine virtuelle téléchargée étaient là, ce qui indique le succès..

Ce qui est remarquable, c'est que,ASLorsque vous commencez à créer un projetgradleConstruit très lentement,J'ai besoin d'attendre..

Configuré pour fonctionnerHello worldC'est.

image-20220113203945164

Quant au réglage en chinois ,J'en ai besoin.idea Marché des plug - ins pour télécharger des plug - ins chinois ,InAS Utilisation de l'installation locale , Bien que certaines parties ne puissent pas être traduites , Mais la plupart ont été traduits en chinois , C'est toujours super. !

image-20220113204201947

2、Mise en page

1.xmlPage

InASEn passant parGUIPour mettre en placeAPP,InlayoutChacun d'euxxmlCorrespond à une page

image-20220113204405340

Ça pourrait être dansDesign Composants de traînée manuelle moyenne ,On peut aussicode Pour écrire l'interface de construction de code

image-20220113204635188

Les unités couramment utilisées dans la disposition sont

  • px(Pixels absolus,Non recommandé)
  • dp( Unités d'adaptation ,Utilisation recommandée)
  • sp(Unités de police)

2.Disposition linéaire

2.1 Utilisation de la disposition linéaire

En faitJava Swing J'ai aussi appris. , C'est le genre de ,InxmlUtilisé dansLinearLayout L'étiquette peut utiliser la disposition de streaming

Dans le code suivantmatch_parent Littéralement, ça correspond à la taille de la classe mère

Regarde ça. 3- Oui.buttonEffets secondaires

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

</LinearLayout>

image-20220113210459916

2.2 Orientation de la disposition linéaire

InLinearLayoutDans l'étiquette,Utiliserandroid:orientation="" Vous pouvez changer la direction de mise en page ,Il y en a deux.——Horizontal et Vertical,Respectivement.horizontalEthorizontal

Ça pourrait être dansdesign Ce bouton de la page définit

image-20220113212346308

Ce qui a changé, c'est cette ligne de code

image-20220113212410052

2.3 Poids de la disposition linéaire

Le poids est la proportion de cet élément sur une ligne ,Utiliserlayout_weightPour représenter, Chaque élément peut être pondéré , Mon code ci - dessus est que les poids sont tous 1

image-20220113212515874

Le poids utilise la largeur et la hauteur de l'écran , Est proportionnel !

Hypothèses,Maintenant, oui.3- Oui.button, Chaque poids est 1,1,2, Alors le premier et le second buttonC'est bon.1/4, Le troisième est occupé. 2/4C'est - à - dire1/2.

image-20220113213114568

3.Disposition relative

3.1 Par rapport au contrôle parent

Utilisation des étiquettesRelativeLayout Vous pouvez utiliser la disposition relative .

La valeur par défaut est relative à gauche du contrôle

Ce que nous utilisons ici est relatif au contrôle parent ,Utiliser les propriétéslayout_centerInParent, C'est au milieu du contrôle parent ,trueEtfalseDeux valeurs peuvent être sélectionnées

Même chose.,Oui.layout_alignParentRight, Par rapport à la droite du contrôle parent ,layout_alignParentLeft, Par rapport à la gauche du contrôle parent , Et il y a un autre sous le contrôle parent layout_alignParentBottom

Un exemple simple

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:layout_centerInParent="true"
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Par rapport au milieu du contrôle parent " />

    <Button
        android:layout_alignParentRight="true"
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Par rapport au coin supérieur droit du contrôle parent " />

    <Button
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Par rapport au coin inférieur droit de la commande parent " />

    <Button
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Par rapport au coin inférieur gauche de la commande parent " />

    <Button
        android:layout_alignParentLeft="true"
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Par rapport au coin supérieur gauche de la commande parent " />

</RelativeLayout>

Les effets sont les suivants:

image-20220113214314070

3.2 Par rapport aux pairs

Regarde le Code.!

Utiliserlayout_toLeftOfEtlayout_toRightOfEtlayout_aboveEtlayout_below Pour mettre en page par rapport à un contrôle

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Au milieu"
        android:id="@+id/center" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Je suis au Centre, à gauche. "
        android:layout_toLeftOf="@+id/center"
        android:layout_centerInParent="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Je suis en haut au milieu. "
        android:layout_centerInParent="true"
        android:layout_above="@+id/center" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Je suis au milieu, à droite. "
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Je suis en bas au milieu. "
        android:layout_below="@+id/center"
        android:layout_centerInParent="true"/>
    
</RelativeLayout>

Les effets sont les suivants:

image-20220113215437077

4.Disposition absolue

Méthodes de mise en page obsolètes ,UtiliserAbsoluteLayoutÉtiquettes

layout_xEtlayout_yDéfinir la position

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="100dp"
        android:layout_y="100dp"
        android:text="Position absolue" />

</AbsoluteLayout>

5.Disposition du tableau

Est le style de la table ,UtiliserTableLayoutÉtiquettes

UtiliserTableRow Étiquette pour afficher une ligne

Par exemple

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"/>

    </TableRow>

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="5"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="6"/>

    </TableRow>

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="7"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="8"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="9"/>

    </TableRow>


</TableLayout>

Les effets sont les suivants:

image-20220113220427638

6.Disposition du cadre

UtiliserFrameLayoutÉtiquettes

Par exemple

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Boutons"/>

</FrameLayout>

3、 Concevoir une disposition de calculatrice

1. Commencer par une disposition linéaire

Utiliser une disposition linéaire

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="C"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="+/-"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="%"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:background="@color/cardview_shadow_start_color"
            android:text="/"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="1"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="2"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="3"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="X"
            android:background="@color/cardview_shadow_start_color"
            android:textSize="20sp" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="4"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="5"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="6"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="-"
            android:background="@color/cardview_shadow_start_color"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="7"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="8"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="9"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="+"
            android:background="@color/cardview_shadow_start_color"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp">
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:gravity="center"
            android:text="0"
            android:textSize="20sp" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="1"
            android:textSize="20sp" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="="
            android:background="@color/cardview_shadow_start_color"
            android:textSize="20sp" />
    </LinearLayout>


</LinearLayout>

Les effets sont les suivants:

image-20220113223704507

2. Bordure des boutons

Ensuite, chaque bouton est encadré

Indrawable Créer un style de bordure sous le paquet ,UtilisershapeÉtiquettes

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#5CEAE7E7"/>
    <stroke
        android:width="1dp"
        android:color="#333333"/>

</shape>

Encore un style Orange

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#e47f26"/>
    <stroke
        android:width="1dp"
        android:color="#333333"/>

</shape>

En fin de compte, chaque textViewIntroduction deandroid:background="@drawable/shape_rectangle"

L'effet final est le suivant:

image-20220114120241406

3.drawableSélecteur dans

Il y a généralement une ombre lorsque le bouton de la calculatrice est enfoncé , À ce stade, nous pouvons lier un événement de clic .

Avant de lier l'événement Click , Commencez par deux sélecteurs , Utilisé pour sélectionner le rendu en clic et le rendu sans clic .

selector_white_bg.xml Le sélecteur du bouton blanc

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/shape_rectangle_grey"/>
    <item android:drawable="@drawable/shape_rectangle"/>

</selector>

selector_orange_bg.xml Le sélecteur du bouton orange

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/shape_rectangle_orange_grey"/>
    <item android:drawable="@drawable/shape_rectangle_orange"/>

</selector>

4.Lier l'événement de clic

Maintenant, nous donnons à chacun textView Lier les deux sélecteurs ci - dessus .

Utiliserandroid:background="@drawable/selector_white_bg"C'est tout.

Comment déclencher l'effet du sélecteur ?Il y a deux façons, L'individu pense que les deux méthodes sont des styles différents !

D'abord, je me sens biaisé JavaScriptStyle, La deuxième méthode est biaisée Java SwingStyle.

Quant à la raison pour laquelle ces deux styles , Je vais t'expliquer. ~

4.1 La première approche

Je vais l'appeler. JS Approche stylistique C'est parti..

Tout d'abord, dans les composants qui doivent être liés à un événement de clic ,Ajouter unandroid:onClick="oneOnClick",Ici.oneOnClickC'est écrit au hasard,Peut être n'importe quel caractère, En fait, c'est lié. mainActivityUn desoneOnClick()Méthodes

MainActivityDans la classeoneOnClick()Méthodes

image-20220114174925766

TextView Lié dans le composant onClickMéthodes

image-20220114175109192

Les deux étapes ci - dessus peuvent déclencher un événement de clic

Les effets sont les suivants:

image-20220114175450449

Pendant ce temps, nous pouvons voir qu'il y a logProduits( La méthode a été exécutée après le clic )

image-20220114175531643

4.2 Deuxième approche

Si vous connaissezJava SwingDéveloppement, Donc ce n'est certainement pas un étranger à cette méthode !

En termes simples, c'est dansMainActivityDans la classe, Faire de chaque espace un attribut dans la classe , Devient Variable membre, Puis appuyez sur un pour chaque composant Cliquez sur l'auditeur de l'événement , Écrivez le code à exécuter pour cliquer sur l'événement dans l'auditeur !

package top.woodwhale.hello;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private TextView cancel;
    private TextView plusOrMinus;
    private TextView mod;
    private TextView div;
    private TextView zero;
    private TextView one;
    private TextView two;
    private TextView three;
    private TextView four;
    private TextView five;
    private TextView six;
    private TextView seven;
    private TextView eight;
    private TextView nine;
    private TextView point;
    private TextView add;
    private TextView multi;
    private TextView sub;
    private TextView eq;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.caculator);
        this.initView();
        this.initClickEvent();
    }

    // AccèsTextViewComponents
    public void initView() {
        cancel = this.findViewById(R.id.tv_cancel);
        plusOrMinus = this.findViewById(R.id.tv_plus_or_minus);
        mod = this.findViewById(R.id.tv_mod);
        div = this.findViewById(R.id.tv_division);
        zero = this.findViewById(R.id.tv_zero);
        one = this.findViewById(R.id.tv_one);
        two = this.findViewById(R.id.tv_two);
        three = this.findViewById(R.id.tv_three);
        four = this.findViewById(R.id.tv_four);
        five = this.findViewById(R.id.tv_five);
        six = this.findViewById(R.id.tv_six);
        seven = this.findViewById(R.id.tv_seven);
        eight = this.findViewById(R.id.tv_eight);
        nine = this.findViewById(R.id.tv_nine);
        point = this.findViewById(R.id.tv_point);
        add = this.findViewById(R.id.tv_add);
        multi = this.findViewById(R.id.tv_multiplication);
        sub = this.findViewById(R.id.tv_subtraction);
        eq = this.findViewById(R.id.tv_equal);
    }

    //  Ajouter un auditeur à chaque composant 
    public void initClickEvent() {
        MyListener listener = new MyListener();
        cancel.setOnClickListener(listener);
        plusOrMinus.setOnClickListener(listener);
        mod.setOnClickListener(listener);
        div.setOnClickListener(listener);
        zero.setOnClickListener(listener);
        one.setOnClickListener(listener);
        two.setOnClickListener(listener);
        three.setOnClickListener(listener);
        four.setOnClickListener(listener);
        five.setOnClickListener(listener);
        six.setOnClickListener(listener);
        seven.setOnClickListener(listener);
        eight.setOnClickListener(listener);
        nine.setOnClickListener(listener);
        point.setOnClickListener(listener);
        add.setOnClickListener(listener);
        multi.setOnClickListener(listener);
        sub.setOnClickListener(listener);
        eq.setOnClickListener(listener);
    }
}

class MyListener implements View.OnClickListener {

    @Override
    public void onClick(View view) {
        if (view instanceof TextView) {
            String s = ((TextView) view).getText().toString();
            Log.d("MainActivity","TextViewDanstextPour:"+s);
        }
    }
}

Est - ce très familier ?C'est ça.SwingDans la pensée. Pour qu'on n'ait pas besoin de xmlÉvénements liés au milieu,Il suffit deMainActivity Réglez le moniteur au milieu !

Les effets de fonctionnement sont les suivants:

image-20220114193622449

版权声明
本文为[Woodwale]所创,转载请带上原文链接,感谢
https://cdmana.com/2022/01/202201150153083664.html

Scroll to Top