本文详细阐述了如何使用移动开发技术实现复杂UI布局，包括布局动态调整、颜色渐变效果及弹性滑动机制，旨在提升用户体验。
思路：
1.如何实现移动：通过调用onlayout布局，不断改变contentView的top值，就能实现黄色区域的上下移动，绿色部分同样道理，但是移动偏移量不一样
2.如何实现绿色部分变暗的效果：仔细看会发现 随着上移，绿色会慢慢变暗。实现的方式是，首先将整改外层的layout设置黑色背景色，然后不断改变hideview(也就是绿色部分)的透明度。
3.弹性滑动：通过ValueAnimator实现弹性滑动（具体看代码）
4.事件分发逻辑：重写了 onInterceptTouchEvent和 onTouchEvent， 如果满足 if((moveLen > 0 && contentViewTop < hideViewHeight && scrollY == 0)
|| (moveLen < 0 && contentViewTop > 0)) ----------------------①moveLen>0 表示向下移动 那么判断黄色部分的top小于hideView的高度 并且 滚动条在最上面；或则 ②移动上移，并且黄色部分不在标题栏下面；满足以上两个条件，那么拦截下事件，分发给touchEvent，由它来处理黄色移动。否则不拦截，交给子view处理
代码：
package com.demo.android.toolbar_drawlayout_demo.view;
import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.ScrollView;
public class ScrollViewLayout extends LinearLayout{
private View hideView;
private ScrollView contentView;
private int myHeight; //自己的高度
private int hideViewHeight; //隐藏VIEW的高度
private int contentViewWidth; //内容VIEW的宽度
private int contentViewHeight; //内容VIEW的高度
private float downX; //按下的x
private float downY; //按下的y
// private long downTime; //记录按下的时间
// private long upTime; //记录抬起的时间
private int moveLen; //移动距离
private int contentViewTop; //当前内容View的top位置
private float alpha = 0.5f;
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if(hideView == null && contentView == null){
init();
}
}
public ScrollViewLayout(Context context) {
super(context);
init();
}
public ScrollViewLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ScrollViewLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
myHeight = getMeasuredHeight();
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
int top = contentViewTop + moveLen;
if(contentView != null && top>=0 && top<=hideViewHeight) {
contentView.layout(0, top, contentViewWidth, myHeight);
int hideViewTop = -(hideViewHeight - top)/3;
hideView.layout(0, hideViewTop, contentViewWidth, hideViewHeight);
hideView.setAlpha(1 - (alpha * (hideViewHeight - top) / hideViewHeight));
// System.out.println("top = " + top + " movelen = " + moveLen + " contentViewTop = " + contentViewTop);
}
}
private void init() {
hideView = (View)getChildAt(0);
if(hideView != null) {
hideViewHeight = hideView.getHeight();
contentViewTop = hideViewHeight;
}
contentView = (ScrollView)getChildAt(1);
if(contentView != null) {
contentViewHeight = contentView.getHeight();
contentViewWidth = contentView.getWidth();
}
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
int action = ev.getAction();
int scrollY = contentView.getScrollY();
if(action == MotionEvent.ACTION_DOWN){
downX = ev.getX();
downY = ev.getY();
// downTime = System.currentTimeMillis();
} else if(action == MotionEvent.ACTION_MOVE){
float moveY = ev.getY();
moveLen = (int)(moveY - downY);
if((moveLen > 0 && contentViewTop < hideViewHeight && scrollY == 0)
|| (moveLen < 0 && contentViewTop > 0))
return true;
downY = moveY;
} else if(action == MotionEvent.ACTION_UP){
saveState();
}
return false;
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
if(action == MotionEvent.ACTION_DOWN){
downX = ev.getX();
downY = ev.getY();
} else if(action == MotionEvent.ACTION_MOVE){
float moveY = ev.getY();
moveLen = (int)(moveY - downY);
moveContentView(ev);
// System.out.println("moveLen = " + moveLen + " moveY = " + moveY + " downY = " + downY);
} else if(action == MotionEvent.ACTION_UP){
saveState();
// System.out.println("moveLen = " + moveLen + " upY = " + ev.getY());
}
return false;
}
private void saveState() {
contentViewTop = contentView.getTop();
smoothMove();
}
private void moveContentView(MotionEvent event){
float moveY = event.getY();
moveLen = (int)(moveY - downY);
int top = contentViewTop + moveLen;
if( top >= 0 && top<= hideViewHeight) {
requestLayout();
}
}
private void smoothMove(){
long duration = 300L; //整体滑动时间
final int restDistence;
if(moveLen < 0){
duration = duration * contentViewTop / hideViewHeight; //计算剩下需要多久时间
restDistence = -contentViewTop; //剩下需要移动的距离 方向决定 正负
} else {
duration = duration * (hideViewHeight - contentViewTop) / hideViewHeight; //计算剩下需要多久时间
restDistence = (hideViewHeight - contentViewTop); //剩下需要移动的距离 方向决定 正负
}
// System.out.println("duration = " +duration + " restDistence = " + restDistence);
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
valueAnimator.setDuration(duration);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
moveLen = (int) (restDistence * value);
// System.out.println("value = " + value + " moveLen = " + moveLen);
requestLayout();
}
});
valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
contentViewTop = contentView.getTop();
if (contentViewTop < 10) {
contentViewTop = 0; //最后如果还有几像素留着 就清零
moveLen = 0;
}
if ((hideViewHeight - contentViewTop) < 10) {
contentViewTop = hideViewHeight;
moveLen = 0;
}
// System.out.println(" contentViewTop = " + contentViewTop);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
valueAnimator.start();
}
}
JAVA
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@color/color_weather_bg"
android:minHeight="?attr/actionBarSize"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="标题"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#fff"/>
<com.demo.android.toolbar_drawlayout_demo.view.ScrollViewLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:background="@color/color_weather_bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:padding="10dp"
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/activity_weather_temp"
android:textSize="36sp"
android:textStyle="bold"
android:text="18℃"
android:textColor="@color/white"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content" />
<ImageView
android:src="@mipmap/ic_weather03"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="2"
android:gravity="center_vertical"
android:layout_height="wrap_content">
<TextView
android:id="@+id/activity_weather_sky"
android:textColor="@color/white"
android:text="阵雨"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/activity_weather_ltemp_htemp"
android:textColor="@color/white"
android:layout_toRightOf="@+id/activity_weather_sky"
android:layout_marginLeft="10dp"
android:text="最低--最高温度"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/activity_weather_windy"
android:textColor="@color/white"
android:layout_marginLeft="10dp"
android:layout_below="@+id/activity_weather_sky"
android:layout_alignLeft="@+id/activity_weather_sky"
android:text="南风1级"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:padding="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:text="明天"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/activity_weak_day"
android:text="周五"
android:layout_marginLeft="10dp"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/activity_weather_tommorrow_sky"
android:text="多云"
android:layout_marginLeft="10dp"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/activity_weather_tommorrow_ltemp_htemp"
android:text="18--25℃"
android:layout_marginLeft="10dp"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<RelativeLayout
android:padding="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:textColor="@color/white"
android:text="空气质量"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/activity_weather_air_level"
android:textColor="@color/white"
android:text="空气良"
android:background="@color/color_orange_bg"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/activity_weather_air_level_grade"
android:textColor="@color/white"
android:text="66"
android:layout_toLeftOf="@+id/activity_weather_air_level"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<ImageView
android:background="@mipmap/weather_cloud"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:background="@color/color_orange_bg"
android:gravity="center"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
<TextView
android:text="Content"
android:padding="10dp"
android:textColor="@color/white"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
</LinearLayout>
</ScrollView>
</com.demo.android.toolbar_drawlayout_demo.view.ScrollViewLayout>
</LinearLayout>布局代码
效果图
扫一扫
1094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
