当前位置： 首页 > news >正文

android开发

news 2024/11/15 4:20:59

文章目录

  • android开发 类微信界面
    • 整体框架展示：
      • 主页Fragment_MainActivity2：
      • 1. 聊天界面
      • 2. 用户界面
        • 用户界面的跳转
      • 3. 朋友圈界面
      • 4. 我的界面

android开发 类微信界面

整体效果展示：

QQ录屏20241114222422 -original-original

整体框架展示：

  1. 4个主要的fragment页面，聊天、用户、朋友圈、我的 ，如下：

    image-20241113212914229

  2. 配置代码如下：

    fragment1
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/frame_container"android:layout_width="match_parent"android:layout_height="wrap_content"tools:context=".Fragment_1"android:background="@drawable/backgroud2"><!-- TODO: Update blank fragment layout --><TextViewandroid:id="@+id/textview1"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="这是聊天界面"android:textAlignment="center"android:textSize="34sp" /></FrameLayout>fragment2：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/frame_container"android:layout_width="match_parent"android:layout_height="wrap_content"tools:context=".Fragment_1"><!-- TODO: Update blank fragment layout --><TextViewandroid:id="@+id/textview2"android:layout_width="match_parent"android:layout_height="match_parent"android:text="联系人："android:textAlignment="center"android:textColor="#03A9F4"android:textColorLink="#2196F3"android:textSize="25sp" /><androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginStart="8dp"android:layout_marginTop="32dp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>fragment3：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/frame_container"android:layout_width="match_parent"android:layout_height="wrap_content"tools:context=".Fragment_1"android:background="@drawable/backgroud"><!-- TODO: Update blank fragment layout --><TextViewandroid:id="@+id/textview3"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="这是朋友圈界面"android:textAlignment="center"android:textSize="34sp" /></FrameLayout>fragment4：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/frame_container"android:layout_width="match_parent"android:layout_height="wrap_content"tools:context=".Fragment_1"android:background="@drawable/backgroud3"><!-- TODO: Update blank fragment layout --><TextViewandroid:id="@+id/textview4"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="这是我的界面"android:textAlignment="center"android:textSize="34sp" /></FrameLayout>

主页Fragment_MainActivity2：

  1. 要在一个Activity中根据不同的按键，分别显示不同的fragmentUI界面。先设计一个主页面，其中用 FrameLayout 来引入4个不同的fragment界面。主页面和两个top、bottomUI设计如下：

    image-20241113213446752

    主页面activity_fragment_main2中通过include来引入 top 、 bottom 两个页面，主页面设计如下，中间用FrameLayout组件进行填充，为后面显示的fragment页面留空间：

    <?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"tools:context=".Fragment_MainActivity2"><include layout="@layout/layout_top" /><FrameLayoutandroid:id="@+id/fragment_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"><TextViewandroid:id="@+id/textView5"android:layout_width="match_parent"android:layout_height="wrap_content"android:textAlignment="textStart"android:textSize="34sp" /></FrameLayout><include layout="@layout/layout_bottom" />
</LinearLayout>

  2. Fragment_MainActivity2代码解释：

    首先是4个fragment.java代码，通过继承Fragment类，重写其中的onCreateView方法来显示自己定义的UI界面 ，准备4个fragment.java文件，分别引入上面设计的4个fragment.xml文件：

    image-20241113214412961

    在Fragment_MainActivity2中通过 manager.beginTransaction() 开始一个事务transaction，并new 4个Fragment对象作为transaction 的操作对象：

    // 4个底部按钮 后面通过监听这4个按钮 来显示不同的fragment
layout1 = findViewById(R.id.layout1);
layout2 = findViewById(R.id.layout2);
layout3 = findViewById(R.id.layout3);
layout4 = findViewById(R.id.layout4);// 获取 当前Activity的 FragmentManager实例 用于管理Fragment事务
manager = getSupportFragmentManager();
// 开始一个新的Fragment事务
transaction = manager.beginTransaction();// 在Activity 中添加一个 Fragment
// 创建一个 Fragment 实例
fragment_1 = new Fragment_1();
fragment_2 = new Fragment_2();
fragment_3 = new Fragment_3();
fragment_4 = new Fragment_4();// 初始化 transaction 中的事件
intial();
// app开始时显示fragment_1
fragment_hide(fragment_1);// 点击事件的监听器
layout1.setOnClickListener(this);
layout2.setOnClickListener(this);
layout3.setOnClickListener(this);
layout4.setOnClickListener(this);

    为了让4个fragment页面不重复显示，在transaction事务中将add进的四个fragment全部隐藏，然后通过 定义接口 来显示指定的fragment页面，在Fragment_MainActivity2中定义OnClickListener接口中的 onClick方法 ，这样通过点击不同的layout，触发不同的监听、就能显示不同fragment：

    image-20241113220023564

    // 将所有fragment添加到一个容器视图中
