Android之SlidingPaneLayout侧滑效果
2020-08-04 本文已影响0人
因为我的心
一、前言：
说到侧滑菜单，记得在很久很久以前，一说到侧滑菜单就会立刻想到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>
