建站四部曲之移动端篇（Android+上线）

张风捷特烈

发布于 2018-12-26 14:29:52

5820

发布于 2018-12-26 14:29:52

本系列分为四篇：

零、前言

本系列为了总结一下手上的知识，致敬我的2018 本篇的重点在于：后端数据在移动端的展现本篇总结的技术点： 材料设计串烧、Retrofit+RxJava访问请求、MVP模式的思考、App的打包 将App上传到服务器，提供下载地址、

一、材料设计的综合使用：

1.布局概览

最外层是一个DrawerLayout并和Toolbar相关联 DrawerLayout主要分为左和中间两块,核心的是中间，左边顺带用一下NavigationView 中间主页面由AppBarLayout+CollapsingToolbarLayout+Toolbar祖孙三人打头阵中间主题由RecyclerView骁勇杀敌，最底下由BottomNavigationBar收尾另外FloatingActionButton+bottom_sheet补刀

布局概览.png

2.效果图一览

总体来说和网页端风格保持一致

Android版	网页版手机端
	.png

3.布局与材料设计的控件使用

布局就不贴了,挺多的，也没什么技术含量，有兴趣的看源码吧有关材料设计，我写过一个系列：详见--Android材料设计Material Design 开篇前言

3.1：BottomNavigationBar的使用：

为了方便起见，我写了一个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();

3.2：SwipeRefreshLayout的使用：

//每转一圈，换一种颜色
mIdSrl.setColorSchemeColors(
        0xffF60C0C,//红
        0xffF3B913,//橙
        0xffE7F716,//黄
        0xff3DF30B,//绿
        0xff0DF6EF,//青
        0xff0829FB,//蓝
        0xffB709F4//紫
);
mIdSrl.setOnRefreshListener(() -> {
    //TODO刷新逻辑
});

3.3:DrawerLayout与Toolbar的结合

------------------------------
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();//加了这个才有酷炫的按钮变化
}

3.4：BottomSheet与FloatingActionButton的结合

mBottomSheetBehavior = BottomSheetBehavior.from(mBottomSheet);
mIdFab.setOnClickListener(v -> {
    if (isOpen) {
        mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
    } else {
        mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
    }
    isOpen = !isOpen;
});

4.伴随移动的Behavior

祖孙三头.gif

移出	移入

FloatingActionButton伴随动画:FabFollowListBehavior

/**
 * 作者：张风捷特烈<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;
    }
}

BottomNavigationBar伴随列表显隐的Behavior：BnbFollowListBehavior

/**
 * 作者：张风捷特烈<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();
    }
}

建站四部曲之移动端篇（Android+上线）

建站四部曲之移动端篇（Android+上线）

本系列分为四篇：

零、前言

一、材料设计的综合使用：

1.布局概览

2.效果图一览

3.布局与材料设计的控件使用

3.1：BottomNavigationBar的使用：

3.2：SwipeRefreshLayout的使用：

3.3:DrawerLayout与Toolbar的结合

3.4：BottomSheet与FloatingActionButton的结合

4.伴随移动的Behavior

FloatingActionButton伴随动画:FabFollowListBehavior

BottomNavigationBar伴随列表显隐的Behavior：BnbFollowListBehavior

推荐想安卓看起，写在string.xml里，方便修改

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