private void intial() {// fragment_1添加到一个容器视图中 ==> 当前资源文件activity_fragment_main2的 fragment_content中// ==> fragment_1的内容将显示在fragmentlayout指定的位置。transaction.add(R.id.fragment_content,fragment_1);transaction.add(R.id.fragment_content,fragment_2);transaction.add(R.id.fragment_content,fragment_3);transaction.add(R.id.fragment_content,fragment_4);
}// 一个fragment封装 用来显示指定的fragment页面 传入的参数即为要显示的页面
protected void fragment_hide(Fragment fragment){// 隐藏所有 fragmenttransaction.hide(fragment_1);transaction.hide(fragment_2);transaction.hide(fragment_3);transaction.hide(fragment_4);// 显示指定的 fragment页面transaction.show(fragment);// 提交事务transaction.commit();
}
// 重写 View.OnClickListener 接口中定义的onClick方法
@Override
public void onClick(View v) {if (v.getId() == R.id.layout1) {// 处理 layout1 的点击事件transaction = manager.beginTransaction();fragment_hide(fragment_1);} else if (v.getId() == R.id.layout2) {// 处理 layout2 的点击事件transaction = manager.beginTransaction();fragment_hide(fragment_2);} else if (v.getId() == R.id.layout3) {// 处理 layout3 的点击事件transaction = manager.beginTransaction();fragment_hide(fragment_3);} else if (v.getId() == R.id.layout4) {// 处理 layout4 的点击事件transaction = manager.beginTransaction();fragment_hide(fragment_4);}
}

1. 聊天界面

  1. 因为可能的聊天会比较多，所以采用 recyclerView组件 搭配adpter来显示，并用Intent来进行跳转至进入聊天界面：

    [!NOTE]

    这里我直接将聊天记录写死在程序中，但是聊天记录是可以从文件（或者数据库）中读取。

    fragment设计修改如下，主要是添加一个recyclerView组件(左)，再给recyclerView的每一行做一个item（中），以及群聊内部的详细页面（右）：

    image-20241114214335644

    配置文件如下：

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"tools:ignore="MissingConstraints"><TextViewandroid:id="@+id/textView"android:layout_width="match_parent"android:layout_height="81dp"android:text="联系人"android:textAlignment="center"android:textSize="48sp" /><ImageViewandroid:id="@+id/imageView_people"android:layout_width="match_parent"android:layout_height="wrap_content"tools:srcCompat="@tools:sample/avatars" /></LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout><?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/re"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><ImageViewandroid:id="@+id/imageView"android:layout_width="0dp"android:layout_height="60dp"android:layout_weight="1"tools:srcCompat="@tools:sample/avatars" /><TextViewandroid:id="@+id/rv_textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:text="TextView"android:textSize="30dp" /></LinearLayout>

  2. fragment1中代码涉及如下，主要是给adpter2传入参数，来显示指定行：

     // 引入自己的UI界面
// 引入资源
View view = inflater.inflate(R.layout.fragment_1, container, false);
recyclerView = view.findViewById(R.id.recyclerView_1);
recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));// 为每一行添加元素
list = new ArrayList<>();
list2 = new ArrayList<>();// 传入群聊图片id
int[] name = {R.drawable.group_chats1,R.drawable.group_chats2,R.drawable.group_chats3,R.drawable.people_4};
for (int i = 0; i < 10 ; i++){// 为每一行添加一个元素list2.add(name[i%4]);list.add("这是第" + i + "个群聊");
}// 用 list来实例化一个 adpter对象
adpter = new adpter2(getContext(),list,list2);
// 设置recyclerView
recyclerView.setAdapter(adpter);
Log.d("lzl","fragment....");

  3. adpter2主要代码解释：

    @Override
// 使用自己定义的 MyViewHolder类 来设置每一行的内容
public void onBindViewHolder(@NonNull adpter2.MyViewHolder holder, @SuppressLint("RecyclerView") int position) {// 显示群聊的名字holder.textView.setText(list.get(position).toString());// 显示群聊的图片holder.imageView.setImageResource((Integer) list2.get(position));// 给text设置监听 ==> 点击进入群聊内部holder.textView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 跳转到群聊详细页面（群聊内部）Intent intent = new Intent(mcontext, MainActivity2.class);// 传参 传入textview的内容intent.putExtra("key1",holder.textView.getText());mcontext.startActivity(intent);}});
}

  4. MainActivity2代码如下，主要导入了设计的UI界面，以及接收adpter传入的参数：

    textView = findViewById(R.id.textView6);
// 获取一个intent对象 其他的activity 传参过来
Intent intent = getIntent();// 获取传递的参数 通过设置的变量名 --> key1 字符串参数
String string1 = intent.getStringExtra("key1");if (string1 != null)
{// 在text中显示// 设置textview的内容textView.setText("群聊：" + string1);
}

