Angdroid Studio仿QQ界面实现简单的功能
2021/6/2 10:26:53
本文主要是介绍Angdroid Studio仿QQ界面实现简单的功能,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
写在前面
由于本人初学阶段,写这篇博客是总结所学的知识点,为后面的进阶打好基础
有任何关于代码和表述问题,欢迎评论区指出
楼主近期在学习关于安卓中Fragment
和ListView
中的知识,按照老师的要求模仿一下QQ界面 要求功能
- 有登录界面
- 密码不对提示密码不对
- 账号密码任一为空提示用户不能为空
- 登录成功提示登录成功
- 可以实现账号密码记住功能
- 有三个界面可以点击底部按钮实现页面的切换
- 实现按钮选中状态和未选中状态不一样
- 联系人界面
- 信息界面
- 状态界面
- 发送信息功能
- 点击信息界面中的任意消息可以进入发消息界面
- 可以实现点击发送按钮将所输入的文字显示在屏幕中
提示:本人用的IDE开发环境是Android Studio
API是30
目录结构一览
res中的文件
1. 登录界面
- 登录界面的布局文件
activity_main.xml
所用图标都可以在阿里巴巴图标网找到iconfont-阿里巴巴矢量图标库
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:orientation="vertical" tools:ignore="UselessParent"> <TextView android:drawableLeft="@drawable/qq" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="50dp" android:layout_marginLeft="120dp" android:gravity="center" android:text="QQ" android:textColor="#000000" android:textSize="35sp" app:drawableStartCompat="@drawable/qq" android:drawableStart="@drawable/qq" tools:ignore="UseCompatTextViewDrawableXml" android:layout_marginStart="120dp"> </TextView> <EditText android:id="@+id/userNameEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="100dp" android:hint="请输入用户名/账号/手机号" android:inputType="text" android:padding="5dp"> </EditText> <EditText android:id="@+id/passwordEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="40dp" android:hint="请输入密码" android:inputType="textPassword" android:padding="5dp"> </EditText> <ImageButton android:id="@+id/loginButton" android:layout_marginTop="60dp" android:layout_gravity="center" android:layout_width="60dp" android:layout_height="60dp" android:src="@drawable/login" android:background="#fff"> </ImageButton> </LinearLayout> </RelativeLayout>
所对应的MainActivity
- 其中的判断通过if语句判断用户是否输入和输入正确
- 提示 通过
Toast
的方式提示
package com.czie.qq; import androidx.appcompat.app.AppCompatActivity; import android.annotation.SuppressLint; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.ImageButton; import android.widget.Toast; public class MainActivity extends AppCompatActivity { private Context context; private EditText userNameEditText, passwordEditText; private ImageButton loginButton; private ShareHelper shareHelper; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); context=this; shareHelper=new ShareHelper(context); initview(); } private void initview() { userNameEditText = findViewById(R.id.userNameEditText); passwordEditText = findViewById(R.id.passwordEditText); loginButton = findViewById(R.id.loginButton); loginButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //进行登录页面的处理 String username = userNameEditText.getText().toString(); String password = passwordEditText.getText().toString(); if (username.length() > 0) { if (username.equals("zk")) { if (password.length() > 0) { if (password.equals("123")) { // 对账号和密码进行保存 shareHelper.save("username",username); shareHelper.save("password",password); startActivity(new Intent(MainActivity.this, HomeActivity.class)); Toast.makeText(MainActivity.this, "登录成功", Toast.LENGTH_SHORT).show(); } else { Toast.makeText(MainActivity.this, "密码不正确", Toast.LENGTH_LONG).show(); } } else { Toast.makeText(MainActivity.this,"请填写密码",Toast.LENGTH_LONG).show(); } } else { Toast.makeText(MainActivity.this,"用户名不正确",Toast.LENGTH_LONG).show(); } } else { Toast.makeText(MainActivity.this,"请填写用户名",Toast.LENGTH_LONG).show(); } } }); } @Override protected void onStart() { super.onStart(); userNameEditText.setText(shareHelper.read("username")); passwordEditText.setText(shareHelper.read("password")); } }
2. 记住密码功能
- 实现第一次登录成功后,再次登录会记住账号和密码的功能
这个功能我们用SharedPreferences
简单了解下什么是SharedPreferences
- SharedPreferences是Android平台上一个轻量级的存储辅助类,用来保存应用的一些常用配置,它提供了string,set,int,long,float,boolean六种数据类型。最终数据是以xml形式进行存储。在应用中通常做一些简单数据的持久化缓存。
package com.czie.qq; import android.content.Context; import android.content.SharedPreferences; public class ShareHelper { //两个功能 保存,读取 Context context; public ShareHelper() { } public ShareHelper(Context context) { this.context = context; } //保存 public void save(String key, String value) { SharedPreferences sharedPreferences = context.getSharedPreferences("iot1921", Context.MODE_PRIVATE); //创建一个输入值 SharedPreferences.Editor editor = sharedPreferences.edit(); editor.putString(key, value); editor.commit(); } //读取数据 public String read(String key) { SharedPreferences sharedPreferences = context.getSharedPreferences("iot1921", Context.MODE_PRIVATE); return sharedPreferences.getString(key, ""); } }
注意事项:
- 输入值记得提交,editor.commit();
- 在
MainACtivity
中记得在OnStart方法中使用ShareHelper.read传入需要记住的值!
预览一下成果!
3. Fragment界面跳转
这里有三个Fragment,所对应需要三个fragment布局界面
- 首先要创建3个按钮的切换xml
message.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/message_on" android:state_selected="true"/> <item android:drawable="@drawable/message_off" android:state_selected="false"/> </selector>
people.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/people_on" android:state_selected="true"/> <item android:drawable="@drawable/people_off" android:state_selected="false"/> </selector>
statue.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/statue_on" android:state_selected="true"/> <item android:drawable="@drawable/statue_off" android:state_selected="false"/> </selector>
然后在布局界面中使用
activity_home.xml
这个界面的布局可以随意发挥,本人做的比较简单,见谅
- 3个
ImageView
和1个FrameLayout
ImageView
分别绑定点击事件
<?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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:src="@drawable/basketball"> </ImageView> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:text="Upcoming"> </TextView> <TextView android:layout_width="50dp" android:layout_marginLeft="250dp" android:layout_height="match_parent" android:text="+ -" android:textSize="25sp"> </TextView> </LinearLayout> <FrameLayout android:layout_marginTop="10dp" android:id="@+id/frameLayout" android:layout_width="match_parent" android:layout_height="550dp"> </FrameLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:id="@+id/messageImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="60dp" android:background="@drawable/message" android:layout_weight="1" android:layout_marginStart="0dp"> </ImageView> <ImageView android:id="@+id/peopleImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="150dp" android:background="@drawable/people" android:layout_weight="1" android:layout_marginStart="150dp" tools:ignore="ContentDescription"> </ImageView> <ImageView android:id="@+id/statueImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="170dp" android:background="@drawable/statue" android:layout_weight="1" android:layout_marginStart="170dp" tools:ignore="ContentDescription"> </ImageView> </LinearLayout> </LinearLayout>
3.1 Fragement的界面编写
item_listview.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical" android:background="@drawable/backgrounds"> <ListView android:id="@+id/messagelistView" android:layout_width="match_parent" android:layout_height="wrap_content"> </ListView> </LinearLayout>
fragment_message.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical" android:background="@drawable/backgrounds"> <ListView android:id="@+id/messagelistView" android:layout_width="match_parent" android:layout_height="wrap_content"> </ListView> </LinearLayout>
fragment_people.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="30sp" android:textColor="#000000" android:text="这是联系人页面" tools:ignore="MissingConstraints"> </TextView> </LinearLayout>
fragment_statue.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="30sp" android:textColor="#000000" android:text="这是动态页面" tools:ignore="MissingConstraints"> </TextView> </LinearLayout>
Fragment布局写完就是重点如何在FrameLayout
中加载
我们还需要创建布局所对应的Fragment
每个Fragment要指定加载的布局和调用的方法
onCreateView():每次创建、绘制该Fragment的View组件时回调该方法,Fragment将会显示该方法返回的View组件。
onActivityCreated():当Fragment所在的Activity被启动完成后回调该方法。
在这个文件中需要实现
- 点击进入聊天界面
- 可以发送消息显示在屏幕上
我们通过List
集合中存放Map
Map
中所存放的Key就是所创建的Names
数组,Value就是Images
数组
通过创建SimpleAdapter对象来加载fragment_message
讲下这三行关键的代码
//加载在哪个布局界面 messagelistView= getActivity().findViewById(R.id.messagelistView); //适配器中的参数 /** context 上下文 dataList 集合中存放的值 R.layout.item_listview 加载的布局界面 new String[]{"Name","Image"} String数组 new int[]{R.id.NameTextView,R.id.ImageView} int数组 获取id */ simpleAdapter=new SimpleAdapter(context,dataList,R.layout.item_listview, new String[]{"Name","Image"}, new int[]{R.id.NameTextView,R.id.ImageView}); //加载适配器 messagelistView.setAdapter(simpleAdapter);
一个获取数据的方法getData()
//list获取数据 public void getData(){ //遍历数组中的数据 添加到list中 for (int i = 0; i < Names.length; i++) { //新建map 存放数组中的数据 最后存放在list中 HashMap<String, Object> map = new HashMap<String, Object>(); map.put("Name",Names[i]); map.put("Image",Images[i]); dataList.add(map); } }
MessageFragment
package com.czie.qq; import android.app.Fragment; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.ListView; import android.widget.SimpleAdapter; import android.widget.Toast; import androidx.annotation.Nullable; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class MessageFragment extends Fragment { private Context context; private ListView messagelistView; List<Map<String,Object>> dataList=new ArrayList<Map<String,Object>>(); String [] Names={"一号","二号","三号","四号","五号","六号","七号"}; int [] Images={R.mipmap.kaochang,R.mipmap.kaojitui,R.mipmap.kaojichi,R.mipmap.kaoqiezi,R.mipmap.kaolajiao,R.mipmap.kaojinzhengu ,R.mipmap.kaonanguabing}; //创建SimpleAdapter对象 private SimpleAdapter simpleAdapter; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_message,container,false); } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); context=getActivity(); initView(); } private void initView() { messagelistView= getActivity().findViewById(R.id.messagelistView); getData(); simpleAdapter=new SimpleAdapter(context,dataList,R.layout.item_listview, new String[]{"Name","Image"}, new int[]{R.id.NameTextView,R.id.ImageView}); messagelistView.setAdapter(simpleAdapter); //listView的项点击监听事件 messagelistView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { //获取当前项的数据 String name=dataList.get(i).get("Name").toString(); Intent intent=new Intent(getActivity(),TalkActivity.class); startActivity(new Intent(getActivity(), TalkActivity.class)); intent.putExtra("name",name); Toast.makeText(context,"当前点击的选项名称是"+name,Toast.LENGTH_SHORT).show(); } }); } //list获取数据 public void getData(){ //遍历数组中的数据 添加到list中 for (int i = 0; i < Names.length; i++) { //新建map 存放数组中的数据 最后存放在list中 HashMap<String, Object> map = new HashMap<String, Object>(); map.put("Name",Names[i]); map.put("Image",Images[i]); dataList.add(map); } } }
PeopleFragment
package com.czie.qq; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import androidx.annotation.Nullable; public class PeopleFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_people,container,false); } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); } }
StatueFragment
package com.czie.qq; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import androidx.annotation.Nullable; public class StatueFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_statue,container,false); } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); } }
最后在HomeActivity
中使用
了解什么是FragmentTransaction
使用Fragment时,可以通过用户交互来执行一些动作,比如增加、移除、替换等。
所有这些改变构成一个集合,这个集合被叫做一个transaction
HomeActivity
- 监听
ImgaeView
的点击事件 - 初始化
ImageView
的选中状态为false 通过方法传入参数从而判断哪个ImageView
被点击 将被点击的状态设为false showFragment(Fragment fragment)
中通过隐藏Fragment
,点击ImageView
时再判断显示哪个Fragment
package com.czie.qq; import android.app.Activity; import android.app.Fragment; import android.app.FragmentManager; import android.app.FragmentTransaction; import android.os.Bundle; import android.view.View; import android.widget.ImageView; @SuppressWarnings({"all"}) public class HomeActivity extends Activity implements View.OnClickListener { private ImageView messageImageView, peopleImageView, statueImageView; private MessageFragment messageFragment; private PeopleFragment peopleFragment; private StatueFragment statueFragment; private final FragmentManager fragmentManager = getFragmentManager(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); initView(); initFragment(); showFragment(statueFragment); } private void initView() { messageImageView = findViewById(R.id.messageImageView); peopleImageView = findViewById(R.id.peopleImageView); statueImageView = findViewById(R.id.statueImageView); messageImageView.setOnClickListener(this); peopleImageView.setOnClickListener(this); statueImageView.setOnClickListener(this); } private void initFragment() { messageFragment = new MessageFragment(); peopleFragment = new PeopleFragment(); statueFragment = new StatueFragment(); //展示 FragmentTransaction transaction = fragmentManager.beginTransaction(); transaction.add(R.id.frameLayout, messageFragment); transaction.add(R.id.frameLayout, peopleFragment); transaction.add(R.id.frameLayout, statueFragment); transaction.commit(); } @Override public void onClick(View view) { switch (view.getId()) { case R.id.messageImageView: init(messageImageView); showFragment(messageFragment); break; case R.id.peopleImageView: init(peopleImageView); showFragment(peopleFragment); //startActivity(new Intent(HomeActivity.this, ListViewActivity.class)); break; case R.id.statueImageView: init(statueImageView); showFragment(statueFragment); break; default: break; } } public void init(ImageView imageView) { messageImageView.setSelected(false); peopleImageView.setSelected(false); statueImageView.setSelected(false); imageView.setSelected(true); } //展示指定的Fragment //定义当前页面 private Fragment curFragment = new Fragment(); public void showFragment(Fragment fragment) { //如果当前的fragment与传入的fragment是同一个,呢么将返回 if (curFragment.equals(fragment)) { return; } FragmentTransaction transaction = fragmentManager.beginTransaction(); transaction.hide(messageFragment); transaction.hide(peopleFragment); transaction.hide(statueFragment); transaction.show(fragment); transaction.commit(); } }
注意事项
- 记得
transaction
要commit
预览一下成果!
4. 聊天界面
item_talking.xml
<?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="horizontal" android:padding="10dp" android:gravity="right"> <TextView android:id="@+id/talkTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="300dp" android:text="烤肠" android:textSize="25sp" android:textColor="#000000" android:background="#cef" android:layout_marginStart="300dp"> </TextView> <ImageView android:id="@+id/ImageView" android:layout_width="50dp" android:layout_height="50dp" android:background="@mipmap/kaochang"> </ImageView> </LinearLayout>
activity_talk.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textColor="#000000" android:text="康小庄" android:id="@+id/NameTextView" android:background="#44cef6"> </TextView> <ListView android:id="@+id/listView2" android:layout_width="match_parent" android:layout_height="600dp" android:layout_weight="1" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:layout_gravity="bottom" > <EditText android:id="@+id/inputEditText" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1"> </EditText> <Button android:id="@+id/sendButton" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="3" android:text="发送"> </Button> </LinearLayout> </LinearLayout> </RelativeLayout>
TalkActivity
- 通过
Handler
来实现消息发出去之后 对话框置为null
- 通过
simpleAdapter
实现加载到哪个布局界面的id
package com.czie.qq; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.ListView; import android.widget.SimpleAdapter; import android.widget.TextView; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class TalkActivity extends Activity implements View.OnClickListener { private EditText inputEditText; private SimpleAdapter simpleAdapter; List<Map<String,String>> list=new ArrayList<Map<String,String>>(); @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_talk); Context context = this; initView(); TextView nameTextView = findViewById(R.id.NameTextView); Intent intent=getIntent(); String name=intent.getStringExtra("name"); nameTextView.setText(name); } private void initView() { inputEditText=findViewById(R.id.inputEditText); Button sendButton = findViewById(R.id.sendButton); ListView listView2 = findViewById(R.id.listView2); listView2.setDivider(null); simpleAdapter=new SimpleAdapter(this,list,R.layout.item_talking,new String[]{"message"},new int[]{R.id.talkTextView}); listView2.setAdapter(simpleAdapter); sendButton.setOnClickListener(this); } @Override public void onClick(View view) { sendMessage(); handler.sendEmptyMessage(0); } public void sendMessage(){ String message=inputEditText.getText().toString(); if (message.length()>0){ HashMap<String, String> map = new HashMap<>(); map.put("message",message); list.add(map); inputEditText.setText(""); } } Handler handler=new Handler(){ @Override public void handleMessage(@NonNull Message msg) { simpleAdapter.notifyDataSetChanged(); } }; }
总结:
- 学会了简单的页面跳转功能,提高思考的能力,学会如何用较少代码实现功能
- 还有许多不足仍需努力
写在最后:
- 有任何错误欢迎评论区指出,及时改正!
这篇关于Angdroid Studio仿QQ界面实现简单的功能的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南