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:
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:
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:
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.
