[android ui]侧边栏(使用Support Library 4提供的扩展组件)

接触Android已经有一段时间了，自己积累的东西也算蛮多的。总结以往的经验，凡是关键性的问题，一般都是要查阅API来解决的。所以，笔者建议同学们认真阅读API和Guider，Android的开发API文档是最容易阅读的（至少笔者是这么认为的，也接触一些windows phone的开发基础）。

今天，笔者为大家介绍Android侧边栏的使用。我也接触了一些侧边栏的第三方牛人写的插件，确实也是不错的。笔者介绍的是在Android扩展的包中的组件DrawerLayout，是一个很好的侧边栏，支持手势打开。好了，下面简单介绍使用组件的方法。

包括的内容有：

1、手势打开侧边栏(手要从接近左边向右滑，这点不是很好用)

2、使用fragment的按钮来打开侧边栏

3、使用menu键来打开侧边栏。

首先，来看看布局文件：

acivity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/main_layout"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<!-- 页面内容

-->

<FrameLayout

android:id="@+id/main_content"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

</FrameLayout>

<!-- 侧边栏的选项 -->

<ListView

android:id="@+id/left_drawer"

android:layout_width="150dp"

android:background="@android:color/background_dark"

android:layout_height="fill_parent"

android:layout_gravity="start" />

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

再来看看Activiy中的内容：

public class MainActivity extends FragmentActivity {

public DrawerLayout drawerLayout;// 侧边栏布局

public ListView leftList;// 侧边栏内的选项

public ArrayAdapter<String> arrayAdapter;

private String[] items;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initViews();

}

// 初始化控件

private void initViews() {

drawerLayout = (DrawerLayout) findViewById(R.id.main_layout);

items = getResources().getStringArray(R.array.left_array);

leftList = (ListView) findViewById(R.id.left_drawer);

arrayAdapter = new ArrayAdapter<String>(this, R.layout.list_item, items);

leftList.setAdapter(arrayAdapter);

leftList.setOnItemClickListener(itemListener);

initFragments();

}

// 添加碎片

private void initFragments() {

FragmentManager manager = getSupportFragmentManager();

FragmentTransaction transaction = manager.beginTransaction();

DrawerFragment fragment = new DrawerFragment();

// 设置在fragment中按钮来控制侧边栏的打开

fragment.setDrawerLayout(drawerLayout, leftList);

transaction.add(R.id.main_content, fragment);

transaction.commit();

}

// 选项点击事件

OnItemClickListener itemListener = new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> arg0, View view, int position,

long arg3) {

// TODO Auto-generated method stub

// 设置Activity的标题，这里只是用来做一个测试，你可以在这里用来处理单击侧边栏的选项事件

setTitle(items[position]);

// 关闭侧边栏

drawerLayout.closeDrawer(leftList);

Log.i("onItemSelected",

"open?:" + drawerLayout.isDrawerOpen(leftList));

}

};

/*

* (non-Javadoc)

*

* @See android.support.v4.app.FragmentActivity#onKeyDown(int,

* android.view.KeyEvent)

*/

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

// TODO Auto-generated method stub

// 使用menu键打开或关闭侧边栏

if (keyCode == KeyEvent.KEYCODE_MENU) {

if (drawerLayout.isDrawerOpen(leftList)) {

drawerLayout.closeDrawer(leftList);

} else {

drawerLayout.openDrawer(leftList);

}

}

return super.onKeyDown(keyCode, event);

}

}

还有内容填充的片段代码：

public class DrawerFragment extends Fragment implements OnClickListener {

public DrawerLayout layout;

public View view;

public DrawerFragment() {

super();

// TODO Auto-generated constructor stub

}

public void setDrawerLayout(DrawerLayout layout, View view) {

this.layout = layout;

this.view = view;

}

/*

* (non-Javadoc)

*

* @see

* android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater

* , android.view.ViewGroup, android.os.Bundle)

*/

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// TODO Auto-generated method stub

View rootView = inflater.inflate(R.layout.fragment_layout, container,

false);

Button openBtn = (Button) rootView.findViewById(R.id.open);

openBtn.setOnClickListener(this);

return rootView;

}

/*

* (non-Javadoc)

*

* @see android.view.View.OnClickListener#onClick(android.view.View)

*/

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

if (v.getId() == R.id.open) {

//打开侧边栏

if (!layout.isDrawerOpen(view)) {

layout.openDrawer(view);

}

}

}

}

使用方法还是很简单的，在关键部分我都有注释。

具体的使用效果图如下：



最后，笔者把整个工程的源码贴上来。

欢迎大家一起交流技术，笔者一直信奉：“没有交流，技术是不会提升的”。