溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Android自定義ViewGroup實(shí)現(xiàn)豎向引導(dǎo)界面

發(fā)布時(shí)間:2020-09-04 13:23:31 來源:腳本之家 閱讀:129 作者:鴻洋_ 欄目:移動開發(fā)

一般進(jìn)入APP都有歡迎界面,基本都是水平滾動的,今天和大家分享一個(gè)垂直滾動的例子。

先來看看效果把:

Android自定義ViewGroup實(shí)現(xiàn)豎向引導(dǎo)界面

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個(gè)RelativeLayout,每個(gè)RelativeLayout都設(shè)置了背景圖片,背景圖片來自微信~

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;
 /**
 * 手指按下時(shí)的getScrollY
 */
 private int mScrollStart;
 /**
 * 手指抬起時(shí)的getScrollY
 */
 private int mScrollEnd;
 /**
 * 記錄移動時(shí)的Y
 */
 private int mLastY;
 /**
 * 滾動的輔助類
 */
 private Scroller mScroller;
 /**
 * 是否正在滾動
 */
 private boolean isScrolling;
 /**
 * 加速度檢測
 */
 private VelocityTracker mVelocityTracker;
 /**
 * 記錄當(dāng)前頁
 */
 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();
 // 設(shè)置主布局的高度
 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);// 調(diào)用每個(gè)自布局的layout
 }
 }
 
 }
 
 }
 
 @Override
 public boolean onTouchEvent(MotionEvent event)
 {
 // 如果當(dāng)前正在滾動,調(diào)用父類的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();
 // 已經(jīng)到達(dá)頂端,下拉多少,就往上滾動多少
 if (dy < 0 && scrollY + dy < 0)
 {
 dy = -scrollY;
 }
 // 已經(jīng)到達(dá)底部,上拉多少,就往下滾動多少
 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;
 }
 
 /**
 * 根據(jù)滾動距離判斷是否能夠滾動到下一頁
 * 
 * @return
 */
 private boolean shouldScrollToNext()
 {
 return mScrollEnd - mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600;
 }
 
 /**
 * 根據(jù)用戶滑動,判斷用戶的意圖是否是滾動到下一頁
 * 
 * @return
 */
 private boolean wantScrollToNext()
 {
 return mScrollEnd > mScrollStart;
 }
 
 /**
 * 根據(jù)滾動距離判斷是否能夠滾動到上一頁
 * 
 * @return
 */
 private boolean shouldScrollToPre()
 {
 return -mScrollEnd + mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600;
 }
 
 /**
 * 根據(jù)用戶滑動,判斷用戶的意圖是否是滾動到上一頁
 * 
 * @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);
 }
 
 /**
 * 設(shè)置回調(diào)接口
 * 
 * @param onPageChangeListener
 */
 public void setOnPageChangeListener(OnPageChangeListener onPageChangeListener)
 {
 mOnPageChangeListener = onPageChangeListener;
 }
 
 /**
 * 回調(diào)接口
 * 
 * @author zhy
 * 
 */
 public interface OnPageChangeListener
 {
 void onPageChange(int currentPage);
 }
}

注釋還是相當(dāng)詳細(xì)的,我簡單描述一下,Action_down時(shí)獲得當(dāng)前的scrollY,然后Action_move時(shí),根據(jù)移動的距離不斷scrollby就行了,當(dāng)前處理了一下邊界判斷,在Action_up中再次獲得scrollY,兩個(gè)的scrollY進(jìn)行對比,然后根據(jù)移動的距離與方向決定最后的動作。

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();
 }
 });
 }
 
}

為了提供可擴(kuò)展性,還是定義了回調(diào)接口,完全可以把這個(gè)當(dāng)成一個(gè)垂直的ViewPager使用。

總結(jié)下:

Scroller這個(gè)輔助類還是相當(dāng)好用的,原理我簡單說一下:每次滾動時(shí),讓Scroller進(jìn)行滾動,然后調(diào)用postInvalidate方法,這個(gè)方法會引發(fā)調(diào)用onDraw方法,onDraw方法中會去調(diào)用computeScroll方法,然后我們在computScroll中判斷,Scroller的滾動是否結(jié)束,沒有的話,把當(dāng)前的View滾動到現(xiàn)在Scroller的位置,然后繼續(xù)調(diào)用postInvalidate,這樣一個(gè)循環(huán)的過程。

畫張圖方便大家理解,ps:沒找到什么好的畫圖工具,那rose隨便畫了,莫計(jì)較。

Android自定義ViewGroup實(shí)現(xiàn)豎向引導(dǎo)界面

源碼下載:Android自定義ViewGroup實(shí)現(xiàn)豎向引導(dǎo)界面

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI