Wenn Sie einen "Like"-, "Love"- oder "Favorite"-Button implementieren möchten, dann ist dieses Tutorial genau das Richtige für Sie. Wir werden einige Open-Source-Lösungen untersuchen, mit denen Sie dies erreichen können. Wir machen das Schritt für Schritt mit Codebeispielen.

(a). LikeButton

LikeButton ist eine Bibliothek, mit der Sie einen Button mit Animationseffekten ähnlich dem Twitter-Herz erstellen können, wenn Ihnen etwas gefällt.

Hier ist die Demonstration:

Android LikeButton

Schritt 1: Installation

Repository

Beginnen Sie damit, das Repository zu registrieren:

Fügen Sie dies in Ihre root build.gradle Datei ein (nicht in Ihre Modul build.gradle Datei):

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Abhängigkeit

Dann fügen Sie die folgende Implementierungs-Anweisung in die build.gradle-Datei Ihres Moduls ein:

    implementation 'com.github.jd-alexander:LikeButton:0.2.3'

Standardmäßig erhalten Sie den Herz-Button mit dem obigen Code.

Schritt 2: Zum Layout hinzufügen

Der nächste Schritt ist das Hinzufügen des LikeButtons in Ihr xml-Layout:

<com.like.LikeButton
            app:icon_type="heart"
            app:icon_size="25dp"
            android:id="@+id/star_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

Sehen Sie sich die Attribute an, die Sie mit dieser Bibliothek verwenden können:

<com.like.LikeButton
app:icon_type="Star"
app:circle_start_color="@color/colorPrimary"
app:like_drawable="@drawable/thumb_on"
app:unlike_drawable="@drawable/thumb_off"
app:dots_primary_color="@color/colorAccent"
app:dots_secondary_color="@color/colorPrimary"
app:circle_end_color="@color/colorAccent"
app:icon_size="25dp"
app:liked="true"
app:anim_scale_factor="2"
app:is_enabled="false"
/>

Hier sehen Sie, wie Sie zum Beispiel einen Icon-Ressourcentyp deklarativ festlegen können:

app:icon_type="heart"

Schritt 3: Auf Ereignisse hören

Jetzt können Sie programmatisch einen Event-Handler an die Schaltfläche in Ihrem Code anhängen und auf like/unlike-Ereignisse hören:

likeButton.setOnLikeListener(new OnLikeListener() {
            @Override
            public void liked(LikeButton likeButton) {

            }

            @Override
            public void unLiked(LikeButton likeButton) {

            }
        });

Sie können auch einen Icon-Typ programmatisch festlegen, wie unten beschrieben:

likeButton.setIcon(IconType.Star);

Und um die Größe des Icons einzustellen:

likeButton.setIconSizePx(40);
likeButton.setIconSizeDp(20);

Referenz

Nachfolgend finden Sie den Download-Link für das Beispielprojekt.

Nummer Link
1. Weiterlesen
2. Herunterladen
3. Code-Autor folgen

(b). MaterialFavoriteButton

Ein animierter Favorit/Stern/Like-Button für Android.

Hier ist die Demonstration dieser Bibliothek:

MaterialFavoriteButton

Schauen wir uns an, wie man dieses Paket verwendet.

Schritt 1: Installieren

Installieren Sie es zunächst. Fügen Sie die folgende Implementierungsanweisung in Ihre build.gradle auf Modulebene ein:

implementation 'com.github.ivbaranov:materialfavoritebutton:0.1.5'

Dann synchronisieren Sie es zum Download.

Schritt 2: Zum Layout hinzufügen

Als nächstes müssen Sie den MaterialFavoriteButton zu Ihrem xml-Layout hinzufügen:

<com.github.ivbaranov.mfb.MaterialFavoriteButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Hier sind die xml-Attribute, die verwendet werden können:

app:mfb_state="false"                            // default button state
app:mfb_animate_favorite="true"                  // to animate favoriting
app:mfb_animate_unfavorite="false"               // to animate unfavoriting
app:mfb_padding="12"                             // image padding
app:mfb_favorite_image="@drawable/ic_fav"        // custom favorite resource
app:mfb_not_favorite_image="@drawable/ic_not_fav"// custom not favorite resource
app:mfb_rotation_duration="400"                  // rotation duration
app:mfb_rotation_angle="360"                     // rotation angle
app:mfb_bounce_duration="300"                    // bounce duration
app:mfb_color="black"                            // black or white default resources (enum)
app:mfb_type="star"                              // star or heart shapes (enum)
app:mfb_size="48"                                // button size

