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

AS-制作简易微信界面

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

赞

踩

AS-制作简易微信界面

#设计目标

利用 android studio 制作一个类微信页面的框架，包含上中下布局，四个 tab 页面，点击底部按钮实现跳转功能，同时需要在任意一个 tab 页中实现列表效果。

#开发技术

  1. Android Studio
  2. Pixel 3a API 34
  3. activity
  4. xml
  5. fragment

#框架实现及代码

1、将botton所需的图片导入drawable目录下

2、top栏设计

代码如下：

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

3、bottom栏设计

代码如下：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="horizontal"
  7.     >
  8.     <LinearLayout
  9.         android:id="@+id/talk"
  10.         android:layout_width="58dp"
  11.         android:layout_height="121dp"
  12.         android:layout_weight="1"
  13.         android:gravity="center"
  14.         android:orientation="vertical">
  15.  
  16.         <ImageView
  17.             android:id="@+id/imageView1"
  18.             android:layout_width="107dp"
  19.             android:layout_height="233dp"
  20.             android:layout_weight="1"
  21.             android:src="@drawable/message" />
  22.  
  23.         <TextView
  24.             android:id="@+id/textView1"
  25.             android:layout_width="match_parent"
  26.             android:layout_height="wrap_content"
  27.             android:gravity="center"
  28.             android:text="消息"
  29.             android:textColor="@color/black"
  30.             android:textSize="25sp" />
  31.     </LinearLayout>
  32.  
  33.     <LinearLayout
  34.         android:id="@+id/book"
  35.         android:layout_width="46dp"
  36.         android:layout_height="121dp"
  37.         android:layout_weight="1"
  38.         android:gravity="center"
  39.         android:orientation="vertical">
  40.  
  41.         <ImageView
  42.             android:id="@+id/imageView2"
  43.             android:layout_width="match_parent"
  44.             android:layout_height="261dp"
  45.             android:layout_weight="1"
  46.             android:src="@drawable/tele"/>
  47.  
  48.         <TextView
  49.             android:id="@+id/textView2"
  50.             android:layout_width="match_parent"
  51.             android:layout_height="wrap_content"
  52.             android:gravity="center"
  53.             android:text="通讯录"
  54.             android:textColor="@color/black"
  55.             android:textSize="25sp" />
  56.     </LinearLayout>
  57.  
  58.     <LinearLayout
  59.         android:id="@+id/look"
  60.         android:layout_width="60dp"
  61.         android:layout_height="123dp"
  62.         android:layout_weight="1"
  63.         android:gravity="center"
  64.         android:orientation="vertical">
  65.  
  66.         <ImageView
  67.             android:id="@+id/imageView3"
  68.             android:layout_width="match_parent"
  69.             android:layout_height="261dp"
  70.             android:layout_weight="1"
  71.             android:src="@drawable/discover" />
  72.  
  73.         <TextView
  74.             android:id="@+id/textView3"
  75.             android:layout_width="match_parent"
  76.             android:layout_height="wrap_content"
  77.             android:gravity="center"
  78.             android:text="发现"
  79.             android:textColor="@color/black"
  80.             android:textSize="25sp" />
  81.     </LinearLayout>
  82.  
  83.     <LinearLayout
  84.         android:id="@+id/me"
  85.         android:layout_width="49dp"
  86.         android:layout_height="121dp"
  87.         android:layout_weight="1"
  88.         android:gravity="center"
  89.         android:orientation="vertical">
  90.  
  91.         <ImageView
  92.             android:id="@+id/imageView5"
  93.             android:layout_width="wrap_content"
  94.             android:layout_height="wrap_content"
  95.             android:layout_weight="1"
  96.             app:srcCompat="@drawable/me" />
  97.  
  98.         <TextView
  99.             android:id="@+id/textView4"
  100.             android:layout_width="match_parent"
  101.             android:layout_height="wrap_content"
  102.             android:gravity="center"
  103.             android:text="我"
  104.             android:textColor="@color/black"
  105.             android:textSize="25sp" />
  106.     </LinearLayout>
  107.  
  108. </LinearLayout>

4、tab页面设计

用户点击时分别显示的四个页面的设计大致相同，如图

