Android仿京东商品详情页上拉查看图文详情

【参考借鉴】 Android仿京东、天猫商品详情页

首先看一下效果图

GIF图片太大了,就看一下截图吧。想看效果的去下载apk。【各位小可爱们如果觉得效果需要,可以小小的赞赏一下~~么么哒】


Android仿京东商品详情页上拉查看图文详情_第1张图片
001.png
Android仿京东商品详情页上拉查看图文详情_第2张图片
002.png
Android仿京东商品详情页上拉查看图文详情_第3张图片
003.png
一、项目结构分析

1、顶部是TabLayout+ViewPager来实现,主要处理在DetailFragment中。布局中最外层是CoordinatorLayout,其次是自定义的一个view,slideDetailsLayout。来看一下detailFragment的布局文件。



        

            

                
                    
                        
                        
                    

                    
                    

                    

                        

                        
                    
                    
                        
                        
                        
                    
                    
                        
                        
                    

                    
                        
                            
                            
                            
                            
                        
                        
                            
                            
                            
                        
                        
                            
                            
                        
                    
                    
                        
                            
                            
                            
                            
                        
                        
                        
                            
                                
                                
                                
                                
                                
                                
                                
                                
                            
                            
                            
                                
                                
                                
                                
                                
                                
                                
                            
                        
                    
                    
                        
                    


                    
                    
                        
                        
                        
                    
                
            

            
        

        
    

2、SlideDetailsLayout实现setOnSlideDetailsListener监听事件,滑动操作的处理主要在这里执行。

@Override
    public void onStatusChanged(SlideDetailsLayout.Status status) {
        //当前为图文详情页
        if (status == SlideDetailsLayout.Status.OPEN) {
            fabUp.show();
            activity.operaTitleBar(true, true, false);
        } else {
            //当前为商品详情页
            fabUp.hide();
            activity.operaTitleBar(false, false, true);
        }
    }

3、图文详情中的自定义WebView.

public class ItemWebView extends WebView {
    public float oldY;
    private int t;
    private float oldX;

    public ItemWebView(Context context) {
        super(context);
    }

    public ItemWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ItemWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    public boolean onTouchEvent(MotionEvent ev) {

        switch (ev.getAction()) {
            case MotionEvent.ACTION_MOVE:
                float Y = ev.getY();
                float Ys = Y - oldY;
                float X = ev.getX();

                if (Ys > 0 && t == 0) {
                    getParent().getParent().requestDisallowInterceptTouchEvent(false);
                }
                break;

            case MotionEvent.ACTION_DOWN:
                getParent().getParent().requestDisallowInterceptTouchEvent(true);
                oldY = ev.getY();
                oldX = ev.getX();
                break;

            case MotionEvent.ACTION_UP:
                getParent().getParent().requestDisallowInterceptTouchEvent(true);
                break;

            default:
                break;
        }
        return super.onTouchEvent(ev);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        this.t = t;
        super.onScrollChanged(l, t, oldl, oldt);
    }

详细参考:

Android仿京东商品详情页上拉查看图文详情

你可能感兴趣的:(Android仿京东商品详情页上拉查看图文详情)