Android-教你写小米系统应用--"我的小米"

我承认我有点标题党了,我不可能完整的介绍怎么写小米应用,我这篇要说的其实是模仿MIUI6系统应用“我的小米”的首页,主要实现的UI是一个圆形的头像,下面是用户名,再下面是一些功能的cell,然后向上滑动功能cell,可以将头像渐隐,然后用户名放大放到页面顶部,向下滑动,恢复页面初始样貌,大家如果手头有小米手机的可以自己感受下(我自己觉得小米的一些系统应用做的还是不错的)。

构思

前面的文章中,我们已经了解了如何去自定义一个ViewGroup,可以在onLayout中自由的对子View进行位置设定,我们今天这里刚好需要对上面需求提到的三部分子View(头像ImageView,姓名TextView,功能Cell布局)在滑动过程中进行位置设定,重绘,所以我们就可以自定义一个ViewGroup去实现。

public class MineMiView extends ViewGroup {
    public MineMiView(Context context) {
    super(context, null, 0);
  }

  public MineMiView(Context context, AttributeSet attrs) {
    super(context, attrs, 0);
  }

  public MineMiView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mContext = context;
  }

  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {

  }
}

我们接着将主布局文件画一下,现在我们为了简单起见,布局的第三部分-功能cell部分暂时先用一个空的天蓝色LinearLayout布局代替,后面我们会替换回去。

 <com.example.aliouswang.myapplication.widget.MineMiView
    android:id="@+id/mineMiView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <ImageView
        android:id="@+id/head_imageview"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@drawable/default_head"
        ></ImageView>

    <LinearLayout
        android:id="@+id/username_rootview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_horizontal"
        >
        <TextView
            android:id="@+id/name_tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Joe少"
            android:textSize="16sp"
            android:textColor="@android:color/holo_orange_dark"
            ></TextView>

        <TextView
            android:id="@+id/name_tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="stay hungry, stay foolish"
            android:textSize="12sp"
android:textColor="@android:color/holo_orange_light"
            ></TextView>
        </LinearLayout>
            <LinearLayout
                android:id="@+id/content_rootview"
                android:orientation="vertical"
   android:background="@android:color/holo_blue_light"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </LinearLayout>
 </com.example.aliouswang.myapplication.widget.MineMiView>

//初始化我们即将使用的三个子View
@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    mHeadImageView = (ImageView)findViewById(R.id.head_imageview);
    mUserNameRootView = (LinearLayout)findViewById(R.id.username_rootview);
    mContentRootView = (MiScrollView)findViewById(R.id.content_rootview);
}

    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    sWidth = MeasureSpec.getSize(widthMeasureSpec);
    sHeight = MeasureSpec.getSize(heightMeasureSpec);
    measureChildren(widthMeasureSpec, heightMeasureSpec);
    //measure头像控件的大小
    headImageWidth = mHeadImageView.getMeasuredWidth();
    headImageHeight = mHeadImageView.getMeasuredHeight();
    //measure姓名控件的大小
    userNameWidth = mUserNameRootView.getMeasuredWidth();
    userNameHeight = mUserNameRootView.getMeasuredHeight();
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    mHeadImageView.layout((sWidth - headImageWidth)/2, mMarginTop
    ,(sWidth + headImageWidth)/2, mMarginTop + headImageHeight
            );
    //计算第三部分content的高度,其他控件的位置根据它的高度来设置
    if (contentHeight == -1) {
        contentHeight = sHeight - (mMarginTop + headImageHeight +
                50 + userNameHeight);
    }

    mUserNameRootView.layout((sWidth - userNameWidth)/2,
            sHeight - contentHeight - 50 - userNameHeight
            ,(sWidth + userNameWidth)/2,
            sHeight - contentHeight - 50
    );

    mContentRootView.layout(0, sHeight - contentHeight
            ,sWidth, sHeight
    );
    
   //初始化MaxTop,MinTop, currentTop.
    if (maxTop == 0) {
        maxTop = mMarginTop + headImageHeight + 80 + userNameHeight;
        minTop = mMarginTop + 30;
        currentTop = maxTop;
    }

}

实现滑动-ViewDragHelper

