The realization of a chat interface

Keywords: Android

The layout adopts the FrameLayout layout, which can ensure that the input box is pushed upward without being overwritten when the soft keyboard pops up. The layout file is as follows:

< FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

  xmlns:tools="http://schemas.android.com/tools"

  android:layout_width="match_parent"

  android:layout_height="match_parent"

  android:id="@+id/rootLayout"

  android:background="@color/white">

  < LinearLayout

    android:id="@+id/scrolllayout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:layout_marginBottom="65dp"

    android:layout_marginTop="60dp"

    android:background="@color/lightgray"

    android:orientation="vertical" >

    < ScrollView

      android:id="@+id/svContent"

      android:layout_width="match_parent"

      android:layout_height="match_parent"

      android:fillViewport="true" >

      < LinearLayout

        android:id="@+id/resultLayout"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical" >

      < /LinearLayout>

    < /ScrollView>

  < /LinearLayout>

  < View

    android:layout_width="match_parent"

    android:layout_height="2dp"

    android:layout_gravity="bottom"

    android:layout_marginBottom="65dp"

    android:background="@color/gray"/ >

  < LinearLayout

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:minHeight="60dp"

    android:focusable="true"

    android:focusableInTouchMode="true"

    android:layout_gravity="bottom|center"

    android:gravity="center_vertical"

    android:layout_marginRight="2dp"

    android:orientation="horizontal" >

    < com.wunian.widget.ClearEditText

      android:id="@+id/etEditor"

      android:layout_width="0dp"

      android:layout_height="wrap_content"

      android:minHeight="40dp"

      android:gravity="center_vertical"

      android:layout_weight="4"

      android:hint="Please enter chat content"

      android:drawableRight="@drawable/ic_delete"

      android:maxHeight="200dp"

      android:inputType="textMultiLine"

     android:minLines="1"

      android:maxLines="5"/ >

    < Button

      android:id="@+id/btnSubmit"

      android:layout_width="0dp"

      android:layout_height="40dp"

      android:layout_weight="1"

      android:gravity="center"

      android:background="@drawable/btn_bg"

      android:textColor="@color/white"

      android:text="Send out"/ >

  < /LinearLayout> 

< /FrameLayout>

At the same time, in the list file, set the windowSoftInputMode to adjust resize (the main interface will not be zoomed, but will move upward to place the soft keyboard) or not to adjust pan (the main interface will be zoomed to place the soft keyboard)

< activity

      android:name="com.wunian.littlewei.LittleWeiChatActivity"

      android:label="@string/app_name"

      android:windowSoftInputMode="adjustResize" >

The chat dialog sent by users can be generated dynamically (linearlayout addTextView,ImageView).

In order to ensure that every chat record in the middle can scroll to the bottom, the scroll position of ScrollView needs to be set.

There are two ways to scroll ScrollView to the bottom:

public void ScrollToBottom() {//One way

handler.post(new Runnable() {

@Override

public void run() {

scroll.fullScroll(ScrollView.FOCUS_DOWN);

}

});

}

public void scrollToBottom2() {//Mode two

handler.post(new Runnable() {

public void run() {

if (scroll == null || linearLayout == null) {

return;

}

int offset = linearLayout.getMeasuredHeight() - scroll.getHeight();

if (offset < 0) {

offset = 0;

}

scroll.scrollTo(0, offset);

}

});

}

In addition, monitor the pop-up or hidden status of the soft keyboard, and scroll the ScrollView when the soft keyboard pops up:

// 1776-1557 does not pop up / / 1776-829 pop up

public void addSoftInputListener(final View rootLayout) {

// final View rootLayout = findViewById(R.id.rootLayout);

rootLayout.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

@Override

public void onGlobalLayout() {

int heightDiff = rootLayout.getRootView().getHeight()

- rootLayout.getHeight();

// rootLayout.getHeight()>svContainer.getHeight()

if (heightDiff > dpToPx(context, 200)) { // 600px

// Display soft keyboard

// ScrollToBottom();

scrollToBottom2();

} else {

// Hide soft keyboard

}

}

//This method is used to convert dp to px

public float dpToPx(Context context, float valueInDp) {// 1dp=3px

DisplayMetrics metrics = context.getResources()

.getDisplayMetrics();

return TypedValue

.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

valueInDp, metrics);

}

});

}

Posted by anurag2003 on Wed, 04 Dec 2019 11:15:13 -0800