专栏首页三好码农的三亩自留地Android-教你写小米系统应用--"我的小米"

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 条评论
登录 后参与评论

相关文章

  • 实现Activity滑动退出

    很多应用在二级详情页面加入了滑动退出activity的效果,很方便,心血来潮,想着自己也来实现这个效果,就当做练手吧。

    三好码农
  • 教你搞定Android自定义View

    Android所有的控件都是View或者View的子类,它其实表示的就是屏幕上的一块矩形区域,用一个Rect来表示,left,top表示View相对于它的par...

    三好码农
  • Android九宫格控件-可在ListView和RecyclerView中使用

    熟悉Android App开发的同学,肯定都清楚,如果要显示多张图片,类似九宫格,可以用GridView或者GridLayout来做,但是如果需求要求在List...

    三好码农
  • 一个adapter实现多个itemView

    要想实现这个功能,有两个函数比较重要getItemViewType和getViewTypeCount

    提莫队长
  • 接收数据实时更新的波状曲线图

    前面做了一个心电图的demo 心电图,结果发现那个心电图是静态的,是应用一启动就已经画好了的,整个页面向左滑动而已

    用户3112896
  • Android – 仿简书搜索框效果

    code_horse
  • Android中基于监听的事件处理

    上一期我们学习了Android中的事件处理,也详细学习了Android中基于监听的事件处理,同时学会了匿名内部类形式,那么本期继续来学习其他四种事件监听...

    分享达人秀
  • 动画必须有(二):悬浮菜单了解一下!

    SeanDepp
  • Android开发_Animation

    http://www.cnblogs.com/hongten/gallery/image/112163.html

    Hongten
  • CoordinatorLayout使用(一):Behavior简单理解

    CoordinatorLayout出来很久了,时间关系,一直没有怎么弄过 看见简友的描述 r17171709 的 http://www.jianshu.c...

    dodo_lihao

扫码关注云+社区

领取腾讯云代金券