在拖动示例基础上增加视图切换

转自:http://marshal.easymorse.com/archives/3807

在为自定义切换视图第三版准备的拖动示例中已经能够拖动视图了。在此基础上又写了个说明视图切换的示例。也就是说，视图拖动时，会自动有相邻视图出现在屏幕上。看一下效果：

基本思路就是，在显示的时候，右侧视图已经在布局之中了，但是得不到显示，因为它的左侧空白边长度正好是屏幕宽度。当手拖动当前视图的时候，对右侧视图也动态改写它的空白边长度，这样就可以出现上面的效果了。

本文示例是技术上的示意性说明，还不能直接在生产中使用。

首先还是说布局：

<?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:id="@+id/Board" android:layout_gravity="top"> 
    <View android:background="@drawable/a1" android:layout_height="700px" 
        android:layout_width="480px" android:id="@+id/Pawn" 
        android:layout_gravity="center"> 
    </View> 
    <View android:background="@drawable/a2" android:layout_height="700px" 
        android:layout_width="480px" android:id="@+id/SideView" 
        android:layout_gravity="center"> 
    </View> 
</FrameLayout>

 

可见多了一个View。用来模拟相邻视图。

在Activity的onCreate方法中：

public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main);

    pawn = findViewById(R.id.Pawn); 
    pawn.setOnTouchListener(dragt); 
    
    board=(FrameLayout) findViewById(R.id.Board); 
    
    sideView=findViewById(R.id.SideView); 
    LayoutParams params=(LayoutParams) sideView.getLayoutParams(); 
    params.leftMargin=480; 
    sideView.setLayoutParams(params); 
    
}

 

设置左空白边长度为屏幕宽度。

在scroll手势事件处理方法增加：

@Override 
public boolean onScroll(MotionEvent e1, MotionEvent e2,
        float distanceX, float distanceY) { 
    Log.d("drag", "scroll:" + distanceX); 
    FrameLayout.LayoutParams par = (LayoutParams) pawn 
            .getLayoutParams(); 
    par.leftMargin = (int) (e2.getRawX() – e1.getRawX()); 
    pawn.setLayoutParams(par);

    par = (LayoutParams) sideView.getLayoutParams(); 
    par.leftMargin = (int) (e2.getRawX() – e1.getRawX()) + 480; 
    sideView.setLayoutParams(par); 
    return true; 
}

源代码见：

http://easymorse.googlecode.com/svn/tags/DragDemo-0.2

日志引用

• 动画和视图切换示例

标签: android, android ui, android view

 计算机技术 | Marshal 2010年12月12日