devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android Studio之搭建微信界面_android studio仿微信

作者：从前慢现在也慢 | 2024-06-05 11:31:18

赞

踩

android studio仿微信

目录

目录

一、功能需求

二 、页面布局

一，将所需图片导入

二， 顶部top.xml设计

三，底部buttom1.xml设计

四，中间页面设计

 五， 将底部中部以及中部进行整合

三、页面跳转控制 

一，BlankFragment文件

二，MainActivity文件

 四、在任一tab页中实现列表效果

 一， 添加的RecyclerView控件

二， 建立xml文件存放显示内容

 三，修改对应fragment文件

四，创建contact_adapter.java文件

五、结果展示

六、实践总结

 七、代码分享

一、功能需求

完成一个类似微信页面的布局，要求：

  1. 页面最上方是标题居中
  2. 页面中间界面显示内容，内容随下方栏的选择而切换
  3. 页面最下方有四个按钮
  4. 点击按钮后，显示框变换内容
  5. 在任一tab页中实现列表效果

二 、页面布局

一，将所需图片导入

将准备好的图片文件导入到drawable目录下。

如图：

二， 顶部top.xml设计

在layout文件目录下创建top.xml文件，添加文本框，设置文字，字体大小，颜色及其背景，并将文字居中。

代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:layout_gravity="center">
  8.  
  9.     <TextView
  10.         android:id="@+id/textView2"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="55dp"
  13.         android:background="#4CAF50"
  14.         android:gravity="center"
  15.         android:text="微信"
  16.         android:textSize="40dp"
  17.         tools:ignore="HardcodedText,MissingConstraints,SpUsage" />
  18. </androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

三，底部buttom1.xml设计

1先新建layout布局文件button1.xml。
2再添加一个LinearLayout(vertical)，修改LinearLayout大小和颜色：修改gravity所对应的配置信息为center，再修改大小，添加id。
3在刚刚添加的LinearLayout(vertical)下添加ImageView，选择我们刚刚导入的图片。再添加textView控件，设置文本，调整大小，将其居中。
4复制三个我们修改好的LinearLayout，修改ImageButton的资源路径，分别修改LinearLayout、ImageView、textView的id,设置相应图片以及文本。

代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     xmlns:app="http://schemas.android.com/apk/res-auto"
  7.     android:orientation="horizontal">
  8.  
  9.     <LinearLayout
  10.         android:id="@+id/聊天"
  11.         android:layout_width="100dp"
  12.         android:layout_height="80dp"
  13.         android:onClick="onClick"
  14.         android:orientation="vertical"
  15.         tools:ignore="SpeakableTextPresentCheck">
  16.  
  17.         <ImageView
  18.             android:id="@+id/imageView1"
  19.             android:layout_width="match_parent"
  20.             android:layout_height="46dp"
  21.             android:src="@drawable/wx" />
  22.  
  23.         <TextView
  24.             android:id="@+id/textView1"
  25.             android:layout_width="match_parent"
  26.             android:layout_height="33dp"
  27.             android:gravity="center"
  28.             android:text="微信" />
  29.  
  30.     </LinearLayout>
  31.  
  32.     <LinearLayout
  33.         android:id="@+id/通讯录"
  34.         android:layout_width="100dp"
  35.         android:layout_height="80dp"
  36.         android:onClick="onClick"
  37.         android:orientation="vertical"
  38.         tools:ignore="SpeakableTextPresentCheck">
  39.  
  40.         <ImageView
  41.             android:id="@+id/imageView2"
  42.             android:layout_width="match_parent"
  43.             android:layout_height="46dp"
  44.             android:src="@drawable/txl" />
  45.  
  46.         <TextView
  47.             android:id="@+id/textView2"
  48.             android:layout_width="match_parent"
  49.             android:layout_height="33dp"
  50.             android:gravity="center"
  51.             android:text="通讯录" />
  52.     </LinearLayout>
  53.  
  54.     <LinearLayout
  55.         android:id="@+id/发现"
  56.         android:layout_width="100dp"
  57.         android:layout_height="80dp"
  58.         android:onClick="onClick"
  59.         android:orientation="vertical"
  60.         tools:ignore="SpeakableTextPresentCheck">
  61.  
  62.         <ImageView
  63.             android:id="@+id/imageView3"
  64.             android:layout_width="match_parent"
  65.             android:layout_height="46dp"
  66.             android:src="@drawable/fx" />
  67.  
  68.         <TextView
  69.             android:id="@+id/textView3"
  70.             android:layout_width="match_parent"
  71.             android:layout_height="33dp"
  72.             android:gravity="center"
  73.             android:text="发现" />
  74.     </LinearLayout>
  75.  
  76.     <LinearLayout
  77.         android:id="@+id/我"
  78.         android:layout_width="107dp"
  79.         android:layout_height="80dp"
  80.         android:onClick="onClick"
  81.         android:orientation="vertical"
  82.         tools:ignore="SpeakableTextPresentCheck">
  83.  
  84.         <ImageView
  85.             android:id="@+id/imageView4"
  86.             android:layout_width="match_parent"
  87.             android:layout_height="46dp"
  88.             android:src="@drawable/w" />
  89.  
  90.         <TextView
  91.             android:id="@+id/textView4"
  92.             android:layout_width="match_parent"
  93.             android:layout_height="33dp"
  94.             android:gravity="center"
  95.             android:text="我" />
  96.     </LinearLayout>
  97. </LinearLayout>

