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

android studio——设计简单微信界面超详细教程_android studio做微信聊天界面

作者：Gausst松鼠会 | 2024-05-12 20:43:05

赞

踩

android studio做微信聊天界面

一、作业目标

本次作业开发的是微信APP的门户框架，UI布局为上中下结构。

功能一：用户可通过点击底部导航栏切换四个板块进行切换，它们分别是“聊天”、“联系人”、“功能”、“我的”，每切换一个界面会有对应的文本提示。

功能二：在每一tab页面实现列表效果。

（功能二的实现在功能一的前提下改进，详情可直接移步第四点的第3点）

二、设计流程

1、外观设计

微信页面整体为上-中-下结构

上部：显示栏背景为黑色，内有白色“微信”字样

中部：纯文本“这是××界面”和几行列表

下部：四个.png文件的图标以及对应板块的名字

2、内部联系

I.用一个main.xml文件将三个部分联系起来，使得三个部分可以在同一个页面进行展示

II.写一个Mainactivity.java文件来实现点击切换的功能：

（1）创建四个Fragment类及其对应的四个tab.xml文件,通过Fragmentxx类绑定板块对应的布局文件,将其联系起来;再用一个myadapter类将所有的单个文本Item.xml联系起来。

（2）在MainActivity类中创建Fragmentxx对象，通过Transaction将Fragmentxx对象添加到主布局中间的空板块，创建FragmentManager管理Fragment。

（3）初始化方法

（4）写监听方法

（5）设置控件被点击后的响应事件

（6）展示页面的方法

四、技术说明及关键代码（含详细步骤）

在这之前先了解一下各方面功能：

android:id="@+id/top"，为组件设置资源id，top为命名，在java文件中通过findViewById(id)被找到。

android:layout_width=“wrap_content”，布局的宽度

android:layout_height=“wrap_content”，布局的高度

android:layout_weight=“1”，用来等比例地划分区域。

android:gravity=“center”,对齐方式。

android:text=“微信”,显示的文本。

android:textColor="@color/white"，设置文字的颜色。

android:textSize=“28dp” />，设置文字的大小。

1.实现外观设计
  I.上部

        找到res下的layout文件夹，并在该文件夹下右键—>new—>XML—>Layout XML File创建一个weixin.xml文件；点击下图右上角的Design，将TextView拖一个到LinearLayout下面，再点击code查看代码，进行修改  

点击code显示的代码即为weixin.xml的代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.  
  6.     <TextView
  7.         android:id="@+id/textView3"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="67dp"
  10.         android:layout_weight="24"
  11.         android:background="@color/black"
  12.         android:gravity="center"
  13.         android:shadowColor="@color/white"
  14.         android:text="微信"
  15.         android:textColor="@color/white"
  16.         android:textSize="28dp" />
  17. </LinearLayout>
  II.中部

        在layout下继续右键创建一个tab1.xml文件，点击code查看代码，修改文本为“这是聊天界面”，并调整大小。

        这时候，由于共有四个界面，所以你可以选择：

       （1） 将tab1.xml直接复制，粘贴到layout下，改名为tab2.xml，tab3.xml，tab4.xml（记得把文本和code里面 android:id="@+id/textView8" 这一句TextView后的数字改成不同值）；

        （2）重复三次创建tab1.xml的操作。

这里只展示tab1.xml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:alpha="12"
  6.     android:gravity="center"
  7.     android:orientation="horizontal">
  8.  
  9.     <TextView
  10.         android:id="@+id/textView5"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="63dp"
  13.         android:layout_weight="1"
  14.         android:alpha="12"
  15.         android:textSize="30sp"
  16.         android:gravity="center"
  17.         android:text="这是聊天界面" />
  18. </LinearLayout>
  III.下部

        首先去网上下载四个适合用来当底部导航的.png类型的图标

        然后，在layout下创建一个名为bottom.xml的文件

        点击Design—>layout—>目Linearlayout（纵向），拖一个放到横向的LinearLayout下面；

        点击common—>Imageview,拖一个放到纵向的LinearLayout下，再把TextView也放一个到纵向的LinearLayout下面，修改参数如下图一、二（上右）、三，完成一个图标的创建。

        把纵向的LinearLayout复制，在横向的LinearLayout下粘贴三次，并改名四个纵向的LinearLayout、ImageView、TextView分别编号为1,2,3,4，如图四（下右）。

