如何在Android中实现表情符号(SmileyRating)等级栏

本文概述

• 1.安装SmileyRating
• 2.实施
• 完整的例子

只要你希望某人能够使用你的应用程序, 则在任何地方都需要友好的用户界面。还有什么比笑脸更友好：)？如果你要在应用程序中实现每个人都可以轻松使用的分级功能, 那么SmileyRating组件可能正是你在寻找你的应用程序, 而我们并不是专门针对儿童应用程序, 我的意思是, 这不是不能只瞄准孩子们…对吗？

在本文中, 我们将向你介绍如何在Android应用程序中实现SmileyRating栏。

1.安装SmileyRating

SmileyRating是适用于Android的简单评级栏。它显示动画笑脸作为评分图标。这个小部件：

• 使用android canvas完全绘制
• 灵感来自Bill Labus

你可以在应用程序中安装此小部件, 以修改build.gradle文件并将其添加为依赖项：

dependencies {
    implementation 'com.github.sujithkanna:smileyrating:1.6.8'
}

更新文件后, 请在Android Studio中同步android项目。该库要求将minSdkTarget设置为21(Android 5.0棒棒糖)。有关此库的更多信息, 请访问Github上的官方存储库。

2.实施

该小部件可以轻松地嵌入到应用程序中有布局的任何部分。你可以使用以下标记添加它：

<com.hsalf.smilerating.SmileRating
    android:id="@+id/smile_rating"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:showLine="true"
/>

我们为小部件添加了smile_rating id, 因此我们可以使用一些代码对小部件执行某些操作。你可以做的是附加一个侦听器, 该侦听器在用户选择小部件的某些值时执行：

// Find the smile_widget by it's id
final SmileRating smileRating = findViewById(R.id.smile_rating);

// Attach a listener to know when the qualification changes
// you can retrieve it's value as well dinamically with: smileRating.getRating()
smileRating.setOnSmileySelectionListener(new SmileRating.OnSmileySelectionListener() {
    @Override
    public void onSmileySelected(@BaseRating.Smiley int smiley, boolean reselected) {
        // Retrieve the value of the bar dinamically
        // level is from 1 to 5
        // Will return 0 if NONE selected
        int level = smileRating.getRating();

        // reselected is false when user selects different smiley that previously selected one
        // true when the same smiley is selected.
        // Except if it first time, then the value will be false.
        switch (smiley) {
            case SmileRating.BAD:
                Log.i(TAG, "Bad");
                break;
            case SmileRating.GOOD:
                Log.i(TAG, "Good");
                break;
            case SmileRating.GREAT:
                Log.i(TAG, "Great");
                break;
            case SmileRating.OKAY:
                Log.i(TAG, "Okay");
                break;
            case SmileRating.TERRIBLE:
                Log.i(TAG, "Terrible");
                break;
        }
    }
});

或者, 如代码段中所述, 如果你想从另一个小部件(例如自定义按钮)中检索出该值, 则可以使用以下行：

// Retrieve the value of the bar dinamically
// level is from 1 to 5
// Will return 0 if NONE selected
int level = smileRating.getRating();

完整的例子

在我们的示例中, 我们将使用约束布局, 因此我们的activity_main.xml文件将如下所示, 这将使小部件位于视图中间：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">
    
    <com.hsalf.smilerating.SmileRating
        android:id="@+id/smile_rating"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:showLine="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
    />

</android.support.constraint.ConstraintLayout>

并且将处理栏的change事件的代码如下：

package com.yourcompany.yourapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;

// Import Rating classes
import com.hsalf.smilerating.BaseRating;
import com.hsalf.smilerating.SmileRating;

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "App";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final SmileRating smileRating = findViewById(R.id.smile_rating);

        smileRating.setOnSmileySelectionListener(new SmileRating.OnSmileySelectionListener() {
            @Override
            public void onSmileySelected(@BaseRating.Smiley int smiley, boolean reselected) {

                // Retrieve the value of the bar dinamically
                // level is from 1 to 5
                // Will return 0 if NONE selected
                int level = smileRating.getRating();

                // reselected is false when user selects different smiley that previously selected one
                // true when the same smiley is selected.
                // Except if it first time, then the value will be false.
                switch (smiley) {
                    case SmileRating.BAD:
                        Log.i(TAG, "Bad");
                        break;
                    case SmileRating.GOOD:
                        Log.i(TAG, "Good");
                        break;
                    case SmileRating.GREAT:
                        Log.i(TAG, "Great");
                        break;
                    case SmileRating.OKAY:
                        Log.i(TAG, "Okay");
                        break;
                    case SmileRating.TERRIBLE:
                        Log.i(TAG, "Terrible");
                        break;
                }
            }
        });
    }
}

编码愉快！