I still believe that the stars will speak, through the summer and winter snow fence after, you will arrive.
Google发布android 5.0版本后并且发布Material Design设计标准,但是在android4.0版本与5.0版本可谓有着天然差距,对于整个项目的重新梳理变得困难。而Material Design的设计规范在众多的主流App中也不是被广泛应用。
本次着重整理关于Design包中的各大控件的使用。
gradle.build中添加依赖:
compile 'com.android.support:design:25.3.1'
对于androidstudio的compile依赖部分不了解的朋友,可以查看我的一篇文章:module进阶并将其上传至Jcenter仓库
在引用过后,该包会被引用在本地中:
关于部分的source code 可以进行查看。
一下是Design包中比较重要的一些类:
android.support.design.widget.CoordinatorLayout
关于CoordinatorLayout是一个类似于FrameLayout,但是在Coordinator中功能更加强大,且与design包中相关的Layout联合使用会有更加不一样的效果。
关于Behavior的探索
在整个design的开发中,behavior的属性应用也有很多
app:layout_behavior="@string/appbar_scrolling_view_behavior"
对于behavior属性是属于CoordinatorLayout中的。
所以在实际的开发中,我们可以定制属于我们需求的Behavior。
step1:创建自己的Behavior并继承CoordinatorLayout.Behavior
/**
*
* 自定义的Behavior
*
* 两种设定模式
*
* 1:在代码中设置
*
* 2:在布局中,实现两个参数的构造方法
*/
public class myBehavior extends CoordinatorLayout.Behavior {
private static final String TAG = "myBehavior";
public myBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
/**
*
* @param coordinatorLayout
* @param child
* @param directTargetChild
* @param target
* @param nestedScrollAxes
* @return 返回值是否关心
*/
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
// return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
return true;
}
/**
* 滚动
* @param coordinatorLayout
* @param child
* @param target
* @param dxConsumed
* @param dyConsumed//向上滑动的距离
* @param dxUnconsumed
* @param dyUnconsumed
*/
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
Log.i(TAG, "onNestedScroll: dxConsumed--------------》"+dxConsumed);
Log.i(TAG, "onNestedScroll: dyConsumed--------------》"+dyConsumed);
Log.i(TAG, "onNestedScroll: dxUnconsumed--------------》"+dxUnconsumed);
Log.i(TAG, "onNestedScroll: dyUnconsumed--------------》"+dyUnconsumed);
//垂直滚动只需要判断y的值
if(dyConsumed>0){//向上滚动,干什么事情呢?
ViewCompat.animate(child).scaleX(0).scaleY(0).start();
}else{
//向下滚动
ViewCompat.animate(child).scaleX(1).scaleY(1).start();
}
}
}
step2:应用在自己的实际效果中有两种方式
1: 直接在布局中使用,但是前提是你的控件必须是CoordinatorLayout的直接子布局
id="@+id/tv_behavior"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wedfrend"
android:textColor="@color/colorPrimary"
android:textSize="16sp" app:layout_behavior="wedfrend.wang.materialdesign.behavior.myBehavior" />
2:在代码中进行引用:
TextView textView = (TextView) findViewById(R.id.tv_behavior);
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) textView.getLayoutParams();
myBehavior myBehavior = new myBehavior();
params.setBehavior(myBehavior);
AppBarLayout
.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">
.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
"match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@mipmap/benbenla"
app:layout_collapseMode="parallax" />
.support.v7.widget.Toolbar
android:id="@+id/behavior_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
.support.v7.widget.Toolbar>
.support.design.widget.CollapsingToolbarLayout>
"match_parent"
android:layout_height="wrap_content"
android:padding="12dp"
android:text="wedfrend"
android:textSize="16sp"
/>
.support.design.widget.AppBarLayout>
控件1:Tab栏,经常与ViewPage一起使用
android.support.design.widget.TabLayout
TabLayout
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/colorPrimaryDark"
--目标选中的下滑先颜色 --> app:tabIndicatorColor="@android:color/holo_blue_bright"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextAppearance="@android:style/TextAppearance.Large"
app:tabTextColor="@android:color/white">android.support.design.widget.TabLayout>
之所以说TabLayout和ViewPager连用是有一个方法
//设置Tablayout的标题头部,但是要注意的是我们必须Adapter中设置一个方法,getPageTitle
tab.setupWithViewPager(viewPager);
这样可以将ViewPager和我们的TabLayout链接起来,但是需要在adapter中重写方法
@Override
public CharSequence getPageTitle(int position) {
return listString.get(position);
}