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

Android Studio-App门户页面设计与开发_基于android studio的app开发

作者：神奇cpp | 2024-07-07 16:58:24

赞

踩

基于android studio的app开发

一、设计目标

  1. 设计一个app的门户框架，能够实现4个tab页面的切换效果。
  2. 能够在任一tab页面中实现列表效果。

二、功能说明

        设计一个类微信界面，主要分为上中下三个部分，通过下方按钮实现“聊天”、“联系人”、“发现”以及“设置”这四个页面的切换，并在“聊天”页面中实现列表功能。

 三、效果展示

        

        

四、技术说明

  • Activity：

  • Activity 是 Android 应用程序中的一个基本组件，它提供了一个用户界面。每个 Activity 都有一个布局文件，用于定义其用户界面。Activity 可以通过 Intent 启动其他 Activity，也可以接收其他 Activity 发送的 Intent。

  • XML：

  • XML 是一种标记语言，用于描述数据。在 Android 应用程序中，XML 通常用于定义用户界面，用来编写布局文件。

  • Fragment：

  • Fragment 是 Android 应用程序中的另一个基本组件，它可以嵌入到 Activity 中。Fragment 可以有自己的布局文件和生命周期，可以在运行时添加、删除或替换。

  • RecyclerView：

  • RecyclerView 是 Android 应用程序中的一个高级控件，用于显示大量数据列表。与 ListView 不同，RecyclerView 允许自定义列表项的布局和交互方式，并提供了更好的性能和灵活性。

