移动开发 第一次实验
一、实验目标
1、请根据课程内容设计一个app的门户框架，需要实现3-4个tab切换效果；本功能要求需要的技术为：activity、xml、fragment
2、在任一tab页中实现列表效果；本功能的实现需要使用recycleview；
二、实现工具
Android studio
三、设计过程
一、创建Fragment在项目中创建4个Fragment，分别用于显示聊天、通讯录、发现和设置界面。例如创建一个名为Fragment1.java，并实现其布局文件fragment_1.xml对应聊天界面 其余三个类似
示例代码 f1.java
package com.example.cyqapplication;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.tab1, container, false);
}
}1.package com.example.cyqapplication;: 这是Java代码的包声明，它定义了Java文件所属的包。在这里，它指定了一个包名为com.example.cyqapplication。
2.import语句：这些语句用于导入所需的Java类。在这里，导入了一些Android库中的类，以便在代码中使用它们。
3.public class Fragment1 extends Fragment {：这是一个Java类的声明，名为Fragment1，它继承自Fragment类。这表明Fragment1是一个Android Fragment 类。
4.onCreateView 方法：这是一个Android生命周期方法，用于创建Fragment的用户界面。当该Fragment被实例化时，它会调用onCreateView方法。在这个方法中，您可以指定Fragment的布局和视图。在这个代码中，onCreateView方法通过inflater.inflate方法加载名为tab1的布局，并将其返回作为Fragment的视图。
5.inflater: 是一个LayoutInflater对象，用于实例化XML布局文件。
6.R.layout.tab1: 这里引用了一个名为tab1的布局资源文件，它定义了Fragment的界面布局。
7.container: 是父ViewGroup，用于指定Fragment应该与哪个容器关联。如果container不为空，Fragment的布局将附加到它上面，否则，它将返回null。
8.return inflater.inflate(R.layout.tab1, container, false);：这一行代码使用inflater.inflate方法加载指定的布局资源(R.layout.tab1)，并将其附加到父ViewGroup（container）。最后一个参数false表示不要立即附加视图到父容器，因为Fragment将在稍后自动附加到Activity的布局中。
总结：这段代码定义了一个名为Fragment1的Android Fragment 类，它通过onCreateView方法加载一个名为tab1的布局，并返回该布局作为Fragment的用户界面。这个Fragment可以在Android应用程序中用于显示特定的UI组件和界面元素。
示例代码frament_1.xml
ion="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="这是聊天界面"
android:textSize="50sp" />
</LinearLayout>
这段XML代码定义了一个Android布局文件，其中包括一个线性布局（LinearLayout）和一个文本视图（TextView）。这布局文件通常用于在Android应用程序中定义屏幕上的UI元素。
下面是对这段XML布局的分析：
1.<?xml version="1.0" encoding="utf-8"?>: 这是XML文档的声明，指定了XML的版本和字符编码。
2.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android": 这是一个线性布局的开始标签，它用于定义布局容器。以下是一些关键属性：
3.xmlns:android="http://schemas.android.com/apk/res/android": 这是一个XML命名空间声明，它指定了Android XML命名空间。这允许您使用与Android相关的XML属性。
4.android:layout_width="match_parent": 这个属性指定了布局的宽度，设置为"match_parent"表示填满父容器的宽度。
5.android:layout_height="match_parent": 这个属性指定了布局的高度，同样设置为"match_parent"表示填满父容器的高度。
6.<TextView: 这是一个文本视图元素的开始标签，用于显示文本。
7.android:id="@+id/textView2": 这个属性分配一个唯一的标识符（ID）给文本视图，以便在Java代码中引用它。
8.android:layout_width="wrap_content": 这个属性指定了文本视图的宽度，设置为"wrap_content"表示根据文本内容自动调整宽度。
9.android:layout_height="wrap_content": 这个属性指定了文本视图的高度，同样设置为"wrap_content"表示根据文本内容自动调整高度。
10.android:layout_gravity="center": 这个属性指定了文本视图在其父容器中的对齐方式，设置为"center"表示在水平和垂直方向上都居中对齐。
11.android:layout_weight="1": 这个属性设置了视图的权重，用于在线性布局中分配可用空间。在这里，权重设置为1，表示视图将占据与其他具有相同权重的视图相等的可用空间。
12.android:gravity="center": 这个属性指定了文本视图内文本的对齐方式，设置为"center"表示文本将在文本视图中水平和垂直方向上都居中对齐。
13.android:text="这是聊天界面": 这个属性设置了文本视图显示的文本内容。
14.android:textSize="50sp": 这个属性设置了文本的大小为50sp（缩放独立像素），用于控制文本的字体大小。
15.</LinearLayout>: 这是线性布局的结束标签，用于标记布局的结束。
总结：这段XML代码定义了一个线性布局，其中包含一个文本视图，文本视图用于显示 "这是聊天界面" 这段文本，并且文本被居中对齐。这个布局可用于Android应用程序的用户界面设计。
二、设计用户界面app的标题.xml
示例代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/black"
android:gravity="center"
android:text="微信"
android:textColor="@color/white"
android:textSize="40sp" />
</LinearLayout>
这段定义了一个线性布局，其中包含一个文本视图，文本视图显示 "微信" 这段文本，具有白色文本颜色和黑色背景颜色，并且文本被居中对齐
三、添加菜单资源.xml
示例代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView11"
android:layout_width="115dp"
android:layout_height="109dp"
android:layout_weight="1"
app:srcCompat="@android:drawable/ic_menu_always_landscape_portrait" />
<TextView
android:id="@+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="聊天"
android:textColor="@color/white"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView22"
android:layout_width="115dp"
android:layout_height="109dp"
android:layout_weight="1"
app:srcCompat="@android:drawable/ic_menu_call" />
<TextView
android:id="@+id/textView22"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="联系人"
android:textColor="@color/white"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView33"
android:layout_width="match_parent"
android:layout_height="109dp"
android:layout_weight="1"
app:srcCompat="@android:drawable/ic_menu_compass" />
<TextView
android:id="@+id/textView33"
android:layout_width="115dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="位置"
android:textColor="@color/white"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout4"
android:layout_width="109dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView44"
android:layout_width="match_parent"
android:layout_height="109dp"
android:layout_weight="1"
app:srcCompat="@android:drawable/ic_menu_manage" />
<TextView
android:id="@+id/textView44"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="设置"
android:textColor="@color/white"
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>
创建一个简单的功能导航栏，用户可以点击相应的图标和文字来进行不同的操作。
四、整合main.xml
示例代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/top" />
<FrameLayout
android:id="@+id/content1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</FrameLayout>
<include
android:id="@+id/content"
layout="@layout/bottom" />
</LinearLayout>它创建了一个垂直的线性布局，整体布局将在整个屏幕上进行填充。在LinearLayout中包含了两个<include>标签，分别引用了两个布局文件。第一个<include>标签引用了名为"top"的布局文件，第二个<include>标签引用了名为"bottom"的布局文件。在中间部分，存在一个FrameLayout，具有一个id为"content1"的属性。这个FrameLayout的宽度设置为"match_parent"，高度设置为"wrap_content"，而且权重被设置为1，以确保在屏幕上占据适当的空间。这个布局文件的目的是在屏幕顶部和底部放置两个不同的布局，而中间部分留出空间来动态加载其他内容，例如在FrameLayout中加载Fragment。这样可以在屏幕上创建一个固定的顶部和底部，同时保持中间内容的可变性。
五、创建一个名为MainActivity.java的Activity，并在onCreate方法中实现底部导航栏的切换和Fragment的切换
示例代码
package com.example.cyqapplication;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
Fragment1 fragment;
Fragment fragment1,fragment2,fragment3,fragment4;
FragmentManager fm;
FragmentTransaction ft;
LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
fragment1=new Fragment1();
fragment2=new Fragment2();
fragment3=new Fragment3();
fragment4=new Fragment4();
linearLayout1=findViewById(R.id.LinearLayout1);
linearLayout2=findViewById(R.id.LinearLayout2);
linearLayout3=findViewById(R.id.LinearLayout3);
linearLayout4=findViewById(R.id.LinearLayout4);
fm=getSupportFragmentManager();
initial();
fragmenthide();
fragmentshow(fragment1);
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
}
private void fragmenthide() {
FragmentTransaction ft=fm.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4);
ft.commit();
}
private void initial() {
FragmentTransaction ft=fm.beginTransaction()
.add(R.id.content1,fragment1)
.add(R.id.content1,fragment2)
.add(R.id.content1,fragment3)
.add(R.id.content1,fragment4);
ft.commit();
}
@Override
public void onClick(View view){
fragmenthide();
if(view.getId()==R.id.LinearLayout1){
fragmenthide();
fragmentshow(fragment1);
}
if(view.getId()==R.id.LinearLayout2){
fragmenthide();
fragmentshow(fragment2);
}
if(view.getId()==R.id.LinearLayout3){
fragmenthide();
fragmentshow(fragment3);
}
if(view.getId()==R.id.LinearLayout4){
fragmenthide();
fragmentshow(fragment4);
}
}
private void fragmentshow(Fragment fragment) {
FragmentTransaction transaction=fm.beginTransaction()
.show(fragment);
transaction.commit();
}
}
六、在联系人界面中实现列表效果；本功能的实现需要使用recycleview
一、在联系人界面的布局文件fragment_2.xml代码中加入recycleview
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycleView"
android:layout_width="388dp"
android:layout_height="701dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
/>在Fragment2.java文件中添加显示列表
示例代码
package com.example.cyqapplication;
import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.*;
public class Fragment2 extends Fragment {
Context context;
List list;
RecyclerView recyclerView;
Myadapter myadapter;
@SuppressLint("MissingInflatedId")
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_2, container, false);
context = view.getContext();
recyclerView = view.findViewById(R.id.recycleView);
list = new ArrayList();
for(int i=0;i<9;i++){
list.add("这是第"+i+"行数据");}
myadapter = new Myadapter(context, list);
recyclerView.setAdapter(myadapter);
LinearLayoutManager manager = new LinearLayoutManager(context);
manager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(manager);
return view;
}
}二、定义布局item.xml文件
示例代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="TextView"
android:textColor="@color/black"
android:textSize="35sp" />
</LinearLayout>三、定义一个适配器Myadapter类
示例代码
package com.example.cyqapplication;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
import java.util.zip.Inflater;
public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder> {
Context context1;
List<String> list1;
public Myadapter(Context context, List list){
context1=context;
list1=list;
}
@NonNull
@Override
public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view=LayoutInflater.from(context1).inflate(R.layout.item,parent,false);
Myholder myholder=new Myholder(view);
return myholder;
}
@Override
public void onBindViewHolder(@NonNull Myholder holder, int position) {
holder.textView.setText(list1.get(position));
}
@Override
public int getItemCount() {
return list1.size();
}
protected class Myholder extends RecyclerView.ViewHolder {
TextView textView;
public Myholder(@NonNull View itemView) {
super(itemView);
textView=itemView.findViewById(R.id.textView6);
}
}
}这是一个用于RecyclerView的自定义Adapter。这个Adapter用于将数据绑定到RecyclerView的每个item上。该Adapter的构造函数接收一个Context和一个List作为参数，用于初始化Adapter中的成员变量。在创建ViewHolder时，使用LayoutInflater从指定的布局文件中创建一个View，并将其传递给Myholder构造函数。在绑定ViewHolder时，将数据从指定位置的List中取出，并设置到ViewHolder中的TextView中。getItemCount函数返回List的大小，即列表中的item数目。Myholder类是一个内部类，继承自RecyclerView.ViewHolder。它包含一个TextView成员变量，用于显示数据。在构造函数中通过findViewById方法将TextView与布局文件中的TextView实例进行关联。
实验效果
总结:通过完成这个实验，我们学习到了如何使用TabLayout和ViewPager来创建一个有多个选项卡的App门户框架。我们了解了如何创建和管理Fragment，使用Fragment实现页面切换的Android应用程序。在MainActivity类中，通过点击不同的LinearLayout来切换显示不同的Fragment，并在每个Fragment中实现不同的功能。我们还学习了如何使用RecyclerView来显示列表数据，并创建了一个适配器来绑定数据和视图。
gitee代码库：https://gitee.com/XXXY520/mobile-development/tree/master/
扫一扫
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
