实验1: Android初学App门户页面设计与开发

我又来啦～

已于 2023-10-30 12:31:32 修改

阅读量91

点赞数 1

文章标签： android

于 2023-10-16 19:50:56 首次发布

实验环境

1.Android Studio版本：Android Studio Giraffe | 2022.3.1 Patch 1
Build #AI-223.8836.35.2231.10671973, built on August 17, 2023
Runtime version: 17.0.6+0-b2043.56-10027231 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Windows 10 10.0
GC: G1 Young Generation, G1 Old Generation
Memory: 1280M
Cores: 16
Registry:
external.system.auto.import.disabled=true
ide.text.editor.with.preview.show.floating.toolbar=false

2.Android Studio的安装包来源：

https://developer.android.google.cn/studio?hl=zh-cn#downloads

3. Gradle的版本是gradle-8.0,

Andrid Gradle Plugin Version: 8.1.1

4.AndroidStudio的Android SDK：

实验分析：

通过分析，大致可以知道需要4个tab切换效果；一个activity运行程序和activity_main.xml文件、top.xml, bottom.xml, 、fragment1，fragment2，fragment3，fragment4的Java程序和xml文件，并且要求在点击相应的tab时显示相应的内容。如下图展示：

界面布局的代码实现：

1.顶部top.xml
2.底端bottom.xml
3.中间空白框中四个分段fragment.xml
4.窗体总布局的activity_main.xml
5.四个分段fragment.xml对应的.java文件
6.主函数文件MainActivity.java
7.item.xml文件，用来存放RecycleView的TextView

顶部top.xml

<?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="wrap_content"
    android:gravity="center|top">

    <TextView
        android:id="@+id/textView"
        android:layout_width="457dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/black"
        android:gravity="center"
        android:shadowColor="#FFFFFF"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="35dp" />
</LinearLayout>

底端bottom.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:layout_gravity="bottom"
    android:gravity="bottom"
    android:orientation="horizontal"
    android:rotationX="0"
    android:rotationY="0">

    <LinearLayout
        android:id="@+id/layou1"
        android:layout_width="47dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView11"
            android:layout_width="match_parent"
            android:layout_height="59dp"
            android:src="@drawable/elysia" />

        <TextView
            android:id="@+id/textView11"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layou2"
        android:layout_width="47dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView22"
            android:layout_width="match_parent"
            android:layout_height="59dp"
            android:src="@drawable/mei" />

        <TextView
            android:id="@+id/textView22"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layou3"
        android:layout_width="47dp"
        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="59dp"
            android:src="@drawable/mobius" />

        <TextView
            android:id="@+id/textView33"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layou4"
        android:layout_width="47dp"
        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="59dp"
            android:src="@drawable/kiana" />

        <TextView
            android:id="@+id/textView44"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="设置" />
    </LinearLayout>

</LinearLayout>

中间空白框中四个分段fragment.xml

fragment1.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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/imageView11"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center">

    <TextView
        android:id="@+id/textView11"
        android:layout_width="318dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center|start"
        android:gravity="center"
        android:text="这是聊天界面"
        android:textSize="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.505"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.786"
        tools:ignore="DuplicateIds" />
</LinearLayout>

fragment2.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">

    <TextView
        android:id="@+id/textView22"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:gravity="center"
        android:text="这是通讯录界面"
        android:textSize="40dp" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/RecyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

fragment3.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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/imageView33"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    tools:ignore="DuplicateIds">

    <TextView
        android:id="@+id/textView33"
        android:layout_width="318dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是发现界面"
        android:textSize="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.505"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.786" />
</LinearLayout>

fragment4.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:id="@+id/imageView44"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    tools:ignore="DuplicateIds">

    <TextView
        android:id="@+id/textView44"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:layout_gravity="center|center_horizontal|center_vertical"
        android:gravity="center"
        android:text="这是设置界面"
        android:textSize="40dp" />
</LinearLayout>

窗体总布局的activity_main1.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".MainActivity1">


    <include
        android:id="@+id/top"
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="681dp"
        android:layout_weight="1" />


    <include
        android:id="@+id/bottom"
        layout="@layout/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


</LinearLayout>

四个分段主要JAVA代码实现如下：

fragment1.java

package com.example.myapplication02;

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 {

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment1, container, false);
    }
}

fragment2.java(包含RecycleView组件)

