Как настроить scrollView для добавления элементов с анимацией для имитации интерфейса обмена текстовыми сообщениями - PullRequest
0 голосов
/ 26 января 2019

Я создаю приложение, в котором пользователь пишет сообщение с категорией, названием и текстом. В процессе компостирования я хочу работать так, как будто пользователь разговаривает с кем-то, поэтому он выглядит идентично интерфейсу обмена сообщениями. У меня есть 3 заранее написанных ответа, которые генерируются случайным образом и меняются в зависимости от категории. Я пытался следовать построению стиля обмена сообщениями с представлением переработчика, но я новичок в Java и android studio и не мог понять, как изменить код в соответствии с моими потребностями, так как у меня нет бэкэнда обмена сообщениями. Я обнаружил, что представление прокрутки является более простым решением для того, что мне нужно сделать, но в настоящее время я не могу добавить текстовые пузыри, после каждого шага, только скрыть их и показать их, как только они будут готовы показать их. не похоже на интерфейс обмена сообщениями.

Это LinearLayout в представлении прокрутки, содержащем текстовый пузырь textViews:

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

        <TextView
            android:id="@+id/response1TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/rounded_rectangle_green"
            android:maxWidth="240dp"
            android:padding="8dp"
            android:text="TextView"
            android:textAlignment="center"
            android:textColor="#34aacf"
            app:layout_constraintStart_toStartOf="parent"
            tools:layout_editor_absoluteY="458dp" />

        <TextView
            android:id="@+id/titleBubbleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/rounded_rectangle_green"
            android:maxWidth="240dp"
            android:padding="8dp"
            android:text="TextView"
            android:textAlignment="center"
            android:textColor="#34aacf"
            tools:layout_editor_absoluteX="288dp"
            tools:layout_editor_absoluteY="416dp" />

        <TextView
            android:id="@+id/response2TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/rounded_rectangle_green"
            android:maxWidth="240dp"
            android:padding="8dp"
            android:text="TextView"
            android:textAlignment="center"
            android:textColor="#34aacf"
            tools:layout_editor_absoluteX="16dp"
            tools:layout_editor_absoluteY="361dp" />

        <TextView
            android:id="@+id/messageBubbleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/rounded_rectangle_green"
            android:maxWidth="240dp"
            android:padding="8dp"
            android:text="TextView"
            android:textAlignment="center"
            android:textColor="#34aacf"
            tools:layout_editor_absoluteX="288dp"
            tools:layout_editor_absoluteY="319dp" />

        <TextView
            android:id="@+id/response3TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/rounded_rectangle_green"
            android:maxWidth="240dp"
            android:padding="8dp"
            android:text="TextView"
            android:textAlignment="center"
            android:textColor="#34aacf"
            tools:layout_editor_absoluteX="16dp"
            tools:layout_editor_absoluteY="284dp" />

    </LinearLayout>

В идеале, я бы предпочел добавлять текстовые представления программно после каждого шага, и анимировать их подобно текстовому интерфейсу.

Представление является фрагментом, и вот как я его настраиваю изначально:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {


    Responses responses;

    DocumentReference responsesList = db.collection("responses").document("postResponses");
   responsesList.get().addOnCompleteListener(new OnCompleteListener<DocumentSnapshot>() {
       @Override
       public void onComplete(@NonNull Task<DocumentSnapshot> task) {
           DocumentSnapshot document = task.getResult();

           positiveFirstResponses = (List<String>) document.get("positiveFirstResponses");
           positiveSecondResponses = (List<String>) document.get("positiveSecondResponses");
           positiveThirdResponses = (List<String>) document.get("positiveThirdResponses");

           balancedFirstResponses = (List<String>) document.get("balancedFirstResponses");
           balancedSecondResponses = (List<String>) document.get("balancedSecondResponses");
           balancedThirdResponses = (List<String>) document.get("balancedThirdResponses");

           negativeFirstResponses = (List<String>) document.get("negativeFirstResponses");
           negativeSecondResponses = (List<String>) document.get("negativeSecondResponses");
           negativeThirdResponses = (List<String>) document.get("negativeThirdResponses");

           Log.d("positive ", positiveFirstResponses.toString());
       }
   });

    View postView =  inflater.inflate(R.layout.fragment_post, container, false);

    scrollView = postView.findViewById(R.id.messageScrollView);

    chatBox = postView.findViewById(R.id.edittext_chatbox);
    sendButton = postView.findViewById(R.id.button_chatbox_send);

    response1 = postView.findViewById(R.id.response1TextView);
    titleBubble = postView.findViewById(R.id.titleBubbleTextView);
    response2 = postView.findViewById(R.id.response2TextView);
    messageBubble = postView.findViewById(R.id.messageBubbleTextView);
    response3 = postView.findViewById(R.id.response3TextView);

    response1.setVisibility(View.INVISIBLE);
    titleBubble.setVisibility(View.INVISIBLE);
    response2.setVisibility(View.INVISIBLE);
    messageBubble.setVisibility(View.INVISIBLE);
    response3.setVisibility(View.INVISIBLE);

    guideLabel = postView.findViewById(R.id.guideLabel);
    guideLabel.setTextColor(Color.WHITE);
    guideLabel.setText("Choose a category");
    guideLabel.setTextSize(26);

     positive = postView.findViewById(R.id.postHeart);
     balanced = postView.findViewById(R.id.postBalanced);
     negative = postView.findViewById(R.id.postTear);

    sendButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            enterButtonAction();
        }
    });
    positive.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            setPositive();
        }
    });
    balanced.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            setBalanced();
        }
    });
    negative.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            setNegative();
        }
    });


    chatBox.setOnKeyListener(new View.OnKeyListener()
    {
        public boolean onKey(View v, int keyCode, KeyEvent event)
        {
            if (event.getAction() == KeyEvent.ACTION_DOWN)
            {
                switch (keyCode)
                {
                    case KeyEvent.KEYCODE_DPAD_CENTER:
                    case KeyEvent.KEYCODE_ENTER:
                        enterButtonAction();
                        return true;
                    default:
                        break;
                }
            }
            return false;
        }
    });

    // Inflate the layout for this fragment
    return postView;
}

Как я могу добавить текстовые пузыри программно и включить анимацию для них, чтобы имитировать интерфейс обмена текстовыми сообщениями? Спасибо.

(текстовые пузыри должны иметь гравитацию справа и слева, а не по центру)

1 Ответ

0 голосов
/ 26 января 2019

Вам может быть сложнее реализовать RecyclerView, но RecyclerView поддерживает анимации, которые не поддерживает ScrollView, и поэтому я рекомендую вам использовать RecyclerView для анимации.

https://proandroiddev.com/enter-animation-using-recyclerview-and-layoutanimation-part-1-list-75a874a5d213

Я добавил ссылку, чтобы прочитать об анимациях recyclerView, поскольку в ScrollView невозможно реализовать много анимаций

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...