APP的门户界面设计

最新推荐文章于 2023-10-16 17:50:16 发布
最新推荐文章于 2023-10-16 17:50:16 发布
阅读量577 收藏 3
点赞数 1
文章标签： android studio java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45863018/article/details/120662936
版权

APP门户界面设计

一、项目总体介绍

总体内容：此项目是安卓APP的门户界面框架设计，包含了4个table页面，能简单实现table页面之间的点击切换功能。

使用到的技术：使用布局（layout）和分段（fragment），对控件进行点击监听。

页面总体效果：
请添加图片描述

代码目录结构：
在这里插入图片描述

二、各页面(layout)设计展示

1、顶部页界面：top.xml页面的设计

（1）在layout里新建一个名为top.xml的文件，在布局小组件俩面拖一个LinearLayout，然后在LinearLayout之下拖一个textView进来

在这里插入图片描述

（2）然后再稍微设计一下字体和背景颜色，代码如下：

<?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="0dp"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:background="@color/teal_200"
        android:gravity="center"
        android:text="@string/textView"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

（3）效果图如下：
在这里插入图片描述

2、底部页界面：bottom.xml页面的设计

（1）将需要用到的四个小图标准备好拖入mipmap中：

在这里插入图片描述

（2）在layout里新建一个名为tbottom.xml的文件，在布局小组件俩面拖一个横向排列的LinearLayout，然后在LinearLayout之下拖四个纵向排列的LinearLayout进来，在每个LinearLayout中加入ImageView图片分别选择好：

在这里插入图片描述

（3）然后再稍微设计一下字体和相对布局位置，代码如下：

<?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:backgroundTint="@android:color/darker_gray">

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@mipmap/messige" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/textView3"
            android:textSize="18sp" />

    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@mipmap/friend" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/textView4"
            android:textSize="18sp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@mipmap/finding" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/textView5"
            android:textSize="18sp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@mipmap/my" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/textView6"
            android:textSize="18sp" />

    </LinearLayout>
</LinearLayout>

（4）效果图如下：

在这里插入图片描述

3、主题界面：activity_main.xml页面设计

（1）在布局小组件里面想拖一个LinearLayout，在此布局之下拖一个FragmentLayout并将其id改为content，在code中用include引入之前的顶部界面top.xml以及底部界面bottom.xml

在这里插入图片描述

（2）代码如下：

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

    <include layout="@layout/top"></include>

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

    <include layout="@layout/bottom"></include>

</LinearLayout>

（3）效果图如下：

在这里插入图片描述

4、四个fragment页面设计

我们之前在bottom里面放了四个按钮，当每一个按钮点击事件触发之后要跳转到相应的页面（fragment）中去，所以要给四个分别设计单独页面

（1）聊天页面设计fragment_first.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".first">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是微信聊天页面"
        android:textSize="50sp" />

</LinearLayout>

效果图如下：

在这里插入图片描述

（2）通讯录页面设计fragment_second.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".first">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="通讯录"
        android:textSize="50sp" />

</LinearLayout>

效果图如下：

在这里插入图片描述

（3）朋友圈页面设计fragment_third.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".first">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="朋友圈"
        android:textSize="50sp" />

</LinearLayout>

效果图如下：

在这里插入图片描述

（4）我的页面设计fragment_first.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".first">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我的详情界面"
        android:textSize="50sp" />

</LinearLayout>

效果图如下：
在这里插入图片描述

三、关键步骤与核心技术说明

1、为四个点击按钮绑定点击切换的方法

想要有跳转页面，光有布局是不行，需要将布局按钮与事件相结合，当点击按钮时出发监听事件，实现跳转，此时就需要为每个linearLayout与java类绑定，在java文件中写方法实现跳转。先新建四个java文件分别与bottom里的每个linearLayout绑定

微信部分java代码
package com.example.myfirstapplication;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

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


public class first extends Fragment {

    public first() {
        // Required empty public constructor
    }




    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_first, container, false);
    }
}
通讯录部分java代码
package com.example.myfirstapplication;

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

import androidx.fragment.app.Fragment;


public class second extends Fragment {

    public second() {
        // Required empty public constructor
    }




    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_second, container, false);
    }
}
发现部分java代码
package com.example.myfirstapplication;

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

import androidx.fragment.app.Fragment;


public class third extends Fragment {

    public third() {
        // Required empty public constructor
    }




    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_third, container, false);
    }
}
我的部分java代码
package com.example.myfirstapplication;

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

import androidx.fragment.app.Fragment;


public class fourth extends Fragment {