2. 用户界面

  1. 由于用户界面中连续人众多，所以考虑使用 recyclerView组件 搭配adpter来显示。下面看adpter设计：

    recyclerView设计（左），recyclerView中的每一行设计（右）

    image-20241114101420861

  2. 然后在fragment_2中引用左边这个资源，并新建一个adpter.java文件，用来设置列表中的每一行：

    fragment中的主要代码是onCreateView方法 中传递参数，并用adpter来设置recyclerView

    @Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// 引入资源View view = inflater.inflate(R.layout.fragment_2, container, false);// 找到recyclerView组件recyclerView = view.findViewById(R.id.recyclerView);recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));// 为每一行添加元素 列表传参list = new ArrayList<>();list2 = new ArrayList<>();// 传入图片idint[] name = {R.drawable.people_1,R.drawable.people_2,R.drawable.people_3,R.drawable.people_4};for (int i = 0; i < 100 ; i++){// 为每一行添加一个元素list2.add(name[i%4]);list.add("这是第" + i + "个联系人");}// 用 list来实例化一个 adpter对象adpter = new adpter(getContext(),list,list2);// 设置recyclerViewrecyclerView.setAdapter(adpter);Log.d("lzl","fragment....");// 返回界面return  view;}

    adpter文件设计如下：

    其中要声明adpter的构造方法，方便new的时候传参。其次定义一个自己的内部类MyViewHolder，用来定义每一行的元素，因为后续**public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)**会给每一行返回一个parent，用来设置每一行。

    然后在**public void onBindViewHolder(@NonNull MyViewHolder holder, @SuppressLint(“RecyclerView”) int position)**中接收上面返回的holder，然后根据fragment传入的参数设置每一行的每一个组件。

    [!NOTE]

    这里fragment给adpter传参是在程序中写死了的，也可以从文件中（或者数据库中）读出需要的内容，再传递给adpter进行显示

    // adpter构造函数 可以接收两个list类型的参数
public adpter(Context context, List list, List list2) {this.list = list;this.list2 = list2;this.mcontext = context;
}// 定义内部类 自己的 ViewHolder 继承自 RecyclerView.ViewHolder 用于onCreateViewHolder创建
// 定义ViewHolder 每一行有什么class MyViewHolder extends RecyclerView.ViewHolder{// 成员变量TextView textView;ImageView imageView;// 自己类的构方法 表示 recyclerView每行有哪些属性public MyViewHolder(@NonNull View itemView) {super(itemView);// 拿到 layout_item中的rv_textView1textView = itemView.findViewById(R.id.rv_textView1);// 设置图片imageView = itemView.findViewById(R.id.imageView);}
}@NonNull    // 该方法不能返回空
@Override
// 返回一个 MyViewHolder 实例 holder
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {Context context = parent.getContext();// 返回一个 View 定义每一行 layout_item压入View view = LayoutInflater.from(context).inflate(R.layout.layout_item,parent,false);// 返回一个 MyViewHolder实例 holder为每一行的初始对象MyViewHolder holder = new MyViewHolder(view);return holder;
}@Override
// 使用自己定义的 MyViewHolder类 来设置每一行的内容
public void onBindViewHolder(@NonNull MyViewHolder holder, @SuppressLint("RecyclerView") int position) {// position 表示list中的第几个元素 即用list来设置 recyclerView 中每行的内容holder.textView.setText(list.get(position).toString());// 显示图片holder.imageView.setImageResource((Integer) list2.get(position));// 给text设置监听holder.textView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 这里给每一个 textView设置监听，跳转到另外一个页面（用来表示点击列表项 --> 跳转到详细页面）Intent intent = new Intent(mcontext, MainActivity.class);// 传参 给跳转到的MainActivity 传入参数、便于定向显示每一行的详细页面intent.putExtra("key1",holder.textView.getText());mcontext.startActivity(intent);}});
}@Override
// 返回 RecyclerView 中的项数。这是告诉 RecyclerView 需要显示多少项
public int getItemCount() {// 返回 list的大小 即 recyclerView能显示的总行数return list.size();
}
用户界面的跳转

  1. 前面在adpter中监听textView组件，进而跳转到详细页面，下面看跳转的目标Activity中如何显示详细信息：

    详细页面的UI设计如下：

    image-20241114103651276

    在目标Activity中完成的两个任务：1. 接收源Activity的参数、进而显示指定的联系人详细页面。2. 设计一个service，采用bind方法在启动Activity时自动服务启动。

    接收参数如下：

    // 获取一个intent对象 其他的activity 传参过来