bottom.xml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="wrap_content"
  4.     android:layout_height="wrap_content"
  5.     android:orientation="horizontal">
  6.  
  7.  
  8.     <LinearLayout
  9.         android:id="@+id/LinearLayout1"
  10.         android:layout_width="wrap_content"
  11.         android:layout_height="wrap_content"
  12.         android:layout_weight="1"
  13.         android:orientation="vertical">
  14.  
  15.         <ImageView
  16.             android:id="@+id/imageView1"
  17.             android:layout_width="match_parent"
  18.             android:layout_height="67dp"
  19.             android:src="@drawable/star1" />
  20.  
  21.         <TextView
  22.             android:id="@+id/textView1"
  23.             android:layout_width="104dp"
  24.             android:layout_height="wrap_content"
  25.             android:layout_weight="1"
  26.             android:gravity="center"
  27.             android:text="聊天"
  28.             android:textSize="30sp" />
  29.     </LinearLayout>
  30.  
  31.     <LinearLayout
  32.         android:id="@+id/LinearLayout2"
  33.         android:layout_width="wrap_content"
  34.         android:layout_height="wrap_content"
  35.         android:layout_weight="1"
  36.         android:orientation="vertical">
  37.  
  38.  
  39.         <ImageView
  40.             android:id="@+id/imageView2"
  41.             android:layout_width="match_parent"
  42.             android:layout_height="69dp"
  43.             android:src="@drawable/light" />
  44.  
  45.         <TextView
  46.             android:id="@+id/textView2"
  47.             android:layout_width="104dp"
  48.             android:layout_height="wrap_content"
  49.             android:layout_weight="1"
  50.             android:gravity="center"
  51.             android:text="联系人"
  52.             android:textSize="30sp" />
  53.     </LinearLayout>
  54.  
  55.     <LinearLayout
  56.         android:id="@+id/LinearLayout3"
  57.         android:layout_width="wrap_content"
  58.         android:layout_height="wrap_content"
  59.         android:layout_weight="1"
  60.         android:orientation="vertical">
  61.  
  62.         <ImageView
  63.             android:id="@+id/imageView3"
  64.             android:layout_width="match_parent"
  65.             android:layout_height="67dp"
  66.             android:src="@drawable/moon3" />
  67.  
  68.         <TextView
  69.             android:id="@+id/textView3"
  70.             android:layout_width="104dp"
  71.             android:layout_height="wrap_content"
  72.             android:layout_weight="1"
  73.             android:gravity="center"
  74.             android:text="功能"
  75.             android:textSize="30sp" />
  76.     </LinearLayout>
  77.  
  78.     <LinearLayout
  79.         android:id="@+id/LinearLayout4"
  80.         android:layout_width="wrap_content"
  81.         android:layout_height="wrap_content"
  82.         android:orientation="vertical">
  83.  
  84.         <ImageView
  85.             android:id="@+id/imageView"
  86.             android:layout_width="match_parent"
  87.             android:layout_height="67dp"
  88.             android:layout_weight="1"
  89.             android:src="@drawable/sun" />
  90.  
  91.         <TextView
  92.             android:id="@+id/textView4"
  93.             android:layout_width="104dp"
  94.             android:layout_height="wrap_content"
  95.             android:layout_weight="1"
  96.             android:gravity="center"
  97.             android:text="我的 "
  98.             android:textSize="30sp" />
  99.     </LinearLayout>
  100.  
  101. </LinearLayout>

        注意：选择的ImageView图标不能直接使用，所以要把之前下载的四个.png图标直接复制粘贴到res—>drawable文件下，code中的android:src="@drawable/moon3" />这一句是自己的.png路径，四个都要修改。

2.实现联系和切换功能
  I.整合页面

                先在layout下创建一个main.xml文件，点击code修改代码，把上-中-下三个部分包括在内，再点击design,调整三块的占比，使得顶部、图标和文本都能显露出来。

注意：如果不把大小调整合适，最后运行可能会导致显示不完整的。

main.xml代码：