滑动子View可以通过监听ACTION_MOVE事件然后不断layout子View在ViewGroup中的位置实现滚动,但是如果完全自己写,逻辑就比较复杂了。其实Android support V4架包已经为我们提供了ViewDragHelper类,来辅助我们在自定义ViewGroup时,来处理子View的滑动需求。下面我们就简单介绍下ViewDragHelper的用法。

  • 1.我们先实例化一个ViewDragHelper对象mDragHelper,可以在onAttachedToWindow()方法中初始化,也可以在ViewGroup的构造器中初始化。It's depend on you. @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); mDragHelper = ViewDragHelper.create(this, 1.0f, new MiDragHelperCallback()); mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_ALL); } private class MiDragHelperCallback extends ViewDragHelper.Callback { @Override public boolean tryCaptureView(View child, int pointerId) { return child == mContentRootView; } }

ViewDragHelper.Callback是一个抽象类,里面定义了很多回调方法,我们这里只说明我们用到的方法,其他的留给大家自己深入了解学习。

//是否允许抓取View,即你手指在屏幕上触摸拖动的View child是否允许被拖动
//我们这里只允许子View mContentRootView拖动。
@Override
public boolean tryCaptureView(View child, int pointerId) {
  return child == mContentRootView;
}

//拖动的子View水平方向的位置,这里其实给我们一次修改被拖动的子View水平位置的机会,我们根据需求返回值
//因为我们这里只处理Vertical方向拖动,Horizontal方向的返回0即可。
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
        return 0;
}

//与上面Horizontal类似,我们对Vertical方向的滑动位置控制在minTop和maxTop之间,这二个参数可以根据需求设置
//另外有一个topBounusFator用来表示上下滑动的弹性系数,滑动超出后弹回正确的位置,
@Override
  public int clampViewPositionVertical(View child, int top, int dy) {
      int resultTop = top;
      if (resultTop > maxTop + topBonunsFator) {
          resultTop = maxTop + topBonunsFator;
      }
      if (resultTop < minTop - topBonunsFator){
          resultTop = minTop - topBonunsFator;
      }
      return resultTop;
  }

//当子View的位置即将发生改变时,这里给了我们修改layout子View 的位置的机会,
//同时我们根据滑动的位置,还设置了mHeadImageView的透明度和 mUserNameRootView的缩放系数
//最后调用requestLayout
  @Override
  public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
        if (changedView == mContentRootView) {
            if (currentTop == top) {
                bMoved = false;
                return;
            }else {
                bMoved = true;
            }
            contentHeight = sHeight - top;
            contentScale = ((float)(maxTop - top)/(float)(maxTop - minTop) * scaleFator) + 1;
            headImageAlpha = 1 - (float)(maxTop - top) * alphaFator/(float)(maxTop - minTop);
            if (headImageAlpha < 0) {
                headImageAlpha = 0;
            }
            currentTop = top;
            mUserNameRootView.setScaleX(contentScale);
            mUserNameRootView.setScaleY(contentScale);
            mHeadImageView.setAlpha(headImageAlpha);
            requestLayout();
        }
  }    

  //当拖动的子View释放后,即手指离开屏幕后,这里我们对滑动的速度和手指的最后位置进行判断,
  //通过判断最后滑动到Top或者Bottom,通过调用mDragHelper.settleCapturedViewAt(0, maxTop);
  //注意最后需要手动刷新ViewCompat.postInvalidateOnAnimation(MineMiView.this);
    @Override
    public void onViewReleased(View releasedChild, float xvel, float yvel) {
        super.onViewReleased(releasedChild, xvel, yvel);
        if (yvel < -defaultVotical) {
            mDragHelper.settleCapturedViewAt(0, minTop);
        }else if(yvel > defaultVotical){
            mDragHelper.settleCapturedViewAt(0, maxTop);
        }else if(currentTop < (minTop + maxTop) /2) {
            mDragHelper.settleCapturedViewAt(0, minTop);
        }else {
            mDragHelper.settleCapturedViewAt(0, maxTop);

        }
        ViewCompat.postInvalidateOnAnimation(MineMiView.this);
    }

传递MotionEvent给ViewDragHelper

