App门户页面设计与开发

qq_32975951

已于 2023-10-16 17:57:43 修改

阅读量108

点赞数

文章标签： gitee

于 2023-10-16 17:25:26 首次发布

本文链接：https://blog.csdn.net/qq_32975951/article/details/133858688

版权

一、作业目标

设计一个app的门户框架，需要实现3-4个tab切换效果；本功能要求需要的技术为：activity、xml、fragment。
在任一tab页中实现列表效果；本功能的实现需要使用recycleview。

二、技术说明

1. Activity：Android应用程序的基本组件，它是一个可以包含用户界面的容器，可以响应用户的输入，并可以与Android系统进行交互。

2. XML：可扩展标记语言，用于描述网页的结构和内容，也可以用于描述Android应用程序的用户界面。

3. Fragment：Android应用程序的可重用UI组件，可以包含在一个Activity中，可以独立于Activity存在，可以被添加、删除和替换。

4. RecyclerView：Android中用于显示大量数据的列表视图，它使用了RecyclerView和RecyclerView.ViewHolder两个类，可以提高性能和用户体验

三、关键代码解析

xml文件编写

1.顶部top.xml

在layout文件中创建top.xml，使用LinearLayou水平t布局，LinearLayout内包含一个textView，用于实现文本显示效果，修改文字颜色和背景颜色，并设置为居中效果。

<?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="65dp"
    android:background="@color/black"
    android:gravity="center"
    android:orientation="vertical">

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

2.底端bottom.xml

在layout文件中创建bottom.xml，创建四个LinearLayout，以消息界面为例，每个垂直的LinearLayout插入一个图像和一个文本框，其它三个界面的按钮与消息界面类似。

<?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="horizontal">

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

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

        <ImageView
            android:id="@+id/imageView11"
            android:layout_width="wrap_content"
            android:layout_height="75dp"
            android:src="@drawable/weixin" />
    </LinearLayout>

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

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

        <ImageView
            android:id="@+id/imageView22"
            android:layout_width="wrap_content"
            android:layout_height="75dp"
            android:src="@drawable/weixin" />
    </LinearLayout>

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

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

        <ImageView
            android:id="@+id/imageView33"
            android:layout_width="wrap_content"
            android:layout_height="75dp"
            android:src="@drawable/weixin" />
    </LinearLayout>

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

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

        <ImageView
            android:id="@+id/imageView44"
            android:layout_width="wrap_content"
            android:layout_height="75dp"
            android:src="@drawable/weixin" />
    </LinearLayout>
</LinearLayout>

3.item

在一个item中插入一个图像和一个文本框，即列表中每一行的效果， textView中设置字体大小、字体颜色

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="68dp"
        android:layout_height="60dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/xiaoxi1" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_marginStart="68dp"
        android:text="TextView"
        android:textColor="@color/black"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />


</androidx.constraintlayout.widget.ConstraintLayout>

4.消息界面 fragment1

使用recycleview实现列表效果

<?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">

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

5.通讯录界面 fragment2

设置通讯录界面的显示内容，并设置为居中。

fragment3，fragment4类似

<?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">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:gravity="center"
        android:textSize="50dp"
        android:text="这是通讯录界面" />
</LinearLayout>

6.activity_main1

包含top、bottom的id，用 include 语句调用顶部和底部导航栏两个xml文件

注意调整top与bottom的范围，以免遮挡内容

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="userInfo"
            type="com.example.myapplication2.MainActivity1" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        tools:context=".MainActivity1">


        <include
            android:id="@+id/include"
            layout="@layout/top"

            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/context"
            app:layout_constraintTop_toBottomOf="@+id/context" />

        <FrameLayout
            android:id="@+id/context"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="68dp"
            app:layout_constraintBottom_toTopOf="@+id/include3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="MissingConstraints">

        </FrameLayout>

        <include
            android:id="@+id/include3"
            layout="@layout/bottom"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Java文件编写

1.fragment1

写入initData()方法和initView()方法。前者为列表中的文字内容，设置为20位联系人；后者与适配器绑定，实现列表效果。

