Android Studio第一次作业：APP门户界面设计
目录
实现过程
一、界面框架设计思路
1.top.xml
2.bottom.xml
3.整体框架activity_main.xml
二、交互设计思路
1.FragmentManager的创建
2.创建不同的Fragment.java及layout
3.实现Fragment的隐藏和显示
4.完善底部导航
5.对控件进行监听实现交互
最终APP界面效果展示：
总结
项目源代码地址：
本次作业的内容为：根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换。
应用的技术是：使用布局（layouts）和分段（fragment），对控件进行点击监听。
实现过程
一、界面框架设计思路
我们发现对于APP的四个tab页面来说，每个页面都是由三个部分组成的：顶部的固定部分，用来显示自己APP的名字；中间部分的主页面，用来显示不同页面的主内容；底部的导航页面，用来帮助使用者清晰的切换页面。同时由于要实现页面之间的交互（中间的主内容随底部导航切换而切换），因此我们的设计思路为设计三个框架进行拼接：顶部的top、底部的bottom、中间的分段以及最后的总框架。以下是各部分的实现方法：
1.top.xml
该部分的实现方法为：最外层使用一个水平的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="wrap_content"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:background="@color/white"android:gravity="center"android:text="Yangxuefeng的应用"android:textColor="@color/black"android:textSize="30sp" />
</LinearLayout>
2.bottom.xml
该部分的设计思路如下：在该部分中一共有四个图片以及四个文本，每一个文本和一个图片组成一个垂直方向的元素，四个元素又组成一个水平方向的大框架。因此对于此部分，最外层采用水平的linearlayout的布局，在水平布局下又放四个垂直方向的linearlayout的布局，在每个垂直布局下又放上一个imageview和一个textview（imageview放在textview上层）即可。
<?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="90dp"android:background="@color/white"><LinearLayoutandroid:id="@+id/linearLayout_news"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/imageView1"android:layout_width="match_parent"android:layout_height="45dp"android:src="@drawable/news" /><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="消息"android:textColor="@color/black"android:textSize="20dp" /></LinearLayout>
注：以上为水平布局的代码及一个垂直布局的代码，另外三个垂直布局代码修改一些参数即可。
3.整体框架activity_main.xml
整体框架就是将top，bottom以及中间的主内容进行拼接，那么最外层就需要使用一个垂直方向的lineaarlayout，然后将top和bottom部分liclude进来（top在上，bottom在下，中间放主内容），同时中间的主内容使用framelayout，以便进行接下来的交互设计。
<?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" /><FrameLayoutandroid:id="@+id/id_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></FrameLayout><include layout="@layout/bottom" />
</LinearLayout>
二、交互设计思路
想要实现四个tab界面的交互，那么就需要activity调用FragmentManager来获取不同的Fragment，因此首先我们需要创建四个不同的Fragment，用于创建不同tab页面的主页面，之后通过一系列的调用实现不同页面的交互，以下为实现过程：
1.FragmentManager的创建
首先定义FragmentManager并创建相应的函数
private FragmentManager fragmentManager;private void initFragment() {fragmentManager = getFragmentManager();FragmentTransaction transaction = fragmentManager.beginTransaction();transaction.add(R.id.id_content, newsFragment);transaction.add(R.id.id_content, settingFragment);transaction.add(R.id.id_content, friendsFragment);transaction.add(R.id.id_content, discoveryFragment);transaction.commit();2.创建不同的Fragment.java及layout
package com.example.myworkyxf;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import android.app.Fragment;public class discoveryFragment extends Fragment {public discoveryFragment() {// Required empty public constructor}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_discovery, container, false);}
}<?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=".newsFragment"><!-- TODO: Update blank fragment layout --><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="50sp"android:text="这是发现界面" /></LinearLayout>注：其余三个同理，修改参数即可
3.实现Fragment的隐藏和显示
我们需要将四个Fragment隐藏起来，只有在点击相应的导航时才会出现相应的Frgment，而另外三个将会继续隐藏起来，那么实现方法如下：
隐藏Fragment
private void hideFragment(FragmentTransaction transaction) {transaction.hide(newsFragment);transaction.hide(settingFragment);transaction.hide(friendsFragment);transaction.hide(discoveryFragment);}显示Fragment
private void showfragment(int i) {FragmentTransaction transaction = fragmentManager.beginTransaction();hideFragment(transaction);switch (i){case 0:transaction.show(newsFragment);break;case 1:transaction.show(friendsFragment);break;case 2:transaction.show(discoveryFragment);break;case 3:transaction.show(settingFragment);break;default:break;}transaction.commit();}4.完善底部导航
我们在切换界面的时候，为了提升用户的体验感，会让底部导航的文字和图标也发生相应的变化，那么我们可以通过以下方式实现，选中两组颜色不同的图标，同时设置两组不同的文本颜色，在点击不同的导航时相应layout的图标和文字会发生改变：
private ImageView imageView1,imageView2,imageView3,imageView4;private TextView textView1,textView2,textView3,textView4;private void showcolor(int i){imageView1.setImageResource(R.drawable.news);textView1.setTextColor(Color.BLACK);imageView2.setImageResource(R.drawable.friends);textView2.setTextColor(Color.BLACK);imageView3.setImageResource(R.drawable.discovery);textView3.setTextColor(Color.BLACK);imageView4.setImageResource(R.drawable.setting);textView4.setTextColor(Color.BLACK);switch (i){case 0:imageView1.setImageResource(R.drawable.news1);textView1.setTextColor(Color.GREEN);break;case 1:imageView2.setImageResource(R.drawable.friends1);textView2.setTextColor(Color.GREEN);break;case 2:imageView3.setImageResource(R.drawable.discovery1);textView3.setTextColor(Color.GREEN);break;case 3:imageView4.setImageResource(R.drawable.setting1);textView4.setTextColor(Color.GREEN);break;default:break;}}5.对控件进行监听实现交互
对控件的监听放在了onCreate中，同时用到了Onclick(),通过利用switch可以使得点击不同的导航可以获得不同layout的id从而实现显示不同的tab页面，实现了交互。
@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);supportRequestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);linearLayout_news=findViewById(R.id.linearLayout_news);linearLayout_friends=findViewById(R.id.linearLayout_friends);linearLayout_discovery=findViewById(R.id.linearLayout_discovery);linearLayout_setting=findViewById(R.id.linearLayout_setting);linearLayout_news.setOnClickListener(this);linearLayout_friends.setOnClickListener(this);linearLayout_discovery.setOnClickListener(this);linearLayout_setting.setOnClickListener(this);imageView1=findViewById(R.id.imageView1);imageView2=findViewById(R.id.imageView2);imageView3=findViewById(R.id.imageView3);imageView4=findViewById(R.id.imageView4);textView1=findViewById(R.id.textView1);textView2=findViewById(R.id.textView2);textView3=findViewById(R.id.textView3);textView4=findViewById(R.id.textView4);initFragment();}@Overridepublic void onClick(View v){switch (v.getId()){case R.id.linearLayout_news:showfragment(0);showcolor(0);break;case R.id.linearLayout_friends:showfragment(1);showcolor(1);break;case R.id.linearLayout_discovery:showfragment(2);showcolor(2);break;case R.id.linearLayout_setting:showfragment(3);showcolor(3);break;default:break;}}最终APP界面效果展示：
总结
本次作业初步使我接触到了安卓开发并对安卓开发有了初步的了解。
项目源代码地址：
Android Studio: android studio
Android Studio第一次作业：APP门户界面设计相关推荐
- Android Studio 开发–微信APP门户界面设计
Android Studio 开发–微信APP门户界面设计 本次Github代码仓库 --crcr1013/MyWechat 文章目录 Android Studio 开发--微信APP门户界面设计 前 ...
- Android Studio 开发–微信APP门户界面设计(二)
本次Github代码仓库 --crcr1013/MyWechat 文章目录 一.成果要求 二.关键步骤 1.准备工作 1.1环境准备 1.2布局构想及资源准备 2. 朋友圈的RecyclerView布 ...
- Android开发——APP门户界面设计
AS开发--APP门户界面设计01 内容简介 需求分析 UI设计 top content bottom 后端功能设计 top content bottom 代码模块讲解 layout activity ...
- AndroidStudio学习1 APP门户界面设计
1.内容:实现APP门户界面框架设计,至少包含4个tab页 2.技术:使用布局(layouts)和分段(fragment)对控件进行点击监听 3.界面设计分析 (1)设置登陆界面 activity_m ...
- Android studio第一次作业：实现Wechat界面
目录 移动开发.Android studio实现类Wechat界面 1>类Wechat界面有哪些功能 2>分析如何实现这些功能 3>bottom.xml的构造 4>top.xm ...
- AS作业一：APP门户界面设计（微信界面）
一.开发软件:Android studio 二.内容:实现微信界面框架设计,包含4个tab页,能实现tab页之间的点击切换 第一步:放入图标 把复制的图标粘贴放在/app/res/drawable 目 ...
- Android Studio 之 实现app打开界面透明化效果
第一步:在src/main/res/values/styles.xml中添加AppThemeTranslucent 这个自定义的界面透明化主题 <style name="AppThem ...
- APP的门户界面设计
APP门户界面设计 一.项目总体介绍 二.各页面(layout)设计展示 1.顶部页界面:top.xml页面的设计 2.底部页界面:bottom.xml页面的设计 3.主题界面:activity_ma ...
- AS第一次作业:实现APP门户界面框架设计
实验内容:请根据课程实操实现APP门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换: 技术:使用布局(layouts)和分段(fragment),对控件进行点击监听: 目录 App ...
最新文章
- java字符串标胶大小_Java 标签上显示string长度如果超出标签大小
- Struts2内置拦截器的简要介绍
- 理解 CSS 属性值语法
- SSL/TLS协议信息泄露漏洞(CVE-2016-2183)【原理扫描】 服务器支持 TLS Client-initiated 重协商攻击(CVE-2011-1473)【原理扫描】
- combobox控件 如何把三角形放大_初中数学|全等三角形全部知识点总结
- 唠唠 RDS 那些事 —— RDS on Windows Server 2016 第二篇
- Visio 不能使用方向键移动图形的解决办法
- IE7,IE8,上传文件控件input file和asp.net FileUpload控件无法获取完整路径的解决办法...
- CentOS 6.3_Nagios安装笔记
- Android 使用数据库操作应用加锁、未加锁，列表展示效果
- 团队合作开发常用git操作
- CPC认证的常规测试项目
- 123457123457#0#-----com.cym.shuXueWangGuo1--前拼后广--儿童数学
- 小红书的文案有什么特点
- 是配置在计算机硬件上的最基本的系统软件,试题库
- 自制Unity文件查找器，支持拼音搜索
- 大数据必学语言Scala（一）：Scala简介
- 什么是CSRF，怎么防范CSRF!
- C语言中的字符串与字符串函数
- chrome 54字体变大问题解决方案