    public fourth() {
        // Required empty public constructor
    }




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

2、写主函数MainActivity

现在有了四个java类，就可以new他们的实例对象进行点击切换的事件了。

新建四个Fragment对象，并使用FragmentManager来管理

private Fragment first = new first();
private Fragment second = new second();
private Fragment third = new third();
private Fragment fourth = new fourth();

private FragmentManager fragmentManager;

创建四个linearLayout对象，并绑定点击的监听事件

private LinearLayout linearLayout1;
private LinearLayout linearLayout2;
private LinearLayout linearLayout3;
private LinearLayout linearLayout4;


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

    linearLayout1 = findViewById(R.id.first);
    linearLayout2 = findViewById(R.id.second);
    linearLayout3 = findViewById(R.id.third);
    linearLayout4 = findViewById(R.id.fourth);

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

    initFragment();
}

初始化fragment

protected void initFragment() {
    fragmentManager = getSupportFragmentManager();
    FragmentTransaction transaction = fragmentManager.beginTransaction();
    transaction.add(R.id.content,first);
    transaction.add(R.id.content,second);
    transaction.add(R.id.content,third);
    transaction.add(R.id.content,fourth);
    hideFragment(transaction);
    transaction.show(second);
    transaction.commit();

}

编写隐藏fragment代码

protected void hideFragment(FragmentTransaction transaction){
    transaction.hide(first);
    transaction.hide(second);
    transaction.hide(third);
    transaction.hide(fourth);
}

编写点击事件

@Override
public void onClick(View v) {
    switch (v.getId()){
        case R.id.first:
            showFragment(1);
        case R.id.second:
            showFragment(2);
        case R.id.third:
            showFragment(3);
        case R.id.fourth:
            showFragment(4);
    }

编写展示fragment的方法

private void showFragment(int i) {
    FragmentTransaction transaction = fragmentManager.beginTransaction();
    hideFragment(transaction);
    switch (i){
        case 1:
            transaction.show(first);
            break;
        case 2:
            transaction.show(second);
            break;
        case 3:
            transaction.show(third);
            break;
        case 4:
            transaction.show(fourth);
            break;
    }
    transaction.commit();
}
MainActivity总体代码
package com.example.myfirstapplication;

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{


    private Fragment first = new first();
    private Fragment second = new second();
    private Fragment third = new third();
    private Fragment fourth = new fourth();

    private FragmentManager fragmentManager;

    private LinearLayout linearLayout1;
    private LinearLayout linearLayout2;
    private LinearLayout linearLayout3;
    private LinearLayout linearLayout4;


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

        linearLayout1 = findViewById(R.id.first);
        linearLayout2 = findViewById(R.id.second);
        linearLayout3 = findViewById(R.id.third);
        linearLayout4 = findViewById(R.id.fourth);

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

        initFragment();
    }

    protected void initFragment() {
        fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.content,first);
        transaction.add(R.id.content,second);
        transaction.add(R.id.content,third);
        transaction.add(R.id.content,fourth);
        hideFragment(transaction);
        transaction.show(second);
        transaction.commit();

    }

    protected void hideFragment(FragmentTransaction transaction){
        transaction.hide(first);
        transaction.hide(second);
        transaction.hide(third);
        transaction.hide(fourth);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.first:
                showFragment(1);
            case R.id.second:
                showFragment(2);
            case R.id.third:
                showFragment(3);
            case R.id.fourth:
                showFragment(4);
        }
    }

    private void showFragment(int i) {
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 1:
                transaction.show(first);
                break;
            case 2:
                transaction.show(second);
                break;
            case 3:
                transaction.show(third);
                break;
            case 4:
                transaction.show(fourth);
                break;
        }
        transaction.commit();
    }
}

四、项目总结

这次的实验算是一个比较入门的项目，但是其中的困难点也有很多，比如监听事件绑定的时候绑定的是bottom里面的四个linearLayout，而不是fragment里面的linearLayout，这是个大坑，否者项目起不来，里面需要理解的就是java主函数中的绑定监听以及监听实现的逻辑，其中有点击事件，点击后就要显示那个fragment，其余的就要隐藏，这些都是要写方法来实现的。多多练习敲代码慢慢寻找其中的逻辑啦。

五、源码地址

​ gitee源码地址 如果打不开请手动转到： https://gitee.com/taomurong/ASFirstHomework

