10 - 布局Layout：FrameLayout帧布局以及FrameLayout在切换屏幕效果的使用

转载注明出处：http://blog.csdn.net/eana_don/article/details/8332778
资料参考：官网API

FrameLayout是一种比较简单的布局。他的原理就是，整个界面就是一个空白区域，当有新元素要添加时就全部放在这个空白区域的左上角，一个个叠上去，有点类似于卡片一张叠一张的作用。这样后面放的元素全部直接覆盖在之前放的元素上面。虽然我们不可以指定元素摆放的位置，但却可以指定控件摆放的gravity。

一、使用方法

xml写法：没有gravity时：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:text="按钮1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<!-- gravity设置的是控件内容相对与控件的位置，layout_gravity设置的是控件自身相对于父控件的位置 -->
<Button
android:text="按钮2在这里"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="按钮3在按钮2的底下"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</FrameLayout>

有gravity时：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:text="按钮1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<!-- gravity设置的是控件内容相对与控件的位置，layout_gravity设置的是控件自身相对于父控件的位置 -->

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:text="按钮2在这里" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="按钮3在按钮2的底下" />

</FrameLayout>

运行结果：

1.没有设置控件位置


2.设置了空间位置

二、运用

很多时候觉得，FrameLayout很少用到，但是当然，FrameLayout的存在必定是有他的用处的。根据它的特性，可以用来制成切换的功能，比如多个屏幕切换效果。下面有两个比较简单的运用。第一个是比较基础的，能够展示下原理。第二个，则是加上了动画。看起来会绚丽点。

1.基本运用：点击屏幕时切换图片

本应用主要是在一个FrameLayout中放置三个ImageView，在Activity中监听屏幕操作来改变ImageView的可视状态，达到切换图片的效果。
布局文件xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="@+id/image1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="invisible"
android:src="@drawable/bg_1"/>
<ImageView
android:id="@+id/image2"
android:visibility="invisible"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/bg_2"/>
<ImageView
android:id="@+id/image3"
android:visibility="invisible"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/bg_3"/>
</FrameLayout>

代码控制的写法：

package cn.don.layout;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.text.method.Touch;
import android.util.Log;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
/**
* 制作屏幕切换的效果
* */
public class FrameUseActivity extends Activity {

private ImageView image1;
private ImageView image2;
private ImageView image3;
private List<ImageView> list;
private int count=0;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_frame_use);
image1=(ImageView)findViewById(R.id.image1);
image2=(ImageView)findViewById(R.id.image2);
image3=(ImageView)findViewById(R.id.image3);
list=new ArrayList<ImageView>();
list.add(image1);
list.add(image2);
list.add(image3);
image1.setVisibility(View.VISIBLE);
count++;
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
//onTouchEvent监听屏幕操作
if(event.getAction()==MotionEvent.ACTION_DOWN)
{//当屏幕被点击时
count=count%3;
for(ImageView i:list)
{
i.setVisibility(View.INVISIBLE);
}
list.get(count).setVisibility(View.VISIBLE);
count++;
}

return super.onTouchEvent(event);
}

}

运行结果：

触摸屏幕时切换背景

2.提高运用：切换屏幕，使用平移动画效果

这里通过一个布局文件里面放着三个Layout，并且Layout都是覆盖整个屏幕。在Activity中，实现手势操作的监听，将activity获取到的手势改变时间交由手势实例来处理。手势操作判断当手势左移或右移超过一定的距离就会切换下一张/上一张图片。切换的时候还会添加上对应的平移动画效果（当然也可以使用Rotate效果，就有有一种3D的呈现）。

布局xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<LinearLayout
android:id="@+id/layout_3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@drawable/background_1">
</LinearLayout>

<LinearLayout
android:id="@+id/layout_2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@drawable/background_2">
</LinearLayout>

<RelativeLayout
android:id="@+id/layout_1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@drawable/background_3">

</RelativeLayout>

</FrameLayout>

代码控制：

package cn.don.layout;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

public class FrameAnimActivity extends Activity implements OnGestureListener {

// 定义手势检测器实例
GestureDetector detector;
//定义一个动画数组，用于为ViewFlipper指定切换动画效果
Animation[] animations = new Animation[4];
//定义手势动作两点之间的最小距离
final int FLIP_DISTANCE = 50;
View[]  views = null;
//记录当前的元素
private int currView = 0;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_frame_anim);
//创建手势检测器
detector = new GestureDetector(this);
//初始化Animation数组
animations[0] = AnimationUtils.loadAnimation(this
, R.anim.left_in);
animations[1] = AnimationUtils.loadAnimation(this
, R.anim.left_out);
animations[2] = AnimationUtils.loadAnimation(this
, R.anim.right_in);
animations[3] = AnimationUtils.loadAnimation(this
, R.anim.right_out);
initViews();
}

private void initViews() {
// TODO Auto-generated method stub
views = new View[3];
LinearLayout layout_3 = (LinearLayout) findViewById(R.id.layout_3);
LinearLayout layout_2 = (LinearLayout) findViewById(R.id.layout_2);
RelativeLayout layout_1 = (RelativeLayout) findViewById(R.id.layout_1);
views[0] = layout_1;
views[1] = layout_2;
views[2] = layout_3;
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

@Override
public boolean onDown(MotionEvent arg0) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
// TODO Auto-generated method stub
/*
* 如果第一个触点事件的X座标大于第二个触点事件的X座标超过FLIP_DISTANCE
* 也就是手势从右向左滑。
*/
if (e1.getX() - e2.getX() > FLIP_DISTANCE)
{
moveLeft();
return true;
}
/*
* 如果第二个触点事件的X座标大于第一个触点事件的X座标超过FLIP_DISTANCE
* 也就是手势从右向左滑。
*/
else if (e2.getX() - e1.getX() > FLIP_DISTANCE)
{
moveRight();
return true;
}
return false;
}

private void moveLeft() {
// TODO Auto-generated method stub
int rView = (currView+1)==views.length?0:(currView+1);
views[rView].setVisibility(View.VISIBLE);
views[rView].startAnimation(animations[0]);
views[currView].startAnimation(animations[1]);
views[currView].setVisibility(View.GONE);
currView=rView;
}

private void moveRight() {
// TODO Auto-generated method stub
currView=currView%3;
int lView = (currView-1)<0?views.length-1:(currView-1);
views[lView].setVisibility(View.VISIBLE);
views[lView].startAnimation(animations[2]);
views[currView].startAnimation(animations[3]);
views[currView].setVisibility(View.GONE);
currView=lView;
}

@Override
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub

}

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
// TODO Auto-generated method stub
return false;
}

@Override
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub

}

@Override
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
//将该Activity上的触碰事件交给GestureDetector处理
return detector.onTouchEvent(event);
}

}

使用到的动画效果：四个效果对应的xml
left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%p" android:toXDelta="0"
android:duration="500" />
<alpha android:fromAlpha="0.1" android:toAlpha="1.0"
android:duration="500" />
</set>

left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="-100%p"
android:duration="500" />
<alpha android:fromAlpha="0.1" android:toAlpha="1.0"
android:duration="500" />
</set>

right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-100%p" android:toXDelta="0"
android:duration="500" />
<alpha android:fromAlpha="0.1" android:toAlpha="1.0"
android:duration="500" />
</set>

right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p"
android:duration="500" />
<alpha android:fromAlpha="0.1" android:toAlpha="1.0"
android:duration="500" />
</set>

运行结果：

不移动时的三个画面：







移动时：