第三章 制作Nine-Patch图片与编写精美聊天界面
来源:互联网 发布:java cms 编辑:程序博客网 时间:2024/05/01 14:09
一、制作Nine-Patch图片
1、准备好一张聊天气泡图片message_left
2、修改activity_main中代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/message_left"></LinearLayout>
运行程序,发现整张图片被均匀拉伸了,显得很难看,这时我们就可以用9-patch图片来改善这种状况
3、开始制作Nine-Patch图片
①先将message_left图片放到drawable文件夹中
②在AndroidStudio中drawable中找到图片,右键图片,选create 9-patch file 并将create出的文件放在drawable文件夹中
注:第一行代码书中这里是用draw9patch.bat文件制作9-patch图片,然而最新版的Androidstudio已经将这个功能集成进软件中了,所以在Android Sdk目录下的tools文件夹中是找不到draw9patch.bat文件的
③双击create出的.9.png文件,按需求制作9-patch图片,制作好了用这张图替换原图片(将原图删掉即可)就好了
4、再次运行程序
发现图片拉伸的时候只拉伸我们指定的区域了,界面变得更加美观了
二、编写精美聊天界面
1、按上述步骤再制作一个message_right.9.png图片
2、由于之后会用到RecyclerVIew所以先向build.gradle文件中添加库
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support:recyclerview-v7:25.3.1' compile 'com.android.support.constraint:constraint-layout:1.0.2' testCompile 'junit:junit:4.12'}
3、制作聊天界面雏形
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="match_parent" android:layout_width="match_parent" android:background="#d8e0e8"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/input_text" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="Type Something here" android:maxLines="2"/> <Button android:id="@+id/send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Send" android:textAllCaps="false"/> </LinearLayout></LinearLayout>
效果图如下:
4、定义实体消息类Msg
新建Msg.java
package com.example.kim.uibestpractice;/** * Created by KIM on 2017/4/30. */public class Msg { public static final int TYPE_RECEIVED=0; //表示这是一条收到的消息 public static final int TYPE_SENT=1; //表示这是一条发出的消息 private String content; //表示消息内容 private int type; //表示消息类型 public Msg(String content,int type){ this.content=content; this.type=type; } public String getContent(){ return content; } public int getType(){ return type; }}
5、编写RecyclerView的子项布局
新建msg_item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp"> <LinearLayout android:id="@+id/left_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:background="@drawable/message_left"> <TextView android:id="@+id/left_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="5dp" android:textColor="#fff"/> </LinearLayout> <LinearLayout android:id="@+id/right_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:background="@drawable/message_right"> <TextView android:id="@+id/right_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="5dp" /> </LinearLayout></LinearLayout>
6、创建RecyclerView的适配器类MsgAdapter
新建类MsgAdapter
package com.example.kim.uibestpractice;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.LinearLayout;import android.widget.TextView;import java.util.List;/** * Created by KIM on 2017/4/30. */public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder> { private List<Msg> mMsgList; //定义一个内部类ViewHolder并继承RecyclerView.ViewHolder static class ViewHolder extends RecyclerView.ViewHolder { LinearLayout leftLayout; LinearLayout rightLayout; TextView leftMsg; TextView rightMsg; //用于获得MsgLayout和Msg的实例 public ViewHolder(View view) { super(view); leftLayout = (LinearLayout) view.findViewById(R.id.left_layout); rightLayout = (LinearLayout) view.findViewById(R.id.right_layout); leftMsg = (TextView) view.findViewById(R.id.left_msg); rightMsg = (TextView) view.findViewById(R.id.right_msg); } } //用于展现获得的数据 public MsgAdapter(List<Msg>msgList){ mMsgList=msgList; } //用于创建ViewHolder实例 public ViewHolder onCreateViewHolder(ViewGroup parent,int viewType){ View view= LayoutInflater.from(parent.getContext()).inflate (R.layout.msg_item,parent,false); return new ViewHolder(view); } // 对Recycler的每个子项进行设定,用position来获得当前实例 public void onBindViewHolder(ViewHolder holder,int position){ Msg msg=mMsgList.get(position); if(msg.getType()==Msg.TYPE_RECEIVED){ //如果是收到的消息,则显示左边的消息布局,隐藏右边的消息布局 holder.leftLayout.setVisibility(View.VISIBLE); holder.rightLayout.setVisibility(View.GONE); holder.leftMsg.setText(msg.getContent()); }else if(msg.getType()==Msg.TYPE_SENT){ holder.leftLayout.setVisibility(View.GONE); holder.rightLayout.setVisibility(View.VISIBLE); holder.rightMsg.setText(msg.getContent()); } } //告诉Recycler有多少子项 public int getItemCount(){ return mMsgList.size(); }}
7、修改MainActivity来为RecyclerView初始化一些数据
package com.example.kim.uibestpractice;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.View;import android.widget.Button;import android.widget.EditText;import android.widget.LinearLayout;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity { private List<Msg>msgList = new ArrayList<>(); private EditText inputText; private Button send; private RecyclerView msgRecyclerView; private MsgAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initMsg();//对数据进行初始化 //引入activity_main中的布局 inputText=(EditText)findViewById(R.id.input_text); send=(Button)findViewById(R.id.send); msgRecyclerView=(RecyclerView)findViewById(R.id.recycler_view); LinearLayoutManager layoutManager=new LinearLayoutManager(this); msgRecyclerView.setLayoutManager(layoutManager); adapter=new MsgAdapter(msgList); msgRecyclerView.setAdapter(adapter); send.setOnClickListener(new View.OnClickListener(){ public void onClick(View v){ String content = inputText.getText().toString(); //获得EditText中的内容并转换成字符串 //如果RditText中的内容非空 if(!"".equals(content)){ Msg msg = new Msg(content,Msg.TYPE_SENT); msgList.add(msg); adapter.notifyItemInserted(msgList.size()-1); //用于通知RecyclerView有新数据插入,刷新ListView中的显示 msgRecyclerView.scrollToPosition(msgList.size()-1); //当有新消息时,将ListView定位到最后一行 inputText.setText(""); //清空输入框 } } }); } public void initMsg(){ Msg msg1 = new Msg("Hello1!",Msg.TYPE_RECEIVED); msgList.add(msg1); Msg msg2 = new Msg("Hello2",Msg.TYPE_SENT); msgList.add(msg2); Msg msg3 = new Msg("Hello3",Msg.TYPE_RECEIVED); msgList.add(msg3); }}
- 第三章 制作Nine-Patch图片与编写精美聊天界面
- Android中制作Nine-Patch图片,并编写聊天界面
- 制作Nine-Patch图片
- 制作Nine-Patch图片
- 制作 Nine-Patch 图片
- 制作Nine-Patch图片
- 11读书笔记之编写界面之实践--制作Nine-Patch图片
- 自己制作Nine-Patch图片
- Nine-patch图片的制作
- Android中Nine-Patch(.9)图片介绍与制作
- Android中Nine-Patch(.9)图片介绍与制作
- android Nine-Patch的使用(制作聊天界面必学)
- 编写精美的聊天界面
- 【Android】47、制作Nine-Patch 图片
- Android制作和使用Nine-Patch图片
- Android 9-patch图片制作流程(nine-patch)
- 【Android】48、编写精美的聊天界面
- android nine patch图片
- [Vue.js启航]——数据的双向绑定
- VS如何连接Mysql
- 解决重复提交表单
- itchat4j -- 用Java扩展个人微信号的能力
- python3 if elif else 分支语句
- 第三章 制作Nine-Patch图片与编写精美聊天界面
- java Servlet3.0 使用注解标注Servlet @WebServlet
- BMP文件格式要点
- OpenBLAS矩阵乘法源码结构分析
- Java反射机制详解
- Java正则表达式的语法与示例
- Linux基础学习笔记之echo
- HTTP协议详解(真的很经典)
- 后台学习八---ajax运用