粘性控件,滑动停留StickLayout(导航栏滑动停留)

我们平时在使用APP的时候,经常可以见到一些导航栏滑到顶端就停留,而下面的控件可以接着滑动;今天,我就给大家介绍一个非常好用的滑动粘性控件StickLayout,它不仅可以让其任意一个直接子控件滑动停留在顶端,而且还可以设置滑动到指定直接子控件,并且配有滑动改变监听,可以轻松实现滑动时的联动操作;我们用该控件就可以轻松实现像支付宝“所有应用”界面效果,下面我们就一起学习一下吧。

首先,我们来看一下效果演示图:

StickLayout.gif

StickLayout1.gif

StickLayout2.gif

Note:图1为设置属性wkp_canScrollToEndViewTop=true,图2没有;图3为设置滑动改变监听。

接下来,我们讲解一下控件功能及其使用:

1.功能

滑动停留控件,可以让其任意一个直接子控件滑动时停留在顶部,只需指定一个属性而已,操作便捷。

2.Android Studio使用方法

dependencies{
      compile 'com.wkp:StickLayout:1.0.4'
      //Android Studio3.0+可用以下方式
      //implementation 'com.wkp:StickLayout:1.0.4'
}

Note:使用版本请以Github为准。

3.使用详解

  • 属性讲解
        <!--是否粘性停留(用于直接子控件)-->
        <attr name="wkp_stick" format="boolean"/>
        <!--是否开启滑动到最后一个控件的顶部,默认不开启(用于控件本身)-->
        <attr name="wkp_canScrollToEndViewTop" format="boolean"/>
  • 布局示例
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:clickable="true"
        android:onClick="addView"
        android:gravity="center"
        android:padding="5dp"
        android:text="添加条目"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

        <!--app:wkp_canScrollToEndViewTop="true"-->
    <com.wkp.sticklayout_lib.widget.StickLayout
        android:id="@+id/sl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:onClick="click"
            android:id="@+id/tv1"
            android:text="第1行"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <LinearLayout
            app:wkp_stick="true"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="40dp">

            <TextView
                android:onClick="scrollTo"
                android:background="@android:color/holo_blue_light"
                android:text="NUM2"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

            <TextView
                android:onClick="scrollTo3"
                android:background="@android:color/holo_green_light"
                android:text="NUM3"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

            <TextView
                android:onClick="scrollTo4"
                android:background="@android:color/holo_red_light"
                android:text="NUM4"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

            <TextView
                android:onClick="scrollTo7"
                android:background="@android:color/holo_orange_light"
                android:text="NUM7"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

        </LinearLayout>

        <TextView
            android:id="@+id/tv2"
            android:text="第2行"
            android:background="@android:color/holo_blue_light"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <TextView
            android:id="@+id/tv3"
            app:wkp_stick="true"
            android:text="第3行"
            android:background="@android:color/holo_green_light"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <TextView
            android:background="@android:color/holo_red_light"
            android:id="@+id/tv4"
            android:text="第4行"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <TextView
            android:id="@+id/tv5"
            android:text="第5行"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <TextView
            android:id="@+id/tv6"
            android:text="第6行"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <TextView
            android:background="@android:color/holo_orange_light"
            android:id="@+id/tv7"
            android:text="第7行"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

    </com.wkp.sticklayout_lib.widget.StickLayout>

</LinearLayout>
  • 代码示例
public class MainActivity extends AppCompatActivity {

    private StickLayout mSl;
    private TextView mTv2;
    private View mTv3;
    private View mTv7;
    private View mTv4;
    private int currentPosition = -1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSl = findViewById(R.id.sl);
        mTv2 = findViewById(R.id.tv2);
        mTv3 = findViewById(R.id.tv3);
        mTv4 = findViewById(R.id.tv4);
        mTv7 = findViewById(R.id.tv7);
//        mSl.setStickView(findViewById(R.id.tv2)); //设置粘性控件
//        mSl.setStickView(findViewById(R.id.tv3));
//        mSl.canScrollToEndViewTop(true);      //设置是否开启最后控件滑动到顶部
        //设置滑动改变监听(一滑动就会有回调)
        mSl.setOnScrollChangeListener(new StickLayout.OnScrollChangeListener() {
            @Override
            public void onScrollChange(StickLayout v, View currentView, int position, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                //直到当前控件改变在做事情
                if (currentPosition != position) {
                    Toast.makeText(v.getContext(), ((TextView) currentView).getText().toString(), Toast.LENGTH_SHORT).show();
                    currentPosition = position;
                }
            }
        });
    }

    public void addView(View view) {
        TextView textView = new TextView(view.getContext());
        textView.setGravity(Gravity.CENTER);
        textView.setPadding(10, 10, 10, 10);
        textView.setText("新条目");
        mSl.addView(textView, 0);
    }

    public void scrollTo2(View view) {
        //滑动到指定子控件
        mSl.scrollToView(mTv2);
    }

    public void scrollTo3(View view) {
        mSl.scrollToView(mTv3);
    }

    public void scrollTo4(View view) {
        mSl.scrollToView(mTv4);
    }

    public void scrollTo7(View view) {
        mSl.scrollToView(mTv7);
    }
}

结语

控件支持直接代码创建,还有更多API请观看StickLayout.java内的注释说明。

欢迎大家使用Github地址,感觉好用请给个Star鼓励一下,谢谢!

大家如果有更好的意见或建议以及好的灵感,请邮箱作者,谢谢!

QQ邮箱:
1535514884@qq.com

163邮箱:
15889686524@163.com

Gmail邮箱:
wkp15889686524@gmail.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • 在这个用数据说话的时代,能够打动人的往往是用数据说话的理性分析,无论是对于混迹职场的小年轻,还是需要数据进行分析和...
    狼之独步阅读 651评论 0 3
  • 腿毛又长出来了,明天哦不今天要穿裙子,所以现在边刮腿毛边记账。 有朋友问我最近是不是加班加疯了,我说没有啊,很虚伪...
    阿咧阿阅读 214评论 0 0