一款基于Material Desgin设计的APP_基于ios的app毕业设计
一款基于Material Desgin设计的APP由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“基于ios的app毕业设计”。
一款基于Material Desgin设计的APP
介绍
淘School是一款基于MD的一款校园二手商品交易平台，当然小编只是简单的开发了一些功能，并没有完善，只是想做一款MD的APP，并没有交易支付的功能，只是把我感觉比较好的MD的一些组件融到了项目中，下面小编来详细介绍一下用到的技术：
因为小编服务器端不是很熟练，所以就用了Bmob，还不错挺容易上手的，就依赖了它的两个库而已，网络请求和模型都是封装好的，我们直接调用就可以。
先看一下小编引用的一些库吧：
compile 'com.android.support:appcompat-v7:23.1.0'
compile files('libs/BmobSDK_V3.4.5_1111.jar')
compile files('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-progre: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.Android Support Desgin
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_addButtonColorPreed=“@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_colorPreed=“@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_colorPreed=“@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_colorPreed=“@color/theme_color_tab”/>
下面是重写的ListView滑动监听实现显示隐藏悬浮按钮
public void attachToListView(@NonNull AbsListView listView,ScrollDirectionListener scrollDirectionListener,AbsListView.OnScrollListener onScrollListener){
AbsListViewScrollDetectorImpl scrollDetector = new AbsListViewScrollDetectorImpl();
scrollDetector.setScrollDirectionListener(scrollDirectionListener);
scrollDetector.setOnScrollListener(onScrollListener);
scrollDetector.setListView(listView);
scrollDetector.setScrollThreshold(mScrollThreshold);
listView.setOnScrollListener(scrollDetector);
}
private cla AbsListViewScrollDetectorImpl extends AbsListViewScrollDetector {
private ScrollDirectionListener mScrollDirectionListener;
private AbsListView.OnScrollListener mOnScrollListener;
private void setScrollDirectionListener(ScrollDirectionListener scrollDirectionListener){
mScrollDirectionListener = scrollDirectionListener;
}
public void setOnScrollListener(AbsListView.OnScrollListener onScrollListener){
mOnScrollListener = onScrollListener;
}
@Override
public void onScrollDown(){
show();
if(mScrollDirectionListener!= null){
mScrollDirectionListener.onScrollDown();
}
}
@Override
public void onScrollUp(){
hide();
if(mScrollDirectionListener!= null){
mScrollDirectionListener.onScrollUp();
}
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount,int totalItemCount){
if(mOnScrollListener!= null){
mOnScrollListener.onScroll(view, firstVisibleItem, visibleItemCount, totalItemCount);
}
super.onScroll(view, firstVisibleItem, visibleItemCount, totalItemCount);
}
@Override
public void onScrollStateChanged(AbsListView view, int scrollState){
if(mOnScrollListener!= null){
mOnScrollListener.onScrollStateChanged(view, scrollState);
}
super.onScrollStateChanged(view, scrollState);
}
}
public void show(){
show(true);
}
public void hide(){
hide(true);
}
public void show(boolean animate){
toggle(true, animate, false);
}
public void hide(boolean animate){
toggle(false, animate, false);
}
private void toggle(final boolean visible, final boolean animate, boolean force){
if(mVisible!= visible || force){
mVisible = visible;
int height = getHeight();
if(height == 0 &&!force){
ViewTreeObserver vto = getViewTreeObserver();
if(vto.isAlive()){
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener(){
@Override
public boolean onPreDraw(){
ViewTreeObserver currentVto = getViewTreeObserver();
if(currentVto.isAlive()){
currentVto.removeOnPreDrawListener(this);
}
toggle(visible, animate, true);
return true;
}
});
return;
}
}
int translationY = visible ? 0 : height + getMarginBottom();
if(anwww.daodoc.comimate){
ViewPropertyAnimator.animate(this).setInterpolator(mInterpolator)
.setDuration(TRANSLATE_DURATION_MILLIS)
.translationY(translationY);
} else {
ViewHelper.setTranslationY(this, translationY);
}
// On pre-Honeycomb a translated view is still clickable, so we need to disable clicks manually
if(!hasHoneycombApi()){
setClickable(visible);
}
}
}
private int getMarginBottom(){
int marginBottom = 0;
final ViewGroup.LayoutParams layoutParams = getLayoutParams();
if(layoutParams instanceof ViewGroup.MarginLayoutParams){
marginBottom =((ViewGroup.MarginLayoutParams)layoutParams).bottomMargin;
}
return marginBottom;
}
private boolean hasHoneycombApi(){
return Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB;
} }
然后再activity中这样用：
fab.attachToListView(lvProduct, new ScrollDirectionListener(){
@Override
public void onScrollDown(){
Log.d(“ListViewFragment”, “onScrollDown()”);
}
@Override
public void onScrollUp(){
Log.d(“ListViewFragment”, “onScrollUp()”);
}
}, new AbsListView.OnScrollListener(){
@Override
public void onScrollStateChanged(AbsListView view, int scrollState){
Log.d(“ListViewFragment”, “onScrollStateChanged()”);
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount){
Log.d(“ListViewFragment”, “onScroll()”);
}
});
很简单。
4.商品详细界面上下滑动头像回到actionbar上
这个效果是小编一直都想实现的，因为技术、时间、能力有限，所以一直没去搞，在网上搜了好多相关的帖子，博客，终于让我找到一个类似的，做了一下改动实现了。
这个技术是CoordinatorLayout+Toolbar+CollapsingAvatarToolbar实现的。实际上support desgin可以实现文字的上下滑动但是没有头像的上下滑动改变大小。CollapsingAvatarToolbar这个组件实现了这一效果，当然并不是小编写的，只是小编改的，但是能改出来小编也已经很高兴了。给大家看一下布局：
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” />
-->
-->
-->
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:background=“@color/gray”
app:layout_behavior=“@string/appbar_scrolling_view_behavior”>
android:padding=“@dimen/small_space”
android:orientation=“vertical”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”>
android:gravity=“center_vertical”
android:padding=“@dimen/small_space”
android:orientation=“horizontal”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”>
android:id=“@+id/iv_user_head”
android:src=“@drawable/defaut”
android:layout_width=“35dp”
android:layout_height=“35dp” />
android:layout_marginLeft=“@dimen/small_space”
android:textSize=“@dimen/normal_textSize”
android:text=“Hankkin”
android:textColor=“@color/black”
android:layout_weight=“1”
android:id=“@+id/tv_username”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content” />
android:textColor=“@color/deep_gray”
android:textSize=“@dimen/small_textSize”
android:text=“asdas”
android:id=“@+id/tv_time”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content” />
android:layout_marginLeft=“@dimen/small_space”
android:textColor=“@color/black”
android:textSize=“@dimen/normal_textSize”
android:id=“@+id/tv_pro_name”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:text=“二手” />
android:layout_marginLeft=“@dimen/small_space”
android:textColor=“@color/black”
android:textSize=“@dimen/normal_textSize”
android:id=“@+id/tv_pro_desc”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content” />
android:scaleType=“fitXY”
android:id=“@+id/iv_product”
android:layout_width=“match_parent”
android:layout_height=“300dp”
android:background=“@color/deep_gray” />
android:paddingBottom=“@dimen/small_space”
android:orientation=“honc630.comrizontal”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”>
android:drawablePadding=“@dimen/tiny_space”
android:drawableLeft=“@drawable/location”
android:textSize=“@dimen/small_textSize”
android:layout_marginTop=“@dimen/small_space”
android:layout_marginLeft=“@dimen/middle_space”
android:text=“天津理工大学”
android:id=“@+id/tv_school”
android:layout_weight=“1”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content” />
android:textSize=“@dimen/small_textSize”
android:textColor=“@color/theme_color”
android:layout_marginRight=“@dimen/middle_space”
android:layout_marginTop=“@dimen/small_space”
android:text=“￥”
android:id=“@+id/tv_price”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content” />
android:layout_marginTop=“@dimen/middle_space”
android:orientation=“horizontal”
android:layout_width=“match_parent”
android:layout_height=“64dp”>
android:gravity=“center”
android:layout_weight=“1”
android:layout_width=“match_parent”
android:layout_height=“match_parent”>
android:src=“@drawable/telephone”
android:layout_width=“wrap_content”
android:layout_height=“match_parent” />
android:gravity=“center”
android:layout_weight=“1”
android:layout_width=“match_parent”
android:layout_height=“match_parent”>
android:src=“@drawable/sms”
android:layout_width=“wrap_content”
android:layout_height=“match_parent” />
android:gravity=“center”
android:layout_weight=“1”
android:layout_width=“match_parent”
android:layout_height=“match_parent”>
android:src=“@drawable/collect”
android:layout_width=“wrap_content”
android:layout_height=“match_parent” />
效果就这样：
5.个人资料界面
用法也很简单，我们在布局里面嵌套一个PullToZoomScrollViewEx，而布局的head，content，footer都可以自定义，然后引用进来就可以了。
PullToZoomScrollViewEx scrollView =(PullToZoomScrollViewEx)findViewById(R.id.my_pull_scoll);
headView = LayoutInflater.from(this).inflate(R.layout.profile_head_view, null, false);
zoomView = LayoutInflater.from(this).inflate(R.layout.profile_zoom_view, null, false);
contentView = LayoutInflater.from(this).inflate(R.layout.profile_contect_view, null, false);
scrollView.setHeaderView(headView);
scrollView.setZoomView(zoomView);
scrollView.setScrollContentView(contentView);