五、设计流程

  • 主页面布局activity_main1.xml

        主页面布局分为上中下三个部分，顶部由top.xml文件实现，因为需要切换四个页面，所以中间的内容分别包含在fragment1.xml、fragment2.xml、fragment3.xml和fragment4.xml中，底部由buttom.xml文件实现。使用include插入top.xml、中间的fragment.xml以及buttom.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:orientation="vertical">
  6.  
  7.     <include
  8.         layout="@layout/top"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content" />
  11.  
  12.     <androidx.fragment.app.FragmentContainerView
  13.         android:id="@+id/content"
  14.         android:layout_width="match_parent"
  15.         android:layout_height="wrap_content"
  16.         android:layout_weight="1" />
  17.  
  18.     <include
  19.         layout="@layout/buttom"
  20.         android:layout_width="match_parent"
  21.         android:layout_height="wrap_content" />
  22. </LinearLayout>

  • top.xml

  • content

  • fragment1.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:orientation="vertical">
  6.  
  7.     <TextView
  8.         android:id="@+id/textView5"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="140dp"
  11.         android:layout_gravity="center"
  12.         android:layout_weight="1"
  13.         android:gravity="center"
  14.         android:text="聊天界面"
  15.         android:textSize="40dp" />
  16.  
  17.     <androidx.recyclerview.widget.RecyclerView
  18.         android:id="@+id/recyclerview"
  19.         android:layout_width="match_parent"
  20.         android:layout_height="match_parent"
  21.         android:layout_weight="1" />
  22. </LinearLayout>
  • fragment2.xml——联系人界面
  • fragment3.xml及fragment4.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/textView6"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:layout_weight="1"
  11.         android:textSize="50dp"
  12.         android:gravity="center"
  13.         android:layout_gravity="center"
  14.         android:text="联系人界面" />
  15. </LinearLayout>

  • buttom.xml

 

  • 页面内容Fragment.java

  •  在Fragment.java中，将Fragment.java与布局文件中的fragment.xml进行连接，如Fragment2.java文件（fragment3.xml及fragment4.xml方法相同）：

     

  1. package com.example.myapplication1;
  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 Fragment2 extends Fragment {
  11.  
  12.     @Override
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  14.                              Bundle savedInstanceState) {
  15.  
  16.         // Inflate the layout for this fragment
  17.         return inflater.inflate(R.layout.fragment2, container, false);
  18.     }
  19. }
  • 在Fragment1中实现列表功能：
  1. package com.example.myapplication1;
  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. import androidx.recyclerview.widget.LinearLayoutManager;
  10. import androidx.recyclerview.widget.RecyclerView;
  11.  
  12. import java.util.ArrayList;
  13. import java.util.List;
  14.  
  15. public class Fragment1 extends Fragment {
  16.  
  17.     RecyclerView recyclerView;
  18.     Myadapter myadapter;
  19.     View view1;
  20.     @Override
  21.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  22.                              Bundle savedInstanceState) {
  23.         view1=new View(getContext());
  24.  
  25.         view1= inflater.inflate(R.layout.fragment1, container, false);
  26.         recyclerView= view1.findViewById(R.id.recyclerview);
  27.  
  28.         List<String> list=new ArrayList();
  29.         for (int i=1;i<10;i++){
  30.             list.add("这是第"+i+"行：");
  31.         }
  32.  
  33.         myadapter=new Myadapter(list,view1.getContext());
  34.         recyclerView.setAdapter(myadapter);
  35.  
  36.         LinearLayoutManager manager=new LinearLayoutManager(view1.getContext());
  37.         manager.setOrientation(RecyclerView.VERTICAL);
  38.  
  39.         recyclerView.setLayoutManager(manager);
  40.         return view1;
  41.     }
  42. }

        代码说明：主要功能是为Fragment绑定一个列表视图RecycleView。通过findViewById()方法获取RecyclerView对象，并将其设置为垂直方向的线性布局。然后创建了一个List<String>对象list，用于存储数据。接着创建一个Myadapter对象，并将其设置为RecyclerView的适配器。

  • Myadapter.java

  • 为RecyclerView提供数据并创建对应的视图项

  1. package com.example.myapplication1;
  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.     List<String> list1;
  16.     Context context1;
  17.  
  18.     // 构造函数，传入数据源和内容
  19.     public Myadapter(List list, Context context){
  20.         list1=list;
  21.         context1=context;
  22.     }
  23.     //  创建 ViewHolder，即创建 RecyclerView 中 item 的布局
  24.     @NonNull
  25.     @Override
  26.     public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
  27.  
  28.         // 加载 item 的布局文件
  29.         View view=LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
  30.         // 创建 ViewHolder 对象
  31.         Myholder myholder=new Myholder(view);
  32.  
  33.         return myholder;
  34.     }
  35.     // 绑定数据到 ViewHolder 上
  36.     public void onBindViewHolder(@NonNull Myholder holder, int position) {
  37.         holder.textView.setText(list1.get(position));
  38.  
  39.     }
  40.     // 返回数据源的大小
  41.     @Override
  42.     public int getItemCount() {
  43.         return list1.size();
  44.     }
  45.  
  46.     // ViewHolder 类，用于保存 item 中的控件对象
  47.     class Myholder extends RecyclerView.ViewHolder{
  48.         TextView textView;
  49.  
  50.         public Myholder(@NonNull View itemView) {
  51.  
  52.             super(itemView);
  53.             // 找到 item 中的 TextView 控件
  54.             textView=itemView.findViewById(R.id.textView9);
  55.         }
  56.     }
  57.  
  58. }

  • 主函数MainActivity1.java

  • 隐藏界面

  1. private void fragmentHide() {
  2.         FragmentTransaction ft=fm.beginTransaction()
  3.                 .hide(fragment1)
  4.                 .hide(fragment2)
  5.                 .hide(fragment3)
  6.                 .hide(fragment4);
  7.         ft.commit();
  8.     }

  • 显示当前界面

  1. private void  fragmentshow(Fragment fragment){
  2.         fragmentHide();
  3.         FragmentTransaction ft=fm.beginTransaction()
  4.                 .show(fragment);
  5.         ft.commit();
  6.     }

  • 将Fragment文件进行压缩，加入content中

  1. private void innitial() {
  2.         FragmentTransaction ft=fm.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.         ft.commit();
  8.     }

  • 设置监听

  • 可用switch case语句或if else语句执行
  1. @Override
  2.     public void onClick(View view) {
  3.         if (view.getId() == l1) {
  4.             fragmentshow(fragment1);
  5.         }
  6.         else if (view.getId() == l2) {
  7.             fragmentshow(fragment2);
  8.         }
  9.         else if (view.getId() == l3) {
  10.             fragmentshow(fragment3);
  11.         }
  12.         else if (view.getId() == l4) {
  13.             fragmentshow(fragment4);
  14.         }
  15.  
  16.     }

  • 主函数完整代码：

  1. package com.example.myapplication1;
  2.  
  3. import androidx.appcompat.app.AppCompatActivity;
  4. import androidx.fragment.app.Fragment;
  5. import androidx.fragment.app.FragmentManager;
  6. import androidx.fragment.app.FragmentTransaction;
  7. import androidx.recyclerview.widget.LinearLayoutManager;
  8. import androidx.recyclerview.widget.RecyclerView;
  9.  
  10. import android.content.Context;
  11. import android.os.Bundle;
  12. import android.view.View;
  13. import android.widget.LinearLayout;
  14.  
  15. import java.util.ArrayList;
  16. import java.util.List;
  17.  
  18. public class MainActivity1 extends AppCompatActivity implements View.OnClickListener {
  19.     Fragment fragment1,fragment2,fragment3,fragment4;
  20.     LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
  21.     static final int l1=R.id.linearLayout1;
  22.     static final int l2=R.id.linearLayout2;
  23.     static final int l3=R.id.linearLayout3;
  24.     static final int l4=R.id.linearLayout4;
  25.     FragmentManager fm;
  26.  
  27.     @Override
  28.     protected void onCreate(Bundle savedInstanceState) {
  29.         super.onCreate(savedInstanceState);
  30.         setContentView(R.layout.activity_main1);
  31.  
  32.         linearLayout1=findViewById(R.id.linearLayout1);
  33.         linearLayout2=findViewById(R.id.linearLayout2);
  34.         linearLayout3=findViewById(R.id.linearLayout3);
  35.         linearLayout4=findViewById(R.id.linearLayout4);
  36.  
  37.         fm=getSupportFragmentManager();
  38.         fragment1=new Fragment1();
  39.         fragment2=new Fragment2();
  40.         fragment3=new Fragment3();
  41.         fragment4=new Fragment4();
  42.  
  43.         innitial();
  44.         fragmentHide();
  45.         fragmentshow(fragment1);
  46.         linearLayout1.setOnClickListener(this);
  47.         linearLayout2.setOnClickListener(this);
  48.         linearLayout3.setOnClickListener(this);
  49.         linearLayout4.setOnClickListener(this);
  50.  
  51.     }
  52.  
  53.     private void fragmentHide() {
  54.         FragmentTransaction ft=fm.beginTransaction()
  55.                 .hide(fragment1)
  56.                 .hide(fragment2)
  57.                 .hide(fragment3)
  58.                 .hide(fragment4);
  59.         ft.commit();
  60.     }
  61.  
  62.     private void  fragmentshow(Fragment fragment){
  63.         fragmentHide();
  64.         FragmentTransaction ft=fm.beginTransaction()
  65.                 .show(fragment);
  66.         ft.commit();
  67.     }
  68.  
  69.     private void innitial() {
  70.         FragmentTransaction ft=fm.beginTransaction()
  71.                 .add(R.id.content,fragment1)
  72.                 .add(R.id.content,fragment2)
  73.                 .add(R.id.content,fragment3)
  74.                 .add(R.id.content,fragment4);
  75.         ft.commit();
  76.     }
  77.  
  78.     @Override
  79.     public void onClick(View view) {
  80.         if (view.getId() == l1) {
  81.             fragmentshow(fragment1);
  82.         }
  83.         else if (view.getId() == l2) {
  84.             fragmentshow(fragment2);
  85.         }
  86.         else if (view.getId() == l3) {
  87.             fragmentshow(fragment3);
  88.         }
  89.         else if (view.getId() == l4) {
  90.             fragmentshow(fragment4);
  91.         }
  92.  
  93.     }
  94.  
  95. }

六、总结

        

  • 运行日志

  • 如果运行出错，可以打开Logcat查看日志，进行具体调试。

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

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

  

闽ICP备14008679号