现在的APP越来越注重用户体验,百度视频客户端有一个特效还是挺吸引人的,在主界面手指向右滑动,就可以将菜单展示出来,而主界面会被隐藏大部分,但是仍有左侧的一小部分同菜单一起展示。类似的还有天天动听,人人的客户端。
这个侧滑菜单的实现网上也有很多方法,比如最常用的是开源的 SlidingMenu .还有一种实现方式是在一个Activity的布局中分两部分,一个是菜单(menu)的布局,一个是内容(content)的布局。两个布局横向排列,菜单布局在左,内容布局在右。初始化的时候将菜单布局向左偏移,以至于能够完全隐藏,这样内容布局就会完全显示在Activity中。然后通过监听手指滑动事件,来改变菜单布局的左偏移距离,从而控制菜单布局的显示和隐藏。
但是这两种方法都相对比较繁琐,今天给大家介绍一种更为简单的方法。就是直接采用DrawLayout。有关DrawLayout更详细的介绍可以参考API文档: http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html 。
首先New一个Android工程,依次实现几个布局。先来看两个子布局。
然后创建两个类继承Fragment,把两个子布局塞进去
再来看看主类:
这个侧滑菜单的实现网上也有很多方法,比如最常用的是开源的 SlidingMenu .还有一种实现方式是在一个Activity的布局中分两部分,一个是菜单(menu)的布局,一个是内容(content)的布局。两个布局横向排列,菜单布局在左,内容布局在右。初始化的时候将菜单布局向左偏移,以至于能够完全隐藏,这样内容布局就会完全显示在Activity中。然后通过监听手指滑动事件,来改变菜单布局的左偏移距离,从而控制菜单布局的显示和隐藏。
但是这两种方法都相对比较繁琐,今天给大家介绍一种更为简单的方法。就是直接采用DrawLayout。有关DrawLayout更详细的介绍可以参考API文档: http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
首先New一个Android工程,依次实现几个布局。先来看两个子布局。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="#00000000"
android:divider="@android:color/transparent"/>
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="每日一文"
android:textAppearance="?android:attr/textAppearanceLarge">
<pre name="code" class="java"></LinearLayout>
主界面布局,注释掉的是右边的侧滑,现在实现的是左边的侧滑。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
android:id="@+id/fragment_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
android:id="@+id/menu_layout_left"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#FFFFFF" >
android:id="@+id/menu_listView_l"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
然后创建两个类继承Fragment,把两个子布局塞进去
public class FirstFragment extends Fragment {
@Override
public ViewonCreateView(LayoutInflater inflater, ViewGroup container,
BundlesavedInstanceState) {
// TODOAuto-generated method stub
returninflater.inflate(R.layout.first, null);
}
}
再来看看主类:
public class MainActivity extends FragmentActivity {
publicstatic final String[] TITLES = {"first", "second"};
privateDrawerLayout mDrawerLayout;
privateRelativeLayout mLeftLayout;
privateListView mLeftListView;
@Override
protectedvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById();
mLeftListView.setAdapter(new ArrayAdapter(this,
android.R.layout.simple_expandable_list_item_1, TITLES));
//监听菜单
mLeftListView.setOnItemClickListener(newDrawerItemClickListenerLeft());
}
private voidfindViewById() {
mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
mLeftLayout= (RelativeLayout) findViewById(R.id.menu_layout_left);
mLeftListView = (ListView)findViewById(R.id.menu_listView_l);
}
public class DrawerItemClickListenerRight implements OnItemClickListener{
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
// TODO Auto-generated method stub
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
Fragment fragment = null;
//according to the click row number decide to start which fragment;
switch (position) {
case 0:
fragment = new FirstFragment();
break;
case 1:
fragment = new SecondFragment();
break;
default:
break;
}
ft.replace(R.id.fragment_layout, fragment);
ft.commit();
mDrawerLayout.closeDrawer(mRightLayout);
}
}
}