可以看到layout="@layout/weixin",layout="@layout/content",layout="@layout/bottom"说明包含了这三个部分

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical">
  6.  
  7.     <include
  8.         layout="@layout/weixin"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="211dp" />
  11.  
  12.  
  13.     <FrameLayout
  14.         android:id="@+id/content"
  15.         android:layout_width="match_parent"
  16.         android:layout_height="335dp"
  17.         android:layout_weight="1"></FrameLayout>
  18.  
  19.     <include
  20.         layout="@layout/bottom"
  21.         android:layout_width="match_parent"
  22.         android:layout_height="146dp" />
  23.  
  24.  
  25. </LinearLayout>
  II.切换功能

        要实现切换功能，就需要

        （1）在java—>ui下创建四个Fragment类（.java），将其分别与之前创建的tab1，2，3，4四个.xml文件联系起来（可创建一个后复制粘贴，修改名称和tab）。

        （2）在MainActivity类（.java）中创建四个Fragment对象，四个LinearLayout对象，创建FragmentManager管理Fragment。

        （3）在MainActivity.Java中写对应的方法进行实现：

                initial();用来初始化； 

                fragmenthide();是为了点每点击一个界面，将其他三个界面隐藏起来； 

                fragmentshow(fragment1)；默认展示第一个界面；

                onClick(View view)；是将用户的点击进行传达，通过监听获取组件id，根据获取得到的id，展示对应的板块。

四个Fragment类只有tab的序号需要更改，这里展示Fragment1:

  1. package com.example.myapplication;
  2.  
  3. import android.os.Bundle;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7.  
  8. import androidx.fragment.app.Fragment;
  9.  
  10. public class Fragment1 extends Fragment
  11. {
  12.  
  13.     @Override
  14.     public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) {
  15.  
  16.      
  17.         View view1 = new View(getContext());
  18.        
  19.         return inflater.inflate(R.layout.tab1, container, false);
  20.     }
  21. }

MainActivity.java的代码：

  LinearLayout对象，对应的id是bottom.xml文件中的第二层LinearLayout的id

        linearLayout1=findViewById(R.id.LinearLayout1);
        linearLayout2=findViewById(R.id.LinearLayout2);
        linearLayout3=findViewById(R.id.LinearLayout3);
        linearLayout4=findViewById(R.id.LinearLayout4);
 隐藏其他项
            private void fragmenthide() {
                FragmentTransaction ft=fm.beginTransaction()
                        .hide(fragment1)
                        .hide(fragment2)
                        .hide(fragment3)
                        .hide(fragment4);
                ft.commit();
    }

 初始化，将所有fragment都添加到界面中部板块，对应的id是Activitymain.xml中的Fragment的id
            private void initial() {
                fm=getSupportFragmentManager();

用content是因为main.xml用的名字是content(android:id="@+id/content")
        FragmentTransaction ft=fm.beginTransaction()
                .add(R.id.content,fragment1) 
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4);
        ft.commit();
    }

 点击触发通过监听获取组件id，根据获取得到的id，展示对应的板块
            @Override
            public void onClick(View view){
                fragmenthide();
                int id=view.getId();
                if(id==R.id.LinearLayout1)
                    fragmentshow(fragment1);
                if(id==R.id.LinearLayout2)
                    fragmentshow(fragment2);
                if(id==R.id.LinearLayout3)
                    fragmentshow(fragment3);
                if(id==R.id.LinearLayout4)
                    fragmentshow(fragment4);
    }