package com.example.myapplication02;

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<String> list;
    RecyclerView recyclerView;
    View view;
    @SuppressLint("MissingInflatedId")
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment2, container, false);
        recyclerView = view.findViewById(R.id.RecyclerView);
        ArrayList<String> arraylist1 = new ArrayList<String>(Arrays.asList("MathTeacher", "EnglishTeacher", "ChineseTeacher",
                "Father","Mother","Friends","Elysia","Kiana","Rita","Bronya","Kaiwen","Mobius","Eden","Raiden Mei","Yae Sakura","Elieen","Honkai","Genshin","Star","WhyBuildsFly"));
        list = new ArrayList<String>(arraylist1);

        Myadapter myadapter = new Myadapter((ArrayList<String>) list, getContext());
        recyclerView.setAdapter(myadapter);
        LinearLayoutManager manager = new LinearLayoutManager(getContext());
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);
        return view;
    }
}

fragment3.java

fragment4.java

这两个与fragment1.java，这里不做过多赘述，修改代码中的类名即可。

主函数文件MainActivity1.java

package com.example.myapplication02;

import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

public class MainActivity1 extends AppCompatActivity implements View.OnClickListener {
    Fragment fragment1, fragment2, fragment3, fragment4;
    LinearLayout linearLayout1, linearLayout2, linearLayout3, linearLayout4;
    FragmentManager fragmentManager;
    FragmentTransaction fragmentTransaction;
    //Fragment fragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main1);
        linearLayout1 = findViewById(R.id.layou1);
        linearLayout2 = findViewById(R.id.layou2);
        linearLayout3 = findViewById(R.id.layou3);
        linearLayout4 = findViewById(R.id.layou4);

        fragmentManager = getSupportFragmentManager();
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
        fragment4 = new Fragment4();
        innitial();
        fragmentshow(fragment1);
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
        FragmentManager fm;
        fragmentTransaction = fragmentManager.beginTransaction();
    }

    private void fragmentshow(Fragment fragment) {
        fragmentHide();
        FragmentTransaction ft = fragmentManager.beginTransaction()
                .show(fragment);
        ft.commit();
    }

    private void innitial() {

        FragmentTransaction ft = fragmentManager.beginTransaction()
                .add(R.id.content, fragment1)
                .add(R.id.content, fragment2)
                .add(R.id.content, fragment3)
                .add(R.id.content, fragment4);
        ft.commit();
    }

    private void fragmentHide() {
        FragmentTransaction ft = fragmentManager.beginTransaction()
                .hide(fragment1)
//                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        ft.commit();

    }

    @Override
    public void onClick(View view) {
        if (view.getId() == R.id.layou1) fragmentshow(fragment1);
        if (view.getId() == R.id.layou2) fragmentshow(fragment2);
        if (view.getId() == R.id.layou3) fragmentshow(fragment3);
        if (view.getId() == R.id.layou4) fragmentshow(fragment4);
    }
}

item.xml文件，用来存放RecycleView的TextView

<?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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView31"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="@color/black"
        android:textSize="30sp" />

</LinearLayout>

实验中可能遇到的问题：

在程序运行时，RecycledView组件可能会出现以下情况：输出不够紧密，解决方法也很简单：将item.xml文件和fragment2.xml中的layout_heigth和layout_width都改为wrap_content即可。

修改后的效果如下：

小结：通过本次实验，成功地在Android Studio中设计和实现了APP门户界面的初步功能。实现了顶部和底部导航栏的设计，以及中间片段图层之间的隐藏与切换。同时，实现了点击菜单后切换的功能。在实现过程中，用到了多种控件和组件，如TextView、ImageView、switch、button、LinearLayout、Fragment等。通过编写MyAdapter类并设置其为RecycleView的适配器，实现了自定义适配的功能，其中的实验难点在于Adapter的编写，以及实现Item的点击操作。需要足够的细心和耐心才能克服困难。

相关源码已上传gitee:移动数据开发技术作业: 移动数据开发技术作业

我又来啦～

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实验1: Android初学App门户页面设计与开发

1.Android Studio版本：Android Studio Giraffe | 2022.3.1 Patch 1Build #AI-223.8836.35.2231.10671973, built on August 17, 2023Runtime version: 17.0.6+0-b2043.56-10027231 amd64VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.Windows 10 10.0GC: G1 Young Gener
复制链接

扫一扫