Schritt 3: Code schreiben

Sie können dann Ihren Code entweder in Kotlin oder Java schreiben. Zum Beispiel können Sie den MaterialFavoriteButton programmatisch erstellen, ohne ihn zum Layout hinzuzufügen. Das machst du wie folgt:

MaterialFavoriteButton favorite = new MaterialFavoriteButton.Builder(this)
        .create();

Um den Status favorite/unfavorite oder like/unlike zu erhalten, fügen Sie einen Event-Handler wie folgt hinzu:

favorite.setOnFavoriteChangeListener(
        new MaterialFavoriteButton.OnFavoriteChangeListener() {
          @Override
          public void onFavoriteChanged(MaterialFavoriteButton buttonView, boolean favorite) {
            //
          }
        });

Verwendung in RecyclerView

Um zu vermeiden, dass beim erneuten Rendern der Artikelansicht eine Animation ausgelöst wird, stellen Sie sicher, dass Sie den Status des Favoritenbuttons in onBindViewHolder ohne Animation setzen:

favoriteButton.setFavorite(isFavorite(data.get(position)));

Vollständiges Beispiel

Schauen wir uns nun ein vollständiges, in Java geschriebenes Beispiel an. Beginnen Sie mit der Installation der Bibliothek, wie wir bereits besprochen haben.

Dann erstellen Sie ein xml-Layout:

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    tools:context=".MainActivity">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/card_margin">

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/text_padding"
            android:text="Basic"
            android:textAppearance="@style/TextAppearance.AppCompat.Title" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/text_padding"
            android:text="@string/ipsum_1" />

        <com.github.ivbaranov.mfb.MaterialFavoriteButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

      </LinearLayout>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/card_margin">

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/text_padding"
            android:text="Nice"
            android:textAppearance="@style/TextAppearance.AppCompat.Title" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/text_padding"
            android:text="@string/ipsum_en_1914_1" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

          <TextView
              android:id="@+id/counter_text"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:layout_centerVertical="true"
              android:layout_marginLeft="@dimen/starred_margin"
              android:text="@string/starred" />

          <TextView
              android:id="@+id/counter_value"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:layout_centerVertical="true"
              android:layout_toRightOf="@+id/counter_text"
              android:layout_marginLeft="@dimen/counter_value_margin" />

          <com.github.ivbaranov.mfb.MaterialFavoriteButton
              android:id="@+id/favorite_nice"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentRight="true"
              app:mfb_rotation_duration="400"
              app:mfb_rotation_angle="216"
              app:mfb_bounce_duration="700" />

        </RelativeLayout>

      </LinearLayout>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/card_margin">

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:padding="@dimen/text_padding"
              android:text="Custom"
              android:textAppearance="@style/TextAppearance.AppCompat.Title" />

          <com.github.ivbaranov.mfb.MaterialFavoriteButton
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentRight="true"
              app:mfb_rotation_duration="700"
              app:mfb_rotation_angle="360"
              app:mfb_favorite_image="@drawable/ic_event_available_black_24dp"
              app:mfb_not_favorite_image="@drawable/ic_event_busy_black_24dp"
              app:mfb_animate_unfavorite="true"
              app:mfb_bounce_duration="0" />

        </RelativeLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/text_padding"
            android:text="@string/ipsum_2" />

      </LinearLayout>

    </android.support.v7.widget.CardView>

  </LinearLayout>

</ScrollView>

Dann ersetzen Sie Ihren "MainActivity"-Code durch den folgenden:

MainActivity.java

public class MainActivity extends AppCompatActivity {
  private TextView niceCounter;
  private int niceCounterValue = 37;

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    //in the toolbar
    MaterialFavoriteButton toolbarFavorite = new MaterialFavoriteButton.Builder(this) //
        .favorite(true)
        .color(MaterialFavoriteButton.STYLE_WHITE)
        .type(MaterialFavoriteButton.STYLE_HEART)
        .rotationDuration(400)
        .create();
    toolbar.addView(toolbarFavorite);
    toolbarFavorite.setOnFavoriteChangeListener(
        new MaterialFavoriteButton.OnFavoriteChangeListener() {
          @Override
          public void onFavoriteChanged(MaterialFavoriteButton buttonView, boolean favorite) {
            Snackbar.make(buttonView, getString(R.string.toolbar_favorite_snack) + favorite,
                Snackbar.LENGTH_SHORT).show();
          }
        });