完整代码：

  1. package com.example.myapplication;
  2.  
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.LinearLayout;
  6.  
  7. import com.google.android.material.bottomnavigation.BottomNavigationView;
  8.  
  9. import androidx.appcompat.app.AppCompatActivity;
  10. import androidx.fragment.app.Fragment;
  11. import androidx.fragment.app.FragmentManager;
  12. import androidx.fragment.app.FragmentTransaction;
  13. import androidx.navigation.NavController;
  14. import androidx.navigation.Navigation;
  15. import androidx.navigation.ui.AppBarConfiguration;
  16. import androidx.navigation.ui.NavigationUI;
  17.  
  18. import com.example.myapplication.databinding.ActivityMainBinding;
  19.  
  20.  
  21. public class MainActivity extends AppCompatActivity implements View.OnClickListener {
  22.     Fragment fragment1,fragment2,fragment3,fragment4;
  23.     FragmentManager fm;
  24.     LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
  25.  
  26.     @Override
  27.     protected void onCreate(Bundle savedInstanceState) {
  28.         super.onCreate(savedInstanceState);
  29.         setContentView(R.layout.main);
  30.  
  31.         fragment1=new Fragment1();
  32.         fragment2=new Fragment2();
  33.         fragment3=new Fragment3();
  34.         fragment4=new Fragment4();
  35.  
  36.         // LinearLayout对象，对应的id是bottom.xml文件中的第二层LinearLayout的id
  37.         linearLayout1=findViewById(R.id.LinearLayout1);
  38.         linearLayout2=findViewById(R.id.LinearLayout2);
  39.         linearLayout3=findViewById(R.id.LinearLayout3);
  40.         linearLayout4=findViewById(R.id.LinearLayout4);
  41.  
  42.  
  43.         fm=getSupportFragmentManager();
  44.         initial();
  45.         fragmenthide();
  46.         fragmentshow(fragment1);
  47.  
  48.         linearLayout1.setOnClickListener(this);
  49.         linearLayout2.setOnClickListener(this);
  50.         linearLayout3.setOnClickListener(this);
  51.         linearLayout4.setOnClickListener(this);
  52.     }
  53.  
  54.     //隐藏其他项
  55.     private void fragmenthide() {
  56.         FragmentTransaction ft=fm.beginTransaction()
  57.                 .hide(fragment1)
  58.                 .hide(fragment2)
  59.                 .hide(fragment3)
  60.                 .hide(fragment4);
  61.         ft.commit();
  62.     }
  63.  
  64.     //初始化，将所有fragment都添加到界面中部板块
  65.     //对应的id是Activitymain.xml中的Fragment的id
  66.     private void initial() {
  67.         fm=getSupportFragmentManager();
  68.  //用content是因为main.xml用的名字是content(android:id="@+id/content")
  69.         FragmentTransaction ft=fm.beginTransaction()
  70.                 .add(R.id.content,fragment1) 
  71.                 .add(R.id.content,fragment2)
  72.                 .add(R.id.content,fragment3)
  73.                 .add(R.id.content,fragment4);
  74.         ft.commit();
  75.     }
  76.     //点击触发通过监听获取组件id，根据获取得到的id，展示对应的板块
  77.     @Override
  78.     public void onClick(View view){
  79.         fragmenthide();
  80.         int id=view.getId();
  81.         if(id==R.id.LinearLayout1)
  82.             fragmentshow(fragment1);
  83.         if(id==R.id.LinearLayout2)
  84.             fragmentshow(fragment2);
  85.         if(id==R.id.LinearLayout3)
  86.             fragmentshow(fragment3);
  87.         if(id==R.id.LinearLayout4)
  88.             fragmentshow(fragment4);
  89.     }
  90.     //展示
  91.     private void fragmentshow(Fragment fragment){
  92.         FragmentTransaction transaction=fm.beginTransaction()
  93.                 .show(fragment);
  94.         transaction.commit();
  95.     }
  96. }

        注意：onClick()方法下需要用if（）语句，switch()不行。

    3.增加列表效果

  由于多了列表，首先想到要更改的就是tab1.xml,以及类Fragment1。故：

       （1）、再创建一个新的item.xml文件存放单个文本；

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="wrap_content"
  4.     android:layout_height="wrap_content"
  5.     android:gravity="center">
  6.  
  7.     <TextView
  8.         android:id="@+id/item"
  9.         android:layout_width="400dp"
  10.         android:layout_height="match_parent"
  11.         android:layout_gravity="center"
  12.         android:layout_weight="1"
  13.         android:gravity="center"
  14.         android:text="TextView"
  15.         android:textColor="@android:color/holo_orange_dark"
  16.         android:textSize="30sp" />
  17. </LinearLayout>

       （2）、 类Fragnent1展示tab1的内容，用到recyclerView对象，修改文本内容，同时使用myadapter类和队列，让它们呈现时排列起来。

  1. package com.example.myapplication;
  2. import android.content.Context;
  3.         import android.os.Bundle;
  4.  
  5.         import androidx.fragment.app.Fragment;
  6.  
  7.         import android.view.LayoutInflater;
  8.         import android.view.View;
  9.         import android.view.ViewGroup;
  10.         import androidx.appcompat.app.AppCompatActivity;
  11.         import androidx.recyclerview.widget.LinearLayoutManager;
  12.         import androidx.recyclerview.widget.RecyclerView;
  13.  
  14.         import java.util.ArrayList;
  15.         import java.util.List;
  16.  
  17. public class  Fragment1 extends Fragment {
  18.  
  19.     RecyclerView recyclerView;
  20.  
  21.     List list;
  22.     Myadapter myadapter;
  23.     Context context;
  24.  
  25.     @Override
  26.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  27.                              Bundle savedInstanceState) {
  28.         View view = inflater.inflate(R.layout.tab1, container, false);
  29.         context = view.getContext();
  30.  
  31.         recyclerView = view.findViewById(R.id.recyclerView);
  32.         list = new ArrayList();
  33.         for (int i = 0; i < 8; i++) {
  34.             list.add("这是第" + i + "行");
  35.  
  36.             myadapter = new Myadapter(context, list);
  37.             recyclerView.setAdapter(myadapter);
  38.  
  39.             LinearLayoutManager manager = new LinearLayoutManager(context);
  40.             manager.setOrientation(RecyclerView.VERTICAL);
  41.             recyclerView.setLayoutManager(manager);
  42.         }
  43.         return view;
  44.     }
  45. }

       （3）、对tab1进行修改，由于tab1.xml的android:id="@+id/recyclerView"，被Fragment类调用后进行了修改和整合，故展示的是整体文本效果；

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:id="@+id/linearLayout"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent">
  9.  
  10.     <androidx.recyclerview.widget.RecyclerView
  11.         android:id="@+id/recyclerView"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="match_parent"
  14.         app:layout_constraintBottom_toBottomOf="parent"
  15.         app:layout_constraintEnd_toEndOf="parent"
  16.         app:layout_constraintHorizontal_bias="0.498"
  17.         app:layout_constraintStart_toStartOf="parent"
  18.         app:layout_constraintTop_toTopOf="parent" />
  19. </androidx.constraintlayout.widget.ConstraintLayout>

       （4）、 Myadapter类是适配器，作用就是看到的tab1.xml的界面与数据之间的桥梁，当列表里的每一项显示到页面时，都会调用myadapter的方法返回一个View，而这里是获取view的个数，将整体展示。

  1. package com.example.myapplication;
  2.  
  3. import android.content.Context;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.widget.TextView;
  8.  
  9. import androidx.annotation.NonNull;
  10. import androidx.recyclerview.widget.RecyclerView;
  11.  
  12. import java.util.List;
  13.  
  14. public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder>{
  15.     Context context1;
  16.     List<String> list1;
  17.     public Myadapter(Context context, List<String> list){
  18.         context1 = context;
  19.         list1 = list;
  20.     }
  21.  
  22.  
  23.     @NonNull
  24.     @Override
  25.     public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
  26.         View view = LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
  27.         Myholder holder=new Myholder(view);
  28.         return holder;
  29.     }
  30.  
  31.     @Override
  32.     public void onBindViewHolder(@NonNull Myholder holder, int position) {
  33.         holder.textView.setText(list1.get(position));
  34.     }
  35.  
  36.     @Override
  37.     public int getItemCount() {
  38.         return list1.size();
  39.     }
  40.     public class Myholder extends RecyclerView.ViewHolder {
  41.         TextView textView;
  42.         public Myholder(@NonNull View itemView) {
  43.             super(itemView);
  44.             textView = itemView.findViewById(R.id.item);
  45.         }
  46.     }
  47. }

        

