搞定 Android 布局2：SlidingPaneLayout

作者: louisgeek | 来源:发表于2017-06-28 00:24 被阅读189次

1 开始使用

compile 'com.android.support:support-v4:25.3.1'

android:layout_width="100dp" 展开状态

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout 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:id="@+id/id_spl"
    android:layout_height="match_parent"
    tools:context="com.classichu.slidingpanelayoutdemo.MainActivity">

    <TextView
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:text="left"
        android:background="@color/colorAccent"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="right"
        />
</android.support.v4.widget.SlidingPaneLayout>

android:layout_width="100dp" 展开状态

android:layout_width="match_parent" 展开状态
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout 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:id="@+id/id_spl"
    android:layout_height="match_parent"
    tools:context="com.classichu.slidingpanelayoutdemo.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="left"
        android:background="@color/colorAccent"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="right"
        />
</android.support.v4.widget.SlidingPaneLayout>

android:layout_width="match_parent" 展开状态

因为SlidingPaneLayout的属性mOverhangSize的值是32，就是左菜单离右边屏幕边缘的距离

2 常规侧滑

设置一个整体背景在SlidingPaneLayout 上
针对标题栏可以自行修改相关逻辑

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout 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:id="@+id/id_spl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#70c235"
    tools:context="com.classichu.slidingpanelayoutdemo.MainActivity">


    <LinearLayout
        android:id="@+id/id_ll"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:text="Hello World!">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="1111111" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="22222222" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="3333333333" />
    </LinearLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark">

        <TextView
            android:id="@+id/id_tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="click" />
    </FrameLayout>

</android.support.v4.widget.SlidingPaneLayout>

去掉SlidingPaneLayout 侧滑渐变色

  SlidingPaneLayout id_spl = (SlidingPaneLayout) findViewById(R.id.id_spl);
   id_spl.setSliderFadeColor(Color.TRANSPARENT);//设置面板的侧滑渐变色

1.png

3 类似QQ5.x侧滑

针对2区别就是新增一个PanelSlideListener 处理侧滑时候的各个view
针对标题栏可以自行修改相关逻辑

  SlidingPaneLayout id_spl = (SlidingPaneLayout) findViewById(R.id.id_spl);
        id_spl.setSliderFadeColor(Color.TRANSPARENT);//设置面板的侧滑渐变色
        final View leftView = id_spl.getChildAt(0);
        id_spl.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(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.setScaleX(1 - 0.2f * slideOffset);//1~0.8
                        panel.setScaleY(1 - 0.2f * slideOffset);//1~0.8
                        panel.setAlpha(1 - 0.2f * slideOffset);//1~0.8
               
            }

            @Override
            public void onPanelOpened(View panel) {

            }

            @Override
            public void onPanelClosed(View panel) {

            }
        });

2.png

4 类似QQ6.x侧滑

针对 3 区别就是修改监听处理view的逻辑
针对标题栏可以自行修改相关逻辑

           @Override
            public void onPanelSlide(View panel, float slideOffset) {
                     leftView.setTranslationX((slideOffset - 1) * leftView.getWidth());  //-w~0
                     panel.setAlpha(1 - 0.2f * slideOffset);//1~0.8
            }

3.png

5 侧滑结束Aty

代码动态生成SlidingPaneLayout
利用反射去掉边缘距离
设置Main2Aty背景透明主题AppThemeTransparent

 <style name="AppThemeTransparent" parent="AppTheme">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>

public class Main2Activity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        //创建SlidingPaneLayout
        SlidingPaneLayout mSlidingPaneLayout = new SlidingPaneLayout(this);
        try {
            //mOverhangSize属性，就是左菜单离右边屏幕边缘的距离
            Field mOverhangSize = SlidingPaneLayout.class.getDeclaredField("mOverhangSize");
            mOverhangSize.setAccessible(true);
            //设置左菜单离右边屏幕边缘的距离为0，设置全屏
            mOverhangSize.set(mSlidingPaneLayout, 0);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        mSlidingPaneLayout.setSliderFadeColor(Color.TRANSPARENT);//设置面板的侧滑渐变色
         mSlidingPaneLayout.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {

            }

            @Override
            public void onPanelOpened(View panel) {
                //菜单打开后，我们结束掉这个Activity
                finish();
                overridePendingTransition(0, 0);
            }

            @Override
            public void onPanelClosed(View panel) {

            }
        });
        //创建左侧视图
        View leftView = new View(this);
        //设置全屏
        leftView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
        //添加到SlidingPaneLayout中
        mSlidingPaneLayout.addView(leftView, 0);


        // 得到右侧的内容视图
        ViewGroup decorView = (ViewGroup) getWindow().getDecorView();//decorView 是一个Fragment
        ViewGroup childView = (ViewGroup) decorView.getChildAt(0);//decorView子view只有一个  是一个LinearLayout
        ViewGroup contentView = (ViewGroup) decorView.findViewById(android.R.id.content);//是一个Fragment 包裹xml布局
        View contentViewRootLayout = contentView.getChildAt(0);//是xml里面定义的根布局
        //先移除contentView
        decorView.removeView(childView);
        // 添加 mSlidingPaneLayout
        decorView.addView(mSlidingPaneLayout);


       // childView.setBackgroundColor(Color.TRANSPARENT);
        // 为 mSlidingPaneLayout 添加childView
        mSlidingPaneLayout.addView(childView, 1);


    }
}

网友评论

本文标题：搞定 Android 布局2：SlidingPaneLayout

本文链接：https://www.haomeiwen.com/subject/uhjjcxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！