Android之ViewPager（仿人人网引导界面）（三）

最新推荐文章于 2024-05-27 02:41:23 发布

小小劲

最新推荐文章于 2024-05-27 02:41:23 发布

阅读量714

点赞数 2

分类专栏： AndroidUI介面

本文链接：https://blog.csdn.net/liguojin1230/article/details/44707165

版权

AndroidUI介面专栏收录该内容

20 篇文章 0 订阅

订阅专栏

再长的路，一步步也能走完，再短的路，不迈开双脚也无法到达。

本讲内容：仿人人网引导界面

效果图：

下面是res/layout/activity_main.xml 布局文件：（欢迎介面）

<span style="font-size:18px;"><?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:background="@drawable/welcome"/></span>

下面是res/layout/activity_guide.xml 布局文件：(引导界面的xml布局)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/guide_picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

    <LinearLayout
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:padding="8dp" >

        <Button
            android:id="@+id/btn_register"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_weight="1.5"
            android:background="@drawable/guide_btn_blue"
            android:gravity="center"
            android:singleLine="true"
            android:text="注  册"
            android:textColor="#ffffff"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btn_know"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_weight="1.0"
            android:background="@drawable/guide_btn_white"
            android:gravity="center"
            android:singleLine="true"
            android:text="看看我认识的人"
            android:textColor="#000000"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btn_login"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_weight="1.5"
            android:background="@drawable/guide_btn_blue"
            android:gravity="center"
            android:singleLine="true"
            android:text="登  录"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

</RelativeLayout>

下面是res/drawable/guide_btn_blue.xml 文件：(自定义按钮的背景效果)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/guide_blue_default" android:state_focused="true" android:state_pressed="false"/>
    <item android:drawable="@drawable/guide_blue_press" android:state_pressed="true"/>
    <item android:drawable="@drawable/guide_blue_default"/>

</selector>

下面是res/drawable/guide_btn_white.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/guide_black_default" android:state_focused="true" android:state_pressed="false"/>
    <item android:drawable="@drawable/guide_black_press" android:state_pressed="true"/>
    <item android:drawable="@drawable/guide_black_default"/>

</selector>

下面是res/anim/guide_fade_in.xml 文件：(渐入动画资源文件)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

</set>

下面是res/layout/guide_fade_out.xml 文件：(渐隐动画资源文件)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:fillAfter="false"
        android:fromXScale="1.1"
        android:fromYScale="1.1"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:pivotX="50.0%"
        android:pivotY="50.0%"
        android:toXScale="1.1"
        android:toYScale="1.1" />

    <alpha
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

</set>

下面是res/layout/guide_fade_in_scale.xml 文件：(放大动画资源文件)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:fillAfter="false"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:pivotX="50.0%"
        android:pivotY="50.0%"
        android:toXScale="1.1"
        android:toYScale="1.1"/>

</set>

下面是MainActivity.java主界面文件：(开始启动的欢迎界)

//功能描述：欢迎界面Activity
public class MainActivity extends Activity {  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        //倒计时类
        new CountDownTimer(3000, 1000) {  
            public void onTick(long millisUntilFinished) {  
            }  
  
            public void onFinish() {  
                Intent intent = new Intent(MainActivity.this, GuideActivity.class);  
                startActivity(intent);  
                MainActivity.this.finish();  
            }  
        }.start();  
    }  
  
}

CountDownTimer这个类只有四个方法onTick，onFinsh、cancel和start。其中前面两个是抽象方法，所以要重写一下。
主要是重写onTick和onFinsh这两个方法，onFinish()中的代码是计时器结束的时候要做的事情；onTick(Long m)中的代码是你倒计时开始时要做的事情，参数m是直到完成的时间，构造方法MyCount()中的两个参数中，前者是倒计的时间数，后者是倒计每秒中间的间隔时间，都是以毫秒为单位。例如要倒计时3秒，每秒中间间隔时间是1秒。

下面是GuideActivity.java主界面文件：(引导界面)

