移动开发技术作业：App门户页面设计与开发

m0_65031219

已于 2023-10-16 19:40:51 修改

阅读量62

点赞数

文章标签： gitee

于 2023-10-16 18:55:27 首次发布

本文链接：https://blog.csdn.net/m0_65031219/article/details/133863923

版权

作业要求：

1.设计一个app的门户框架，需要实现3-4个tab切换效果；本功能要求需要的技术为：activity、xml、fragment

2、在任一tab页中实现列表效果；本功能的实现需要使用recycleview；

一.APP主界面

二.实现步骤

1.在layout中创建top.xml 文件实现顶部app标题

<?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:gravity="top"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="50sp"/>
</LinearLayout>

2.创建bottom.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="match_parent"
    android:layout_height="100dp"
    android:layout_gravity="bottom"
    android:background="#D8D8D8"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/tab_message"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#FFFFFF"
        android:contentDescription="@null"
        android:gravity="center"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:contentDescription="@string/app_name"
            android:scaleType="centerInside"
            android:src="@android:drawable/stat_notify_chat" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center_horizontal"
            android:text="消息"
            android:textColor="#000000"
            android:textSize="20dp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_friend"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"

        android:background="#FFFFFF"
        android:contentDescription="@null"
        android:gravity="center"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:contentDescription="@string/app_name"
            android:src="@android:drawable/stat_sys_phone_call" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center_horizontal"
            android:text="好友"
            android:textColor="#000000"
            android:textSize="20dp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_find"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"

        android:background="#FFFFFF"
        android:contentDescription="@null"
        android:gravity="center"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:contentDescription="@string/app_name"
            android:src="@android:drawable/ic_menu_search" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center_horizontal"
            android:text="通讯录"
            android:textColor="#000000"
            android:textSize="20dp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_mine"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"

        android:background="#FFFFFF"
        android:contentDescription="@null"
        android:gravity="center"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:contentDescription="@string/app_name"
            android:src="@android:drawable/ic_menu_preferences" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#FFFFFF"
            android:gravity="center_horizontal"
            android:text="设置"
            android:textColor="#000000"
            android:textSize="20dp" />

    </LinearLayout>
</LinearLayout>

创建 find.xml ,friend.xml,message.xml,mine.xml 来作为四个不同的中间内容框

以message.xml为例

代码如下

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:id_context=".Fragment_xiaoxi">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="66dp"
        tools:layout_editor_absoluteY="127dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

创建message，friend，find，mine四个布局文件对应四个中间内容文件实现界面布局的切换

以message.java为例

代码如下

package edu.hubu.work1;

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.ArrayList;
import java.util.List;

public class message extends Fragment{

    View view;
    Myadapter adapter;
    RecyclerView recyclerView;
    List<String> list;

    public message() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        view = inflater.inflate(R.layout.message, 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;
    }
}

接下来是MainActivity2（重点）

定义Frags_init(); Frags_show(Fragment f); Frags_hide();onClick(View v) 通过这几个函数实现对布局文件的调用，隐藏，切换等，从而实现中间布局内容的切换以及底部选择框图标的变亮与变暗。
首先定义四个Fragment类对象，然后建立一个FragmentManager 类对象fragmentManager

Frags_init()代码：

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)代码：

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)代码：

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

将需要的图片复制到drawable下

编辑文件Myadapter.java

package edu.hubu.work1;

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> {

    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 holder=new Myholder(view);

        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull Myholder holder, int position) {

        holder.textView1.setText(list1.get(position));

    }

    @Override
    public int getItemCount() {

        return list1.size();
    }

    public class Myholder extends RecyclerView.ViewHolder{

        TextView textView1;
        public  Myholder(@NonNull View itemview ){
            super(itemview);
            textView1=itemview.findViewById(R.id.textView9);
        }
    }
}

三.运行代码，结果如下

实验心得：这次as设计app门户框架中我遇到了许多问题，如报错Error type 3 Error: Activity class {} does not exist，如不顾提醒多次运行会做出上一个虚拟机的结果。该问题在重构代码并重启as后解决。有时候也会因为控件id写错或者没调参数这种小问题报错。总之，在这次设计实验后，我对门户框架的设计更加了解，对于as的使用也有了提升。

总结

本文介绍了AndriodStudio制作门户界面的大致流程以及界面切换的功能，如有错误，敬请指正。
码云链接：lbsjjb: 移动开发作业 - Gitee.com

m0_65031219

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
移动开发技术作业：App门户页面设计与开发

onClick(View v) 通过这几个函数实现对布局文件的调用，隐藏，切换等，从而实现中间布局内容的切换以及底部选择框图标的变亮与变暗。1.设计一个app的门户框架，需要实现3-4个tab切换效果；创建 find.xml ,friend.xml,message.xml,mine.xml 来作为四个不同的中间内容框。创建message，friend，find，mine四个布局文件对应四个中间内容文件实现界面布局的切换。list.add("这是第"+i+"行消息");android:text="消息"
复制链接

扫一扫