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

最新推荐文章于 2024-07-20 14:35:41 发布

m0_71017327

最新推荐文章于 2024-07-20 14:35:41 发布

阅读量56

点赞数

文章标签： gitee android studio

本文链接：https://blog.csdn.net/m0_71017327/article/details/133858960

版权

一、作业目标

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

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

二、开发背景

开发工具：Android Studio

版本：API 24，Android 7.0

三、项目设计

3.1预期设计

设计页面为类微信主界面，分为上中下三个部分，分别使用button实现底部功能控件、top实现顶部功能标题、main设置中心界面三个xml文件实现需求.

使用item在button控件的第一个tab页实现列表效果

3.2 预期设计效果

实现功能的主体结构一览

应用界面期望

四、项目技术与代码解析

1.按照预期设计，创建top.xml，实现标题，添加TextView控件，在代码区设置字体属性

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="34dp"
        tools:layout_editor_absoluteY="0dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="@color/black"
            android:backgroundTint="@color/design_default_color_on_secondary"
            android:rotationX="0"
            android:shadowColor="@color/white"
            android:text="微信"
            android:gravity="center"
            android:textColor="@color/white"
            android:textColorHighlight="@color/black"
            android:textColorHint="@color/black"
            android:textSize="40dp" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

2. 使用LinearLayout，在下面设置4个垂直的LinearLayout呈线性水平布局，然后修改属性设置各个按钮的布局，每个按钮设计中包括一个图标（ImageView，使用drawable使用预制图标）和对应界面内容（TextView），再添加onclick连接java代码片段以实现切换页面。

<?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"
    android:layout_marginTop="1600px"
    android:layout_gravity="bottom"
    android:background="@color/white">

    <LinearLayout
        android:id="@+id/chat"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:contentDescription="@string/app_name"
            android:src="@android:drawable/stat_notify_chat" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="聊天"
            android:textColor="#000000"
            android:textSize="30dp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/address"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:contentDescription="@string/app_name"
            android:src="@android:drawable/ic_menu_call" />

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

    </LinearLayout>

    <LinearLayout
        android:id="@+id/find"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:contentDescription="@string/app_name"
            android:src="@android:drawable/ic_search_category_default" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:text="发现"
            android:textColor="#000000"
            android:textSize="30dp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/mine"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:contentDescription="@string/app_name"
            android:src="@android:drawable/stat_sys_headset" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:text="我的"
            android:textColor="#000000"
            android:textSize="30dp" />

    </LinearLayout>
</LinearLayout>

3. 添加xml文件设计中间布局界面，进入标题栏部分和底部按钮选择栏，添加一个content部分

4个tab和列表行界面item

<?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"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

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

    <include
        layout="@layout/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

包含的tab页代码

1）tab1中预计实现列表功能，使用recycleview与其他tab不同（textview）

<?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"
    android:orientation="vertical"
    tools:context=".Fragment1">

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

</LinearLayout>

2）

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:context=".Fragment2">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="通讯录页面"
        android:textSize="35sp"/>
</FrameLayout>

3）

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:context=".Fragment3">



    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="发现"
        android:textSize="35sp"/>
</FrameLayout>

4）

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:context=".Fragment4">



    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我的主页"
        android:textSize="35sp"/>
</FrameLayout>

5）item

<?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/textView5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView"
        android:textSize="35sp" />
</LinearLayout>

4.Java代码部分

4.1Fragment模块

本模块因预计在tab1中实现列表功能，重点设计Fragment1，为模拟效果，使用for函数代表数据，使用recycleview实现列表的上下，

利用view来创建列表对象RecyclerView，生成要显示的list，传给Myadapter适配器连接数据与RecyclerView，将数据映射到列表上。

Fragment1

package com.example.myapplication;
import android.os.Bundle;
import androidx.fragment.app.Fragment;

import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

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

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

public class Fragment1 extends Fragment{
    private View view;
    private Myadapter myadapter;
    private RecyclerView recyclerView;
    private List<String> list1;

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,
                             Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.tab1, container, false);
        recyclerView = view.findViewById(R.id.recycleview);
        list1 = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            list1.add("列表数据" + i );
        }
        myadapter = new Myadapter(view.getContext(), list1);
        LinearLayoutManager manager = new LinearLayoutManager(view.getContext());
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(myadapter);
        return view;
    }
}

Fragment2

package com.example.myapplication;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment2 extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,
                             Bundle savedInstanceState){
        return inflater.inflate(R.layout.tab2,container,false);
    }
}

Fragment3，Fragment4与2类似

Myadapter

package com.example.myapplication;

import android.content.Context;
import android.content.Intent;
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 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();
    }
    public class Myholder extends RecyclerView.ViewHolder{
        TextView textView;
        public Myholder(@NonNull View itemView){
            super(itemView);
            textView=itemView.findViewById(R.id.textView5);
        }
    }
}

4.2MainActicity模块

在mainactivity模块中需要实现以下功能

初始化Fragment（public void initial()）
显示与隐藏Fragment （private void showfragment(Fragment fragment)\public void fragmentHide()
对应动作实现切换界面（public void initial()）
监听部分onclick

package com.example.myapplication;

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

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
    Fragment Fragment1,Fragment2,Fragment3,Fragment4;
    FragmentManager manager;
    int transaction;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        linearLayout1=findViewById(R.id.chat);
        linearLayout2=findViewById(R.id.address);
        linearLayout3=findViewById(R.id.find);
        linearLayout4=findViewById(R.id.mine);

        Fragment1=new Fragment1();
        Fragment2=new Fragment2();
        Fragment3=new Fragment3();
        Fragment4=new Fragment4();
        manager=getSupportFragmentManager();

        initial();
        fragmentHide();
        showfragment(Fragment1);

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
    }

    public void onClick(View view){
        fragmentHide();
        if(view.getId()==R.id.chat)
        {
            showfragment(Fragment1);
        }
        else if (view.getId()==R.id.address) {
            showfragment(Fragment2);
        }
        else if (view.getId()==R.id.find) {
            showfragment(Fragment3);
        }
        else if(view.getId()==R.id.mine) {
            showfragment(Fragment4);
        }
    }

    private void showfragment(Fragment fragment){
        transaction=manager.beginTransaction()
                .show(fragment)
                .commit();
    }

    public void initial(){
        transaction=manager.beginTransaction()
                .add(R.id.id_content,Fragment1)
                .add(R.id.id_content,Fragment2)
                .add(R.id.id_content,Fragment3)
                .add(R.id.id_content,Fragment4)
                .commit();
    }

    public void fragmentHide(){
        transaction=manager.beginTransaction()
                .hide(Fragment1)
                .hide(Fragment2)
                .hide(Fragment3)
                .hide(Fragment4)
                .commit();
    }
}

6.项目运行展示

7.代码仓库

https://gitee.com/xanzhuzhiwai/mobile-technology-development/tree/master/

m0_71017327

关注

0
点赞
踩
0

收藏

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

利用view来创建列表对象RecyclerView，生成要显示的list，传给Myadapter适配器连接数据与RecyclerView，将数据映射到列表上。设计页面为类微信主界面，分为上中下三个部分，分别使用button实现底部功能控件、top实现顶部功能标题、main设置中心界面三个xml文件实现需求.本模块因预计在tab1中实现列表功能，重点设计Fragment1，为模拟效果，使用for函数代表数据，使用recycleview实现列表的上下，1.按照预期设计，创建top.xml，实现标题，
复制链接

扫一扫