Android自定义ViewGroup实现竖向引导界面

一般进入APP都有欢迎界面,基本都是水平滚动的,今天和大家分享一个垂直滚动的例子。

先来看看效果把:

1、首先是布局文件:

<com.example.verticallinearlayout.VerticalLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/id_main_ly"
 android:layout_width="match_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical"
 android:background="#fff" >

 <RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/w02" >

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="hello" />
 </RelativeLayout>

 <RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/w03" >

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:background="#fff"
 android:text="hello" />
 </RelativeLayout>

 <RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/w04" >

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:text="hello" />
 </RelativeLayout>

 <RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/w05" >

 <Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:text="hello" />
 </RelativeLayout>

</com.example.verticallinearlayout.VerticalLinearLayout>

在自定义的ViewGroup中放入了4个RelativeLayout,每个RelativeLayout都设置了背景图片,背景图片来自微信~

2、主要看自定义的Layout了

package com.example.verticallinearlayout;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.Scroller;

public class VerticalLinearLayout extends ViewGroup
{
 /**
 * 屏幕的高度
 */
 private int mScreenHeight;
 /**
 * 手指按下时的getScrollY
 */
 private int mScrollStart;
 /**
 * 手指抬起时的getScrollY
 */
 private int mScrollEnd;
 /**
 * 记录移动时的Y
 */
 private int mLastY;
 /**
 * 滚动的辅助类
 */
 private Scroller mScroller;
 /**
 * 是否正在滚动
 */
 private boolean isScrolling;
 /**
 * 加速度检测
 */
 private VelocityTracker mVelocityTracker;
 /**
 * 记录当前页
 */
 private int currentPage = 0;

 private OnPageChangeListener mOnPageChangeListener;

 public VerticalLinearLayout(Context context, AttributeSet attrs)
 {
 super(context, attrs);

 /**
 * 获得屏幕的高度
 */
 WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
 DisplayMetrics outMetrics = new DisplayMetrics();
 wm.getDefaultDisplay().getMetrics(outMetrics);
 mScreenHeight = outMetrics.heightPixels;
 // 初始化
 mScroller = new Scroller(context);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
 {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 int count = getChildCount();
 for (int i = 0; i < count; ++i)
 {
 View childView = getChildAt(i);
 measureChild(childView, widthMeasureSpec,mScreenHeight);
 }
 }

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b)
 {
 if (changed)
 {
 int childCount = getChildCount();
 // 设置主布局的高度
 MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();
 lp.height = mScreenHeight * childCount;
 setLayoutParams(lp);

 for (int i = 0; i < childCount; i++)
 {
 View child = getChildAt(i);
 if (child.getVisibility() != View.GONE)
 {
 child.layout(l, i * mScreenHeight, r, (i + 1) * mScreenHeight);// 调用每个自布局的layout
 }
 }

 }

 }

 @Override
 public boolean onTouchEvent(MotionEvent event)
 {
 // 如果当前正在滚动,调用父类的onTouchEvent
 if (isScrolling)
 return super.onTouchEvent(event);

 int action = event.getAction();
 int y = (int) event.getY();

 obtainVelocity(event);
 switch (action)
 {
 case MotionEvent.ACTION_DOWN:

 mScrollStart = getScrollY();
 mLastY = y;
 break;
 case MotionEvent.ACTION_MOVE:

 if (!mScroller.isFinished())
 {
 mScroller.abortAnimation();
 }

 int dy = mLastY - y;
 // 边界值检查
 int scrollY = getScrollY();
 // 已经到达顶端,下拉多少,就往上滚动多少
 if (dy < 0 && scrollY + dy < 0)
 {
 dy = -scrollY;
 }
 // 已经到达底部,上拉多少,就往下滚动多少
 if (dy > 0 && scrollY + dy > getHeight() - mScreenHeight)
 {
 dy = getHeight() - mScreenHeight - scrollY;
 }

 scrollBy(0, dy);
 mLastY = y;
 break;
 case MotionEvent.ACTION_UP:

 mScrollEnd = getScrollY();

 int dScrollY = mScrollEnd - mScrollStart;

 if (wantScrollToNext())// 往上滑动
 {
 if (shouldScrollToNext())
 {
 mScroller.startScroll(0, getScrollY(), 0, mScreenHeight - dScrollY);

 } else
 {
 mScroller.startScroll(0, getScrollY(), 0, -dScrollY);
 }

 }

 if (wantScrollToPre())// 往下滑动
 {
 if (shouldScrollToPre())
 {
 mScroller.startScroll(0, getScrollY(), 0, -mScreenHeight - dScrollY);

 } else
 {
 mScroller.startScroll(0, getScrollY(), 0, -dScrollY);
 }
 }
 isScrolling = true;
 postInvalidate();
 recycleVelocity();
 break;
 }

 return true;
 }

