安卓模仿微信聊天界面(一)

因爲表情包實現比較麻煩,現在還在做,做完了發,還有就是對話框和微信不一樣是因爲沒有合適的對話框的png圖片用來做.9的圖片.

依賴

implementation 'androidx.recyclerview:recyclerview:1.0.0'

在drawable裏新建幾個drawable resource file

buttonbackground

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="45"
        android:startColor="@color/colorGreen"
        android:endColor="@color/colorGreen"/>
    <size
        android:width="45dp"
        android:height="25dp"
        />
    <corners
        android:radius="5dp"/>

</shape>

dialog_left

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@color/colorGreen"/>
    <corners
        android:bottomLeftRadius="85dp"
        android:topLeftRadius="85dp"
        android:bottomRightRadius="10dp"
        android:topRightRadius="10dp"
        />


</shape>

dialog_right

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@color/colorWhite"/>
    <corners
        android:bottomRightRadius="85dp"
        android:topRightRadius="85dp"
        android:topLeftRadius="10dp"
        android:bottomLeftRadius="10dp"
        />


</shape>

inputbackground

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <solid android:color="@color/colorWhite" />
</shape>

用到的顏色

<color name="colorAccent">#12de20</color>
    <color name="colorGreen">#12de20</color>
    <color name="colorGray">#bfbfbf</color>
    <color name="colorLightGray">#ECE9E9</color>
    <color name="colorLighterGray">#F3F3F3</color>

界面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".activity.ItemDetail">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/msg_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorLightGray"
        android:fitsSystemWindows="true"
        app:navigationIcon="@drawable/ic_arrow_back_black_24dp"
        app:title="@string/app_name" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/msg_list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorLightGray"
        android:fitsSystemWindows="true" />

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorLighterGray"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/colorGray" />

        <LinearLayout
            android:layout_width="match_parent"
            android:padding="5dp"
            android:layout_height="wrap_content">
            <LinearLayout
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/inputbackground"
                android:layout_weight="1"
                >

            <EditText
                android:id="@+id/msg_say"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginEnd="5dp"
                android:layout_marginRight="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                android:background="@color/colorWhite"
                android:hint="輸入你想說的話" />


            </LinearLayout>
            <Button
                android:id="@+id/msg_emoji"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="3dp"
                android:layout_marginBottom="5dp"
                android:background="@drawable/ic_mood_black_24dp" />

            <Button
                android:id="@+id/msg_send"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginTop="5dp"
                android:layout_marginRight="5dp"
                android:layout_marginBottom="5dp"
                android:background="@drawable/ic_add_24dp" />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Msg類

package com.example.wechat.bean;

public class Msg {
    public static final int type_received = 0;
    public static final int type_sent = 1;
    private String content;
    private int type;
    private int headerid;

    public Msg(String content, int type) {
        this.content = content;
        this.type = type;
    }

    public static int getType_sent() {
        return type_sent;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public int getHeaderid() {
        return headerid;
    }

    public void setHeaderid(int headerid) {
        this.headerid = headerid;
    }

    public static int getType_received() {
        return type_received;
    }
}

msg_item,這裏根佈局要用相對佈局,線性佈局出bug

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_gravity="left"
        android:background="@drawable/dialog_left"
        android:orientation="horizontal"
        tools:ignore="RtlHardcoded">

        <TextView
            android:id="@+id/left_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:text="123"
            android:textColor="#fff"
            android:textIsSelectable="true"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="right"
        android:background="@drawable/dialog_right"
        android:orientation="horizontal"
        tools:ignore="RtlHardcoded">

        <TextView
            android:id="@+id/right_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:text="123"
            android:textColor="#000"
            android:textIsSelectable="true"
            android:textSize="20sp" />


    </LinearLayout>
</RelativeLayout>

MsgAdapter

package com.example.wechat.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.wechat.R;
import com.example.wechat.bean.Msg;

import java.util.ArrayList;
import java.util.List;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder> {
    List<Msg> msgs = new ArrayList<>();
    Context context;
    LayoutInflater inflater;

    public MsgAdapter(List<Msg> msgs, Context context) {
        this.msgs = msgs;
        this.context = context;
        inflater = LayoutInflater.from(context);
    }

    @NonNull
    @Override
    public MsgAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = inflater.inflate(R.layout.msg_item, null);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull MsgAdapter.ViewHolder holder, int position) {
        Msg msg = msgs.get(position);
        if (msg.getType() == Msg.type_received) {
            holder.left_layout.setVisibility(View.VISIBLE);
            holder.right_layout.setVisibility(View.GONE);
            holder.left_msg.setText(msg.getContent());
        } else if (msg.getType() == Msg.type_sent) {
            holder.right_layout.setVisibility(View.VISIBLE);
            holder.left_layout.setVisibility(View.GONE);
            holder.right_msg.setText(msg.getContent());

        }
    }