效果如下：

四，中间页面设计

新建一个fragment.xml文件，分别添加一个ImageView，修改文字内容，并将ImageView设置居中 ，然后将文件复制三份并修改相应内容。

如图：

其中一个文件的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     tools:context=".wx_BlankFragment">
  7.  
  8.     <TextView
  9.         android:layout_width="match_parent"
  10.         android:layout_height="600dp"
  11.         android:gravity="center"
  12.         android:text="这是微信界面"
  13.         android:textSize="35sp" />
  14.  
  15. </FrameLayout>

效果如下：

 五， 将底部中部以及中部进行整合

我们想要的效果是页面最上方是标题，中间显示文本，最下方有四个按钮，故在activity_main.xml中先添加一个LinearLayout。在LinearLayout中按顺序添加三个部分：通过include标签添加top.xml和button.xml，由于四个显示文本的页面都是在中间，故选择通过放一个FrameLayout在top和button的中间。

代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical">
  7.  
  8.     <include
  9.         layout="@layout/top"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content"/>
  12.  
  13.     <FrameLayout
  14.         android:id="@+id/id_content"
  15.         android:layout_width="match_parent"
  16.         android:layout_height="600dp"
  17.         android:layout_weight="1" />
  18.  
  19.     <include
  20.         layout="@layout/buttom1"
  21.         android:layout_width="match_parent"
  22.         android:layout_height="wrap_content" />
  23.  
  24. </LinearLayout>

效果如下：

三、页面跳转控制 

一，BlankFragment文件

在java文件夹中创建四个Fragment文件，分别对应你的“微信”、“朋友”、“通讯录”、“设置”，我命名为wxBlankFragment、txlBlankFragment、wBlankFragment、fxBlankFragment。

如图：

将代码结尾选中区域改成你自己的界面编号。

如：

  1.  public View onCreateView(LayoutInflater inflater, ViewGroup container,
  2.                              Bundle savedInstanceState) {
  3.         // Inflate the layout for this fragment
  4.         return inflater.inflate(R.layout.fragment1, container, false);
  5.     }
二，MainActivity文件

 1头文件导入以及变量声。