代码如下：

  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=".BlankFragment1">
  7.  
  8.     <TextView
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:gravity="center"
  12.         android:text="这是微信聊天界面"
  13.         android:textSize="35sp"  />
  14.  
  15. </FrameLayout>
  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=".BlankFragment2">
  7.  
  8.     <TextView
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:gravity="center"
  12.         android:text="这是通讯录界面"
  13.         android:textSize="35sp" />
  14.  
  15. </FrameLayout>
  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=".BlankFragment3">
  7.  
  8.     <TextView
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:gravity="center"
  12.         android:text="这是发现界面"
  13.         android:textSize="35sp" />
  14.  
  15. </FrameLayout>
  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=".BlankFragment4">
  7.  
  8.     <TextView
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:gravity="center"
  12.         android:text="这是我的界面"
  13.         android:textSize="35sp"/>
  14.  
  15. </FrameLayout>

5、activity-main

通过activity-main文件将top以及bottom文件结合到一起。

页面如图：

代码如下：

  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.     tools:context=".MainActivity">
  8.  
  9.     <LinearLayout
  10.         android:layout_width="match_parent"
  11.         android:layout_height="match_parent"
  12.         android:orientation="vertical">
  13.  
  14.         <include
  15.             layout="@layout/top"
  16.             android:layout_width="match_parent"
  17.             android:layout_height="wrap_content" />
  18.  
  19.         <FrameLayout
  20.             android:id="@+id/content"
  21.             android:layout_width="415dp"
  22.             android:layout_height="wrap_content"
  23.             android:layout_weight="1"/>
  24.  
  25.         <include
  26.             layout="@layout/bottom"
  27.             android:layout_width="match_parent"
  28.             android:layout_height="wrap_content" />
  29.  
  30.     </LinearLayout>
  31. </androidx.constraintlayout.widget.ConstraintLayout>

6、创建fragment类

需要运用fragmentmanager 来对四个不同的 tab 进行控制，让他们叠加在一起的同时，实现在不同的点击动作发生时进行一个 tab 的显示及其余三个的隐藏，以此达到点击切换的效果。由于有四个事件，因此我们需要创建三个fragment。

代码如下：

BlankFragment1

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

BlankFragment2

  1. package com.example.myapplication;
  2.  
  3. import android.content.Context;
  4. import android.os.Bundle;
  5.  
  6. import androidx.fragment.app.Fragment;
  7. import androidx.recyclerview.widget.RecyclerView;
  8.  
  9. import android.view.LayoutInflater;
  10. import android.view.View;
  11. import android.view.ViewGroup;
  12.  
  13. import java.util.List;
  14.  
  15. public class BlankFragment2 extends Fragment {
  16.     private RecyclerView recyclerView;
  17.     private List<String> list;
  18.     private Context context;
  19.     private Myadapter myadapter;
  20.  
  21.     @Override
  22.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  23.                              Bundle savedInstanceState) {
  24.         View view=inflater.inflate(R.layout.fragment_blank_fragment2, container, false);
  25.         context=view.getContext();
  26.  
  27.  
  28.         // Inflate the layout for this fragment
  29.         return inflater.inflate(R.layout.fragment_blank_fragment2, container, false);
  30.     }
  31. }

BlankFragment3

  1. package com.example.myapplication;
  2.  
  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.  
  11. public class BlankFragment3 extends Fragment {
  12.  
  13.     @Override
  14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  15.                              Bundle savedInstanceState) {
  16.         // Inflate the layout for this fragment
  17.         return inflater.inflate(R.layout.fragment_blank_fragment3, container, false);
  18.     }
  19. }

BlankFragment4

  1. package com.example.myapplication;
  2.  
  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.  
  11. public class BlankFragment4 extends Fragment {
  12.  
  13.     @Override
  14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  15.                              Bundle savedInstanceState) {
  16.         // Inflate the layout for this fragment
  17.         return inflater.inflate(R.layout.fragment_blank_fragment4, container, false);
  18.     }
  19. }

7、MainActivity

主函数主要实现功能是监听onlick、初始化initial、隐藏四个tab界面fragmentHide、展示一个tab界面showfragment。

#onlick函数

  1.     public void onClick(View view) {
  2.         fragmentHide();
  3.         int id = view.getId();
  4.         if (id == R.id.talk) {
  5.             showfragment(fragment1);
  6.         } else if (id == R.id.book) {
  7.             showfragment(fragment2);
  8.         } else if (id == R.id.look) {
  9.             showfragment(fragment3);
  10.         } else {
  11.             showfragment(fragment4);
  12.         }
  13.     }

