现在的位置: 首页 > 综合 > 正文

android之ViewFlipper详解二

2018年06月09日 ⁄ 综合 ⁄ 共 6048字 ⁄ 字号 评论关闭

案例二:静态加载

1)、首先在res/layout文件夹里面不回4个用来在activity_main.xml布局文件中被静态加载的page1.xmlpage2.xmlpage3.xmlpage4.xml,其代码分别如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

 

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:textSize="32sp"

        android:text="这是第一页" />

 

</LinearLayout>

 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

 

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:textSize="32sp"

        android:text="这是第二页"/>

 

</LinearLayout>

 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

 

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:textSize="32sp"

        android:text="这是第三页"/>

 

</LinearLayout>

 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

 

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:textSize="32sp"

        android:text="这是第四页" />

 

</LinearLayout>

2)在activity_main.xml文件中静态加载以上四个布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

 

    <ViewFlipper

        android:id="@+id/body_flipper"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:background="#f0f0f0" >

        

         <include  

            android:id="@+id/layout01"  

            layout="@layout/page1" />  

        <include  

            android:id="@+id/layout02"  

            layout="@layout/page2" />  

        <include  

            android:id="@+id/layout02"  

            layout="@layout/page3" />  

        <include  

            android:id="@+id/layout02"  

            layout="@layout/page4" />  

        

    </ViewFlipper>

 

</RelativeLayout>

3)res目录下新建一个用来生成动画文件的anim文件夹,并在其中创建四个如下动画文件,push_left_in.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 表示图片从左边进入,从不可见到可见 -->

    <translate

        android:duration="500"

        android:fromXDelta="-100.0%p"

        android:toXDelta="0" />

    <alpha

        android:duration="500"

        android:fromAlpha="0.1"

        android:toAlpha="1.0" />

</set>

push_left_out.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 表示图片从左边退出,从可见到不可见 -->

    <translate

        android:duration="500"

        android:fromXDelta="0"

        android:toXDelta="-100.0%p" />

    <alpha

        android:duration="500"

        android:fromAlpha="1.0"

        android:toAlpha="0.1" />

</set>

push_right_in.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 表示图片从右边进入,从不可见到可见 -->

<translate

android:duration="500"

android:fromXDelta="100.0%p"

android:toXDelta="0" />

<alpha

android:duration="500"

android:fromAlpha="0.1"

android:toAlpha="1.0" />

</set>

push_right_out.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 表示图片从右边退出,从可见到不可见 -->

<translate

android:duration="500"

android:fromXDelta="0"

android:toXDelta="100.0%p" />

<alpha

android:duration="500"

android:fromAlpha="1.0"

android:toAlpha="0.1" />

</set>

4)在一个继承了Activity类的MainActivity.java类中,实现如下代码

package zjh.android.lx;

 

import android.os.Bundle;

import android.app.Activity;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.view.animation.AnimationUtils;

import android.widget.ViewFlipper;

 

/**

 * ViewFlipper 静态加载

 */

public class MainActivity extends Activity implements OnTouchListener {

 

private ViewFlipper viewFlipper;

private float touchDownX; // 手指按下的X坐标

private float touchUpX; // 手指松开的X坐标

 

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

 

viewFlipper = (ViewFlipper) findViewById(R.id.body_flipper);

viewFlipper.setOnTouchListener(this);

}

 

@Override

public boolean onTouch(View v, MotionEvent event) {

if (event.getAction() == MotionEvent.ACTION_DOWN) {

// 取得左右滑动时手指按下的X坐标

touchDownX = event.getX();

return true;

} else if (event.getAction() == MotionEvent.ACTION_UP) {

// 取得左右滑动时手指松开的X坐标

touchUpX = event.getX();

// 从左往右,看前一个View

if (touchUpX - touchDownX > 100) {

// 显示上一屏动画

viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,

R.anim.push_left_in));

viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,

R.anim.push_right_out));

// 显示上一屏的View

viewFlipper.showPrevious();

 

/*

 * 方法二

 */

// overridePendingTransition(R.anim.push_left_in,R.anim.push_right_out);

} else if (touchDownX - touchUpX > 100) {

// 显示下一屏的动画

viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,

R.anim.push_right_in));

viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,

R.anim.push_left_out));

// 显示下一屏的View

viewFlipper.showNext();

/*

 * 方法二

 */

// overridePendingTransition(R.anim.push_right_in,R.anim.push_left_out);

}

return true;

}

return false;

}

}

此时静态加载的功能就实现了,当向右滑动的时候运行结果如下:

  

 

 

抱歉!评论已关闭.