 /**
 * 根据滚动距离判断是否能够滚动到下一页
 *
 * @return
 */
 private boolean shouldScrollToNext()
 {
 return mScrollEnd - mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600;
 }

 /**
 * 根据用户滑动,判断用户的意图是否是滚动到下一页
 *
 * @return
 */
 private boolean wantScrollToNext()
 {
 return mScrollEnd > mScrollStart;
 }

 /**
 * 根据滚动距离判断是否能够滚动到上一页
 *
 * @return
 */
 private boolean shouldScrollToPre()
 {
 return -mScrollEnd + mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600;
 }

 /**
 * 根据用户滑动,判断用户的意图是否是滚动到上一页
 *
 * @return
 */
 private boolean wantScrollToPre()
 {
 return mScrollEnd < mScrollStart;
 }

 @Override
 public void computeScroll()
 {
 super.computeScroll();
 if (mScroller.computeScrollOffset())
 {
 scrollTo(0, mScroller.getCurrY());
 postInvalidate();
 } else
 {

 int position = getScrollY() / mScreenHeight;

 Log.e("xxx", position + "," + currentPage);
 if (position != currentPage)
 {
 if (mOnPageChangeListener != null)
 {
 currentPage = position;
 mOnPageChangeListener.onPageChange(currentPage);
 }
 }

 isScrolling = false;
 }

 }

 /**
 * 获取y方向的加速度
 *
 * @return
 */
 private int getVelocity()
 {
 mVelocityTracker.computeCurrentVelocity(1000);
 return (int) mVelocityTracker.getYVelocity();
 }

 /**
 * 释放资源
 */
 private void recycleVelocity()
 {
 if (mVelocityTracker != null)
 {
 mVelocityTracker.recycle();
 mVelocityTracker = null;
 }
 }

 /**
 * 初始化加速度检测器
 *
 * @param event
 */
 private void obtainVelocity(MotionEvent event)
 {
 if (mVelocityTracker == null)
 {
 mVelocityTracker = VelocityTracker.obtain();
 }
 mVelocityTracker.addMovement(event);
 }

 /**
 * 设置回调接口
 *
 * @param onPageChangeListener
 */
 public void setOnPageChangeListener(OnPageChangeListener onPageChangeListener)
 {
 mOnPageChangeListener = onPageChangeListener;
 }

 /**
 * 回调接口
 *
 * @author zhy
 *
 */
 public interface OnPageChangeListener
 {
 void onPageChange(int currentPage);
 }
}

注释还是相当详细的,我简单描述一下,Action_down时获得当前的scrollY,然后Action_move时,根据移动的距离不断scrollby就行了,当前处理了一下边界判断,在Action_up中再次获得scrollY,两个的scrollY进行对比,然后根据移动的距离与方向决定最后的动作。

3、主Activity

package com.example.verticallinearlayout;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

import com.example.verticallinearlayout.VerticalLinearLayout.OnPageChangeListener;

public class MainActivity extends Activity
{
 private VerticalLinearLayout mMianLayout;

 @Override
 protected void onCreate(Bundle savedInstanceState)
 {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 mMianLayout = (VerticalLinearLayout) findViewById(R.id.id_main_ly);
 mMianLayout.setOnPageChangeListener(new OnPageChangeListener()
 {
 @Override
 public void onPageChange(int currentPage)
 {
// mMianLayout.getChildAt(currentPage);
 Toast.makeText(MainActivity.this, "第"+(currentPage+1)+"页", Toast.LENGTH_SHORT).show();
 }
 });
 }

}

为了提供可扩展性,还是定义了回调接口,完全可以把这个当成一个垂直的ViewPager使用。

总结下:

Scroller这个辅助类还是相当好用的,原理我简单说一下:每次滚动时,让Scroller进行滚动,然后调用postInvalidate方法,这个方法会引发调用onDraw方法,onDraw方法中会去调用computeScroll方法,然后我们在computScroll中判断,Scroller的滚动是否结束,没有的话,把当前的View滚动到现在Scroller的位置,然后继续调用postInvalidate,这样一个循环的过程。

画张图方便大家理解,ps:没找到什么好的画图工具,那rose随便画了,莫计较。

