| android 右滑缩小页面（带阴影背景）侧边栏逐渐变大（带demo） | 您所在的位置：网站首页 › 侧边栏菜单mdpda安卓 › android 右滑缩小页面（带阴影背景）侧边栏逐渐变大（带demo） |
android 右滑缩小页面（带阴影背景）侧边栏逐渐变大（带demo）
|
android 右滑缩小页面（带阴影背景）侧边栏逐渐变大（带demo）
前言最终效果实现过程一、自定义控件二、写侧边栏的布局三、写主页的布局最后、重头戏
GitHub
前言
在一次项目开发中，遇到UI给的设计图是左侧滑，滑出菜单，我一看还挺简单的，网上挺多这种控件
PageEnabledSlidingPaneLayout 由于在侧划的主页经常还需要放置其他一些需要滚动的控件或者翻页的viewpage，所以需要这个侧划布局还可以避免划动冲突。 import android.content.Context; import android.support.v4.view.MotionEventCompat; import android.support.v4.widget.SlidingPaneLayout; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.ViewConfiguration; /** * 页面划动Layout * 继承SlidingPaneLayout * 能够兼容别的控件的划动事件 * 避免冲突 * @author dlong * created at 2019/3/12 11:29 AM */ public class PageEnabledSlidingPaneLayout extends SlidingPaneLayout { private float mInitialMotionX; private float mInitialMotionY; /** 最小触发事件的划动距离 */ private float mEdgeSlop;//手滑动的距离 public PageEnabledSlidingPaneLayout(Context context) { this(context, null); } public PageEnabledSlidingPaneLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); } public PageEnabledSlidingPaneLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); //-------- ViewConfiguration 滑动参数设置类 --------// ViewConfiguration config = ViewConfiguration.get(context); //-------- 它获得的是触发移动事件的最短距离，如果小于这个距离就不触发移动控件 --------// mEdgeSlop = config.getScaledEdgeSlop(); } /** * 拦截手势事件 * 避免划动冲突 * @param ev * @return */ @Override public boolean onInterceptTouchEvent(MotionEvent ev) { switch (MotionEventCompat.getActionMasked(ev)) { case MotionEvent.ACTION_DOWN: { // 屏幕检测到第一个触点按下 mInitialMotionX = ev.getX(); mInitialMotionY = ev.getY(); break; } case MotionEvent.ACTION_MOVE: { // 触点在屏幕上移动 final float x = ev.getX(); final float y = ev.getY(); // The user should always be able to "close" the pane, so we only check // for child scrollability if the pane is currently closed. // 避免与其他划动控件冲突 if (mInitialMotionX > mEdgeSlop && !isOpen() && canScroll(this, false, Math.round(x - mInitialMotionX), Math.round(x), Math.round(y))) { // How do we set super.mIsUnableToDrag = true? // send the parent a cancel event MotionEvent cancelEvent = MotionEvent.obtain(ev); cancelEvent.setAction(MotionEvent.ACTION_CANCEL); return super.onInterceptTouchEvent(cancelEvent); } } } return super.onInterceptTouchEvent(ev); } } 二、写侧边栏的布局
基本的信息都没有引用文件，应该直接复制就能用。除了一些图标需要自行替换一下； 三、写主页的布局
在MainActivity使用PageEnabledSlidingPaneLayout，实现侧划菜单栏的效果 public class MainActivity extends AppCompatActivity { /** 侧划控件 */ private PageEnabledSlidingPaneLayout slidingPaneLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); slidingPaneLayout = (PageEnabledSlidingPaneLayout) findViewById(R.id.SlidingPaneLayout); initSlidingPaneLayout(); } /** * 初始化左划侧边菜单栏效果 */ private void initSlidingPaneLayout(){ // 设置侧划后首页上透明，不带颜色，不会变灰色 slidingPaneLayout.setSliderFadeColor(Color.TRANSPARENT); // 拿到左侧菜单栏view final View leftView = slidingPaneLayout.getChildAt(0); slidingPaneLayout.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() { @Override public void onPanelSlide(@NonNull View panel, float slideOffset) { // 划动过程中 // 左侧边栏的变化 leftView.setPivotX(-leftView.getWidth() / 5.0f); leftView.setPivotY(leftView.getHeight() / 2.0f); leftView.setScaleX(0.8f + 0.2f * slideOffset);//0.8~1 leftView.setScaleY(0.8f + 0.2f * slideOffset);//0.8~1 leftView.setAlpha(0.8f + 0.2f * slideOffset);//0.8~1 // 首页的变化 panel.findViewById(R.id.ll_main).setScaleX(1f - 0.2f * slideOffset); panel.findViewById(R.id.ll_main).setScaleY(1f - 0.2f * slideOffset); // 背景阴影图片的变化 panel.findViewById(R.id.img_shadow).setScaleX(1f - 0.1f * slideOffset); panel.findViewById(R.id.img_shadow).setScaleY(1f - 0.13f * slideOffset); panel.findViewById(R.id.img_shadow).setAlpha(1f - 0.3f * slideOffset); } @Override public void onPanelOpened(@NonNull View view) { } @Override public void onPanelClosed(@NonNull View panel) { } }); } } GitHub还有test项目的源码给大家参考下：github 希望得到更好的建议和意见。 |
但是，真的实现的时候发现网上的很多都不太适合，最类似的就是仿QQ6.0的。本来以为有现成的轮子，现在只好自己动手了。参考的控件是SuperSlidingPaneLayout 侧滑控件，首先表示感谢！
这里的话由于是个test工程，我就啥也没放，就用了个RelativeLayout当作tittle；当然在AndroidManifest.xml里配置需要有android:theme="@style/NoTitleTheme"【本文地址】
公司简介
联系我们