    @Override
    public int getItemCount() {
        return msgs.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView left_msg;
        TextView right_msg;
        LinearLayout left_layout;
        LinearLayout right_layout;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            left_msg = itemView.findViewById(R.id.left_msg);
            right_msg = itemView.findViewById(R.id.right_msg);
            left_layout = itemView.findViewById(R.id.left_layout);
            right_layout = itemView.findViewById(R.id.right_layout);
        }
    }
}

ItemDetail,這裏加了如果輸入框裏有字就顯示發送,否則就顯示加號,最後還加了一個手動觸摸返回的功能

package com.example.wechat.activity;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.Toast;

import com.example.wechat.R;
import com.example.wechat.adapter.MsgAdapter;
import com.example.wechat.bean.Msg;
import com.example.wechat.bean.User;
import com.example.wechat.util.StatusBarUtils;
import com.example.wechat.util.WithSoftUp;

import java.util.ArrayList;
import java.util.List;

public class ItemDetail extends AppCompatActivity {
    List<Msg> list = new ArrayList<>();
    RecyclerView recyclerView;
    Toolbar toolbar;
    MsgAdapter msgAdapter;
    Context context = ItemDetail.this;
    EditText msg_say;
    Button emoji;
    Button send;
    LinearLayout linearLayout;
    int lastx = 0;
    int lasty = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_item_detail);
        recyclerView = findViewById(R.id.msg_list);
        toolbar = findViewById(R.id.msg_toolbar);
        msg_say = findViewById(R.id.msg_say);
        emoji = findViewById(R.id.msg_emoji);
        send = findViewById(R.id.msg_send);
        linearLayout = findViewById(R.id.linear);
        initData();
        initView();
        initStatusBar();
    }

    private void initStatusBar() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
            StatusBarUtils.setStatusBarColor(ItemDetail.this, R.color.colorLightGray);
        }
    }

    private void initData() {
        User user = (User) getIntent().getSerializableExtra("user_data");
        toolbar.setTitle(user.getName());

        Msg msg = new Msg("hello,hello,hello,hello,hello,hello", Msg.type_received);
        list.add(msg);
        Msg msg1 = new Msg("hello", Msg.type_sent);
        list.add(msg1);


    }

    private void initView() {
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(linearLayoutManager);
        msgAdapter = new MsgAdapter(list, context);
        recyclerView.setAdapter(msgAdapter);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        send.getLayoutParams().width = emoji.getLayoutParams().width;
        msg_say.addTextChangedListener(textWatcher);
        WithSoftUp.addLayoutListener(findViewById(R.id.parent), linearLayout);
        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (msg_say.getEditableText().length() >= 1) {
                    String content = msg_say.getText().toString();
                    if (!"".equals(content)) {
                        Msg msg = new Msg(content, Msg.type_sent);
                        list.add(msg);
                        Msg msg1 = new Msg(content, Msg.type_received);
                        list.add(msg1);
                        msgAdapter.notifyItemInserted(list.size() - 1);
                        recyclerView.scrollToPosition(list.size() - 1);
                        msg_say.setText("");

                    }
                } else {
                    Toast.makeText(context, "點擊add", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

    TextWatcher textWatcher = new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {

        }

        @SuppressLint("ResourceAsColor")
        @Override
        public void afterTextChanged(Editable s) {
            if (msg_say.getEditableText().length() >= 1) {
                send.setBackgroundResource(R.drawable.buttonbackground);
                send.setText("發送");
                send.getLayoutParams().height = emoji.getLayoutParams().height;
                send.getLayoutParams().width = emoji.getLayoutParams().width + 30;
                send.setTextColor(context.getResources().getColor(R.color.colorWhite));
            } else {
                send.setBackgroundResource(R.drawable.ic_add_24dp);
                send.getLayoutParams().height = emoji.getLayoutParams().height;
                send.getLayoutParams().width = emoji.getLayoutParams().width;
                send.setText("");
            }
        }
    };

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastx = x;
                lasty = y;
                break;
            case MotionEvent.ACTION_UP:
                int curx = x;
                int cury = y;

                if (curx-lastx>300&&Math.abs(cury-lasty)<200)
                    finish();
                break;
        }
        return super.dispatchTouchEvent(event);
    }

}

安卓模仿微信聊天界面(一)

druid數據源 xml配置

安卓摺疊佈局

安卓實現對Item長按點擊事件

安卓Retrofit的基本操作

自己總結的安卓面試題(一)

第二次安卓面試總結

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結