一款基于Material Desgin设计的APP.docx
- 文档编号:24310273
- 上传时间:2023-05-26
- 格式:DOCX
- 页数:19
- 大小:133.64KB
一款基于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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 一款基于Material Desgin设计的APP 一款 基于 Material Desgin 设计 APP