package com.example.myapplication2;

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.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class BlankFragment1 extends Fragment {

    List<String> list=new ArrayList();
    RecyclerView recyclerView;
    Myadapter myadapter;
    Context context;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment1, container, false);
        recyclerView=view.findViewById(R.id.recyclerView);
        initData();
        initView();
        return view;
    }

    private void initData(){
        for (int i=1; i<=20; i++){
            list.add("这是联系人："+i);
        }
    }

    private void initView(){
        context=this.getActivity();
        myadapter=new Myadapter(list, context);
        recyclerView.setAdapter(myadapter);
        LinearLayoutManager manager=new LinearLayoutManager(context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);
        recyclerView.addItemDecoration(new DividerItemDecoration(getActivity(),DividerItemDecoration.VERTICAL));
        recyclerView.setHasFixedSize(true);
    }
}

2.fragment2

fragment3，fragment4类似

package com.example.myapplication2;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class BlankFragment2 extends Fragment {

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

3.Myadapter

RecyclerView的适配器，继承自Recycler.Adapter，每个fragment都会调用MyAdapter类中的方法。

package com.example.myapplication2;

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;

public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder> {

    List<String> list1;

    Context context1;

    public Myadapter(List list, Context context) {
        list1=list;
        context1=context;
    }

    @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();
    }

    class Myholder extends RecyclerView.ViewHolder{

        TextView textView;

        public Myholder(@NonNull View itemView) {
            super(itemView);
            textView=itemView.findViewById(R.id.textView1);
        }
    }
}

4.MainActivity1

通过fragmentHide()隐藏界面，fragmentshow()显示界面，innitial()将Fragment文件进行压缩，加入content中，用if-else编写onClick)设置监听

package com.example.myapplication2;

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{


    BlankFragment1 fragment1;
    BlankFragment2 fragment2;
    BlankFragment3 fragment3;
    BlankFragment4 fragment4;
    FragmentManager fragmentManager;
    FragmentTransaction fragmentTransaction;
    Fragment fragment;
    static final int l1=R.id.layou1;
    static final int l2=R.id.layou2;
    static final int l3=R.id.layou3;
    static final int l4=R.id.layou4;

    LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

    private ActivityMain1Binding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMain1Binding.inflate(getLayoutInflater());
        View view = binding.getRoot();
        setContentView(view);



        fragment1 = new BlankFragment1();
        fragment = new Fragment();
        fragmentManager = getSupportFragmentManager();
        fragment2 = new BlankFragment2();
        fragment3 = new BlankFragment3();
        fragment4 = new BlankFragment4();




        innitial();
        fragmentshow(fragment);
        fragmentHide();


        binding.include3.layou1.setOnClickListener(this);
        binding.include3.layou2.setOnClickListener(this);
        binding.include3.layou3.setOnClickListener(this);
        binding.include3.layou4.setOnClickListener(this);



        fragmentTransaction = fragmentManager.beginTransaction();
    }


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

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

    private void innitial() {
        FragmentTransaction ft = fragmentManager.beginTransaction()
                .add(R.id.context,fragment1)
                .add(R.id.context,fragment2)
                .add(R.id.context,fragment3)
                .add(R.id.context,fragment4);
        ft.commit();
    }

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

四、最终结果

消息界面：

通讯录界面：

发现界面：

我界面：

五、实验总结

发现的问题：

在进行此次实验时，采取官方最新提供的viewbinding出现错误

根据教学内容进行如下配置

配置完成后，在试运行时出现错误

根据查阅相关资料和网上的博客得到解决方法如下

在build.gradle.kts中的dependencies中添加如下依赖

implementation(platform("org.jetbrains.kotlin:kotlin-bom:1.8.0"))

试运行即可成功

总结：

通过使用activity、xml和fragment技术，我们可以实现一个拥有3-4个tab切换效果的app门户框架。在每个tab页中，我们可以使用recycleview来展示列表效果。通过FragmentManager和 FragmentTransaction的配合，我们可以实现片段的切换。在MainActivity的onCreate方法中，我们可以设置默认显示的片段，并将底部导航栏的选项与对应的片段关联起来。这样，我们就可以实现一个功能完善的app门户框架。

六、完整代码

源码地址：https://gitee.com/RE_clips_0/test1/tree/master/