[JAVA] [Android] J'ai créé un écran de liste de matériaux avec ListView + Bottom Sheet
introduction
De nos jours, il y a une tendance à retenir et à chuchoter la conception des matériaux. Il est très important que l'apparence soit rafraîchissante, mais j'espère juste que la convivialité ne sera pas insatisfaisante sans se concentrer sur l'apparence.
Personnellement, je pense que iOS récent en est un exemple ...
En dehors de cela, je pense qu'il est nécessaire de savoir ce qu'est la conception matérielle, alors faisons-le tout de suite!
Préparation
Cette fois, nous avons besoin de com.android.support: design. Lorsque vous utilisez SVG pour le bouton Fab, assurez-vous d'inclure également com.android.support: support-vector-drawable. De plus, si minSdkVersion est inférieur à ** 21 **, vous devez utiliser ** Support Library **, donc la méthode de description changera légèrement. Faites attention.
build.gradle
android {
compileSdkVersion 26
buildToolsVersion "26.0.1"
defaultConfig {
...
minSdkVersion 19
targetSdkVersion 26
vectorDrawables.useSupportLibrary = true //Mise en garde:Cette description est requise selon la version minSdkVersion lors de l'utilisation de l'icône SVG.(Cette fois, il est 19, donc c'est nécessaire)
}
buildTypes {
...
}
}
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:appcompat-v7:26.1.0'
compile 'com.android.support:support-v4:26.1.0'
compile 'com.android.support:design:26.1.0'
compile 'com.android.support:support-vector-drawable:26.1.0'
}
Si vous souhaitez utiliser l'icône SVG cette fois, cliquez avec le bouton droit de la souris sur [app] -> [res] -> [drawable], sélectionnez [New] -> [Vector Asset] et dites "add" *** Si vous sélectionnez l'icône de marque **, un fichier nommé *** ic_add_black_24dp.xml *** sera créé. Je voulais une icône blanche, alors j'ai ajouté ʻandroid: fillColor = "@ color / white" `au fichier xml créé et l'ai enregistré sous *** ic_add_white_24dp.xml ***. L'exemple de code fait référence à ce fichier, modifiez-le en conséquence en fonction de votre environnement.
ic_add_white_24dp.xm
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="@color/white"
android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>
Implémentons-le facilement
Cette fois, j'ai créé une simple liste d'amis / écran d'édition en utilisant "Vue en liste" + "Feuille du bas". Voici l'exemple de code.
MainActivity.java
public class MainActivity extends AppCompatActivity {
private BottomSheetBehavior behavior;
private ArrayList<String> friend;
private ArrayAdapter<String> friend_adapter;
private int position; //Rappelez-vous sur quelle ligne de ListView a été cliqué
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// toolbar
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// bottom sheet
View bottomSheet = findViewById(R.id.bottom_sheet);
behavior = BottomSheetBehavior.from(bottomSheet);
behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
// friend data
friend = new ArrayList<>();
for (int i = 0; i < 30; i++) {
friend.add("ami" + i);
}
friend_adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, friend);
ListView friendList = findViewById(R.id.list_friend);
friendList.setAdapter(friend_adapter);
friendList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
//Lorsque vous cliquez sur la liste d'amis, la feuille inférieure s'ouvre. Fermer si déjà ouvert.
if (behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
} else {
behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
position = i;
}
}
});
// fab button
FloatingActionButton mFab = findViewById(R.id.fab_button);
mFab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// editText view
final EditText input = new EditText(MainActivity.this);
input.setInputType(InputType.TYPE_CLASS_TEXT);
input.setMaxLines(1);
// create dialog
new AlertDialog.Builder(MainActivity.this)
.setTitle("s'inscrire")
.setMessage("Veuillez entrer votre nom enregistré")
.setView(input)
.setPositiveButton("enregistrement", new DialogInterface.OnClickListener() { //Paramètres du bouton OK
public void onClick(DialogInterface dialog, int whichButton) {
friend.add(input.getText().toString());
friend_adapter.notifyDataSetChanged();
dialog.dismiss();
}
})
.setNegativeButton("Annuler", new DialogInterface.OnClickListener() { // Annulerボタンの設定
public void onClick(DialogInterface dialog, int whichButton) {
dialog.dismiss();
}
})
.show();
behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
});
// menu list
ArrayAdapter<String> menu_adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1);
menu_adapter.add("Renommer");
menu_adapter.add("Effacer");
menu_adapter.add("Fermer");
ListView menuList = findViewById(R.id.list_menu);
menuList.setAdapter(menu_adapter);
menuList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, final int i, long l) {
switch (i) {
case 0:
// editText view
final EditText input = new EditText(MainActivity.this);
input.setInputType(InputType.TYPE_CLASS_TEXT);
input.setMaxLines(1);
// create dialog
new AlertDialog.Builder(MainActivity.this)
.setTitle("Renommer")
.setMessage(friend.get(position) + "Renommer")
.setView(input)
.setPositiveButton("Changement", new DialogInterface.OnClickListener() { //Paramètres du bouton OK
public void onClick(DialogInterface dialog, int whichButton) {
friend.set(position, input.getText().toString());
friend_adapter.notifyDataSetChanged();
dialog.dismiss();
}
})
.setNegativeButton("Annuler", new DialogInterface.OnClickListener() { // Annulerボタンの設定
public void onClick(DialogInterface dialog, int whichButton) {
dialog.dismiss();
}
})
.show();
break;
case 1:
// create dialog
new AlertDialog.Builder(MainActivity.this)
.setTitle("Effacer")
.setMessage(friend.get(position) + "Voulez-vous vraiment supprimer")
.setPositiveButton("Effacer", new DialogInterface.OnClickListener() { //Paramètres du bouton OK
public void onClick(DialogInterface dialog, int whichButton) {
friend.remove(position);
friend_adapter.notifyDataSetChanged();
dialog.dismiss();
}
})
.setNegativeButton("Annuler", new DialogInterface.OnClickListener() { // Annulerボタンの設定
public void onClick(DialogInterface dialog, int whichButton) {
dialog.dismiss();
}
})
.show();
break;
}
behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
});
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>
<ListView
android:id="@+id/list_friend"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="200dp"
app:layout_behavior="@string/bottom_sheet_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="15dp"
android:text="Menu"
android:textSize="18sp"/>
<ListView
android:id="@+id/list_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="@color/white"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_button"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_margin="20dp"
app:layout_anchor="@id/bottom_sheet"
app:layout_anchorGravity="right|top"
app:srcCompat="@drawable/ic_add_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>
Je pense que c'est une bonne idée de le copier et de le coller tel quel pour le faire fonctionner. Il n'y a pas de description aussi difficile, donc le raccourci est de tâtonner et d'approfondir votre compréhension tout en apportant des modifications.
Recommended Posts