Android之SlidingPaneLayout侧滑效果

作者: 因为我的心 | 来源:发表于2020-08-04 18:23 被阅读0次

Android之SlidingPaneLayout侧滑效果
android百种动画侧滑库、步骤视图、TextView效果、社
DrawerLayout-侧滑菜单
Android高仿Chrome侧滑返回效果
侧滑效果
解决侧滑手势与TableViewCell滑动删除手势冲突
侧滑效果[第十五篇]：侧滑框架SmartSwipe之全局返回
drawerlayout的侧滑效果
需要侧滑抽屉效果？一行代码足以！
android 自定义view之侧滑效果

一、前言：

说到侧滑菜单，记得在很久很久以前，一说到侧滑菜单就会立刻想到SlidingMenu，在当时的印象里比较火的侧滑菜单就是SlidingMenu，最开始觉得那种效果还蛮新颖的，后来Google官方出了SlidingPaneLayout和DrawerLayout后，大部分的侧滑菜单效果也就基本被满足了。本博文主要讲到基于官方v4扩展包中的SlidingPaneLayout来扩展侧滑效果，我给SldingPaneLayout的扩展控件取了个好听的名字叫：SuperSlidingPaneLayout。

侧滑效果扩展，这里主要用到了平移、缩放、等效果组合来达到想要的效果。

效果图如下：

图片.png

二、使用：

1、依赖：

1、库依赖

allprojects {
    repositories {
        maven { url 'https://dl.bintray.com/jenly/maven' }
    }
}

2、项目依赖：

implementation 'com.king.view:superslidingpanelayout:1.1.0'

gitHub地址：https://github.com/lyyRunning/SuperSlidingDemo

2、使用：

SuperSlidingPaneLayout框架的属性：
1、DEFAULT(0),默认
2、TRANSLATION(1),平移
3、SCALE_MENU(2),缩放菜单
4、SCALE_PANEL(3),缩放面单
5、SCALE_BOTH(4),缩放两个
6、TRANSLATION_SCALE(5);平移加缩放

SuperSlidingPaneLayout  sspl = findViewById(R.id.sspl);
//设置模式
sspl.setMode(SuperSlidingPaneLayout.Mode.TRANSLATION_SCALE);
//开启侧滑
 sspl.openPane();
//设置颜色
sspl.setSliderFadeColor(getResources().getColor(R.color.black_transparent));
sspl.setCoveredFadeColor(getResources().getColor(R.color.transparent));

颜色值

<color name="black_transparent">#7f000000</color><!--黑色半透明色 -->
<color name="white_transparent">#7fffffff</color><!--白色半透明色 -->

3、代码：

1、MainActivity.class

public class MainActivity extends Activity {
    private SuperSlidingPaneLayout sspl;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        sspl = findViewById(R.id.sspl);
        Button tvMode = findViewById(R.id.tvMode);
        ImageView ivLeft = findViewById(R.id.ivLeft);
        //设置颜色
        sspl.setSliderFadeColor(getResources().getColor(R.color.black_transparent));
        sspl.setCoveredFadeColor(getResources().getColor(R.color.transparent));

        //设置侧边距离
        View menu = findViewById(R.id.menu);
        ViewGroup.LayoutParams params = menu.getLayoutParams();
        //自己设置侧边大小
        params.width = (int) (getResources().getDisplayMetrics().widthPixels * 0.65f);
        menu.setLayoutParams(params);

