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

作业一：as实现类微信门户界面及列表_门户列表

作者：小丑西瓜9 | 2024-06-05 11:50:05

赞

踩

门户列表
作业目标：根据课上所学，模拟微信门户界面并zai某一页中实现列表功能。
技术支持：layout xml、drawable view、fragment、onClick、recyclerview等。
思路描述：整体页面布局分为上中下部分，上方为微信名框，中间是单独页面显示，下方为多功能栏，因此要使用三个xml文件来完成三部分构成，最后用一个main xml文件把三个部分整合在一起。    切换页面：选择四个fragment布局叠加，然后利用java方法实现界面的切换和隐藏。   列表实现：选择在fragme1实现列表布局，故只需要在showFragment1方法内修改即可。

一、UI实现过程：

（1）门户界面布局（使用xml）

总共三个部分：顶部、底部选择栏、中间主体部分。

1、顶部标题栏

右击鼠标new一个名为top.xml的新文件，再在design界面的控件栏内选择linearlayout布局，选择水平布局，再将textview控件拖入textview框，如下：

随后是确定顶部栏字体大小、颜色、背景颜色，这里采用黑底白字。

top.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:layout_gravity="top"
  6.     android:orientation="vertical">
  7.  
  8. <TextView
  9.     android:id="@+id/TextView5"
  10.     android:layout_width="match_parent"
  11.     android:layout_height="wrap_content"
  12.     android:background="@color/black"
  13.     android:baselineAligned="false"
  14.     android:gravity="center"
  15.     android:text="微信"
  16.     android:textColor="@color/white"
  17.     android:textSize="40sp"/>
  18. </LinearLayout>
2、底部选择栏

初步流程同上，new出新的bottom.xml文件后先选择一个垂直布局（便于划分四个选项栏），再向水平布局拖入四个优先度一致（即平行）的水平线性布局，每个水平布局内拖入一个imageview和textview（注意imageview要在textview上面），然后将每个imageview绑定你需要的图标———要向image view导入图片，右键点击image view并选择set sample data，点击出现图库右下角的browse即可选择已导入drawable的图片即可（图片尺寸在code区内修改），显示如下：

四段代码相似度较高，只需要改一下参数，故只显示一段：

  1. <LinearLayout
  2.         android:id="@+id/wx"
  3.         android:layout_width="0dp"
  4.         android:layout_height="wrap_content"
  5.         android:layout_weight="1"
  6.         android:gravity="center"
  7.         android:orientation="vertical">
  8.  
  9.         <ImageView
  10.             android:id="@+id/imageView1"
  11.             android:layout_width="match_parent"
  12.             android:layout_height="wrap_content"
  13.             android:layout_weight="1"
  14.             android:src="@tools:sample/avatars"
  15.             tools:src="@drawable/wx" />
  16.  
  17.         <TextView
  18.             android:id="@+id/textView1"
  19.             android:layout_width="match_parent"
  20.             android:layout_height="match_parent"
  21.             android:gravity="center"
  22.             android:text="微信"
  23.             android:textColor="@color/black"
  24.             android:textSize="24sp" />
  25.  
  26.     </LinearLayout>
3、中间主体部分

新建四个xml文件，分别命名为fragment1~4，每个xml文件内包括一个水平的layout布局，并插入textview，方式同上，文本内容按自己喜好设定，为了便于识别，在这里使用亮紫色字体，四个界面大同小异，故只放其中一张图片，显示如下：

四段代码也是相似度很高，因此只需要放一段代码进行参考：

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:orientation="vertical"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".showFragment7" >
  8.  
  9.     <TextView
  10.         android:id="@+id/textView7"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="700dp"
  13.         android:gravity="center"
  14.         android:text="这是微信界面"
  15.         android:textSize="50sp"
  16.         android:textColor="@color/purple_500"/>
  17.  
  18. </LinearLayout>

4、三部分整合

建立一个名为activity_main的xml文件，将顶部和底部导入该文件中，fragment的文件暂时不用，过程同上类似，就不过多赘述了。直接放图：

