Android自定義View(六)商品詳情頁GoodsDetailLayout

ezgif-5-1d05be3b91.gif

安卓中的商品詳情頁一般都是由上下二個全屏的可以滾動的view組成,當(dāng)上面的試圖滾到底部時,才可以拖到下面的試圖审胸,我們可以用一個Viewgroup來放置一個Scrollview和一個WebView潜慎,再對上下View進(jìn)行判斷是否可以繼續(xù)上滑或下滑

1.定義一個GoodsDetailLayout繼承Viewgroup,在構(gòu)造初始化參數(shù)

2.在onInterceptTouchEvent方法中進(jìn)行事件的判斷,當(dāng)View沒有滑動到底部或頂部時,我們不對事件進(jìn)行攔截,讓View響應(yīng)自己的滑動,否則就對事件進(jìn)行攔截限书,根據(jù)滑動的參數(shù)自己處理事件

3.怎么知道View是否滑動到了底部或頂部呢吱殉,ViewCompat類中有一個方法

/**
* Check if this view can be scrolled vertically in a certain direction.
*
* @param view The View against which to invoke the method.
* @param direction Negative to check scrolling up, positive to check scrolling down.
* @return true if this view can be scrolled in the specified direction, false otherwise.
*
* @deprecated Use {@link View#canScrollVertically(int)} directly.
*/
@Deprecated
public static boolean canScrollVertically(View view, int direction) {
return view.canScrollVertically(direction);
}

第一個參數(shù)表示用于要判斷的view递礼,第二個參數(shù)direction,大于0時表示是否可以上滑,小于0表示是否可以下滑

4.onInterceptTouchEvent方法是這里面最為關(guān)鍵的一步,如果當(dāng)前的屏幕是上面的View且不可以上滑時,就代表上面的View滑動到了底部,就自己來處理事件.或者當(dāng)前屏幕的布局是下面的View且不可以下滑就代表下面的布局已經(jīng)滑動到了頂部,就攔截事件讓自己處理.

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        int y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mDownY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                mMoveY = y;
                mLastMoveY = mMoveY;
                //第二個參數(shù),當(dāng)direction>0時岖圈,判斷是否可以上滑
                boolean b1 = ViewCompat.canScrollVertically(getChildAt(0), 1);
                //第二個參數(shù),當(dāng)direction<0時鹦牛,判斷是否可以下滑
                boolean b4 = ViewCompat.canScrollVertically(getChildAt(1), -1);
//
//                if ((Math.abs(mMoveY - mDownY)) > mTouchSlop) {
//                    return true;
//                }
                //dy>0表示下滑
                int dy = mMoveY - mDownY;
                if (mCurrentIndex == UP && !b1 && dy < 0) {
                    return true;
                }

                if (mCurrentIndex == DOWN && !b4 && dy > 0) {
                    return true;
                }

        }
        return false;

    }

5.然后在Ontouchevent方法中對事件進(jìn)行處理,規(guī)定可以滑動的范圍,抬起手時根據(jù)getScrollY的值進(jìn)行判斷屬于上面還是下面

完整代碼:

public class GoodsDetailLayout extends ViewGroup {
    //滑動敏感值
    private int mTouchSlop;
    private int mDownY;
    private int mMoveY;
    private int mLastMoveY;
    private Scroller mScroller;
    private int mCurrentIndex = UP;
    public static final int UP = 1;
    public static final int DOWN = 2;


    public GoodsDetailLayout(Context context) {
        this(context, null);
    }

    public GoodsDetailLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        ViewConfiguration viewConfiguration = ViewConfiguration.get(context);
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(viewConfiguration);
        mScroller = new Scroller(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measureChild(getChildAt(0), widthMeasureSpec, heightMeasureSpec);
        measureChild(getChildAt(1), widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        View child1 = getChildAt(0);
        View child2 = getChildAt(1);

        child1.layout(0, 0, child1.getMeasuredWidth(), child1.getMeasuredHeight());
        child2.layout(0, child1.getMeasuredHeight(), child1.getMeasuredWidth(), child1.getMeasuredHeight() +
                child2.getMeasuredHeight());
    }


    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        int y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mDownY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                mMoveY = y;
                mLastMoveY = mMoveY;
                //第二個參數(shù),當(dāng)direction>0時搞糕,判斷是否可以上滑
                boolean b1 = ViewCompat.canScrollVertically(getChildAt(0), 1);
                //第二個參數(shù),當(dāng)direction<0時,判斷是否可以下滑
                boolean b4 = ViewCompat.canScrollVertically(getChildAt(1), -1);
//
//                if ((Math.abs(mMoveY - mDownY)) > mTouchSlop) {
//                    return true;
//                }
                //dy>0表示下滑
                int dy = mMoveY - mDownY;
                if (mCurrentIndex == UP && !b1 && dy < 0) {
                    return true;
                }

                if (mCurrentIndex == DOWN && !b4 && dy > 0) {
                    return true;
                }

        }
        return false;

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int height =0;
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                int y = (int) event.getY();
                mMoveY = y;

