Android仿半糖app首页UIMaterialDesign的使用

半糖appUI效果

半糖.gif

需求

1 toolbar处随上下滑动事件的变化
2 向下滑动的时候，tablayout不会消失
3 左右滑动可切换fragment，点击也可切换fragment
4 banner的自动轮播及手动变换（这个点不讲了，网上有很多开源库甚至代码整理。）

思路及分析

0、 Material Design的UI真的很炫，对这个还不是太熟悉，后续要努力。
1 、标题栏处向上滑动，toolbar会从透明底渐变成白底，同时布局也会改变，细致观察，在渐变过程中两种布局都出现了，所以这里应该市同时存在两个toolbar，通过滑动事件的监听渐变透明到消失或显示
2、上滑到底的时候，banner会消失，toobar占据那个位置，同时tablayout也会置顶，不会随着banner的消失而消失。所以banner、Toolbar、以及tablayou都应该在AppBarLayout里面，同时有收缩banner的情况，所以用到CollapsingToolbarLayout
3、底下content部分的话，就是简单的tablayout+viewpager+fragment的处理，这个一般不难
4、viewpager是没有上下滑动的功能的，viewpager内部布局放在fragment里面处理了，所以我这里将viewpager放在一个NestedScrollView里面了
5、准备over

no bb，just show code



xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
android:fitsSystemWindows="true">


android:id="@+id/appbarlayout"
android:background="@android:color/transparent"
android:layout_
android:layout_>
android:id="@+id/ctb"
android:layout_
android:layout_
app:cOntentScrim="@android:color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

android:id="@+id/banner"
android:visibility="visible"
android:layout_
android:layout_ />

android:id="@+id/toolbar_default"
app:layout_collapseMode="pin"
android:layout_
android:layout_
android:background="@android:color/transparent" >
android:id="@+id/ll_default_tool"
android:orientation="horizontal"
android:layout_
android:layout_>
android:id="@+id/iv_default_left"
android:background="@mipmap/ic_menu"
android:layout_
android:layout_ />
android:layout_weight="1"
android:layout_
android:layout_/>
android:id="@+id/iv_default_right"
android:background="@mipmap/ic_settings"
android:layout_
android:layout_ />



android:visibility="gone"
android:id="@+id/toolbar_nono"
app:layout_collapseMode="pin"
android:layout_
android:layout_
android:background="@android:color/white" >
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_
android:layout_>
android:id="@+id/et_nono_left"
android:hint="搜索值得买的好物"
android:layout_weight="1"
android:background="@android:color/white"
android:layout_
android:layout_ />
android:id="@+id/iv_nono_right"
android:background="@mipmap/ic_launcher"
android:layout_
android:layout_ />




android:id="@+id/tl_main_tabtop"
android:layout_
android:layout_
android:background="@android:color/white"
app:tabSelectedTextColor="@color/colorAccent" />


android:id="@+id/nestedScrollView"
android:layout_
android:layout_
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
android:layout_
android:layout_
android:orientation="vertical">
android:id="@+id/vp_main_page"
android:layout_
android:layout_
android:layout_weight="1"
android:background="@android:color/white" />





上面是布局，剩下的就是java代码，都挺简单的，唯一需要注意的是，我们要根据上下滑动的状态对toolbar进行显示消失替换等一系列的动作，这个怎么办呢？用到AppBarLayout的addOnOffsetChangedListener，这个可以监听到偏移值（？是这么叫的吗？），可以获取到你滑动的程度。

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//通过vertical的偏移值除以totalScrollRange来获取到百分比
float progress = (float) (((int) (Math.abs(verticalOffset) / (appBarLayout.getTotalScrollRange()*0.01)))*0.01);
if (verticalOffset == 0) {
// 展开状态 progress为0，展开状态的toolbar可见
toolbar_default.setVisibility(View.VISIBLE);
toolbar_nono.setVisibility(View.GONE);
toolbar_default.getBackground().setAlpha(255);
iv_defalut_left.getBackground().setAlpha(255);
iv_default_right.getBackground().setAlpha(255);
toolbar_nono.getBackground().setAlpha(255);
} else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
//折叠状态 progress为1，折叠状态的toolbar可见
toolbar_default.setVisibility(View.GONE);
toolbar_nono.setVisibility(View.VISIBLE);
toolbar_default.getBackground().setAlpha(255);
toolbar_nono.getBackground().setAlpha(255);
et_nono_left.getBackground().setAlpha(255);
iv_nono_right.getBackground().setAlpha(255);
} else {
//中间状态，两个toolbar是重叠在一起的，根据是从折叠到展开，还是从展开到折叠，同时加上进度progress确定两个toolbar的透明比
if(toolbar_nono.getVisibility() == View.GONE){// 折叠状态的toolbar不可见，则是从展开到折叠变化
flag_defaulttOno= true;
}else if(toolbar_default.getVisibility() == View.GONE){// 展开状态的toolbar不可见，则是从折叠到展开变化，为什么？因为只有到0的时候可见性才会变成gone，其他都是可见或改变透明度。
flag_defaulttOno= false;
}// 以上两种情况都不是的话，则不需要改变flag_defaluttono的值
toolbar_default.setVisibility(View.VISIBLE);
toolbar_nono.setVisibility(View.VISIBLE);//
if(flag_defaulttono){ // 0到1变换
toolbar_default.getBackground().setAlpha((int) ((1-progress) * 255));
iv_defalut_left.getBackground().setAlpha((int) ((1-progress) * 255));
iv_default_right.getBackground().setAlpha((int) ((1-progress) * 255));
toolbar_nono.getBackground().setAlpha((int) ( progress* 255));
et_nono_left.getBackground().setAlpha((int) ( progress* 255));
iv_nono_right.getBackground().setAlpha((int) ( progress* 255));
}else{
toolbar_default.getBackground().setAlpha((int) (progress * 255));
iv_defalut_left.getBackground().setAlpha((int) (progress * 255));
iv_default_right.getBackground().setAlpha((int) (progress * 255));
toolbar_nono.getBackground().setAlpha((int) ((1-progress) * 255));
et_nono_left.getBackground().setAlpha((int) ((1-progress) * 255));
iv_nono_right.getBackground().setAlpha((int) ((1-progress) * 255));
}
}
}
});


剩下的就是banner啊，viewpager+tablayout等那些的，应该大部分都会用，我就不贴上来了。
代码已经放到了gitHub上，有兴趣的可以去瞅瞅，多多提意见，谢谢！

仿制的UI效果图

仿半糖.gif

后续

后面还是会继续完善这个仿半糖的app吧，还有底部recyclerView的刷新后续可以添加进去，还有UI什么的。
and 源码有放在github（https://github.com/mLiXin/MudoBantanUI）上，大家有兴趣的，可以瞅瞅源码，中间能优化的地方肯定还有很多，我对Material Design的掌握还不是很好，后续会继续多多学习
and bug肯定有，各位多多提意见了
and over，thx ^_