代码显示（可以按自己想要的来设置参数）：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:orientation="vertical"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="wrap_content"
  7.     tools:context=".ui.theme.mainActivity">
  8.  
  9.     <include
  10.         android:id="@+id/top"
  11.         layout="@layout/top"
  12.         android:layout_gravity="top"
  13.         android:layout_width="match_parent"
  14.         android:layout_height="wrap_content"/>
  15.  
  16.     <FrameLayout
  17.         android:id="@+id/id_content"
  18.         android:layout_width="match_parent"
  19.         android:layout_height="520dp"
  20.         android:layout_weight="1"
  21.         app:layout_constraintBottom_toTopOf="@id/bottom"
  22.         app:layout_constraintTop_toBottomOf="@id/top">
  23.  
  24.     </FrameLayout>
  25.  
  26.     <include
  27.         android:id="@+id/bottom"
  28.         layout="@layout/bottom"
  29.         android:layout_width="match_parent"
  30.         android:layout_height="80dp"
  31.         app:layout_constraintBottom_toBottomOf="parent"
  32.         tools:layout_editor_absoluteX="0dp" />
  33. </LinearLayout>
（2）Java段

根据讲授内容，实现界面跳转要涉及到as中的活动思想：as中的每个活动最多存在运行、暂停、停止、销毁四种状态。

要实现实验内容，我们可以设想控件完成任务的过程并确定变量名（注意起变量名的时候要保证意义明确）

  1. 调用程序，为其命名为onCreate，作用是在activity完成初始化以后能够被成功调用 
    1. protected void onCreate(Bundle savedInstanceState) {
    2.         super.onCreate(savedInstanceState);
    3.         setContentView(R.layout.activity_main);
    4.  
    5.         linearLayout1 = findViewById(R.id.wx);
    6.         linearLayout2 = findViewById(R.id.txl);
    7.         linearLayout3 = findViewById(R.id.fx);
    8.         linearLayout4 = findViewById(R.id.wd);
    9.  
    10.  
    11.         manager = getSupportFragmentManager();
    12.  
    13.         fragment1 = new showFragment1();
    14.         fragment2 = new showFragment2();
    15.         fragment3 = new showFragment3();
    16.         fragment4 = new showFragment4();
    17.  
    18.         initial();
    19.         fragmentHide();
    20.         showfragment(fragment1);
    21.  
    22.         linearLayout1.setOnClickListener(this);
    23.         linearLayout2.setOnClickListener(this);
    24.         linearLayout3.setOnClickListener(this);
    25.         linearLayout4.setOnClickListener(this);
    26.  
    27.  
    28.     }
  2. 初始化程序，为其命名为initial，完成初始化 
    1.  public void initial() {
    2.         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.     }

  3. 点击方法，为其命名为onClick，作用是输入设备发出信息（如键鼠点击）后获取控件信息 
    1. public void onClick(View view) {
    2.         fragmentHide();
    3.         if (view.getId() == R.id.wx)
    4.             showfragment(fragment1);
    5.         else if (view.getId() == R.id.txl)
    6.             showfragment(fragment2);
    7.         else if (view.getId() == R.id.fx)
    8.             showfragment(fragment3);
    9.         else if (view.getId() == R.id.wd)
    10.             showfragment(fragment4);
    11.     }

  4. 显示界面，为其命名为showfragment，此时屏幕上会显示点击（click）后的内容 
    1.  private void showfragment(Fragment fragment) {
    2.         transaction = manager.beginTransaction()
    3.                 .show(fragment)
    4.                 .commit();
    5.     }

  5. 隐藏界面，为其命名为fragmentHide为保证四个界面上的text不重叠，需要保证在点击一个界面时，其他三个界面都隐藏
  1.  public void fragmentHide() {
  2.         transaction = manager.beginTransaction()
  3.                 .hide(fragment1)
  4.                 .hide(fragment2)
  5.                 .hide(fragment3)
  6.                 .hide(fragment4)
  7.                 .commit();
  8.     }
（3）实现效果(x四张图片较为相似，因此只在这里放出两张)

二、在某一界面实现列表功能

