一个侧屏滑动操作的实例（仿遇见）之二：布局XML

一个侧屏滑动操作的实例（仿遇见）之二：布局XML

分类： android UI android view 2012-08-12 17:17  153人阅读  评论(0)  收藏  举报

我们看一下遇见这款软件的截图：

左侧是一个功能菜单，右侧红色小箭头点击可以控制左侧view隐藏或显示，看起来非常酷，现在我们来模拟这个功能

先看看最后做出来的demo截图：

点击“左边”按钮可以控制左侧功能菜单的显示和隐藏，同样还有一个“右边”按钮，控制右侧功能菜单的显示和隐藏

demo是网上下载的源码，这里主要对其进行一个详细的解析，首先看布局xml：

main.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:background="#ffffff">


    <!-- 右边菜单 -->
    <RelativeLayout 
        android:id="@+id/rightmenu"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical"
   android:background="@drawable/right_menu"
   android:visibility="invisible">
    <TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:text="rightMenu"
    />
</RelativeLayout>
    
    <!-- 左边菜单 -->
    <LinearLayout 
        android:id="@+id/leftmenu"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical"
   android:background="@drawable/fb_menu"
   android:visibility="invisible">
    <TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="leftmenu"
    />
</LinearLayout>


    <grimbo.android.demo.slidingmenu.MyHorizontalScrollView 
        android:id="@+id/myScrollView"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:background="#00ffffff" 
        android:fadingEdge="none" 
        android:scrollbars="none">


        <!--  -->
        <LinearLayout 
            android:id="@+id/top"
            android:layout_height="fill_parent" 
            android:layout_width="fill_parent"
            android:orientation="horizontal" 
            android:background="#00ffffff" 
           >
        </LinearLayout>


    </grimbo.android.demo.slidingmenu.MyHorizontalScrollView>


</FrameLayout>

由于FrameLayout布局是从左上角开始重叠的，所以顶层FrameLayout中的视图是重叠在一起的，这样可以控制哪些视图可见，哪些视图不可见，比如点击“左边”时显示leftmenu，隐藏rightmenu

leftmenu和rightmenu一开始是隐藏的，隐藏的视图虽然不可见，但是获取它的大小时，是和显示的时候是一样的大小。

grimbo.android.demo.slidingmenu.MyHorizontalScrollView是一个自定义的viewGroup，继承自HorizontalScrollView，就是通过这个view来实现侧滑的，这里不直接继承自ViewGroup，是因为要用到HorizontalScrollView的两个方法：

smoothScrollTo

smoothScrollBy

这两个方法区别于ScrollTo和ScrollBy就是它们是平滑地移动，不是一下子突然移动到指定位置，这样看起来更舒服

MyHorizontalScrollView里初始只放了一个LinearLayout 布局，后面再代码里会放入多个view，由于这个LinearLayout 是横向排列的，这样就可以水平移动里面的view，以达到侧滑效果