DrawerLayout带有侧滑功能的布局类(1)

DrawerLayout：

DrawerLayout顾名思义就是一个管理布局的。使用方式可以与其它的布局类类似。

DrawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局，就能有侧滑的效果。

直接将DrawerLayout作为根布局，然后其内部

第一个View为内容区域，

第二个View为左侧菜单，

第三个View为右侧侧滑菜单，

当前第三个是可选的。

使用的包如下：

importandroid.support.v4.widget.DrawerLayout;

使用这些包的时候有时有的会报错。这时候确保android.support.v4是不是最新的版本。

可以更新一下support包，文件存放在sdk/extres/support中。

然后可以通过eclipse>project right click>Android Tools>Add Support library…

或者可以直接把文件复制到Project中libs文件夹中。

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" android:background="#111"/> </android.support.v4.widget.DrawerLayout>

Drawer positioning and layout is controlled using the android:layout_gravityattribute on child views corresponding to which side of the view you want the drawer to emerge from: left or right.

(Or start/end on platform versions that support layout direction.)

也就是说

 android:layout_gravity="start" 相当于 左侧的MENU向右滑动即显示菜单，LEFT/START（RIGHT/END）

那么从布局文件中可知：

FrameLayout是内容区，

ListView是左侧菜单。

我们需做一个Fragment来装载内容：

public class PageFragment extends Fragment {
       public final static String ITEM_POSITION_NUMBER = "item_position_num";
       public PageFragment{} @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View convertView = inflater.inflate(R.layout.page_fragment_layout, null); TextView tv = (TextView) convertView.findViewById(R.id.textView);int num = getArguments.getInt(ITEM_POSITION_NUMBER);
 //从res/array中获取list数据 String dynastyList = getResources.getStringArray(R.array.list_item); tv.setText(dynastyList[num]); return convertView; } }

代码中可以看出当我们在左侧菜单中选择SelectItem时会把对应的值显示到内容区。

代码中的page_fragment_layout.xml仅是FrameLayout内加一个TextView所以就不贴代码了。

接下来我们需要把listView进行填充数据。

private ListView menuList;
private String mMenuTitles;
private String historyTitles;
private String musicTitles;
private String movieTitles;
private String listTitles;
　　　　　// 历史栏
        historyTitles = getResources.getStringArray(R.array.history);
        // 音乐栏
        musicTitles = getResources.getStringArray(R.array.music);
        // 电影栏
        movieTitles = getResources.getStringArray(R.array.movie);
        // 标题数组
        mMenuTitles = getResources.getStringArray(R.array.title);
        // 每一項的標題
        listTitles = getResources.getStringArray(R.array.list_item);

        drawLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        menuList = (ListView) findViewById(R.id.left_menu);

        // 设置菜单阴影效果
        // drawLayout.setDrawerShadow(R.drawable.drawer_shadow,
        // GravityCompat.START);
        List<Item> list = new ArrayList<Item>;
        // 菜单加入历史标题和历史项
        HeaderItem historyHeader = new HeaderItem(mMenuTitles[0]);
        list.add(historyHeader);
        for (int i = 0; i < historyTitles.length; i++) {
 EventItem historyitem = new EventItem(historyTitles[i]);
 list.add(historyitem);
        }

        // 菜单加入音乐标题和音乐项
        HeaderItem musicHeader = new HeaderItem(mMenuTitles[1]);
        list.add(musicHeader);
        for (int i = 0; i < musicTitles.length; i++) {
 EventItem musicItem = new EventItem(musicTitles[i]);
 list.add(musicItem);
        }

        // 菜单加入电影标题和电影项
        HeaderItem movieHeader = new HeaderItem(mMenuTitles[2]);
        list.add(movieHeader);
        for (int i = 0; i < movieTitles.length; i++) {
 EventItem movieItem = new EventItem(movieTitles[i]);
 list.add(movieItem);
        }