上面已经将ViewDragHelper初始化完毕,那么现在就需要将MineMiView的触摸事件传递给mDragHelper,其实跟利用GestureDetector来处理手势事件是类似的。

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    if (ev.getAction() == MotionEvent.ACTION_CANCEL
            || ev.getAction() == MotionEvent.ACTION_UP) {
        mDragHelper.cancel();
        return super.onInterceptTouchEvent(ev);
    }
    boolean val = mDragHelper.shouldInterceptTouchEvent(ev);
    return val || super.onInterceptTouchEvent(ev);
} 

@Override
public boolean onTouchEvent(MotionEvent event) {
    mDragHelper.processTouchEvent(event);
    return true;
}

最后还有一点工作要做,因为我们知道手指在屏幕上滑动时,会有一个加速度,我们希望做一个减速过程来结束ViewDragHelper的settle,我们可以在computeScroll方法中做处理。

  @Override
  public void computeScroll() {
   //判断mDragHelper的settle是否结束,未结束,继续刷新ViewGroup
    if (mDragHelper.continueSettling(true)) {
        ViewCompat.postInvalidateOnAnimation(this);
    }
  }

其实我们的骨干代码就基本完成了,我们来看下运行效果。

mine_mi_gif.gif

总结

我们利用ViewDragHelper简化了我们处理View拖动的逻辑,但是我们现在还不完善,因为,如果我们蓝色的contentView与它的子View被设置了点击事件,那么MotionEvent就不会传递到我们的MineMiView,也就不会传给我们的ViewDragHelper来处理,这时我们上面的代码肯定不能正常工作,所以我们需要额外做触摸事件的拦截,即只有当contentView符合drag的条件时,我们认为应该让MineMiView拦截事件(onInterceptTouchEvent 返回true即可),然后传递给ViewDragHelper处理来实现滑动,否则触摸事件交给子View消费。这一块具体的实现过程,我后面再出一篇详细介绍。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏何俊林

如何优化你的布局层级结构之RelativeLayout和LinearLayout及FrameLayout性能分析(一)

工作一段时间后,经常会被领导说,你这个进入速度太慢了,竞品的进入速度很快,你搞下优化吧?每当这时,你会怎么办?功能实现都有啊,进入时要加载那么多view,这也没...

3919
来自专栏非著名程序员

教你步步为营掌握自定义ViewGroup

本篇是《教你步步为营掌握自定义View》一文的姊妹篇。自定义ViewGroup的文章很多,但都有一个缺点,没有回应用户关切,比如我在读那些文章时,就很想知道,自...

2196
来自专栏小巫技术博客

A020-列表容器之ListView

前面介绍了Android UI中的五大布局容器,本节课介绍实际项目当中经常会用到的组件-ListView,它也是一个布局容器,它的每一项就是我们的列表项,每一个...

1013
来自专栏Android干货园

Android--仿淘宝商品详情(继续拖动查看详情)及标题栏渐变

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/80...

1421
来自专栏刘望舒

Android View体系(九)自定义View

相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属...

21810
来自专栏Sorrower的专栏

Android弹窗二则: PopupWindow和AlertDialog

android.support.v7.app.AlertDialog.Builder builder = new android.support.v7.app....

1995
来自专栏Android源码框架分析

三句代码创建全屏Dialog或者DialogFragment:带你从源码角度实现全屏Dialog

Dialog是APP开发中常用的控件,同Activity类似,拥有独立的Window窗口,但是Dialog跟Activity还是有一定区别的,最明显的就是:默认...

3674
来自专栏非著名程序员

教你步步为营掌握自定义 View

国内自定义View的文章汗牛充栋,但是,即使你全部看完它们也未必能掌握这一知识点(实际上,我就几乎看完了所有的国内文章)。为什么?一言以蔽之,你是得其术不明其道...

2016
来自专栏Android中高级开发

Android开发之漫漫长途 番外篇——自定义View的各种姿势2

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索...

1053
来自专栏何俊林

【Android动画】仿新浪微博雷达搜索效果

前言:在应用中使用动画,可以给用户带来良好的交互体验。本文来自【IAM四十二】授权本公众号独家分享。IAM四十二的简书地址:http://www.jianshu...

3067

扫码关注云+社区

领取腾讯云代金券