代码：

  1. package com.example.myapplication;
  2.  
  3. import androidx.appcompat.app.AppCompatActivity;
  4. import androidx.fragment.app.Fragment;
  5. import androidx.fragment.app.FragmentManager;
  6. import android.annotation.SuppressLint;
  7. import android.os.Bundle;
  8. import android.view.View;
  9. import android.widget.LinearLayout;
  10.  
  11. public class MainActivity extends AppCompatActivity implements View.OnClickListener{
  12.     private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
  13.     Fragment fragment1,fragment2,fragment3,fragment4;
  14.     FragmentManager manager;

2导入四个中间fragment卡片到主体界面里面，需要先new出该各个界面的对象并创建出一个管理对象fragfragment变量。

代码：

  1. fragment1=new wx_BlankFragment();
  2.         fragment2=new txl_BlankFragment();
  3.         fragment3=new fx_BlankFragment();
  4.         fragment4=new w_BlankFragment();
  5.         manager=getSupportFragmentManager();

3新建一个inital函数用以给Fragment页面初始化，在此函数中，将此前定义个4个Fragment变量使用fragmentManager添加到main文件中的中间主体部分的布局中。

代码：

  1. private void inital() {
  2.         int transaction = manager.beginTransaction()
  3.         .add(R.id.id_content, fragment1)
  4.         .add(R.id.id_content, fragment2)
  5.         .add(R.id.id_content, fragment3)
  6.         .add(R.id.id_content, fragment4)
  7.         .commit();
  8.     }

4在点击四个部件时需要展示其所代表的界面，故编写新的一个函数showfragment，展示fragment界面。

代码：

  1.  private void showfragment(Fragment fragment) {
  2.         int transaction = manager.beginTransaction()
  3.                 .show(fragment)
  4.                 .commit();
  5.     }

5编写一个新的函数fragmentHide，将所有的fragment界面都隐藏。

代码：

  1. public void fragmentHide(){
  2.         int transaction=manager.beginTransaction()
  3.                 .hide(fragment1)
  4.                 .hide(fragment2)
  5.                 .hide(fragment3)
  6.                 .hide(fragment4)
  7.                 .commit();
  8.     }

6对底部选择栏的四个控件进行监听，并根据监听所得到的结果调用fragment界面。

代码：

  1.  linearLayout1.setOnClickListener(this);
  2.         linearLayout2.setOnClickListener(this);
  3.         linearLayout3.setOnClickListener(this);
  4.         linearLayout4.setOnClickListener(this);
  1. public void onClick(View view) {
  2.         fragmentHide();
  3.         if(view.getId()==R.id.聊天)
  4.         {
  5.             showfragment(fragment1);
  6.         }
  7.         else if(view.getId()==R.id.通讯录)
  8.         {
  9.             showfragment(fragment2);
  10.         }
  11.         else if(view.getId()==R.id.发现)
  12.         {
  13.             showfragment(fragment3);
  14.         }
  15.         else if(view.getId()==R.id.我)
  16.         {
  17.             showfragment(fragment4);
  18.         }
  19.  
  20.     }

7而在最开始的界面自然就是聊天界面，故在最开始的时候就调用聊天的fragment。

代码：

 showfragment(fragment1);

 四、在任一tab页中实现列表效果

 一， 添加的RecyclerView控件

        我们选择给上次编写的发现界面处（fragment3.xml）的内容添加一个滑动删除的RecyclerView控件,将原本的textview删除然后加入一个recyclerview并丰富内容。

代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     xmlns:app="http://schemas.android.com/apk/res-auto"
  7.     tools:context=".fx_BlankFragment">
  8.  
  9.     <androidx.recyclerview.widget.RecyclerView
  10.         android:id="@+id/rcv3"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="match_parent"
  13.         android:layout_margin="8dp"
  14.         android:overScrollMode="never"
  15.         android:scrollbars="none"
  16.         app:layout_constraintEnd_toEndOf="parent"
  17.         app:layout_constraintStart_toStartOf="parent"
  18.         app:layout_constraintTop_toTopOf="parent" />
  19.  
  20. </FrameLayout>

结果如图： 

二， 建立xml文件存放显示内容

将发现界面中要显示的的内容建立一个xml文件（rcv1_item.xml）存放。

代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/team"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="100dp"
  6.     android:layout_margin="8dp"
  7.     android:background="@android:color/darker_gray"
  8.     android:orientation="vertical">
  9.  
  10.     <TextView
  11.         android:id="@+id/team_num"
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="wrap_content"
  14.         android:layout_margin="8dp"
  15.         android:text="1" />
  16.  
  17.     <TextView
  18.         android:id="@+id/team_content"
  19.         android:layout_width="wrap_content"
  20.         android:layout_height="wrap_content"
  21.         android:layout_margin="8dp"
  22.         android:text="内容" />
  23.  
  24.  
  25. </LinearLayout>

效果如图：

 三，修改对应fragment文件

我选择的是发现界面，故修改对应的 fx_BlankFragement.java文件。

创建initData()方法用于初始化数据，将数据添加到mylist列表中,我选择的是世界500强企业中前30的名称。

代码：

  1.  private void initData(){
  2.         myList.add("沃尔玛");
  3.         myList.add("沙特阿美公司");
  4.         myList.add("国家电网有限公司");
  5.         myList.add("亚马逊");
  6.         myList.add("中国石油天然气集团有限公司");
  7.         myList.add("中国石油化工集团有限公司");
  8.         myList.add("埃克森美孚");
  9.         myList.add("苹果公司");
  10.         myList.add("壳牌公司");
  11.         myList.add("联合健康集团");
  12.         myList.add("CVS Health公司");
  13.         myList.add("托克集团");
  14.         myList.add("中国建筑集团有限公司");
  15.         myList.add("伯克希尔－哈撒韦公司");
  16.         myList.add("大众公司");
  17.         myList.add("Uniper公司");
  18.         myList.add("Alphabet公司");
  19.         myList.add("麦克森公司");
  20.         myList.add("丰田汽车公司");
  21.         myList.add("道达尔能源公司");
  22.         myList.add("嘉能可");
  23.         myList.add("英国石油公司");
  24.         myList.add("雪佛龙");
  25.         myList.add("美源伯根公司");
  26.         myList.add("三星电子");
  27.         myList.add("开市客");
  28.         myList.add("鸿海精密工业股份有限公司");
  29.         myList.add("中国工商银行股份有限公司");
  30.         myList.add("中国建设银行股份有限公司");
  31.         myList.add("微软");
  32.  
  33.  
  34.     }

再创建intview3()方法用于初始化界面，创建一个名为contact_adapter的适配器实例,通过ID找到XML布局中的RecyclerView组件（contact_adapter文件接下来创建）。

创建一个线性布局管理器，用于配置RecyclerView的布局方向。

将布局管理器分配给RecyclerView，将适配器分配给RecyclerView。

将数据列表 mylist 设置到适配器中，以便在RecyclerView中显示企业的名称。

代码：

  1. private void initView3() {
  2.         context=this.getActivity();
  3.         adapter_contact adapter = new adapter_contact(context);
  4.  
  5.         RecyclerView rcv_1 = recyclerView.findViewById(R.id.rcv3);
  6.  
  7.         LinearLayoutManager manager_3 = new LinearLayoutManager(context);
  8.         manager_3.setOrientation(LinearLayoutManager.VERTICAL);
  9.  
  10.  
  11.         rcv_1.setLayoutManager(manager_3);
  12.         rcv_1.setHasFixedSize(true);
  13.         rcv_1.setAdapter(adapter);
  14.  
  15.         adapter.setVerticalDataList(myList);
  16.     }
四，创建contact_adapter.java文件

这是一个Android RecyclerView的适配器（Adapter）类的代码，用于将数据与RecyclerView中的视图进行绑定。 

  1. 导入相关类和包： 
    1. package com.example.myapplication;
    2.  
    3. import android.content.Context;
    4. import android.util.Log;
    5. import android.view.LayoutInflater;
    6. import android.view.View;
    7. import android.view.ViewGroup;
    8. import android.widget.TextView;
    9.  
    10. import androidx.annotation.NonNull;
    11. import androidx.recyclerview.widget.RecyclerView;
    12.  
    13. import java.util.ArrayList;
    14. import java.util.List;

2.构造函数用于初始化适配器，并接受上下文和数据列表作为参数。 

  1. public adapter_contact(Context context) {
  2.         myContext = context;
  3.     }

3.创建函数表示RecyclerView中每个视图项的布局。它包含一个TextView用于显示数据内容。 

  1.   public VerticalViewHolder(View itemView) {
  2.             super(itemView);
  3.             teamNum = itemView.findViewById(R.id.team_num);
  4.             teamContent = itemView.findViewById(R.id.team_content);
  5.         }

五、结果展示

六、实践总结

在完成类微信界面实验时，我们需要熟悉常见控件的使用方法，如RecyclerView、EditText、Button等；了解常用布局的特点，如LinearLayout、RelativeLayout等；使用自定义View或第三方库来实现一些特殊的效果，如表情输入框、图片选择等。在这次的实验下我也对AS这款软件进行了熟悉，让我初步了解了安卓开发，对于其提词器的强大有了很深的印象，代码能力得到了一定的提升。RecyclerView是一个功能强大的Android控件，用于高效显示列表数据。了解了如何创建RecyclerView、适配器以及如何实现数据绑定和单击事件处理。RecyclerView的灵活性使其适用于各种不同的列表布局和需求。本次实验使我更深入地了解了Android开发中的列表控件和RecyclerView的用法。通过这次实验，我已经能够初步构建更具交互性和高性能的列表视图，获得了一定的掌握。

 七、代码分享

pfsongzw/learners: AS安卓开发学习 (github.com)icon-default.png?t=N7T8https://github.com/pfsongzw/learners

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/676328
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号