    //nice cardview
    niceCounter = (TextView) findViewById(R.id.counter_value);
    niceCounter.setText(String.valueOf(niceCounterValue));
    MaterialFavoriteButton materialFavoriteButtonNice =
        (MaterialFavoriteButton) findViewById(R.id.favorite_nice);
    materialFavoriteButtonNice.setFavorite(true, false);
    materialFavoriteButtonNice.setOnFavoriteChangeListener(
        new MaterialFavoriteButton.OnFavoriteChangeListener() {
          @Override
          public void onFavoriteChanged(MaterialFavoriteButton buttonView, boolean favorite) {
            if (favorite) {
              niceCounterValue++;
            } else {
              niceCounterValue--;
            }
          }
        });
    materialFavoriteButtonNice.setOnFavoriteAnimationEndListener(
        new MaterialFavoriteButton.OnFavoriteAnimationEndListener() {
          @Override
          public void onAnimationEnd(MaterialFavoriteButton buttonView, boolean favorite) {
            niceCounter.setText(String.valueOf(niceCounterValue));
          }
        });
  }

  @Override public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
  }

  @Override public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
      return true;
    }

    return super.onOptionsItemSelected(item);
  }
}

Referenz

Sie finden den Download-Link unten:

Nummer Link
1. Weiterlesen
2. Herunterladen
3. Autor des Codes folgen

(c). SparkButton

Android-Bibliothek zur Erstellung von Schaltflächen mit der herzähnlichen Animation von Twitter.

Diese Bibliothek unterstützt API 14+.

Hier ist eine Demo der Bibliothek im Einsatz:

SparkButton Beispiel Android

Um sie zu benutzen:

Schritt 1: Installieren

Zuerst müssen Sie die Bibliothek installieren. Da es in jitpack gehostet wird, registrieren Sie jitpack wie folgt in Ihrer root-level build.gradle Datei:

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Fügen Sie dann Ihre Implementierungsanweisung hinzu:

    implementation 'com.github.varunest:sparkbutton:1.0.6'

Sync zum Herunterladen.

Schritt 2: Zum Layout hinzufügen

Jetzt müssen Sie SparkButton zu Ihrem Xml-Layout hinzufügen:

        <com.varunest.sparkbutton.SparkButton
            android:id="@+id/spark_button"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:sparkbutton_activeImage="@drawable/active_image"
            app:sparkbutton_inActiveImage="@drawable/inactive_image"
            app:sparkbutton_iconSize="40dp"
            app:sparkbutton_primaryColor="@color/primary_color"
            app:sparkbutton_secondaryColor="@color/secondary_color" />

Hier sind die entsprechenden Attribute:

<attr name="sparkbutton_iconSize" format="dimension|reference" />
<attr name="sparkbutton_activeImage" format="reference" />
<attr name="sparkbutton_disabledImage" format="reference" />
<attr name="sparkbutton_primaryColor" format="reference" />
<attr name="sparkbutton_secondaryColor" format="reference" />
<attr name="sparkbutton_pressOnTouch" format="boolean" />
<attr name="sparkbutton_animationSpeed" format="float" />

Schritt 3: Code schreiben

Sie können die Schaltfläche auch programmatisch erstellen und die Attribute über Java festlegen:

            SparkButton button  = new SparkButtonBuilder(context)
                .setActiveImage(R.drawable.active_image)
                .setInActiveImage(R.drawable.inactive_image)
                .setDisabledImage(R.drawable.disabled_image)
                .setImageSizePx(getResources().getDimensionPixelOffset(R.dimen.button_size))
                .setPrimaryColor(ContextCompat.getColor(context, R.color.primary_color))
                .setSecondaryColor(ContextCompat.getColor(context, R.color.secondary_color))
                .build();

Referenz

Finden Sie den Download-Link unten:

Nummer Link
1. Weiterlesen
2. Herunterladen
3. Code-Autor folgen

Ich wünsche Ihnen einen schönen Tag.