3.7チャットのインターフェイスを書く - 0システマティックアンドロイドから
記事カタログのこのシリーズ：もっとブティック記事のカテゴリ
継続的にこのシリーズに更新....
ベストプラクティス3.7インタフェースの作成
以前、ここでの練習に非常に多くのUI開発、について学び、美しいチャットインタフェースを行います。
3.7.1生産ナインパッチの写真
実際の前に、最初のナインパッチの画像を作成する方法の少しの知識を学びます。
ナインパッチの特別な処理である.png画像、これらの領域は、これらの領域ではないしながら延伸してもよい指定することができます。
見てくださいNine-Patch、画像の実際の効果を。
まず、背景として通常の画像を使用します
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@mipmap/message_"
android:orientation="vertical">
</LinearLayout>
業績
画像の幅が画面の幅全体を満たしていないので、私たちは、非常に貧しい、全体像を均一に延伸した、効果は非常に悪いです。このような状況を見ることができ、我々は使用することができますNine-Patch改善される写真を。
作成する方法nine-patch、それの写真を？
まず、あなたには、Android Studioでなりたいを選択しnine-patch、右クリックして、絵---> 9-パッチファイルを作成しますナインパッチ画像を作成することができます。
私たちは、絵の4つの国境の黒ドットの数を描くことができます。で上部および左境界現在の画像の一部が必要であるストレッチが黒ドットマークストレッチいつエリアにおける下の境界と右境界線を一部表す内容の領域が配置されます。あなたは、エッジで絵を描くようにマウスでドラッグすることができます。押しながらShift消去するボタンとドラッグを。
9パッチを使用することの効果で見てみましょう
だから、唯一のストレッチに絵のニーズが指定された領域を伸ばすときに。
3.7.2美しく書かれたチャットインターフェイス
聊天界面肯定有收到的消息和发送的消息，上面我们已经把发送消息的背景图制作好了，再制作一张发送消息的背景图。
图片资源都准备好了，就可以写代码了。
编写主页面布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rlv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/et_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="发送信息"
android:maxLines="2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发送"
android:id="@+id/bt_send"/>
</LinearLayout>
</LinearLayout>
建立聊天的消息对象
public class Msg {
public static final int TYPE_RECEIVE = 0;
public static final int TYPE_SEND = 1;
private String content;
public Msg(String content, int type) {
this.content = content;
this.type = type;
}
private int type;
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;
}
}
type 用来指定消息的类型，是发送的消息还接受的消息
然后编写 RecyclerView 的子项布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:orientation="vertical">
<LinearLayout
android:id="@+id/ll_left"
android:background="@mipmap/message_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="@+id/tv_left"
android:textColor="#FFF"
android:layout_margin="10dp"/>
</LinearLayout>
<LinearLayout
android:layout_gravity="right"
android:id="@+id/ll_right"
android:background="@mipmap/message_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="@+id/tv_right"
android:layout_margin="10dp"/>
</LinearLayout>
</LinearLayout>
这里我们把接受消息和发送消息的布局都写进来了，代码中根据消息的类型来调用 visible 方法，显示对应的消息。
建立适配器
public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.MsgViewHolder> {
private List<Msg> list;
public MsgAdapter(List<Msg> list){
this.list = list;
}
class MsgViewHolder extends RecyclerView.ViewHolder{
LinearLayout llLeft,llRight;
TextView tvLeft,tvRight;
public MsgViewHolder(@NonNull View itemView) {
super(itemView);
llLeft =itemView.findViewById(R.id.ll_left);
llRight =itemView.findViewById(R.id.ll_right);
tvLeft =itemView.findViewById(R.id.tv_left);
tvRight =itemView.findViewById(R.id.tv_right);
}
}
@NonNull
@Override
public MsgViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_item,parent,false);
MsgViewHolder viewHolder = new MsgViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull MsgViewHolder holder, int position) {
Msg msg = list.get(position);
// 这里根据消息的类型来选择不同的布局
if (msg.getType() == Msg.TYPE_RECEIVE){
holder.llLeft.setVisibility(View.VISIBLE);
holder.llRight.setVisibility(View.GONE);
holder.tvLeft.setText(msg.getContent());
}else {
holder.llRight.setVisibility(View.VISIBLE);
holder.llLeft.setVisibility(View.GONE);
holder.tvRight.setText(msg.getContent());
}
}
@Override
public int getItemCount() {
return list.size();
}
}
然后写 Activity 代码
public class MsgActivity extends AppCompatActivity {
List<Msg> list =new ArrayList<>();
EditText text ;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_nine_patch);
initData();
final RecyclerView recyclerView = findViewById(R.id.rlv);
final MsgAdapter msgAdapter = new MsgAdapter(list);
text = findViewById(R.id.et_info);
Button bt = findViewById(R.id.bt_send);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(msgAdapter);
bt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Random random = new Random();
// 这里还是利用随机数来生成消息的类型
int count = random.nextInt(20);
Msg msg = new Msg(text.getText()+"count:"+count,count%2);
list.add(msg);
// 表示在消息的末尾插入内容
msgAdapter.notifyItemInserted(list.size()-1);
// 让 RecyclerView 自动滚动到最底部
recyclerView.scrollToPosition(list.size()-1);
// 清空内容
text.setText("");
}
});
}
public void initData(){
Random random = new Random();
for (int i=0;i<40;i++){
int count = random.nextInt(20);
Msg msg = new Msg("消息嗯哼"+i+"count:"+count,count%2);
list.add(msg);
}
}
}
notifyItemInserted() 方法，用于通知列表有新的数据插入了，这样新增加的一条消息才能显示出来。
scrolltoPosition() 方法将数据定位到最后一行，保证我们可以看到最后发送的内容。