Git Product home page Git Product logo

dragtodetail's Introduction

DragToDetail

一个用以实现拖拉查看更多内容的自定义控件(可以实现如电商应用详情页面,拖拉查看商品详情描述),继承自LinearLayout

特性

1.支持大于两个子页面
2.支持竖向拖拉,支持横向拖拉
3.支持弹性拖拉
4.支持常见的ListView、ScrollView、HorizontalScrollView、NestedScrollView、RecyclerView、ViewPager、WebView等控件的组合使用(详情看下面效果图)
5.支持页面进入监听、支持滚动监听(仅监听第一个页面,详细请看使用说明 4)、支持拖拽监听
6.支持跳转到指定页面
7.更多特性

部分功能效果图

1.效果图1

DragToDetail


2.效果图2

DragToDetail


3.效果图3

DragToDetail


4.效果图4

DragToDetail


更多效果请下载demo查看

使用说明

1.相关属性

        <declare-styleable name="DragToDetailLayout">
           <!-- 拖拽阻尼系数 -->
           <attr name="dragDamp" format="float"/>
           <!-- 上部或左部介绍页面布局-->
           <attr name="introLayout" format="reference"/>
           <!-- 下部或右部详情页面布局-->
           <attr name="detailLayout" format="reference"/>
           <!-- 回弹滚动持续时间 单位:毫秒 -->
           <attr name="reboundDuration" format="integer"/>
           <!-- 回弹临界比率,用于确定拖动多少距离跳转到下一页面 -->
           <attr name="reboundPercent" format="float"/>
       </declare-styleable>

(1.1).dragDamp:拖拽阻尼系数,表示拖拽布局的阻力大小(0.0f - 1.0f)之间,值越小阻力越小,越容易拖拽

(1.2).introLayout:以方法一(详情请看使用DragToDetail的两种方法)使用控件时候的第一页布局文件引用,它表示一个layout文件引用

(1.3).detailLayout:以方法一(详情请看使用DragToDetail的两种方法)使用控件时候的第二页布局文件引用,它表示一个layout文件引用

(1.4).reboundDuration:拖动放手后布局的回弹或者跳转到下一页的持续时间,单位毫秒

(1.5).reboundPercent:跳转到下一页所需要的拖动临界距离百分比,值越大说明需要拖动更多距离才能触发跳转下一页


2.两种使用方法

(2.1).通过introLayout、detailLayout属性来配置相关页面,这种方式只支持两个页面,优先级比使用自定义节点要低(意味着如果同时配置了这两个页面属性和自定义布局子节点,那么控件会忽略这两个布局属性),这两个布局属性只有都配置才有效,只配置其中一个,控件会忽略该属性

        <com.workdawn.dragtodetaillayout.DragToDetailLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical"
           app:detailLayout="@layout/detail_layout"
           app:introLayout="@layout/intro_layout" />           

(2.2).通过自定义子布局节点,跟使用普通的LinearLayout一样

        <com.workdawn.dragtodetaillayout.DragToDetailLayout
           android:id="@+id/dd_test"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical">
   
           <include layout="@layout/intro_layout" />
   
           <include layout="@layout/middle_layout" />
   
           <include layout="@layout/detail_layout" />
   
       </com.workdawn.dragtodetaillayout.DragToDetailLayout>

重要说明:

说明(1).因为该自定义控件继承自LinearLayout,所以控件的拖拽方向也同样跟随LinearLayout,也就是说如果你需要一个垂直的拖拉效果那么应该设置DragToDetail的 android:orientation="horizontal" 同时内部的子布局也要设置为垂直方向排列(详细使用方法可以下载demo查看)

说明(2).如果需要一个水平方向的拖拉效果那么同理需要设置布局的方向为 android:orientation="horizontal" ,同时内部的布局方向也为 android:orientation="horizontal" ,当前水平方向的拖拽支持HorizontalScrollView、RecyclerView(布局方向水平)、ViewPager等的组合,其他垂直方向特性的控件如:ScrollView、ListView不支持

说明(3).如果组合中有ViewPager + Fragment的话,要想成功的拖拽那么ViewPager中的Fragment适配器必须继承自DragFragmentPagerAdapter或者DragFragmentStatePagerAdapter(原因,主要是为了能获取到当前Fragment里面的控件),ScrollViewAndViewPager页面演示的就是这种情况

说明(4).如果想实现横向ViewPager滚动到最后一页进行拖拉,需要设置ViewPager的setOffscreenPageLimit()为需要显示的最大页数,详细可以查看ViewPagerActivity_H类


3.布局进入监听
如果想监听进入某个页面的事件可以通过设置OnEnterDetailLayoutListener监听器来实现,代码如下:

        dragToDetailLayout.setOnEnterDetailLayoutListener(new DragToDetailLayout.OnEnterDetailLayoutListener() {
            @Override
            public void onEnter(int id) {
                Toast.makeText(DragListenerActivity.this, "进入第 " + id + "页", Toast.LENGTH_LONG).show();
            }
        });

通过该功能可以实现类似于懒加载的需求,当进入页面得时候才初始化相关布局控件,加载网络数据等等(可以看demo中的ScrollViewAndViewPager页面)

4.页面滚动监听
控件默认提供了对第一个页面的滚动监听,如需要监听其余页面可以通过控件提供的getTargetView(int id)方法获取到你想要监听滑动的控件来自行添加

        dragToDetailLayout.setOnDragScrollListener(new OnDragToDetailLayout.DragScrollListener() {
            @Override
            public void onScrollChanged(View v, float distanceY, float distanceX) {
                tv_scr_distance.setText("垂直方向移动距离 = " + distanceY);
            }
        });

有关滑动监听重要说明(因为View的OnScrollChangeListener监听器是在Android的M版本后才加入的所以为了相关版本适配,那么)

(1).用CanListenerScrollView代替ScrollView

(2).用CanListenerHorizontalScrollView代替HorizontalScrollView

(3).用CanListenerNestScrollView代替NestScrollView

5.拖拽监听
通过设置 OnDragListener 可以监听布局拖拽过程,使用方法如下:

        dragToDetailLayout.setOnDragListener(new DragToDetailLayout.OnDragListener() {
            @Override
            public void onDrag(View dragView, float distanceY, float distanceX) {
                tv_scr_distance.setText("垂直方向拖拽距离 = " + distanceY);
            }
			
			@Override
            public void onDragComplete(View dragView) {
                btn_drag_tip.setText("松手查看更多详情");
            }
        });

6.跳转到特定页面,使用如下,更多详细请查看demo中的SelectItemActivity类

dragToDetailLayout.setSelectionItem(index);

dragtodetail's People

Contributors

workdawn avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

dragtodetail's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.