侧滑

以前是有民间的效果:SliddingMenu

侧滑两种效果:
1.盖在整个页面上面;
2.在Toolbar下面。

MaterialDesign的侧滑
在MD提出来以后,谷歌就收录并改变了很多开源项目,放到API及support包里面。实现方式:

1.DrawerLayout 抽屉容器
来自support-v4包里面的(android.support.v4.widget),相当于一个自定义容器 extends ViewGroup ,可以看出是一个有侧滑效果的帧布局,包括两个部分:
(1)内容布局;
(2)侧滑出来的菜单布局
侧滑部分设置:android:layout_gravity=”start|end”(start:从左边滑出、end表示右边)

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 内容部分的布局 -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ff0"
            android:text="我是内容部分" />
    </LinearLayout>
    <!-- 侧滑菜单左侧部分 -->

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="fill_parent"
        android:layout_gravity="start"
        android:background="#0f0"
        android:orientation="vertical"
        android:paddingTop="50dp" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff0"
            android:text="item1" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff0"
            android:text="item2" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff0"
            android:text="item3" />
    </LinearLayout>
    <!-- 侧滑菜单右侧部分 -->

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="fill_parent"
        android:layout_gravity="end"
        android:background="#0f0"
        android:orientation="vertical"
        android:paddingTop="50dp" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff0"
            android:text="item1" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff0"
            android:text="item2" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff0"
            android:text="item3" />
    </LinearLayout>

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

Activity:

public class SildingMenuActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private DrawerLayout drawerlayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_slidingmenu);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        // 将actionBar替换成toolbar
        setSupportActionBar(toolbar);

        drawerlayout = (DrawerLayout) findViewById(R.id.drawerlayout);

        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this,
                drawerlayout, toolbar, R.string.drawer_open,
                R.string.drawer_close);
        // 同步状态
        drawerToggle.syncState();
        // 给侧滑控件设置监听
        // drawerlayout.setDrawerListener(drawerToggle);

        drawerlayout.setDrawerListener(new DrawerListener() {

            @Override
            public void onDrawerStateChanged(int newState) {
                // 状态发生改变

            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                // 滑动的过程当中不断地回调 slideOffset:0~1
                View content = drawerlayout.getChildAt(0);
                View menu = drawerView;
                float scale = 1 - slideOffset;// 1~0
                float leftScale = (float) (1 - 0.3 * scale);
                float rightScale = (float) (0.7f + 0.3 * scale);// 0.7~1
                menu.setScaleX(leftScale);// 1~0.7
                menu.setScaleY(leftScale);// 1~0.7

                content.setScaleX(rightScale);
                content.setScaleY(rightScale);
                content.setTranslationX(menu.getMeasuredWidth() * (1 - scale));// 0~width

            }

            @Override
            public void onDrawerOpened(View drawerView) {
                // 打开
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                // 关闭

            }
        });
    }
}

2.NavigationView
是谷歌在侧滑的MaterialDesign的一种规范,所以提出了一个新的控件,用来规范侧滑的基本样式。
DrawerLayout+ NavigationView结合使用

注意:
使用NavigationView,需要依赖项目:Design项目。
同时还需要依赖recyclerView项目和CardView项目!!!!

(1)布局:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res/com.example.lsn8_materialdesign_slidingmenu_navigationview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.lsn8_materialdesign_slidingmenu_navigationview.MainActivity" >

    <!-- 内容部分 -->

    <FrameLayout
        android:id="@+id/fl"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
    <!-- 菜单部分 -->

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="start"
        android:background="@android:color/darker_gray"
        app:headerLayout="@layout/navigation_headerlayout"
        app:menu="@menu/navigation_menu" />

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

(2)activity:

public class NavigationViewActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation);
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值