一款基于Material Desgin设计的APP.docx
《一款基于Material Desgin设计的APP.docx》由会员分享,可在线阅读,更多相关《一款基于Material Desgin设计的APP.docx(19页珍藏版)》请在冰豆网上搜索。
一款基于MaterialDesgin设计的APP
一款基于MaterialDesgin设计的APP
介绍
淘School是一款基于MD的一款校园二手商品交易平台,当然小编只是简单的开发了一些功能,并没有完善,只是想做一款MD的APP,并没有交易支付的功能,只是把我感觉比较好的MD的一些组件融到了项目中,下面小编来详细介绍一下用到的技术:
因为小编服务器端不是很熟练,所以就用了Bmob,还不错挺容易上手的,就依赖了它的两个库而已,网络请求和模型都是封装好的,我们直接调用就可以。
先看一下小编引用的一些库吧:
compile'com.android.support:
appcompat-v7:
23.1.0'
compilefiles('libs/BmobSDK_V3.4.5_1111.jar')
compilefiles('libs/okio-1.4.0.jar')
compile'com.android.support:
support-v4:
23.1.0'
compile'com.github.manuelpeinado.fadingactionbar:
fadingactionbar-abc:
3.1.2'
compile'com.android.support:
design:
23.1.0'
compile'com.pnikosis:
materialish-progress:
1.7'
compile'me.drakeet.materialdialog:
library:
1.2.8'
compile'com.jakewharton:
butterknife:
7.0.1'
compile'com.nostra13.universalimageloader:
universal-image-loader:
1.9.5'
compile'com.weiwangcn.betterspinner:
library:
1.1.0'
compile'com.nineoldandroids:
library:
2.4.0'
1.AndroidSupportDesgin
CollapsingAvatarToolbar头像随ListView滚动缩回到ActionBar特效
TextInputLayout带动画的输入框
2.ActionBarDrawerToggle、DrawerLayout、ActionBar结合
3.RippleEffect水波纹效果
4.PagerSlidingTabStrip+viewpager实现选项卡左右滑动
5.FloatActiconButton悬浮按钮实现仿钉钉悬浮按钮
6.PullToZoomScrollView实现下拉自动放大头部View
7.materialdialog实现的对话框
8.MaterialSpinner实现的带效果的spinner
9.butterknife注解框架
小编用到的技术基本上就这些,下面小编会详细的介绍一下。
技术实现
1.主界面
先介绍一下主界面吧,主界面小编用的是ActionBarDrawerToggle+DrawerLayout+ActionBar实现的滑动抽屉效果。
布局文件就不介绍了,这个用的也挺多的,网上资料也很多,介绍几个方法吧
//设定左上角突变可点击
getSupportActionBar().setHomeButtonEnabled(true);
//给左上角图标的左边加上一个返回的图标。
对应ActionBar.DISPLAY_HOME_AS_UP
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//设置标题getSupportActionBar().setTitle(getResources().getString(R.string.action_title));
//使自定义的普通View能在title栏显示,即actionBar.setCustomView能起作用,对应ActionBar.DISPLAY_SHOW_CUSTOM
actionBar.setDisplayShowCustomEnabled(true)
closeDrawers();//关闭抽屉
2.滑动选项卡
小编主界面的滑动选项卡用的是PagerSlidingTabStrip+viewpager管理fragment
3.主界面的悬浮按钮
悬浮按钮在github上有Demo,
用的是第一个,然后重写了一下里面的滑动监听实现了listview滑动显示隐藏按钮。
看一下布局文件:
android:
id="@+id/multiple_actions"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_alignParentBottom="true"
android:
layout_alignParentRight="true"
android:
layout_alignParentEnd="true"
fab:
fab_addButtonColorNormal="@color/origle"
fab:
fab_addButtonColorPressed="@color/origle_tab"
fab:
fab_addButtonPlusIconColor="@color/white"
fab:
fab_labelStyle="@style/menu_labels_style"
android:
layout_marginBottom="@dimen/smaller_space"
android:
layout_marginRight="@dimen/smaller_space"
android:
layout_marginEnd="@dimen/smaller_space">
android:
id="@+id/fb_update"
android:
src="@drawable/update"
fab:
fab_labelStyle="@style/menu_labels_style"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
fab:
fab_colorNormal="@color/theme_color"
fab:
fab_colorPressed="@color/theme_color_tab"/>
android:
id="@+id/fb_new"
fab:
paddingEnd="@dimen/small_space"
android:
src="@drawable/edit"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
fab:
fab_colorNormal="@color/theme_color"
fab:
fab_colorPressed="@color/theme_color_tab"/>
android:
id="@+id/fb_person"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
src="@drawable/title_person"
fab:
fab_colorNormal="@color/theme_color"
fab:
fab_colorPressed="@color/theme_color_tab"/>
下面是重写的ListView滑动监听实现显示隐藏悬浮按钮
publicvoidattachToListView(@NonNullAbsListViewlistView,
ScrollDirectionListenerscrollDirectionListener,
AbsListView.OnScrollListeneronScrollListener){
AbsListViewScrollDetectorImplscrollDetector=newAbsListViewScrollDetectorImpl();
scrollDetector.setScrollDirectionListener(scrollDirectionListener);
scrollDetector.setOnScrollListener(onScrollListener);
scrollDetector.setListView(listView);
scrollDetector.setScrollThreshold(mScrollThreshold);
listView.setOnScrollListener(scrollDetector);
}
privateclassAbsListViewScrollDetectorImplextendsAbsListViewScrollDetector{
privateScrollDirectionListenermScrollDirectionListener;
privateAbsListView.OnScrollListenermOnScrollListener;
privatevoidsetScrollDirectionListener(ScrollDirectionListenerscrollDirectionListener){
mScrollDirectionListener=scrollDirectionListener;
}
publicvoidsetOnScrollListener(AbsListView.OnScrollListeneronScrollListener){
mOnScrollListener=onScrollListener;
}
@Override
publicvoidonScrollDown(){
show();
if(mScrollDirectionListener!
=null){
mScrollDirectionListener.onScrollDown();
}
}
@Override
publicvoidonScrollUp(){
hide();
if(mScrollDirectionListener!
=null){
mScrollDirectionListener.onScrollUp();
}
}
@Override
publicvoidonScroll(AbsListViewview,intfirstVisibleItem,intvisibleItemCount,
inttotalItemCount){
if(mOnScrollListener!
=null){
mOnScrollListener.onScroll(view,firstVisibleItem,visibleItemCount,totalItemCount);
}
super.onScroll(view,firstVisibleItem,visibleItemCount,totalItemCount);
}
@Override
publicvoidonScrollStateChanged(AbsListViewview,intscrollState){
if(mOnScrollListener!
=null){
mOnScrollListener.onScrollStateChanged(view,scrollState);
}
super.onScrollStateChanged(view,scrollState);
}
}
publicvoidshow(){
show(true);
}
publicvoidhide(){
hide(true);
}
publicvoidshow(booleananimate){
toggle(true,animate,false);
}
publicvoidhide(booleananimate){
toggle(false,animate,false);
}
privatevoidtoggle(finalbooleanvisible,finalbooleananimate,booleanforce){
if(mVisible!
=visible||force){
mVisible=visible;
intheight=getHeight();
if(height==0&&!
force){
ViewTreeObservervto=getViewTreeObserver();
if(vto.isAlive()){
vto.addOnPreDrawListener(newViewTreeObserver.OnPreDrawListener(){
@Override
publicbooleanonPreDraw(){
ViewTreeObservercurrentVto=getViewTreeObserver();
if(currentVto.isAlive()){
currentVto.removeOnPreDrawListener(this);
}
toggle(visible,animate,true);
returntrue;
}
});
return;
}
}
inttranslationY=visible?
0:
height+getMarginBottom();
if(imate){
ViewPropertyAnimator.animate(this).setInterpolator(mInterpolator)
.setDuration(TRANSLATE_DURATION_MILLIS)
.translationY(translationY);
}else{
ViewHelper.setTranslationY(this,translationY);
}
//Onpre-Honeycombatranslatedviewisstillclickable,soweneedtodisableclicksmanually
if(!
hasHoneycombApi()){
setClickable(visible);
}
}
}
privateintgetMarginBottom(){
intmarginBottom=0;
finalViewGroup.LayoutParamslayoutParams=getLayoutParams();
if(layoutParamsinstanceofViewGroup.MarginLayoutParams){
marginBottom=((ViewGroup.MarginLayoutParams)layoutParams).bottomMargin;
}
returnmarginBottom;
}
privatebooleanhasHoneycombApi(){
returnBuild.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB;
}
}
然后再activity中这样用:
fab.attachToListView(lvProduct,newScrollDirectionListener(){
@Override
publicvoidonScrollDown(){
Log.d("ListViewFragment","onScrollDown()");
}
@Override
publicvoidonScrollUp(){
Log.d("ListViewFragment","onScrollUp()");
}
},newAbsListView.OnScrollListener(){
@Override
publicvoidonScrollStateChanged(AbsListViewview,intscrollState){
Log.d("ListViewFragment","onScrollStateChanged()");
}
@Override
publicvoidonScroll(AbsListViewview,intfirstVisibleItem,intvisibleItemCount,inttotalItemCount){
Log.d("ListViewFragment","onScroll()");
}
});
很简单。
4.商品详细界面上下滑动头像回到actionbar上
这个效果是小编一直都想实现的,因为技术、时间、能力有限,所以一直没去搞,在网上搜了好多相关的帖子,博客,终于让我找到一个类似的,做了一下改动实现了。
这个技术是CoordinatorLayout+Toolbar+CollapsingAvatarToolbar实现的。
实际上supportdesgin可以实现文字的上下滑动但是没有头像的上下滑动改变大小。
CollapsingAvatarToolbar这个组件实现了这一效果,当然并不是小编写的,只是小编改的,但是能改出来小编也已经很高兴了。
给大家看一下布局:
xmlversion="1.0"encoding="utf-8"?
>
android:
id="@+id/main_content"
android:
layout_width="match_parent"
android:
layout_height="match_parent"
android:
background="@color/theme_color"
android:
clipToPadding="true"
android:
fitsSystemWindows="true">
android:
id="@+id/appbar"
android:
layout_width="match_parent"
android:
layout_height="200dp"
android:
theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
android:
id="@+id/collapsing_toolbar"
android:
layout_width="match_parent"
android:
layout_height="match_parent"
app:
contentScrim="@color/theme_color"
app:
layout_scrollFlags="scroll|exitUntilCollapsed">
android:
id="@+id/toolbar"
android:
layout_width="match_parent"
android:
layout_height="?
attr/actionBarSize"
app:
layout_collapseMode="pin"
app:
popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
android:
id="@+id/stuff_container"
android:
layout_width="wrap_content"
android:
layout_height="?
attr/actionBarSize"
android:
orientation="vertical">
android:
id="@+id/usericon"
android:
layout_width="40dp"
android:
layout_height="40dp"
android:
layout_gravity="center_vertical"
android:
src="@drawable/defaut"/>
android:
id="@+id/username"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_gravity="center_vertical"
android:
fontFamily="sans-serif-medium"
android:
text="Hankkin"
android:
textColor="@android:
color/white"
android:
textSize="18dp"/>
--layout_width="wrap