Développement d'applications Android (compatibles Java et Kotlin) Comment implémentez-vous cela? ~ Edition du bouton ~
Cet article est le premier de "Développement d'applications Android: comment l'implémenter?"
L'objectif principal est (arbitrairement) de supposer "les débutants et les intermédiaires qui ont appris à google bientôt" comme moi. Puisqu'il explique à la fois Java et Kotlin, même ceux qui disent "Je comprends l'implémentation en Java, mais comment l'écrire en Kotlin?" Je pense que ce sera utile.
Un échantillon de ce projet est disponible sur le lien ci-dessous. La branche principale est le code source Kotlin et la branche java est le code source Java.
https://github.com/Dai1678/SampleCodePrograms
Implémentation du bouton
Je pense que c'est la première chose qui m'impressionne lorsque je commence à développer des applications Android.
Comme échantillon
--Le texte change lorsque vous appuyez sur le bouton --La barre de collation s'affiche lorsque vous appuyez sur le bouton d'action flottant
J'ai essayé de faire ça.
environnement
Android Studio 3.0+ Opération confirmée sur Android 8.0
Étant donné que le bouton d'action flottant est utilisé, ajoutez l'instruction suivante au fichier Gradle.
build.gradle
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
android {
compileSdkVersion 27
defaultConfig {
applicationId "net.ddns.dai.samplecodeprograms"
minSdkVersion 15
targetSdkVersion 27
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
implementation 'com.android.support:appcompat-v7:27.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
implementation 'com.android.support:design:27.1.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.1'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}
Démo d'opération
Explication de XML
La façon d'écrire autour de FloatingActionButton est un peu différente en fonction de la balise racine. Veuillez voir selon la mise en page de l'application que vous créez.
--Au LinearLayout
activity_button_sample.xml
<?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"
android:orientation="vertical"
tools:context="net.ddns.dai.samplecodeprograms.ButtonSampleActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="À propos de l'implémentation de Button" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:id="@+id/changeText"
android:text="Veuillez appuyer sur"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:id="@+id/textChangeButton"
android:text="Button"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/btn_star" />
<!-- @dimen/fab_margin -> 16dp -->
</FrameLayout>
</LinearLayout>
La partie importante est que la partie contenu est entourée de FrameLayout. FrameLayout est utilisé lorsque vous souhaitez afficher la vue de manière superposée. Parce qu'il y a un bouton d'action flottant. Il est à noter que les composants de cette mise en page ne peuvent pas être positionnés (tous sont affichés en haut à gauche). Placez les composants en y insérant LinearLayout.
Dans ce cas, la position du bouton d'action flottante peut être spécifiée en définissant ʻandroid: layout_gravity = "bottom | end" `.
--Au plan relatif
Vous n'êtes pas obligé d'utiliser FrameLayout car vous pouvez les placer dans des positions relatives. Ce n'est pas grave si vous spécifiez la position comme ↓.
activity_button_sample.xml
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email" />
--A la mise en page du coordinateur
Comme je l'expliquerai plus tard, il est normal de penser à FloatingActionButton de la même manière que Relative Layout. Si vous sélectionnez Activité de base lors de la création d'une nouvelle activité, celle-ci est utilisée par défaut. Si vous souhaitez l'utiliser encore plus froidement, vous devriez peut-être utiliser celui-ci?
Explication de l'activité
Je pense qu'il existe différentes manières de décrire le traitement des boutons. Il y a deux façons de l'utiliser correctement. Je vais expliquer brièvement en Java et Kotlin avec le code source respectivement.
Édition Java
--Lorsqu'il n'y a qu'un seul processus Button (FloatingActionButton est omis à titre d'exemple)
ButtonSampleActivity.java
public class ButtonSampleActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_button_sample);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
actionBar.setDisplayHomeAsUpEnabled(true);
}
boolean flag = false;
Button button = findViewById(R.id.textChangeButton);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
TextView textView = findViewById(R.id.changeText);
if (flag){
textView.setText("Veuillez appuyer sur");
button.setText("BUTTON");
flag = false;
}else{
textView.setText("Le bouton a été enfoncé!");
button.setText("revenir");
flag = true;
}
}
});
}
}
Il s'agit d'une méthode souvent introduite dans des exemples de code publiés sur de nombreux sites Web et développeurs Android. J'utilise une classe anonyme dans la méthode onCreate. Si vous avez un ou deux boutons, vous pouvez le faire de cette façon.
- Lorsqu'il y a plusieurs processus Button
ButtonSampleActivity.java
public class ButtonSampleActivity extends AppCompatActivity implements View.OnClickListener {
Button button;
boolean flag = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_button_sample);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
actionBar.setDisplayHomeAsUpEnabled(true);
}
button = findViewById(R.id.textChangeButton);
button.setOnClickListener(this);
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(this);
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.textChangeButton:
TextView textView = findViewById(R.id.changeText);
if (flag){
textView.setText("Veuillez appuyer sur");
button.setText("BUTTON");
flag = false;
}else{
textView.setText("Le bouton a été enfoncé!");
button.setText("revenir");
flag = true;
}
break;
case R.id.fab:
Snackbar.make(view, "fab a été pressé!", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
break;
}
}
}
Si vous ne souhaitez pas utiliser de classes anonymes, implémentez OnClickListener. Tout d'abord, veuillez écrire dans la première ligne.
Si vous obtenez une erreur avec la ligne rouge, le ballon rouge utilisera la méthode publick void onClick (View view) {} sur Android Studio.
Il vous sera demandé d'en créer un, donc si vous l'exécutez, il créera automatiquement une méthode pour vous. (Vous pouvez l'écrire vous-même)
Dans la méthode onClick, l'ID du Button spécifié en xml est acquis par view.getId () et le traitement est divisé.
Il est facile d'oublier findViewById et setOnClickListener (this). Faites attention! (Cela peut être simplifié en utilisant Butter Knife ou Data Biding, mais je ne voulais pas que cela change de manière significative par rapport au style d'écriture existant. Non présenté. )
Édition Kotlin
Comme il est écrit dans build.gradle, nous avons introduit ici kotlin-android-extensions.
C'est assez pratique, vous pouvez utiliser le nom d'identifiant spécifié dans xml tel quel, et la quantité de code peut être très petite.
--Lorsqu'il n'y a qu'un seul processus Button
ButtonSampleActivity.kt
class ButtonSampleActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_button_sample)
val actionBar = supportActionBar
actionBar!!.setDisplayHomeAsUpEnabled(true)
var flag = false
//kotlin-android-Grâce aux extensions, vous pouvez spécifier par id de xml sans écrire une phrase de findViewById! !!
textChangeButton.setOnClickListener { view ->
flag = if (flag){
changeText.text = "Veuillez appuyer sur"
textChangeButton.text = "BUTTON"
false
}else{
changeText.text = "Le bouton a été enfoncé"
textChangeButton.text = "revenir"
true
}
}
}
}
C'est beaucoup plus propre que le code source Java, n'est-ce pas? Pas de findViewById, vérifications nulles inutiles, onClick et point-virgule! D'accord, commençons avec Kotlin maintenant ()
- Lorsqu'il y a plusieurs processus Button
ButtonSampleActivity.kt
class ButtonSampleActivity : AppCompatActivity(), View.OnClickListener {
private var flag = false
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_button_sample)
val actionBar = supportActionBar
actionBar!!.setDisplayHomeAsUpEnabled(true)
//kotlin-android-Grâce aux extensions, vous pouvez spécifier par id de xml sans écrire une phrase de findViewById! !!
textChangeButton.setOnClickListener(this)
fab.setOnClickListener(this)
}
override fun onClick(view: View) {
when (view.id){ //Puisqu'il n'y a pas d'instruction switch, utilisez l'instruction when
R.id.textChangeButton -> {
this.flag = if (flag){
changeText.text = "Veuillez appuyer sur"
textChangeButton.text = "BUTTON"
false
}else{
changeText.text = "Le bouton a été enfoncé"
textChangeButton.text = "revenir"
true
}
}
R.id.fab -> {
Snackbar.make(view, "fab a été pressé!", Snackbar.LENGTH_LONG)
.setAction("Action", null).show()
}
}
}
}
Il s'agit également d'une méthode d'écriture de la méthode onClick en dehors de la méthode onCreate. Ce que je veux savoir à propos de ce code source, c'est qu'il diffère de Java.
- Ajouter avec une virgule au lieu d'écrire des outils --Utilisez l'instruction when car il n'y a pas d'instruction switch dans Kotlin
- Inférence de type de var, val
Quel endroit, comme.
référence
Il décrit en détail le charme et la notation de Kotlin.
Aperçu de la prochaine fois
Écrivez autour du texte tel que TextView et EditText.
Épilogue
Je voudrais le montrer aux juniors de l'université, mais je serais reconnaissant aux utilisateurs de Qiita de commenter s'il y a une demande. Si vous avez des erreurs, veuillez faire une demande de correction.
Recommended Posts