        MyListAdapter adapter = new MyListAdapter(this, list);
        menuList.setAdapter(adapter);

这个数据填充有点麻烦。自定义ListAdapter然后进行适配。

数据在res/values/arrays.xml中

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="history">
        <item >三国</item>
        <item >楚汉</item>
        <item >春秋</item>
        <item >战国</item>
    </string-array>
     <string-array name="music">
        <item >爵士</item>
        <item >古典</item>
        <item >现代</item>
        <item >民谣</item>
    </string-array>
     <string-array name="movie">
        <item >悬疑</item>
        <item >爱情</item>
        <item >历史</item>
        <item >恐怖</item>
    </string-array>
    <string-array name="title">
        <item >历史</item>
        <item >音樂</item>
        <item >电影</item>
    </string-array>
    <string-array name="list_item">
        <item >歷史</item>
        <item >三国</item>
        <item >楚汉</item>
        <item >春秋</item>
        <item >战国</item>
        <item >音樂</item>
        <item >爵士</item>
        <item >古典</item>
        <item >现代</item>
        <item >民谣</item>
        <item >電影</item>
        <item >悬疑</item>
        <item >爱情</item>
        <item >历史</item>
        <item >恐怖</item>
    </string-array>
</resources>

然后就是listView的监听：

　　private void initListener {
        // 菜单单击事件监听器
        menuList.setOnItemClickListener(new DrawerItemClickListener);
    }

    /* The click listner for ListView in the navigation drawer */
    private class DrawerItemClickListener implements
 ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position,
 long id) {
 Log.i("Light", "position:" + position);
 selectItem(position);
        }
    }

    private void selectItem(int position) {
        // update the main content by replacing fragments
        PageFragment fragment = new PageFragment;
        // 将当前选择的项传递到Fragment
        Bundle args = new Bundle;
        args.putInt(PageFragment.ITEM_POSITION_NUMBER, position);
        fragment.setArguments(args);

        FragmentTransaction ft = MainActivity.this.getSupportFragmentManager
 .beginTransaction;
        ft.replace(R.id.content_frame, fragment).commit;

        drawLayout.closeDrawer(menuList);
        // update selected item and title, then close the drawer
        menuList.setItemChecked(position, true);
        // 注意这里改变的是ActionBar的标题
        getActionBar.setTitle(listTitles[position]);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        toggle.syncState;
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // Pass any configuration change to the drawer toggls
        toggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // The action bar home/up action should open or close the drawer.
        // ActionBarDrawerToggle will take care of this.
        if (toggle.onOptionsItemSelected(item)) {
 return true;
        }
        return super.onOptionsItemSelected(item);
    }

我们关心的是当某一个Item被点击时会发生什么即代码：

private void selectItem(int position) {
        // update the main content by replacing fragments
        PageFragment fragment = new PageFragment;
        // 将当前选择的项传递到Fragment
        Bundle args = new Bundle;
        args.putInt(PageFragment.ITEM_POSITION_NUMBER, position);
        fragment.setArguments(args);

        FragmentTransaction ft = MainActivity.this.getSupportFragmentManager
 .beginTransaction;
        ft.replace(R.id.content_frame, fragment).commit;

        drawLayout.closeDrawer(menuList);
        // update selected item and title, then close the drawer
        menuList.setItemChecked(position, true);
        // 注意这里改变的是ActionBar的标题
        getActionBar.setTitle(listTitles[position]);
    }

从代码中可以看出

1. 首先我们先通过new PageFragment;获取内容区。

2. 通过Bundle把数据打包起来然后注入fragment.setArguments(args);中这样fragment就能获取到此数据。

在fragment类中通过getArguments.getInt(ITEM_POSITION_NUMBER);可以获取传递的值。

3. 然后通过ft.replace(R.id.content_frame, fragment).commit;把内容替换成之前定义的PageFragment

4. 关闭菜单通过drawLayout.closeDrawer(menuList); 整个代码中我们仅用DrawLayout这一个函数

5. 同时把ActionBar的标题改为selectedItem对应的值。

*这时有人会问我们怎么没有ListView与DrawerLayout进行绑定的操作。我们在之前也说过DrawerLayout中的第二个开始即是菜单View，内部已经绑定好了。

就这些内容可以实现左右侧滑动菜单效果了。

下一节我们讲一下import android.support.v4.app.ActionBarDrawerToggle

网站首页 > 基础教程正文

猜你喜欢

网站首页 > 基础教程 正文

DrawerLayout带有侧滑功能的布局类(1)

猜你喜欢

网站首页 > 基础教程正文