                scrollBy(0, mLastMoveY - mMoveY);
                if (getScrollY() <= 0) {
                    scrollTo(0, 0);
                }
                if (getScrollY() >= getHeight()) {
                    scrollTo(0, getHeight());
                }
                height = mCurrentIndex == UP ? getHeight() / 3 : getHeight() - getHeight() / 3;
                if (getScrollY() < height) {
                    if(mOnViewChangeListener!=null )
                        mOnViewChangeListener.onDownAnim(mCurrentIndex);
                }
                if (getScrollY() >= height) {
                    if(mOnViewChangeListener!=null )
                        mOnViewChangeListener.onPullAnim(mCurrentIndex);
                }
                mLastMoveY = mMoveY;
                break;
            case MotionEvent.ACTION_UP:

                int dy = 0;
                height = mCurrentIndex == UP ? getHeight() / 3 : getHeight() - getHeight() / 3;

                if (getScrollY() < height) {
                    dy = 0 - getScrollY();
                    mCurrentIndex = UP;
                    if(mOnViewChangeListener!=null)
                        mOnViewChangeListener.onUp();
                }
                if (getScrollY() >= height) {
                    dy = getHeight() - getScrollY();
                    mCurrentIndex = DOWN;

                }

                mScroller.startScroll(0, getScrollY(), 0, dy);
                invalidate();
                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            invalidate();
        }
    }

    public interface onViewChangeListener {
        void onPullAnim(int index);

        void onDownAnim(int index);

        void onUp();

    }

    private onViewChangeListener mOnViewChangeListener;

    public void setOnViewChangeListener(onViewChangeListener onViewChangeListener) {
        mOnViewChangeListener = onViewChangeListener;
    }
}

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<com.chinamall21.mobile.animstudy.view.GoodsDetailLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/goods_detail"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button

                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="上面條目1"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="上面條目2"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="上面條目3"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="上面條目4"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="上面條目5"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="上面條目6"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:text="上面條目7"/>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="10dp">

                <ImageView
                    android:id="@+id/iv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/pull"/>

                <TextView
                    android:id="@+id/tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="5dp"
                    android:layout_toRightOf="@+id/iv"
                    android:text="上拉加載更多"/>

            </RelativeLayout>

        </LinearLayout>

    </ScrollView>

    <!--下面-->
    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webview">

    </WebView>
    

</com.chinamall21.mobile.animstudy.view.GoodsDetailLayout>


Activity里面:

public class GoodsDetailActivity extends AppCompatActivity {

    private ImageView mImageView;

    private TextView mTextView;

    private GoodsDetailLayout mGoodsDetailLayout;


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_goods_detail);
        mGoodsDetailLayout = findViewById(R.id.goods_detail);
        mImageView =findViewById(R.id.iv);
        mTextView =findViewById(R.id.tv);
        WebView webView = findViewById(R.id.webview);
        webView.loadUrl("http://www.reibang.com/p/346f37b7191f");
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webView.getSettings().setSupportMultipleWindows(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient());

        mGoodsDetailLayout.setOnViewChangeListener(new GoodsDetailLayout.onViewChangeListener() {

            @Override
            public void onPullAnim(int index) {
                if(index == GoodsDetailLayout.UP){
                    mTextView.setText("松開加載更多");
                    mImageView.setRotation(180);

                }else {
                    mTextView.setText("下拉回到頂部");
                    mImageView.setRotation(180);
                }

            }

            @Override
            public void onDownAnim(int index) {

                if(index == GoodsDetailLayout.UP){
                    mTextView.setText("上拉加載更多");
                    mImageView.setRotation(0);
                }else {

                    mTextView.setText("松開回到頂部");
                    mImageView.setRotation(0);
                }

            }

            @Override
            public void onUp() {
                mTextView.setText("上拉加載更多");
            }

        });
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末曼追,一起剝皮案震驚了整個濱河市窍仰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌礼殊,老刑警劉巖驹吮,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異晶伦,居然都是意外死亡碟狞,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進(jìn)店門婚陪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來族沃,“玉大人,你說我怎么就攤上這事近忙〗咭担” “怎么了?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵及舍,是天一觀的道長未辆。 經(jīng)常有香客問我,道長锯玛,這世上最難降的妖魔是什么脑沿? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮妇智,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘为狸。我一直安慰自己,他們只是感情好遗契,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布辐棒。 她就那樣靜靜地躺著,像睡著了一般牍蜂。 火紅的嫁衣襯著肌膚如雪漾根。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天鲫竞,我揣著相機(jī)與錄音辐怕,去河邊找鬼。 笑死从绘,一個胖子當(dāng)著我的面吹牛寄疏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播僵井,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼陕截,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了批什?” 一聲冷哼從身側(cè)響起艘策,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎渊季,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體罚渐,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡却汉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了荷并。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片合砂。...
    茶點(diǎn)故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖源织,靈堂內(nèi)的尸體忽然破棺而出翩伪,到底是詐尸還是另有隱情,我是刑警寧澤谈息,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布缘屹,位于F島的核電站,受9級特大地震影響侠仇,放射性物質(zhì)發(fā)生泄漏轻姿。R本人自食惡果不足惜犁珠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望互亮。 院中可真熱鬧犁享,春花似錦、人聲如沸豹休。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽威根。三九已至凤巨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間医窿,已是汗流浹背磅甩。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留姥卢,地道東北人卷要。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像独榴,于是被迫代替她去往敵國和親僧叉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,884評論 2 354