#initial函数

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

#fragmentHide函数

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

#showfragment函数

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

#MainActivity.java完整代码

  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.  
  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. {
  13.  
  14.     LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
  15.     Fragment fragment1,fragment2,fragment3,fragment4;
  16.     FragmentManager manager;
  17.     int transaction;
  18.  
  19.     @Override
  20.     protected void onCreate(Bundle savedInstanceState)
  21.     {
  22.         super.onCreate(savedInstanceState);
  23.         setContentView(R.layout.mainlayout);
  24.  
  25.         linearLayout1=findViewById(R.id.talk);
  26.         linearLayout2=findViewById(R.id.book);
  27.         linearLayout3=findViewById(R.id.look);
  28.         linearLayout4=findViewById(R.id.me);
  29.         manager=getSupportFragmentManager();
  30.  
  31.         fragment1=new BlankFragment1();
  32.         fragment2=new BlankFragment2();
  33.         fragment3=new BlankFragment3();
  34.         fragment4=new BlankFragment4();
  35.  
  36.         inital();
  37.         fragmentHide();
  38.         showfragment(fragment1);
  39.  
  40.         linearLayout1.setOnClickListener(this);
  41.         linearLayout2.setOnClickListener(this);
  42.         linearLayout3.setOnClickListener(this);
  43.         linearLayout4.setOnClickListener(this);
  44.  
  45.  
  46.     }
  47.     public void onClick(View view) {
  48.         fragmentHide();
  49.         int id = view.getId();
  50.         if (id == R.id.talk) {
  51.             showfragment(fragment1);
  52.         } else if (id == R.id.book) {
  53.             showfragment(fragment2);
  54.         } else if (id == R.id.look) {
  55.             showfragment(fragment3);
  56.         } else {
  57.             showfragment(fragment4);
  58.         }
  59.     }
  60.     private void showfragment(Fragment fragment) {
  61.         transaction=manager.beginTransaction()
  62.                 .show(fragment)
  63.                 .commit();
  64.     }
  65.     public void inital(){
  66.         transaction=manager.beginTransaction()
  67.                 .add(R.id.content,fragment1)
  68.                 .add(R.id.content,fragment2)
  69.                 .add(R.id.content,fragment3)
  70.                 .add(R.id.content,fragment4)
  71.                 .commit();
  72.     }
  73.  
  74.     public void fragmentHide(){
  75.         transaction=manager.beginTransaction()
  76.                 .hide(fragment1)
  77.                 .hide(fragment2)
  78.                 .hide(fragment3)
  79.                 .hide(fragment4)
  80.                 .commit();
  81.     }
  82. }

8、recycleview的实现

在layout下新建一个item.xml，新建一个textview

  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.  
  6.     <TextView
  7.         android:id="@+id/textView1"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:layout_weight="1"
  11.         android:text="TextView" />
  12. </LinearLayout>

在BlankFragment1初始化定义变量 recyclerView，list，context， myadapter，然后onCreateView（）函数底下写入适配器需要的一些参数和数据。

代码具体为BlankFragment1中的代码。

#创建Myadapter类

初始化变量，创造构造函数。

  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 list) {
  18.         context1=context;
  19.         list1=list;
  20.     }
  21.  
  22.     @NonNull
  23.     @Override
  24.     public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
  25.         View view=LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
  26.  
  27.         Myholder myholder=new Myholder(view);
  28.         return myholder;
  29.     }
  30.     @Override
  31.     public void onBindViewHolder(@NonNull Myholder holder, int position) {
  32.         holder.textView.setText(list1.get(position));
  33.     }
  34.  
  35.     @Override
  36.     public int getItemCount() {
  37.  
  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.textView1);
  45.         }
  46.  
  47.     }
  48. }

9、结果展示

 

10、总结

在本次实验中，我学会利用 AS 进行制作简易的微信界面，掌握 fragment，layout，xml 和相关控件的知识，实现页面的跳转功能，和 recycleview 实现列表功能，在实验中我在一直被switch-case无法运行困扰，在查询资料后我发现用if-else就可以解决，并且AS可以便捷的实现两者的相互转换；在老师的帮助下解决了版本不兼容的问题，成功实现代码的运行；由于只能在recycleview里显示一行数据，最后发现在item里要将match_parent改为wrap_content。

11、源代码来源

fuzengyu/fzy (github.com)

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

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

  

闽ICP备14008679号