手把手带你撸一个校园APP(七):校园文化模块(社团活动&表白墙&图说校园)

Source

校园文化是以学生为主体,以课外文化活动为主要内容,校园文化建设是以学生为主体,校园为主要空间,涵盖院校领导、教职工在内,以校园精神为主要特征的一种群体文化。
校园app,作为学校对外展示校园文化的一个窗口,这一模块的功能也必不可少。科师有约 将这一模块分为 【表白墙 & 图说校园 & 社团活动】 三方面来进行实现。

在这里附一下【河北科技师范学院】校训: 敏学、修身、乐业、创新

前言

系列文章

Github地址: 科师有约校园APP

  1. 手把手带你撸一个校园APP(一):项目简介
  2. 手把手带你撸一个校园APP(二):应用启动和欢迎页面
  3. 手把手带你撸一个校园APP(三):用户模块(登录注册等)
  4. 手把手带你撸一个校园APP(四):APP框架及功能设计
  5. 手把手带你撸一个校园APP(五):新闻页面中心模块
  6. 手把手带你撸一个校园APP(六):失物招领&二手交易模块
  7. 手把手带你撸一个校园APP(七):校园文化模块(社团活动&表白墙&图说校园)
  8. 手把手带你撸一个校园APP(八):校园通讯录模块
  9. 手把手带你撸一个校园APP(九):课程表模块(模拟登陆爬取教务处课程信息)
  10. 手把手带你撸一个校园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图片,比如聊天页的消息背景等,以避免因内容导致位图变形。
给一个对比图来感受一下,使用和不使用的区别(左:不使用,右:使用):
9-patch图片
可以看到,使用普通图片的话,变形会很严重,而使用9patch则会好很多。
如何制作9patch图片
制作.9图片有很多种方法,最方便快捷的莫过于在Android Studio中进行制作。具体步骤如下:

step1. 准备png图片,需要至少预留1像素的透明区域,然后放到项目drawable或mipmap文件中;
step2. 选中该文件,右键选择 “Create 9-Patch file …”,之后drawable 文件夹下回出现同名的 .9.png 图片;
step3. 绘制可拉伸区域(在顶部以及左侧划线表示,绘制页面如下图所示,右侧可预览拉伸后的效果);
step4. 和其它图片一样正常使用即可。
制作9-Patch图片

图说校园

效果

在这里插入图片描述

分析

这一部分逻辑比较简单,同样是请求数据列表然后展示。
不同的是,列表采用了瀑布流的形式展示,其实 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());

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

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

发布了72 篇原创文章 · 获赞 199 · 访问量 32万+