APP门户界面设计

一、项目总体介绍
二、各页面(layout)设计展示
- 1、顶部页界面：top.xml页面的设计
- 2、底部页界面：bottom.xml页面的设计
- 3、主题界面：activity_main.xml页面设计
- 4、四个fragment页面设计
三、关键步骤与核心技术说明
- 1、为四个点击按钮绑定点击切换的方法
- - 微信部分java代码
  - 通讯录部分java代码
  - 发现部分java代码
  - 我的部分java代码
- 2、写主函数MainActivity
- - MainActivity总体代码
四、项目总结
五、源码地址

一、项目总体介绍

总体内容：此项目是安卓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"><TextViewandroid: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"><LinearLayoutandroid:id="@+id/first"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView"android:layout_width="match_parent"android:layout_height="wrap_content"app:srcCompat="@mipmap/messige" /><TextViewandroid:id="@+id/textView3"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="@string/textView3"android:textSize="18sp" /></LinearLayout><LinearLayoutandroid:id="@+id/second"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView2"android:layout_width="match_parent"android:layout_height="wrap_content"app:srcCompat="@mipmap/friend" /><TextViewandroid:id="@+id/textView4"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="@string/textView4"android:textSize="18sp" /></LinearLayout><LinearLayoutandroid:id="@+id/third"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView3"android:layout_width="match_parent"android:layout_height="wrap_content"app:srcCompat="@mipmap/finding" /><TextViewandroid:id="@+id/textView5"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="@string/textView5"android:textSize="18sp" /></LinearLayout><LinearLayoutandroid:id="@+id/fourth"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView4"android:layout_width="match_parent"android:layout_height="wrap_content"app:srcCompat="@mipmap/my" /><TextViewandroid: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><FrameLayoutandroid: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 --><TextViewandroid: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 --><TextViewandroid: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 --><TextViewandroid: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 --><TextViewandroid: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}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn 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}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn 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}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn 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}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn 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;@Overrideprotected 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);}@Overridepublic 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

APP的门户界面设计相关推荐

Android Studio 开发–微信APP门户界面设计
Android Studio 开发–微信APP门户界面设计本次Github代码仓库 --crcr1013/MyWechat 文章目录 Android Studio 开发--微信APP门户界面设计前 ...
Android开发——APP门户界面设计
AS开发--APP门户界面设计01 内容简介需求分析 UI设计 top content bottom 后端功能设计 top content bottom 代码模块讲解 layout activity ...
优秀案例|App内弹窗界面设计灵感
弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.无论是模态还是非模态,弹窗都是位于当前页面的最顶层. 模态弹窗常常都还 ...
Android Studio第一次作业：APP门户界面设计
目录实现过程一.界面框架设计思路 1.top.xml 2.bottom.xml 3.整体框架activity_main.xml 二.交互设计思路 1.FragmentManager的创建 2.创建 ...
AndroidStudio学习1 APP门户界面设计
1.内容:实现APP门户界面框架设计,至少包含4个tab页 2.技术:使用布局(layouts)和分段(fragment)对控件进行点击监听 3.界面设计分析 (1)设置登陆界面 activity_m ...
Android Studio 开发–微信APP门户界面设计(二)
本次Github代码仓库 --crcr1013/MyWechat 文章目录一.成果要求二.关键步骤 1.准备工作 1.1环境准备 1.2布局构想及资源准备 2. 朋友圈的RecyclerView布 ...
移动开发技术一：微信门户界面设计
目录一.设计目标二.功能说明三.代码解析 1.顶部代码 2.底部代码 3.基本布局代码 4.中部布局代码 5.MainActivity.java 四.运行展示五.源码仓库地址 Gitee 总结 ...
提升逻辑！APP数据可视化界面设计灵感
如何将繁复的数据转化为更加简洁明朗的可视化图表内容?不同领域的数据处理逻辑能力和网格框架的使用能力都必不可少,集设网www.ijishe.com设计师交流社区带来逻辑满分!12款数据可视化界面设计 ...
APP移动购物界面设计灵感
购物界面展现了不同的店面不一样的风格.不一样的色调.不一样的排版设计,这些元素的多元化给与了店铺之间不同的美感和特色风格,一起来品鉴吧~ 12组购物界面设计灵感 - 集设更多建议: 设计没思路的时候 ...

APP的门户界面设计

APP门户界面设计

一、项目总体介绍

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

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

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

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

4、四个fragment页面设计

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

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

微信部分java代码

通讯录部分java代码

发现部分java代码

我的部分java代码

2、写主函数MainActivity

MainActivity总体代码

四、项目总结

五、源码地址

APP的门户界面设计相关推荐

最新文章

热门文章