08 Chapitre cinq: Principes de base de l'interface utilisateur

Principes de base de l'interface utilisateur

Comprendre l'interface utilisateur

UI est l'abréviation de User Interface. C'est un outil d'interaction entre les personnes et les outils, des applications sur les téléphones mobiles aux logiciels sur les ordinateurs.

La conception de l'interface utilisateur fait référence à la conception globale de l'interaction homme-machine, de la logique de fonctionnement et de la belle interface du logiciel.

Vue

La vue peut comprendre la vue bit dans Android. Il occupe une zone rectangulaire sur l'écran et est chargé de fournir des méthodes pour le dessin des composants et le traitement du temps.
La classe View est la classe de base de tous les widgets, par exemple, TextView (zone de texte), EditText (zone d'édition) et Button (bouton) sont tous des composants de widgets

La classe View se trouve dans le package android.view et le composant de zone de texte TextView est une sous-classe de la classe View et se trouve dans le package android.widget

ViewGroup

récipient. La classe ViewGroup hérite de la classe View. Il s'agit d'une extension de la classe View et d'un conteneur utilisé pour contenir d'autres composants. Cependant, comme ViewGroup est une classe abstraite, en pratique, une sous-classe de ViewGroup est généralement utilisée comme conteneur.

Lorsque ViewGroup contrôle la distribution de ses composants enfants, il s'appuie souvent sur ViewGroup.Layout Params et ViewGroup.MarginLayoutParams.

La classe ViewGroup.LayoutParams encapsule des informations telles que la position, la hauteur et la largeur de la disposition. Il prend en charge deux attributs XML, android: layout_height et android: layout_width. Leurs valeurs d'attribut peuvent être des valeurs précises, ou FILL_PARENT (ce qui signifie la même chose que le conteneur parent), MATCH_PARENT (ce qui signifie la même chose que le conteneur parent, API8 ou supérieur est requis) Uniquement pris en charge) ou WRAP_CONTENT (indiquant le contenu du package lui-même) spécifié

ViewGroup.MarginLayoutParams classe La classe
ViewGroup.MarginLayoutParams est utilisée pour contrôler les marges de ses composants enfants.

Rembourrage 和 Marges

Le remplissage représente les pixels de remplissage situés en haut, en bas, à gauche et à droite de la vue. Il est également appelé remplissage. Il définit la distance entre le contenu et le bord de la vue. Le remplissage occupera la largeur et la hauteur de la vue. Après avoir défini la marge intérieure spécifiée, le contenu de la vue s'écartera de la distance spécifiée du bord de la vue.

Les marges représentent les zones vides en haut, en bas, à gauche et à droite du composant, appelées marges. Il définit la distance entre le composant et son conteneur parent. Les marges n'occupent ni la largeur ni la hauteur du composant. Après avoir défini la marge extérieure pour le composant, le composant sera éloigné du conteneur parent de la distance spécifiée, s'il y a des composants adjacents, il sera également éloigné du composant adjacent de la distance spécifiée.

px, dp et sp

px (Pixels, pixels): chaque px correspond à un point sur l'écran.

dp (définir des pixels indépendants) est une unité abstraite basée sur la densité de l'écran, et le dip peut également être utilisé. Sur un moniteur avec 160 points par pouce, 1dp = 1px. Mais à mesure que la densité de l'écran change, la conversion entre dp et px changera également

sp (pixels proportionnels): traite principalement de la taille de la police, qui peut être mise à l'échelle en fonction de la préférence de taille de police de l'utilisateur

Disposition de l'interface

Android fournit une introduction détaillée de la disposition relative, de la disposition linéaire, de la disposition du cadre, de la disposition du tableau et de la disposition de la grille

Disposition relative

Dans la disposition relative, les composants qui y sont placés sont disposés par rapport aux composants frères ou à la position du conteneur parent.

android: la gravité est
utilisée pour définir la position de placement de chaque sous-composant dans le gestionnaire de mise en page
android: ignoreGravity est
utilisé pour spécifier quel composant n'est pas affecté par l'attribut de gravité
Insérez la description de l'image ici

Insérez la description de l'image ici

Disposition linéaire

L'arrangement android: contrôle de la propriété d'orientation, la méthode d'alignement android: propriétés contrôlées par gravité
disposées horizontalement horizontalement
verticalement disposées verticalement
android: gravité: attribut fourni pour afficher la position des composants layout manager
android: layout_width: Ce composant est utilisé pour définir La largeur de base
android: layout_height: utilisée pour définir la hauteur de base du composant
android: id est utilisée pour spécifier un attribut id pour le composant actuel
android: background le composant définit l'arrière-plan

android: layout_gravity: utilisé pour définir la position du composant dans le conteneur parent
android: layout_weight est utilisé pour définir le poids du composant, c'est-à-dire qu'il est utilisé pour définir la proportion de l'espace restant du conteneur parent.

Disposition du cadre

android: foreground définit l'image de premier plan du conteneur de disposition de cadre
android: goregroundGravity définit l'attribut de gravité du dessin de l'image de premier plan, qui est la position où l'image de premier plan est affichée

Disposition de la table

La mise en page du tableau est définie à l'aide de <TableLayout> (gestionnaire de mise en page du tableau). Dans la mise en page du tableau, vous pouvez ajouter plusieurs balises <TableRow>, chaque balise <TableRow> occupe une ligne, car la balise <TableRow> est également un conteneur, donc dans cette balise Vous pouvez également ajouter d'autres composants. Dans la balise <TableRow>, chaque fois que vous ajoutez un composant, le tableau ajoute une colonne.

Disposition de la grille

Disposition de la grille

android: columnCount: utilisé pour spécifier le nombre maximum de colonnes de la grille
android: orientation est
utilisé pour spécifier la disposition des composants qui y sont placés lorsque les lignes et les colonnes ne sont pas allouées. La valeur de son attribut est horizontale pour la disposition horizontale et verticale pour la disposition verticale.
Android: rowCount est utilisé pour spécifier le nombre maximal de lignes dans la grille.
Android: useDefaultMargins est utilisé pour spécifier s'il faut utiliser les marges par défaut. Lorsque la valeur de l'attribut est définie sur true, cela signifie utiliser. Lorsque false, cela signifie ne pas utiliser
android: aligbnebtMode: utilisé pour spécifier le mode d'alignement utilisé par le gestionnaire de mise en page, lorsque la valeur de l'attribut est alignBounds, cela signifie sa limite; lorsque la valeur est alignMargins, cela signifie la marge d'alignement, la valeur par défaut est alignMargins

android: rowCount est utilisé pour spécifier le nombre maximum de lignes dans la grille

android: useDefaultMargins est utilisé pour spécifier s'il faut utiliser les marges par défaut. Lorsque la valeur de l'attribut est définie sur true, cela signifie utiliser, et lorsqu'elle est false, cela signifie ne pas utiliser

android: alignMode est utilisé pour spécifier le mode d'alignement utilisé par le gestionnaire de disposition. Lorsque la valeur de l'attribut est alignBounds, il indique la limite d'alignement; lorsque la valeur est alignMargins, il indique la marge d'alignement. La valeur par défaut est alignMargins

android: layout_column est utilisé pour spécifier la grille de position du sous-composant des premières colonnes
android: layout_columnSpan est utilisé pour spécifier le sous-composant horizontalement sur plusieurs colonnes
android: layout_columnWeight est utilisé pour spécifier le poids du sous-composant dans le sens horizontal, c'est-à-dire le niveau de distribution du composant Le rapport de l'espace restant
android: layout_gravity: utilisé pour spécifier comment le sous-composant occupe l'espace de la grille.
android: layot_row est utilisé pour spécifier la grille de position du sous-composant des premières lignes
android: layout_rowSpan est utilisé pour spécifier le sous-composant pour couvrir plusieurs lignes
dans le sens vertical android: layout_rowWeight: utilisé pour spécifier le poids du sous-composant dans le sens vertical, c'est-à-dire la distribution du composant Pourcentage d'espace vertical restant

Composants d'interface:

imageButton

android: src = @ nom du fichier dessinable / image "

Affichage

TextView est un composant de zone de texte utilisé pour afficher du texte à l'écran. Il est différent du composant de zone de texte en Java. Il équivaut à une étiquette en Java, qui est JLable.

Éditer le texte

EditText est un composant de zone d'édition, utilisé pour afficher une zone de saisie de texte à l'écran, qui est similaire au composant de zone de texte dans java. Le composant de zone d'édition dans Android peut saisir le texte sur la même ligne ou sur plusieurs lignes, et vous pouvez également saisir le texte dans le format spécifié
attribut android: inputType, ce qui peut aider la méthode d'entrée à afficher le type approprié, textPassword est le mot de passe

Bouton radio

RadioButton est un bouton radio, hérité de Button

Question de code pour RadioButton

<RadioGroup>
	android:id="@+id/radioGroup1"
	android:orientation="horizontal"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content">
	<RadioButton
		android:layout_height="wrap_content"
		android:id="@+id/radio0"
		android:text="男"
		android:layout_width="wrap_content"
		android:checked="true"/>
	<RadioButton
		android:layout_height="wrap_content"
		android:id="@+id/radio1"
		android:text="女"
		android:layout_width="wrap_content"/>
	</RadioGroup>


//在改变单选按钮组的值时获取
RadioGroup sex=(RadioGroup)findViewById(R.id.radioGroup1);
sex.setOnCheckedChangListener(new OnCheckedChangeListener(){
    
    

@Override
public void onCheckedChanged(RadioGroup group,int checkedId){
    
    
	RadioButton r=(RadioButton)findViewById(chekedId);
	r.getText();
	}
});


//在单击其他按钮是获取
final RadioGroup sex=(RadioGroup)findViewById(R.id.radioGroup1);
Button button=(Button)findViewById(R.id.button1);
button.setOnClickListener(new OnClickListener(){
    
    

	@Override
	public void onClick(View v){
    
    
		for(int i=0;i<sex.getChildCount();i++){
    
    
			RadioButton r=(RadioButton)sex.getChildAt(i);
			if(r.isChecked(){
    
    
				r.getText();
				break;
			}
		}
	}
});

//在之前的那个例子里面改变单选按钮组的值时获取
final RadioGroup sex=(RadioGroup)findViewById(R.id.radioGroup1);
sex.setOnCheckedChangeListener(new OnCheckedChangeListener(){
    
    

	@Override
	public void onCheckedChanged(RadioGroup group,int checkedId){
    
    
		RadioButton r=(RadioButton)findViewById(checkedId);
		Log.i("单选按钮","您的选择是:"+r.getText());
	}
});


//单击“提交”按钮时获取
Button button=(Button) findViewById(R.id.button1);
button.setOnClickListener(new OnClickListener(){
    
    
	@Override
	public void onClick(View v){
    
    
		for(int i=0;i<sex.getChildCount();i++){
    
    
		RadioButton r=(RadioButton)sex.getChildAt(i);
		if(r.isChecked()){
    
    
			Log.i("单选按钮","性别:" +r.getText());
			break;
		}
	}
}
});
		

Fileur


<Spiner
	android:prompt="@string/info"
	android:entries="@array/数组名称"
	android:layout_height="wrap_content"
	android:layout_width="wrap_content"
	android:id="@+id/ID号”
>
</Spinner>

GridView

La vue en grille affiche plusieurs composants dans une disposition de lignes et de colonnes et est généralement utilisée pour afficher des images ou des icônes. Lorsque vous utilisez la vue en grille,

Je suppose que tu aimes

Origine blog.csdn.net/weixin_44522477/article/details/111867668
conseillé
Classement