【UI设计】DrawerLayout使用

来源：互联网发布：淘宝网店商品上架编辑：程序博客网时间：2024/05/21 10:34

1、简介：

侧滑两种效果：1.盖在整个页面上面；2.在Toolbar下面。在MD提出来以后，谷歌就收录并改变了很多开源项目，放到API及support包里面。DrawerLayout 抽屉容器    来自support-v4包里面的。（android.support.v4.widget）    相当于一个自定义容器 extends ViewGroup ,可以看出是一个有侧滑效果的帧布局    两个部分：1）内容布局；2）侧滑出来的菜单布局

2、使用代码：

public class MainActivity extends AppCompatActivity{    private Toolbar toolbar;    private DrawerLayout drawerlayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main3);        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(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) {                // 关闭            }        });    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.        int id = item.getItemId();        if (id == R.id.action_settings) {            return true;        }        return super.onOptionsItemSelected(item);    }}

XML：

<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>    <!-- 侧滑菜单左侧部分 -->    <!-- 通过layout_gravity=start|end设置左右布局 -->    <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>

相比官方封装的NavigationView来说，具有更好的拓展性。

阅读全文

0 0