校园文化是以学生为主体,以课外文化活动为主要内容,校园文化建设是以学生为主体,校园为主要空间,涵盖院校领导、教职工在内,以校园精神为主要特征的一种群体文化。
校园app,作为学校对外展示校园文化的一个窗口,这一模块的功能也必不可少。科师有约 将这一模块分为 【表白墙 & 图说校园 & 社团活动】 三方面来进行实现。
在这里附一下【河北科技师范学院】校训: 敏学、修身、乐业、创新
前言
系列文章
Github地址: 科师有约校园APP
- 手把手带你撸一个校园APP(一):项目简介
- 手把手带你撸一个校园APP(二):应用启动和欢迎页面
- 手把手带你撸一个校园APP(三):用户模块(登录注册等)
- 手把手带你撸一个校园APP(四):APP框架及功能设计
- 手把手带你撸一个校园APP(五):新闻页面中心模块
- 手把手带你撸一个校园APP(六):失物招领&二手交易模块
- 手把手带你撸一个校园APP(七):校园文化模块(社团活动&表白墙&图说校园)
- 手把手带你撸一个校园APP(八):校园通讯录模块
- 手把手带你撸一个校园APP(九):课程表模块(模拟登陆爬取教务处课程信息)
- 手把手带你撸一个校园APP(十):APP通用模块(更新,意见反馈等)
社团组织
社团活动是校园文化的重要载体,也是学生愉悦身心、拓宽兴趣、开阔视野的主要阵地。
丰富多彩的社团活动,能提升学生能力,培养兴趣爱好,激发学生寻找个人特色与才能。每个学校的校园文化也多由此体现。因此设置这个模块,用以展示校园的组织社团等,也为各组织社团提供一种新的线上宣传途径。
实现效果
实现
数据库
字段名 | 描述 | 类型 | 是否主键 |
---|---|---|---|
objectId | 唯一标识 | String | 是 |
title | 标题 | String | - |
description | 描述 | Number | - |
pic | 图片 | String | - |
time | 发布时间 | Date | - |
安卓代码
查询列表数据,并展示
mAdapter = new GeneralAdapter();
teamBeen = new ArrayList<>();
rvTeam.setLayoutManager(new LinearLayoutManager(TeamActivity.this));
BmobQuery<TeamBean> query = new BmobQuery<TeamBean>();
query.order("-time");
query.setLimit(15);
query.findObjects(new FindListener<TeamBean>() {
@Override
public void done(List<TeamBean> object, BmobException e) {
if (e == null) {
LogUtils.e("查询成功:共" + object.size() + "条数据。");
teamBeen.addAll(object);
mAdapter.setData(teamBeen);
} else {
LogUtils.e("失败:" + e.getMessage() + "," + e.getErrorCode());
}
}
});
rvTeam.setAdapter(mAdapter);
表白墙
近年来,表白墙作为大学校园一种新的社交平台迅速崛起,不仅流行范围广、传播速度快,而且显得异常活跃。这种别具一格的表达方式,由于具有鲜明的时代特点和浓厚的感情色彩,深受大学生的青睐。
效果
表白墙及发布页面如下:
本人实在没有美术与设计功底,审美也常年掉线。还望勿笑~~
分析
从代码层面来分析的话,其实就是数据的发布与查询操作。
这部分代码重复性较高,此处就不再赘述了。着重讲下表白信的背景图片【9-patch 图片】。
9-patch 图片
9-patch 图片常叫做 .9图片。因为文件的后缀名是 .9.png 。
是一个指定一些区域可拉伸,另外一些区域不拉伸的位图,同时还可以指定显示内容的区域。在Android开发中,经常使用到.9图片,比如聊天页的消息背景等,以避免因内容导致位图变形。
给一个对比图来感受一下,使用和不使用的区别(左:不使用,右:使用):
可以看到,使用普通图片的话,变形会很严重,而使用9patch则会好很多。
如何制作9patch图片
制作.9图片有很多种方法,最方便快捷的莫过于在Android Studio中进行制作。具体步骤如下:
step1. 准备png图片,需要至少预留1像素的透明区域,然后放到项目drawable或mipmap文件中;
step2. 选中该文件,右键选择 “Create 9-Patch file …”,之后drawable 文件夹下回出现同名的 .9.png 图片;
step3. 绘制可拉伸区域(在顶部以及左侧划线表示,绘制页面如下图所示,右侧可预览拉伸后的效果);
step4. 和其它图片一样正常使用即可。
图说校园
效果
分析
这一部分逻辑比较简单,同样是请求数据列表然后展示。
不同的是,列表采用了瀑布流的形式展示,其实 RecycleView 可以轻易实现这种效果。
数据请求部分代码重复性较高,在此就不再赘述了。这里着重讲跳转页面时的转场动画【共享元素】的实现。
共享元素(Shared Element)
共享元素属于 Material Design, 为场景切换提供了非常优雅的视觉效果,在进入和退出页面,元素共享页面的时候可以添加想要的效果,能给人元素在运动的感觉。Gif 图如下:
实现
数据库
数据库字段设计如下:
字段名 | 描述 | 类型 | 是否主键 |
---|---|---|---|
objectId | id | String | 是 |
name | 标题 | String | - |
description | 描述 | Number | - |
pic | 图片 | String | - |
createdAt | 发布时间 | Date | - |
查询列表等数据请求操作部分代码重复性较高,可参考之前文件代码。在此就不再赘述了。
共享元素
Step1:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowContentTransitions">true</item>
</style>
Step2:
为共享元素设置 transtionName,两个界面都需要要添加,用以标识哪两个元素共享。
<!--已省略其它属性-->
<ImageView
android:layout_width="274dp"
android:layout_height="307dp"
android:transitionName="shareView" />
当然也可以在代码中设置:
imageView.setTransitionName("shareView");
Step3:
设置好以上的参数后,就可以通过跳转来添加相应的动画了。需要用到 ActivityOptionsCompat 的 makeSceneTransitionAnimation 函数。代码如下:
Intent i = new Intent(mContext, PicDetailActivity.class);
ActivityOptionsCompat optionsCompat =
ActivityOptionsCompat.makeSceneTransitionAnimation(mContext, holder.image, "shareView");
startActivity(i,optionsCompat.toBundle());
设置多个元素共享的代码如下:
Intent i = new Intent(mContext, PicDetailActivity.class);
Pair<View, String> pair = new Pair<View, String>(holder.image,"shareView");
Pair<View,String> pairText = new Pair<View, String>(holder.text,"text");
ActivityOptionsCompat optionsCompat =
ActivityOptionsCompat.makeSceneTransitionAnimation(mContext, pair,pairText);
startActivity(i,optionsCompat.toBundle());
至此,本文内容全部完毕,项目中内容均为简易实现,深究的话,可以优化的细节极多,然而作者可能并没有更大的精力去全部完善。此项目也权当抛砖引玉之用,望以后可以有学弟学妹做出真正的产品。
另外,项目中大量依赖或采用了第三方项目的代码。在此向各位有分享精神的大佬们致敬!
如果本文对你有所帮助,还望可以随手赏一个点赞哈 ~ ~