移动开发技术作业1：App门户页面设计与开发
根据课程内容设计一个app的门户框架。
目标一：App包含3-4个tab切换效果。
目标二：在任一tab页中实现列表效果。
二、技术说明1.实现目标一需要的技术为activity、xml、fragment。
activity：Android中的Activity是用户界面的基本组件之一，它代表一个用户界面屏幕，用户可以使用该屏幕与应用程序进行交互。Activity通常与XML布局文件配合使用，通过设置布局来实现用户界面的展示与交互。XML：XML（可扩展标记语言）是一种用于描述数据的标记语言。在Android中，XML最常用于描述用户界面。在XML中，我们可以定义各种UI控件的属性、布局方式、样式等信息，然后将这些信息传递给Activity，从而实现用户界面的展示。Fragment：Fragment是Android中用于构建灵活用户界面的一种技术，它可以将一个屏幕分成多个部分并在其中展示一些相关的UI组件。Fragment可以与Activity进行交互，也可以在Fragment之间进行数据传递。通过使用Fragment，我们可以轻松地创建一个可扩展、可重用、可配置的用户界面。2.实现目标二需要的技术为recycleview。
RecyclerView是Android中的一个视图容器，类似于ListView。它可以用于显示大量的数据，并且可以进行灵活的布局和交互。Adapter类是RecyclerView的关键组件之一，用于将数据与视图进行绑定。Adapter类继承自RecyclerView.Adapter类，用于管理数据源，并且创建和绑定ViewHolder类。通过Adapter类，我们可以实现自定义的布局和交互，以及对数据源的管理和显示。 三、关键代码解析实现四个tab页面切换：消息、联系人、发现、我的
1). xml界面设计
我设计的app界面包括上中下三个部分：
上面top.xml部分，设置一个LinearLayout布局器存放textView组件；
中间利用FrameLayout布局器实现tab内容切换效果；
下面bottom.xml部分先设置一个水平方向的LinearLayout布局器，再在其中设置四个小的垂直方向的LinearLayout布局器，每个布局器中imageButton对应每个图标，textView对应文字。
关键文件activity_main.xml：设置一个垂直方向的LinearLayout布局器，导入top.xml和bottom.xml，利用FrameLayout实现对应内容。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="@layout/top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@+id/content"
android:layout_width="415dp"
android:layout_height="wrap_content"
android:layout_weight="1" ></FrameLayout>
<include
layout="@layout/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
另有xiaoxi.xml、lianxiren.xml、faxian.xml、wode.xml四个页面实现对应标签内容。除了xiaoxi.xml（在这一页面中实现列表效果），其他三个均使用一个LinearLayout布局器存放textView组件。
每个页面效果类似，列表效果后面详细说明，此处说明lianxiren.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:id_context=".Fragment_lianxiren">
<TextView
android:id="@+id/textView6"
android:layout_width="match_parent"
android:layout_height="312dp"
android:layout_marginTop="500px"
android:layout_weight="1"
android:gravity="center"
android:text="这是联系人界面"
android:textSize="50dp" />
</LinearLayout>
2). java文件编写
首先是四个Fragment_xiaoxi，Fragment_lianxiren，Fragment_faxian，Fragment_wode分别与对应的xml文件进行连接。
此处也只说明一个Fragment_faxian.java文件。
package com.example.mywork;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class Fragment_faxian extends Fragment{
public Fragment_faxian() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.faxian, container, false);
}
}
然后是关键文件MainActivity.java：
Frags_init()，给Fragment页面初始化。利用activity_main.xml中间布局的控件id：content和fragmentManager将四个Fragment压入中间主体部分。private void Frags_init()
{
transaction= manager.beginTransaction()
.add(R.id.content,Xiaoxi)
.add(R.id.content,Lianxiren)
.add(R.id.content,Faxian)
.add(R.id.content,Wode)
.commit();
}
Frags_show(Fragment f)：展示当前fragment界面。private void Frags_show(Fragment f) {
transaction=manager.beginTransaction()
.show(f)
.commit();
}
Frags_hide()：在切换页面时，需要对其他页面进行隐藏。public void Frags_hide()
{
transaction=manager.beginTransaction()
.hide(Xiaoxi)
.hide(Lianxiren)
.hide(Faxian)
.hide(Wode)
.commit();
}
onClick(View v)：对底部按键框的四个按键进行监听，，根据监听结果调用fragment界面。利用条件语句实现。public void onClick(View v){
Frags_hide();
if (v.getId()==R.id.tab_xiaoxi)
Frags_show(Xiaoxi);
else if (v.getId()==R.id.tab_lianxiren)
Frags_show(Lianxiren);
else if (v.getId()==R.id.tab_faxian)
Frags_show(Faxian);
else if (v.getId()==R.id.tab_wode)
Frags_show(Wode);
}
}
主函数：需要四个LinearLayout变量，一个FragmentManager变量，四个Fragment变量。
四个LinearLayout变量对应四个tab界面，四个Fragment变量对应四个fragment界面，并创建一个管理对象fragment变量。先全局初始化，再隐藏，首界面展示调用，最后监听。
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Linearlayout1 = findViewById(R.id.tab_xiaoxi);
Linearlayout2=findViewById(R.id.tab_lianxiren);
Linearlayout3=findViewById(R.id.tab_faxian);
Linearlayout4=findViewById(R.id.tab_wode);
manager=getSupportFragmentManager();
Xiaoxi=new Fragment_xiaoxi();
Lianxiren=new Fragment_lianxiren();
Faxian=new Fragment_faxian();
Wode=new Fragment_wode();
Frags_init();
Frags_hide();
Frags_show(Xiaoxi);
Linearlayout1.setOnClickListener(this::onClick);
Linearlayout2.setOnClickListener(this::onClick);
Linearlayout3.setOnClickListener(this::onClick);
Linearlayout4.setOnClickListener(this::onClick);
}
在消息页面展示列表
在xiaoxi.xml中添加组件recycleview。
再创建一个item.xml，用于列表中行的样式展示。
对应的Fragment_xiaoxi.java：
在主函数中，先连接xiaoxi.xml，创建数据列表，并提供给适配器进行展示。创建LinearLayoutManager对象，通过传入参数获取更多属性。
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.xiaoxi, container, false);
recyclerView = view.findViewById(R.id.recyclerview);
list = new ArrayList<>();
for(int i=0;i<9;i++) {
list.add("这是第"+i+"行消息");
}
adapter=new Myadapter(view.getContext(), list);
LinearLayoutManager manager=new LinearLayoutManager(view.getContext());
manager.setOrientation(LinearLayoutManager.VERTICAL);//垂直布局
recyclerView.setLayoutManager(manager);
recyclerView.setAdapter(adapter);
return view;
}
关键文件Myadapter.java:
在Myadapter类中，我们需要重写三个方法：
onCreateViewHolder()，用于创建ViewHolder类，保存item中各个控件的引用，方便后续的操作。连接到item.xml文件。public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view=LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
Myholder holder=new Myholder(view);
return holder;
}
onBindViewHolder()，用于将数据绑定到ViewHolder中的视图上。list1是保存数据的一个List。通过position参数可以获取该item应该显示的数据，将数据填充到ViewHolder中的各个控件。
public void onBindViewHolder(@NonNull Myholder holder, int position) {
holder.textView1.setText(list1.get(position));
}
getItemCount()，返回数据源的大小，即需要显示的数据项数目。public int getItemCount() {
return list1.size();
}
最后定义一个名为Myholder的自定义ViewHolder类，表示每个数据项的视图。注意textView1的值是item.xml的id。
public class Myholder extends RecyclerView.ViewHolder{
TextView textView1;
public Myholder(@NonNull View itemview ){
super(itemview);
textView1=itemview.findViewById(R.id.textView9);
}
}
四、运行结果截图
在编写代码的过程中，遇到诸多问题：编写bottom.xml时，图标和文字堆叠到一起，原因是LinearLayout布局器的水平方向和垂直方向设置错误；编写完top.xml和bottom.xml后，将两个整合到activity_main.xml时，三个部分重叠在屏幕上方，原因是使用了ConstraintLayout布局器，应该使用垂直方向的LinearLayout布局器；控件id写错，布局参数不对等等问题。经过这个简单的类微信的门户界面设计，我对AS开发的基本方法，技术都有了解，相信以后会更加得心应手。
六、源码仓库地址https://gitee.com/xiaoye-jasmine-xin/ascode.git
相关知识
花店送货app开发方案，花店送货app开发流程
鲜花配送APP开发,鲜花订购APP开发
移动设备签到应用开发大家给点开发
鲜花APP开发市场分析
深度学习农作物病虫害智能识别APP开发教程
花艺社交APP开发都有哪些功能特点？
鲜花配送app开发功能
花艺学习app开发
花店App开发如何才能受到用户的青睐
微信小程序之植物识别demo(百度开发接口）
网址: 移动开发技术作业1：App门户页面设计与开发 https://m.huajiangbk.com/newsview546053.html
| 上一篇: 社交媒体中的营销对话 |
下一篇: 什么是移动开发? |