源码下载:Android自定义ViewGroup实现竖向引导界面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android页面中引导蒙层的使用方法详解

    蒙层是什么,蒙层是一层透明的呈灰色的视图,是在用户使用App时让用户快速学会使用的一些指导.类似于一些引导页面,只不过比引导页面更加生动形象而已.在GitHub上有具体的demo. 地址为   github源码地址,需要的可以去上面下载源码看看 使用引导蒙层非常简单,只要在你的项目中导入一个GuideView类即可,当然,别忘了在values的资源文件下加上相应的一些数值. 下面是GuideView的原码 public class GuideView extends RelativeLayout

  • Android使用popUpWindow带遮罩层的弹出框

    上次项目中实现了新功能,就一直想添加到博客里来着,惰性发作起来简直太可怕,不说了,跟着一起写吧,三步即可实现简单的弹出框功能,首先看效果-- 首先:主页面布局,触发控件一定要有,再有就是给根标签设置id <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:

  • Android GuideView实现首次登陆引导

    简介:最最轻量级的新手引导库,能够快速为任何一个 View 创建一个遮罩层,支持单个页面,多个引导提示,支持为高亮区域设置不同的图形,支持引导动画,方便扩展 项目地址:binIoter/GuideView GuideView 本系统能够快速的为一个 Activity 里的任何一个 View 控件创建一个遮罩式的导航页. 工作原理 首先它需要一个目标 View 或者它的 id,我们通过 findViewById 来得到这个 View,计算它在屏幕上的区域 targetRect,通过这个区域,开始绘

  • Android之淘宝商品列表长按遮罩效果的实现

    先来看看淘宝.唯品会长按商品的效果,以及简单Demo的效果: 首先分析一下场景: 长按条目时,弹出遮罩的效果遮挡在原来的条目布局上: 页面滑动或点击其他的条目,上一个正在遮罩的条目遮罩消失. 长按其他条目时,上一个遮罩的条目撤销遮罩,当前长按的显示遮罩: 条目添加遮罩的时添加动画: 1. 遮罩的效果,我们会很容易的想到Android布局控件FrameLayout布局,是基于叠加在上方的布局.所以在列表条目布局的时候,可以使用FrameLayout布局,在长按列表条目时,用条目的根布局添加一个遮罩

  • 一分钟实现Android遮罩引导视图

    一分钟实现Android遮罩引导视图,供大家参考,具体内容如下 先看一下效果图 主角GuideView登场! GuideView是一种基于DialogFragment实现的引导遮罩浮层视图的轻量级解决方案,它具备以下的特性: 响应导航按钮的动作(因为引导浮层本质是一个dialog): 链式引导层,支持设定一组的引导遮罩视图,通过点击切换下一个试图,快读与业务进行解藕: 自动绘制半透明浮层.透明核心区以及确保目标视图和引导视图的位置. 实现说明 页面的结构如下图所示: 核心类 GuideViewB

  • Android实现遮罩层(蒙板)效果

    Android的遮罩效果就是把一张图片盖在另一张图片的上面,通过控制任意一张图片的显示百分比实现遮罩效果.下面我使用两张一样的图片来实现一个类似于 Android 的progressbar 的填充效果.使用遮罩效果来实现progressbar的效果的好处是,我们可以只改变图片就可以更改progress的进度填充效果,并且我们可以实现任意形式的填充效果,就比如横竖填充,扇形逆/顺时填充针等. 网上有很多介绍Android 遮罩效果的列子,但是都是横竖的填充效果,下面我来实现一个扇形填充效果,如下图

  • 360浏览器文本框获得焦点后被android软键盘遮罩该怎么办

    场景是这样的,站点上筛选按钮点击后弹出层(fixed),当输入框获取焦点以后弹出系统自带的软键盘,在android上十款浏览器挨个测试比对,发现在360浏览器弹出键盘以后获取焦点的文本框被软键盘覆盖了. 截图如下 (未获取软键盘焦点的情况) (chrome浏览器调起软键盘的情况) (360浏览器调起软键盘情况) 那么问题来了,浏览器的软键盘显示出来又哪几种情况呢?英文   中文(网上找的) 经过简单的了解,大概分析了一下软键盘在浏览器上弹出应该包含软键盘占用主activity空间,让主activ

  • Android实现新手引导半透明蒙层效果

    本文实例为大家分享了Android实现新手引导半透明蒙层效果的具体代码,供大家参考,具体内容如下 效果图: 其中的文字和我知道啦是ui切得两张透明图片 自定义View: package com.cymobi.library.view.widget; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas;

  • Android PopupWindow实现遮罩层效果

    此篇博客实现的功能是:点击界面中的图片,跳出一个PopupWindow,PopupWindow中含有相应的文字和图标,并且在显示PopupWindow的时候,背景为半透明. 看图描述:点击加号,跳出PopupWindow,其中包含三个图片,点击叉号PopupWindow消失:当PopupWindow显示的时候,背景为半透明 显示PopupWindow的代码 private void showPopupWindow() { View view = (LinearLayout) getLayoutI

  • Android自定义Dialog内部透明、外部遮罩效果

    本文实例为大家分享了Android自定义Dialog遮罩效果的具体代码,供大家参考,具体内容如下 图例: 代码 1.自定义dialog:引入样式和代码指定样式 package com.gxjl.pe.gxjlpesdk.view; import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.support.annotation.NonNull; import

随机推荐