一般進(jìn)入APP都有歡迎界面,基本都是水平滾動(dòng)的,今天和大家分享一個(gè)垂直滾動(dòng)的例子。
成都網(wǎng)站制作、成都網(wǎng)站建設(shè),成都做網(wǎng)站公司-成都創(chuàng)新互聯(lián)已向上千家企業(yè)提供了,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)絡(luò)營銷等服務(wù)!設(shè)計(jì)與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗(yàn),合理的價(jià)格為您打造企業(yè)品質(zhì)網(wǎng)站。
先來看看效果把:
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; /** * 記錄移動(dòng)時(shí)的Y */ private int mLastY; /** * 滾動(dòng)的輔助類 */ private Scroller mScroller; /** * 是否正在滾動(dòng) */ private boolean isScrolling; /** * 加速度檢測(cè) */ 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)前正在滾動(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á)頂端,下拉多少,就往上滾動(dòng)多少 if (dy < 0 && scrollY + dy < 0) { dy = -scrollY; } // 已經(jīng)到達(dá)底部,上拉多少,就往下滾動(dòng)多少 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())// 往上滑動(dòng) { if (shouldScrollToNext()) { mScroller.startScroll(0, getScrollY(), 0, mScreenHeight - dScrollY); } else { mScroller.startScroll(0, getScrollY(), 0, -dScrollY); } } if (wantScrollToPre())// 往下滑動(dòng) { if (shouldScrollToPre()) { mScroller.startScroll(0, getScrollY(), 0, -mScreenHeight - dScrollY); } else { mScroller.startScroll(0, getScrollY(), 0, -dScrollY); } } isScrolling = true; postInvalidate(); recycleVelocity(); break; } return true; } /** * 根據(jù)滾動(dòng)距離判斷是否能夠滾動(dòng)到下一頁 * * @return */ private boolean shouldScrollToNext() { return mScrollEnd - mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600; } /** * 根據(jù)用戶滑動(dòng),判斷用戶的意圖是否是滾動(dòng)到下一頁 * * @return */ private boolean wantScrollToNext() { return mScrollEnd > mScrollStart; } /** * 根據(jù)滾動(dòng)距離判斷是否能夠滾動(dòng)到上一頁 * * @return */ private boolean shouldScrollToPre() { return -mScrollEnd + mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600; } /** * 根據(jù)用戶滑動(dòng),判斷用戶的意圖是否是滾動(dòng)到上一頁 * * @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; } } /** * 初始化加速度檢測(cè)器 * * @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ì)的,我簡(jiǎn)單描述一下,Action_down時(shí)獲得當(dāng)前的scrollY,然后Action_move時(shí),根據(jù)移動(dòng)的距離不斷scrollby就行了,當(dāng)前處理了一下邊界判斷,在Action_up中再次獲得scrollY,兩個(gè)的scrollY進(jìn)行對(duì)比,然后根據(jù)移動(dòng)的距離與方向決定最后的動(dòng)作。
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)好用的,原理我簡(jiǎn)單說一下:每次滾動(dòng)時(shí),讓Scroller進(jìn)行滾動(dòng),然后調(diào)用postInvalidate方法,這個(gè)方法會(huì)引發(fā)調(diào)用onDraw方法,onDraw方法中會(huì)去調(diào)用computeScroll方法,然后我們?cè)赾omputScroll中判斷,Scroller的滾動(dòng)是否結(jié)束,沒有的話,把當(dāng)前的View滾動(dòng)到現(xiàn)在Scroller的位置,然后繼續(xù)調(diào)用postInvalidate,這樣一個(gè)循環(huán)的過程。
畫張圖方便大家理解,ps:沒找到什么好的畫圖工具,那rose隨便畫了,莫計(jì)較。
源碼下載:Android自定義ViewGroup實(shí)現(xiàn)豎向引導(dǎo)界面
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章題目:Android自定義ViewGroup實(shí)現(xiàn)豎向引導(dǎo)界面
URL分享:http://muchs.cn/article40/gpgjho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、網(wǎng)頁設(shè)計(jì)公司、營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)