创建一个recyclerview的方法

  1. package com.example.homework_1.ui.theme;
  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 com.example.homework_1.R;
  13.  
  14. import java.util.ArrayList;
  15. import java.util.List;
  16.  
  17. public class showFragment1 extends Fragment{
  18.  
  19.     View view;
  20.     Myadapter adapter;
  21.     RecyclerView recyclerView;
  22.     List<String> list;
  23.  
  24.     public showFragment1() {
  25.     }
  26.  
  27.     @Override
  28.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  29.                              Bundle savedInstanceState) {
  30.  
  31.         view = inflater.inflate(R.layout.fragment1, container, false);
  32.         recyclerView = view.findViewById(R.id.recycleview);
  33.         list = new ArrayList<>();
  34.         for(int i=0;i<10;i++) {
  35.             list.add("这是第"+i+"行消息");
  36.         }
  37.  
  38.         adapter=new Myadapter(view.getContext(), list);
  39.  
  40.         LinearLayoutManager manager=new LinearLayoutManager(view.getContext());
  41.         manager.setOrientation(LinearLayoutManager.VERTICAL);
  42.         recyclerView.setLayoutManager(manager);
  43.         recyclerView.setAdapter(adapter);
  44.  
  45.         return view;
  46.     }
  47. }

再在实例中新建一个myadapter的Java方法

  1. package com.example.homework_1.ui.theme;
  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 com.example.homework_1.R;
  13.  
  14. import java.util.List;
  15.  
  16. public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder> {
  17.     Context context1;
  18.     List<String> list1;
  19.  
  20.     public Myadapter(Context context,List list) {
  21.         context1=context;
  22.         list1 = list;
  23.  
  24.  
  25.     }
  26.  
  27.     @NonNull
  28.     @Override
  29.     public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
  30.  
  31.         View view= LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
  32.         // Inflater inflater=new Inflater();   这个压缩是像文件压缩一样的真压缩
  33.         return new Myholder(view);//holder可以控制控件
  34.     }
  35.  
  36.     @Override
  37.     public void onBindViewHolder(@NonNull Myholder holder, int position) {
  38.         holder.textView.setText(list1.get(position));//值    与控件绑定,这么写报错与list里面的值有关，get不能确定参数类型
  39.     }
  40.  
  41.  
  42.     public int getItemCount(){
  43.         return list1.size();
  44.     }
  45.     public static class Myholder extends RecyclerView.ViewHolder{//定义这个类时，报错的现删掉，再重新补一次，补回来就不报错了
  46.         TextView textView;
  47.         public Myholder( View itemView)//嵌套类，在外面类中会直接调用里面的MYHolder类的对象，泛型传入，不是对象传值
  48.         {
  49.             super(itemView);
  50.             textView=itemView.findViewById(R.id.textView6);
  51.         }
  52.  
  53.  
  54.     }
  55. }

完成以后layout文件夹中会出现recycview的xml文件，向里面添加一个recycview控件，方法同上：

然后在layout文件夹中创建一个名为item的xml文件，代码段如下：

  1. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent">
  4.  
  5.     <LinearLayout
  6.         android:layout_width="match_parent"
  7.         android:layout_height="match_parent"
  8.         android:background="@color/white"
  9.         android:orientation="horizontal">
  10.  
  11.         <TextView
  12.             android:id="@+id/textView6"
  13.             android:layout_width="match_parent"
  14.             android:layout_height="wrap_content"
  15.             android:layout_gravity="center"
  16.             android:gravity="center"
  17.             android:text="TextView"
  18.             android:textColor="@color/design_default_color_secondary"
  19.             android:textSize="40sp" />
  20.     </LinearLayout>

完成这些工作以后开始进行调试，run完得到结果如下：

到这里就差不多了，一些注意事项和心得会放在总结里

三、实验小结

本次实验只是对微信界面进行简单模仿，实验难度并不算很大，但对于像我这样的初学者来说依旧有很多要注意的事项。本次实验中遇到了一些棘手的的情况：其一是自己声明的一些类在方法内根本无法使用，定义完以后整个语句就变灰了，后来查阅资料到settings里面修改了import的设置才发现，as支持自动声明，这也说明了写代码并不一定非要拘泥于形式，至少这些快捷工具能够很大程度解放你的双手，因此熟悉这些工具也是我们重要的一课。其二是我在调试代码的时候发现编译以后并没有报错，然而一运行起来模拟app界面便会闪退，改了很多遍都无功而返，后来发现同学也有类似情况，询问以后发现我的as的主题定义有问题，且sdk出现了问题，修复并且修改as软件包的gradle文本以后整个程序正常运行。

代码仓库：ashomework1: 类微信界面ui (gitee.com)

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

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

  

闽ICP备14008679号