Intent intent = getIntent();// 获取传递的参数 通过设置的变量名 --> key1 字符串参数
String string1 = intent.getStringExtra("key1");
if (string1 != null)
{// 在text中显示// 设置textview的内容textView.setText(string1);
}
// 接收传入的图像信息
int image = intent.getIntExtra("key2",0);
if (image != 0)
{// 显示联系人的图片imageView.setImageResource((Integer) image);
}

    bind启动服务，这里额外需要一个 MyService.java文件 来继承Service类：

    Intent serviceIntent = new Intent(MainActivity.this, MyService.class);// 使用bindservice方法
ServiceConnection connection = new ServiceConnection() {@Overridepublic void onServiceConnected(ComponentName name, IBinder service) {Log.d("lzl","onServiceConnected .....");// 接收Myservice与服务进行通信。 Activity开始时就启动服务mybinder = (MyService.Mybinder) service;mybinder.todo();}@Overridepublic void onServiceDisconnected(ComponentName name) {Log.d("lzl","onServiceDisconnected .....");// 当服务与客户端的连接意外断开时 清空对象 解绑mybinder = null;}
};
this.bindService(serviceIntent,connection, Context.BIND_AUTO_CREATE);

    Myservice.java文件设置如下，其中要重写onBind方法和onDestroy方法，以及定义一个内部类Mybinder：

    public MyService() {//context = this;//Log.d("lzl","MyService create......");
}@Override
public IBinder onBind(Intent intent) {// TODO: Return the communication channel to the service.Log.d("lzl","MyService onBind ......");Mybinder binder = new Mybinder();return binder;
}// 继承Binder 来定义子类 添加一个额外的方法 来启动
public class Mybinder extends Binder{public Mybinder() {}// 定义启动服务的方法public void todo(){Log.d("lzl","Mybinder todo() ......");// 初始化 mediaplayer 对象mediaplayer = MediaPlayer.create(getApplicationContext(),R.raw.wu_zhu_x_zhi_er);// 启动服务mediaplayer.start();}
}@Override
public void onDestroy() {Log.d("lzl","onDestroy......");// 销毁时释放资源mediaplayer.stop();super.onDestroy();
}

  2. 如何给不同的列设置不同的音乐服务？难道给每个列都写一个serivce.java文件？肯定不显示。这里分析一下音乐服务如何启动：

    无论是非绑定式服务还是绑定式服务，都主要是在Service.java文件中来设置的音乐，所以如果能动态选择音乐（根据列的跳转信息），那么就值需要这一个Service.java文件即可。修改后的代码如下：

    这里暂时只改bind服务：

    fragment增加传入music资源

    image-20241114221455796

    在adpter接收参数，传递给MainActivity启动服务：

    image-20241114221631966

    MainActivity中接收music参数，在传递给service来自定义选择音乐文件，service中给todo方法增加一个参数，在绑定到音乐式选择指定音乐。代码如下，上面是MainActivity文件，下面是service文件：

    image-20241114222217557

    这样就能根据不同的列进而选择不同的service音乐启动了！！！

3. 朋友圈界面

4. 我的界面

这两个界面不做额外描述。

项目源码位于：https://gitee.com/poppy-qwq/


http://www.mrgr.cn/news/75254.html

相关文章：

  • AI制作ppt
  • 设计模式（四）装饰器模式与命令模式
  • 数据分析丨世界杯冠军猜想：EA 体育游戏模拟能成功预测吗？
  • 车-路-站-网”信息耦合的汽车有序充电
  • 3216. 交换后字典序最小的字符串
  • Java——异常处理
  • exo - 使用日常设备运行AI集群
  • 2024年09月CCF-GESP编程能力等级认证Python编程一级真题解析
  • 微信小程序-prettier 格式化
  • Diffusion Policy——斯坦福机器人UMI所用的扩散策略：从原理到其编码实现(含Diff-Control、ControlNet详解)
  • leetcode hot100【LeetCode 105.从前序与中序遍历序列构造二叉树】java实现
  • Web性能优化：从基础到高级
  • 二叉树的遍历（手动）
  • 一文了解Android的核心系统服务
  • 不宽的宽字符
  • 面试中如何回答“怎样实现 RPC 框架”的问题？
  • 高效的 JSON 处理库 json.cpp
  • ubuntu里面的gcc编译方法
  • 三维测量与建模笔记 - 特征提取与匹配 - 4.2 梯度算子、Canny边缘检测、霍夫变换直线检测
  • 使用SimpleDateFormat的踩坑指南
  • 如何让 ChatGPT 像人类一样书写:4个步骤让你的内容栩栩如生！
  • 探索Google Earth Engine：利用MODIS数据和R语言进行2000-2021年遥感生态指数（RSEI）的时空趋势分析
  • otter 自由门使用方法
  • OpenGL 进阶系列08 - 天空盒实现
  • python习题练习
  • 【STM32外设系列】NRF24L01无线收发模块