        /**
         * 选择模式
         */
        tvMode.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
//             DEFAULT(0),默认
//             TRANSLATION(1),平移
//             SCALE_MENU(2),缩放菜单
//             SCALE_PANEL(3),缩放面单
//             SCALE_BOTH(4),缩放两个
//             TRANSLATION_SCALE(5);平移加缩放
                //模式
                SuperSlidingPaneLayout.Mode mode = sspl.getMode();
                Log.d("LUO","模式====="+mode.name());
                //设置模式
                sspl.setMode(SuperSlidingPaneLayout.Mode.TRANSLATION_SCALE);
            }
        });
        

        sspl.setPanelSlideListener(new SuperSlidingPaneLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                //侧滑时操作
            }

            @Override
            public void onPanelOpened(View panel) {
                //打开时操作
            }

            @Override
            public void onPanelClosed(View panel) {
                //关闭时操作
            }
        });

    }

    public void OnClick(View v){
        switch (v.getId()){
            case R.id.ivLeft:
                sspl.openPane();
                break;
            case R.id.ivRight:
                Toast.makeText(MainActivity.this,"点击logo",Toast.LENGTH_SHORT).show();
                break;
            case R.id.ivLogo:
                Toast.makeText(MainActivity.this,"点击logo",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tvUser:
                Toast.makeText(MainActivity.this,"点击logo",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tvCollect:
                Toast.makeText(MainActivity.this,"点击logo",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tvSystem:
                Toast.makeText(MainActivity.this,"点击logo",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tvProject:
                Toast.makeText(MainActivity.this,"点击logo",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tvNavi:
                Toast.makeText(MainActivity.this,"点击logo",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tvAbout:
                Toast.makeText(MainActivity.this,"点击logo",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tvLogout:
                Toast.makeText(MainActivity.this,"点击logo",Toast.LENGTH_SHORT).show();
                break;
            case R.id.tvVersion:
                Toast.makeText(MainActivity.this,"点击版本",Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
    }
}

2、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<com.king.view.superslidingpanelayout.SuperSlidingPaneLayout
    android:id="@+id/sspl"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/home_bg"
    app:mode="default_"
    app:compat_sliding="false">
    <include layout="@layout/menu_layout"/>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <include layout="@layout/top_title_bar"/>
        <Button
            android:id="@+id/tvMode"
            android:layout_marginTop="200dp"
            android:layout_width="200dp"
            android:layout_marginLeft="100dp"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:gravity="center"
            android:text="选择切换的类型"
            android:textSize="24sp"/>
    </LinearLayout>
</com.king.view.superslidingpanelayout.SuperSlidingPaneLayout>

3、menu_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:scrollbars="none">
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="190dp"
                    android:gravity="center"
                    android:layout_marginBottom="@dimen/size_20dp"
                    android:background="@color/colorPrimary">
                    <ImageView
                        android:id="@+id/ivLogo"
                        android:layout_width="60dp"
                        android:layout_height="60dp"
                        android:src="@mipmap/ic_launcher_round"
                        android:layout_marginBottom="@dimen/size_4dp"
                        style="@style/OnClick"/>
                    <TextView
                        android:id="@+id/tvUser"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/white"
                        android:singleLine="true"
                        android:paddingLeft="@dimen/size_16dp"
                        android:paddingRight="@dimen/size_16dp"
                        android:paddingBottom="@dimen/size_16dp"
                        android:textSize="@dimen/size_16sp"
                        android:text="@string/click_login"
                        style="@style/OnClick"/>
                </LinearLayout>

                <TextView
                    android:id="@+id/tvCollect"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="@dimen/size_16dp"
                    android:drawablePadding="@dimen/size_4dp"
                    android:drawableLeft="@drawable/ic_menu_collect"
                    android:background="?android:attr/selectableItemBackground"
                    android:textColor="@color/text_3"
                    android:textSize="@dimen/size_16sp"
                    android:text="@string/menu_collect"
                    style="@style/OnClick"/>
                <TextView
                    android:id="@+id/tvSystem"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="@dimen/size_16dp"
                    android:drawablePadding="@dimen/size_4dp"
                    android:drawableLeft="@drawable/ic_menu_system"
                    android:background="?android:attr/selectableItemBackground"
                    android:textColor="@color/text_3"
                    android:textSize="@dimen/size_16sp"
                    android:text="@string/menu_system"
                    style="@style/OnClick"/>
                <TextView
                    android:id="@+id/tvProject"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="@dimen/size_16dp"
                    android:drawablePadding="@dimen/size_4dp"
                    android:drawableLeft="@drawable/ic_menu_project"
                    android:background="?android:attr/selectableItemBackground"
                    android:textColor="@color/text_3"
                    android:textSize="@dimen/size_16sp"
                    android:text="@string/menu_project"
                    style="@style/OnClick"/>
                <TextView
                    android:id="@+id/tvNavi"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="@dimen/size_16dp"
                    android:drawablePadding="@dimen/size_4dp"
                    android:drawableLeft="@drawable/ic_menu_navi"
                    android:background="?android:attr/selectableItemBackground"
                    android:textColor="@color/text_3"
                    android:textSize="@dimen/size_16sp"
                    android:text="@string/menu_navi"
                    style="@style/OnClick"/>
                <TextView
                    android:id="@+id/tvAbout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="@dimen/size_16dp"
                    android:drawablePadding="@dimen/size_4dp"
                    android:drawableLeft="@drawable/ic_menu_about"
                    android:background="?android:attr/selectableItemBackground"
                    android:textColor="@color/text_3"
                    android:textSize="@dimen/size_16sp"
                    android:text="@string/menu_about"
                    style="@style/OnClick"/>
                <TextView
                    android:id="@+id/tvLogout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="@dimen/size_16dp"
                    android:drawablePadding="@dimen/size_4dp"
                    android:drawableLeft="@drawable/ic_menu_logout"
                    android:background="?android:attr/selectableItemBackground"
                    android:textColor="@color/text_3"
                    android:textSize="@dimen/size_16sp"
                    android:text="@string/menu_logout"
                    android:visibility="invisible"
                    style="@style/OnClick"/>
            </LinearLayout>
        </ScrollView>

        <TextView
            android:id="@+id/tvVersion"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="50dp"
            android:paddingLeft="@dimen/size_16dp"
            android:paddingRight="@dimen/size_16dp"
            android:paddingBottom="@dimen/size_16dp"
            android:paddingTop="@dimen/size_2dp"
            android:textSize="@dimen/size_16sp"
            android:textColor="@color/text_9"
            android:layout_gravity="center"
            android:gravity="center"
            style="@style/OnClick"/>
    </LinearLayout>
</RelativeLayout>

参考：https://github.com/jenly1314/SuperSlidingPaneLayout

Android之SlidingPaneLayout侧滑效果
一、前言：说到侧滑菜单，记得在很久很久以前，一说到侧滑菜单就会立刻想到SlidingMenu，在当时的印象里比较...
android百种动画侧滑库、步骤视图、TextView效果、社
Android精选源码 Android百种动画效果定制的侧滑菜单库 android实现仿qq身边的人 androi...
DrawerLayout-侧滑菜单
DrawerLayout是在android.support.v4包下，实现了侧滑菜单效果的控件。是第三方侧滑控件如...
Android高仿Chrome侧滑返回效果
在iOS上的chrome中有侧滑返回上一个页面的功能，感觉蛮好用的，刚好Android没有自带的侧滑返回效果，如果...
侧滑效果
使用如下的代码系统会把有 navbar 和无navbar 的 transition 动画衔接起来。核心代码：如...
解决侧滑手势与TableViewCell滑动删除手势冲突
情景:侧滑抽屉效果中,TableView的cell左滑删除手势与一个全屏的侧滑手势(响应侧滑效果的手势)冲突
侧滑效果[第十五篇]：侧滑框架SmartSwipe之全局返回
前面，我为大家展示了5种侧滑返回效果：仿手机QQ侧滑返回、仿微信侧滑返回效果、仿MIUI系统贝塞尔曲线侧滑返回、开...
drawerlayout的侧滑效果
drawerlayout的侧滑效果 google官方提供了drawerlayout实现侧滑抽屉。但是默认滑动效果只...
需要侧滑抽屉效果？一行代码足以！
需要侧滑抽屉效果？一行代码足以！需要侧滑抽屉效果？一行代码足以！
android 自定义view之侧滑效果
效果图：看网上的都是两个view拼接，默认右侧的不显示，水平移动的时候把右侧的view显示出来。但是看最新版QQ...