四、结果展示

五、其他报错原因

1.当你写了多个mainactivity时，APP—>mainifests—>Androidmainifests的code会有两个activity，这时候你需要把另一个的android:exported改为"false"。

注意：增加列表效果后，也需要修改这个文件下半部分，只留下一个activity,上半部分不变：

  1.  
  2.         <activity
  3.         android:name=".MainActivity"
  4.         android:exported="true">
  5.         <intent-filter>
  6.         <action android:name="android.intent.action.MAIN" />
  7.  
  8.         <category android:name="android.intent.category.LAUNCHER" />
  9. </intent-filter>
  10. </activity>
  11.         </application>
  12.  
  13. </manifest>

2、作为新手，第一次编写并运行该项目，好像需要修改文件，我运行的时候朋友帮我改了一个，我自己改了一个。在自己的这个项目的文件夹—>APP—>build.gradle.kts可以找到这个文件，可以看看是不是是不是少了这一句。

还有这个文件的最下面那两句应该是加上去的

3.system-image文件要直接能被file->settings->Android SDK直接找到，也就是说那个路径要在system-image文件的上一层

六、线上仓库地址（gitee）

luo17_world: 学习移动开发技术课程时创建 (gitee.com)

下载与安装：git下载与安装教程_git-scm.com download-CSDN博客下载与安装：

hint: Updates were rejected because the remote contains work that you do hint: not have locally.-CSDN博客

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

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

  

闽ICP备14008679号