拔刀挽落英
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动开发——app门户设计
Goblin147的博客
10-09 300
（1）顶部界面设计（top.xml） ①layout下新建top.xml文件和拖入Linear Layout和TextView组件 ②效果图： ③对应代码： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_h
APP门户界面设计
qq_51136209的博客
10-09 598
APP门户界面设计页面及技术要求搭建页面结构 页面及技术要求 页面要求：实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换 技术要求：使用布局（layouts）和分段（fragment），对控件进行点击监听 搭建页面结构 需要 ...
app门户界面设计
weixin_51433038的博客
10-09 193
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
MATLAB APP design-APP登录界面的设计
02-19
在账号和密码提示框中输入相关信息，当输入的账号和密码正确时，点击登录按钮后，登录界面会跳转到工作界面，如果输入的账号和密码错误，则会提示账号和密码错误的信息...跳转界面可以通过修改程序中的Run函数来实现。
app界面设计准则
07-22
资源名称：app界面设计准则资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
APP界面设计响应式网页模板
01-22
APP界面设计响应式网页模板
MATLAB APP Design 界面窗口化设计
05-29
MATLAB APP Design 是一套有关MATLAB APP窗口化设计的教程，...实例五：MATLAB APP design-APP登录界面的设计 实例六：MATLAB APP design- 凸透镜成像光学研究小工具 实例七：MATLAB APP design- 灰色预测-G（1，1）
Android开发——app门户设计
m0_61572100的博客
10-09 172
内容简介 源码地址：Android开发: 本人开发学习Androidhttps://gitee.com/kyrieIrving1/android-development 1.实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换； 2.使用布局（layouts）和分段（fragment），对控件进行点击监听 3.使用git将项目传至gitee。 UI设计 以手机微信主界面为例：   应将主界面分为三个版块，top,content,bottom； top   在top版块应该展示
门户系统界面.zip
03-28
分布式商城系统的门户系统界面，免费给大家提供，资源是css,js,image和jsp，逻辑都是写好的，直接使用即可。希望大家认真学习。
移动技术开发 APP门户界面设计
peanutaasdzz的博客
10-09 415
一、APP门户设计要求 1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换； 2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听； 二、UI界面设计 1.制作顶部文件top.xml ...
移动开发技术一：微信门户界面设计
weixin_50281535的博客
09-29 832
2.底部代码 3.基本布局代码 4.中部布局代码 （1）fragment_liaotian.xml （2）fragment_lianxiren.xml （3）fragment_faxian.xml （4）fragment_shezhi.xml 5.MainActivity.java （1）onCreate函数 （2）onClick函数 （3）restartButton函数 （4）initFragment函数 （5）initView函数 （6）initEvent函数 （7）hideView函数 （8
安卓开发APP门户界面
qq_45930996的博客
10-12 542
功能说明 设计app的门户界面，类似于微信那样 主要功能如下： 有四个界面 通过点击导航栏的图片按钮切换界面 代码思路分析 编写布局文件 看一下最终实现的效果，分析布局文件的编写 这个界面是app打开时的默认界面。可以看出这个界面由三部分组成 页面顶部的标题栏 中间的不同界面切换 底部的导航栏 这样我们就需要写多个xml布局文件，并将他们组合到一个xml布局文件中。 首先编写top.xml文件，实现顶部的标题栏 然后编写底部的导航栏bottom.xml。这个布局文件中包含四个ImageButton
《果然新鲜》电商项目（27）- 门户界面
学习交流，答疑解惑，可以查看博客主页左侧我的推广哦！
01-12 521
该项目是采用目前比较流行的`SpringBoot`/`SpringCloud`构建微服务电商项目，项目叫 **《果然新鲜》**，实现一套串联的微服务电商项目，能完全掌握该知识，可以在一线城市拿到月薪25+k薪资。 完全符合一线城市微服务电商的需求，对中国程序猿学习微服务电商架构，有非常大的帮助，该项目涵盖从微服务电商需求讨论、数据库设计、技术选型、互联网安全架构、整合`SpringCloud`各自组件、分布式基础设施、使`Docker+k8s+jenkins`实现微服务自动化部署、项目上线域名配置
APP门户页面设计与开发
最新发布
wht10031000310的博客
10-16 76
在此次APP门户设计实验中，我有许多课堂上没有搞明白的问题，老师的讲课速度我有点跟不上。根据id将4个fragment.xml 的文件内容导入4个对象fragment中，设置fragmentHide函数，使得4个子页面的文本内容隐藏起来，设置fragmentshow函数，显示所选参数的内容。通过linearLayout.setOnclickListener()监听用户点击，在onClick函数中通过对比获得到的id和linearLayout（1~4）的id，决定显示对应的fragment。
App门户界面设计
RRros的博客
10-10 109
App门户界面设计项目要求具体开发步骤项目建立top.xml页面设计chat.xmlFragment创建MainActivity修改GitHub代码库链接 项目要求 1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换； 2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听； 具体开发步骤 项目建立 新建一个项目project,命名为myapp，在命名中不要出现中文字符以及空格等符号，以免在后续的开发中出现不必要的错误。
电子商务门户界面设计总结
养有道
08-14 657
刚教完电子商务门户网站界面设计，顺便把设计教学过程进行总结，做个小归纳。
APP交互界面设计难点
05-15
APP交互界面设计的难点有以下几个方面： 1.用户体验设计：APP界面需要考虑用户的操作习惯、心理感受和需求，要让用户感受到操作的流畅和舒适，从而提高用户体验。 2.信息架构设计：APP界面需要考虑信息的组织和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值