[JAVA] [Android] Ich habe mit ListView + Bottom Sheet einen Materiallistenbildschirm erstellt

Einführung

Heutzutage besteht die Tendenz, dass Materialdesign gehalten und geflüstert wird. Es ist sehr wichtig, dass das Erscheinungsbild erfrischend ist, aber ich hoffe nur, dass die Benutzerfreundlichkeit nicht unbefriedigend ist, ohne sich auf das Erscheinungsbild zu konzentrieren.

Persönlich denke ich, dass das aktuelle iOS ein Beispiel ist ...

Abgesehen davon denke ich, dass es notwendig ist zu wissen, was Materialdesign ist, also machen wir es gleich!

Vorbereitung

Diesmal brauchen wir "com.android.support: design". Wenn Sie SVG für die Fab-Schaltfläche verwenden, müssen Sie auch "com.android.support: support-vector-drawable" einschließen. Wenn minSdkVersion kleiner als ** 21 ** ist, müssen Sie ** Support Library ** verwenden, damit sich die Beschreibungsmethode geringfügig ändert. Achtung.

build.gradle

android {
  compileSdkVersion 26
  buildToolsVersion "26.0.1"
  defaultConfig {
    ...
    minSdkVersion 19
    targetSdkVersion 26
    vectorDrawables.useSupportLibrary = true  //Hinweis:Diese Beschreibung ist abhängig von der minSdkVersion erforderlich, wenn das SVG-Symbol verwendet wird.(Diesmal ist es 19, also ist es notwendig)
  }
  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'
}

Wenn Sie dieses Mal das SVG-Symbol verwenden möchten, klicken Sie mit der rechten Maustaste auf [App] -> [Res] -> [Drawable], wählen Sie [New] -> [Vector Asset] und sagen Sie "Add" *** Wenn Sie das Symbol ** markieren, wird eine Datei mit dem Namen *** ic_add_black_24dp.xml *** erstellt. Ich wollte ein weißes Symbol, also fügte ich der erstellten XML-Datei "android: fillColor =" @ color / white "" hinzu und speicherte es als *** ic_add_white_24dp.xml ***. Der Beispielcode bezieht sich auf diese Datei. Ändern Sie ihn daher entsprechend Ihrer Umgebung.

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>

Lassen Sie es uns einfach implementieren

Dieses Mal habe ich mit "Listenansicht" + "Unteres Blatt" einen einfachen Bildschirm für die Liste / Bearbeitung von Freunden erstellt. Unten ist der Beispielcode.

MainActivity.java

public class MainActivity extends AppCompatActivity {
  private BottomSheetBehavior behavior;
  private ArrayList<String> friend;
  private ArrayAdapter<String> friend_adapter;
  private int position;  //Denken Sie daran, auf welche Zeile in der ListView geklickt wurde

  @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("Freund" + 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) {
        //Wenn Sie auf Freundesliste klicken, wird das untere Blatt geöffnet. Schließen, falls bereits geöffnet.
        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("Anmelden")
                .setMessage("Bitte geben Sie Ihren registrierten Namen ein")
                .setView(input)
                .setPositiveButton("Anmeldung", new DialogInterface.OnClickListener() { //OK-Tasteneinstellungen
                  public void onClick(DialogInterface dialog, int whichButton) {
                    friend.add(input.getText().toString());
                    friend_adapter.notifyDataSetChanged();
                    dialog.dismiss();
                  }
                })
                .setNegativeButton("Stornieren", new DialogInterface.OnClickListener() { // Stornierenボタンの設定
                  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("umbenennen");
    menu_adapter.add("Löschen");
    menu_adapter.add("schließen");

    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("umbenennen")
                    .setMessage(friend.get(position) + "Umbenennen")
                    .setView(input)
                    .setPositiveButton("Veränderung", new DialogInterface.OnClickListener() { //OK-Tasteneinstellungen
                      public void onClick(DialogInterface dialog, int whichButton) {
                        friend.set(position, input.getText().toString());
                        friend_adapter.notifyDataSetChanged();
                        dialog.dismiss();
                      }
                    })
                    .setNegativeButton("Stornieren", new DialogInterface.OnClickListener() { // Stornierenボタンの設定
                      public void onClick(DialogInterface dialog, int whichButton) {
                        dialog.dismiss();
                      }
                    })
                    .show();
            break;
          case 1:
            // create dialog
            new AlertDialog.Builder(MainActivity.this)
                    .setTitle("Löschen")
                    .setMessage(friend.get(position) + "Möchten Sie wirklich löschen")
                    .setPositiveButton("Löschen", new DialogInterface.OnClickListener() { //OK-Tasteneinstellungen
                      public void onClick(DialogInterface dialog, int whichButton) {
                        friend.remove(position);
                        friend_adapter.notifyDataSetChanged();
                        dialog.dismiss();
                      }
                    })
                    .setNegativeButton("Stornieren", new DialogInterface.OnClickListener() { // Stornierenボタンの設定
                      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>

Ich denke, es ist eine gute Idee, es zu kopieren und einzufügen, damit es funktioniert. Es gibt keine so schwierige Beschreibung, daher besteht die Abkürzung darin, Ihr Verständnis zu fummeln und zu vertiefen, während Sie einige Änderungen vornehmen.