手把手带你撸一个校园APP（七）：校园文化模块（社团活动表白墙图说校园）

校园文化是以学生为主体，以课外文化活动为主要内容，校园文化建设是以学生为主体，校园为主要空间，涵盖院校领导、教职工在内，以校园精神为主要特征的一种群体文化。
校园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>() {@Overridepublic 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，两个界面都需要要添加，用以标识哪两个元素共享。

<!--已省略其它属性-->
<ImageViewandroid: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());

至此，本文内容全部完毕，项目中内容均为简易实现，深究的话，可以优化的细节极多，然而作者可能并没有更大的精力去全部完善。此项目也权当抛砖引玉之用，望以后可以有学弟学妹做出真正的产品。
另外，项目中大量依赖或采用了第三方项目的代码。在此向各位有分享精神的大佬们致敬！

如果本文对你有所帮助，还望可以随手赏一个点赞哈 ~ ~