/**
 * @author liguojin 
 * 功能描述：导引界面(每张图片都执行的动画顺序，渐现、放大和渐隐，结束后切换图片和文字 又开始执行
 *         渐现、放大和渐隐,当最后一张执行完渐隐，切换到第一张，从而达到循环效果)
 */
public class GuideActivity extends Activity implements OnClickListener {
	// 定义注册、登录和看看我认识的人按钮
	private Button btnRegister, btnKnowPeople, btnLogin;
	// 显示图片的ImageView组件
	private ImageView guidePicture;
	// 要展示的一组图片资源
	private Drawable[] pictures;
	// 每张展示图片要执行的一组动画效果
	private Animation[] animations;
	// 当前执行的是第几张图片（资源索引）
	private int currentItem = 0;

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_guide);

		initView();
		initData();
	}

	// 初始化组件
	private void initView() {
		// 实例化按钮
		btnRegister = (Button) findViewById(R.id.btn_register);
		btnKnowPeople = (Button) findViewById(R.id.btn_know);
		btnLogin = (Button) findViewById(R.id.btn_login);
		// 实例化ImageView引导图片
		guidePicture = (ImageView) findViewById(R.id.guide_picture);
		
		// 实例化引导图片数组
		pictures = new Drawable[] {
				getResources().getDrawable(R.drawable.guide_pic1),
				getResources().getDrawable(R.drawable.guide_pic2),
				getResources().getDrawable(R.drawable.guide_pic3) };

		// 实例化动画效果数组
		animations = new Animation[] {
				AnimationUtils.loadAnimation(this, R.anim.guide_fade_in),
				AnimationUtils.loadAnimation(this, R.anim.guide_fade_in_scale),
				AnimationUtils.loadAnimation(this, R.anim.guide_fade_out), };
	}

	// 初始化数据
	private void initData() {
		// 给按钮设置监听
		btnRegister.setOnClickListener(this);
		btnKnowPeople.setOnClickListener(this);
		btnLogin.setOnClickListener(this);

		// 给每个动画效果设置播放时间
		animations[0].setDuration(1500);
		animations[1].setDuration(3000);
		animations[2].setDuration(1500);

		// 给每个动画效果设置监听事件
		animations[0].setAnimationListener(new GuideAnimationListener(0));
		animations[1].setAnimationListener(new GuideAnimationListener(1));
		animations[2].setAnimationListener(new GuideAnimationListener(2));
		
		//设置图片动画初始化默认值为0
		guidePicture.setImageDrawable(pictures[currentItem]);
		guidePicture.startAnimation(animations[0]);
	}

	// 实现了动画监听接口，重写里面的方法
	class GuideAnimationListener implements AnimationListener {
		private int index;

		public GuideAnimationListener(int index) {
			this.index = index;
		}

		public void onAnimationStart(Animation animation) {

		}

		// 重写动画结束时的监听事件，实现了动画循环播放的效果
		public void onAnimationEnd(Animation animation) {
			if (index < (animations.length - 1)) {
				guidePicture.startAnimation(animations[index + 1]);
			} else {
				currentItem++;
				if (currentItem > (pictures.length - 1)) {
					currentItem = 0;
				}
				guidePicture.setImageDrawable(pictures[currentItem]);
				guidePicture.startAnimation(animations[0]);
			}
		}

		public void onAnimationRepeat(Animation animation) {

		}

	}

	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btn_register:
			Toast.makeText(this, "点击了注册按钮", Toast.LENGTH_SHORT).show();
			break;
		case R.id.btn_know:
			Toast.makeText(this, "点击了我认识的人按钮", Toast.LENGTH_SHORT).show();
			break;
		case R.id.btn_login:
			Toast.makeText(this, "点击了登录按钮", Toast.LENGTH_SHORT).show();
			break;
		default:
			break;
		}
	}
}

Take your time and enjoy it 要原码的、路过的、学习过的请留个言，顶个呗～～

小小劲

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Android之ViewPager（仿人人网引导界面）（三）

再长的路，一步步也能走完，再短的路，不迈开双脚也无法到达。下面是res/layout/activity_main.xml 布局文件：<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" andr
复制链接

扫一扫

专栏目录