本系列为了总结一下手上的知识,致敬我的2018 本篇的重点在于:后端数据在移动端的展现 本篇总结的技术点:
材料设计串烧
、Retrofit+RxJava访问请求
、MVP模式的思考
、App的打包
将App上传到服务器,提供下载地址
、
最外层是一个DrawerLayout并和Toolbar相关联 DrawerLayout主要分为左和中间两块,核心的是中间,左边顺带用一下NavigationView 中间主页面由AppBarLayout+CollapsingToolbarLayout+Toolbar祖孙三人打头阵 中间主题由RecyclerView骁勇杀敌,最底下由BottomNavigationBar收尾 另外FloatingActionButton+bottom_sheet补刀
布局概览.png
总体来说和网页端风格保持一致
Android版 | 网页版手机端 |
---|---|
| .png |
布局就不贴了,挺多的,也没什么技术含量,有兴趣的看源码吧 有关材料设计,我写过一个系列:详见--Android材料设计Material Design 开篇前言
为了方便起见,我写了一个IconItem类,并定义了一个常量数组:
------------------
public class IconItem {
private int color;
private int iconId;
private String info;
//其他省略...
}
------------------
public static final IconItem[] BNB_ITEM = new IconItem[]{
new IconItem("Android", R.drawable.icon_android, R.color.color4Android),
new IconItem("Spring", R.drawable.icon_spring_boot, R.color.color4SpringBoot),
new IconItem("React", R.drawable.icon_react, R.color.color4React),
new IconItem("编程随笔", R.drawable.icon_note, R.color.color4Note),
new IconItem("系列文章", R.drawable.icon_code, R.color.color4Ser),
};
------------------使用:---
IconItem[] items = Cons.BNB_ITEM;
for (IconItem item : items) {
mIdBnb.addItem(new BottomNavigationItem(item.getIconId(), item.getInfo())
.setActiveColorResource(item.getColor()));
}
mIdBnb.initialise();
//每转一圈,换一种颜色
mIdSrl.setColorSchemeColors(
0xffF60C0C,//红
0xffF3B913,//橙
0xffE7F716,//黄
0xff3DF30B,//绿
0xff0DF6EF,//青
0xff0829FB,//蓝
0xffB709F4//紫
);
mIdSrl.setOnRefreshListener(() -> {
//TODO刷新逻辑
});
------------------------------
mABDT = new ActionBarDrawerToggle(
this, mIdDlRoot, mToolbar, R.string.str_open, R.string.str_close);
mIdDlRoot.addDrawerListener(mABDT);
------------------------------
@Override
protected void onPostCreate(@Nullable Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
mABDT.syncState();//加了这个才有酷炫的按钮变化
}
mBottomSheetBehavior = BottomSheetBehavior.from(mBottomSheet);
mIdFab.setOnClickListener(v -> {
if (isOpen) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
} else {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
isOpen = !isOpen;
});
祖孙三头.gif
移出 | 移入 |
---|---|
| |
/**
* 作者:张风捷特烈<br/>
* 时间:2018/11/30 0030:14:34<br/>
* 邮箱:1981462002@qq.com<br/>
* 说明:FloatingActionButton伴随动画
*/
public class FabFollowListBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
private static final int MIN_DY = 30;
public FabFollowListBehavior(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
}
/**
* 初始时不调用,滑动时调用---一次滑动过程,之调用一次
*/
@Override
public boolean onStartNestedScroll(
@NonNull CoordinatorLayout coordinatorLayout,
@NonNull FloatingActionButton child,
@NonNull View directTargetChild,
@NonNull View target, int axes, int type) {
return true;
}
/**
* @param dyConsumed 每次回调前后的Y差值
*/
@Override
public void onNestedScroll(
@NonNull CoordinatorLayout coordinatorLayout,
@NonNull FloatingActionButton child,
@NonNull View target, int dxConsumed,
int dyConsumed, int dxUnconsumed, int dyUnconsumed, int type) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type);
//平移隐现
if (dyConsumed > MIN_DY) {//上滑:消失
showOrNot(coordinatorLayout, child, false).start();
} else if (dyConsumed < -MIN_DY) {//下滑滑:显示
showOrNot(coordinatorLayout, child, true).start();
}
//仅滑动时消失
// if (dyConsumed > MIN_DY || dyConsumed < -MIN_DY) {//上滑:消失
// showOrNot(child).start();
// }
}
private Animator showOrNot(CoordinatorLayout coordinatorLayout, final View fab, boolean show) {
//获取fab头顶的高度
int hatHeight = coordinatorLayout.getBottom() - fab.getBottom() + fab.getHeight();
int end = show ? 0 : hatHeight;
float start = fab.getTranslationY();
ValueAnimator animator = ValueAnimator.ofFloat(start, end);
animator.addUpdateListener(animation ->
fab.setTranslationY((Float) animation.getAnimatedValue()));
return animator;
}
private Animator showOrNot(final View fab) {
//获取fab头顶的高度
ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
animator.addUpdateListener(animation -> {
fab.setScaleX((Float) animation.getAnimatedValue());
fab.setScaleY((Float) animation.getAnimatedValue());
});
return animator;
}
}
/**
* 作者:张风捷特烈<br/>
* 时间:2018/11/30 0030:9:35<br/>
* 邮箱:1981462002@qq.com<br/>
* 说明:BottomNavigationBar伴随列表显隐的Behavior
*/
public class BnbFollowListBehavior extends BottomVerticalScrollBehavior<BottomNavigationBar> {
public BnbFollowListBehavior(Context context, AttributeSet attributeSet) {
super();
}
}
<string name="followListBehavior">com.toly1994.mycode.app.behavior.BnbFollowListBehavior</string>
<string name="behavior_fab_follow">com.toly1994.mycode.app.behavior.FabFollowListBehavior</string>
FloatingActionButton伴随动画定义在FloatingActionButton伴随动画按钮的标签内 BottomNavigationBar伴随列表显隐的Behavior 写在RecyclerView标签内 Behavior的详细介绍可见:Android材料设计之Behavior攻坚战
MVP思路.png
RX+Ret.png