一款基于Material Desgin设计的APP.docx

上传人:b****4 文档编号:24310273 上传时间:2023-05-26 格式:DOCX 页数:19 大小:133.64KB
下载 相关 举报
一款基于Material Desgin设计的APP.docx_第1页
第1页 / 共19页
一款基于Material Desgin设计的APP.docx_第2页
第2页 / 共19页
一款基于Material Desgin设计的APP.docx_第3页
第3页 / 共19页
一款基于Material Desgin设计的APP.docx_第4页
第4页 / 共19页
一款基于Material Desgin设计的APP.docx_第5页
第5页 / 共19页
点击查看更多>>
下载资源
资源描述

一款基于Material Desgin设计的APP.docx

《一款基于Material Desgin设计的APP.docx》由会员分享,可在线阅读,更多相关《一款基于Material Desgin设计的APP.docx(19页珍藏版)》请在冰豆网上搜索。

一款基于Material Desgin设计的APP.docx

一款基于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

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 求职职场 > 职业规划

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1