Android之高仿微信“首次登录滑动界面”（五）
2014-08-27 00:44
507 查看
此节内容是对第（四）节内容中WhatsNew.class类的实现。
首先是效果图：
很酷炫吧？在许多应用里，第一次启动程序都会出现这个，用来展示软件的特色，其实，安卓已经提供一个类来实现滑动界面，那就是ViewPager类，当然，在用低版本安卓开发的时候，需要导入安卓低版本的兼容包android-support-v4.jar。
在这里，用三句话来点破使用ViewPager的精髓。
1、当打开滑动界面时，为呈现的第一页编写xml；
2、对滑动界面ViewPager里的每一页View编写xml；
3、在后台代码中对其装载实现。
稍微有难度的是下面圆点的实现，其实用了FrameLayout布局的话非常简单，因为这个布局是层叠式的，所以能够让圆点始终放在ViewPager上面，并且不随着滑动而消失。
一、首先是实现滑动界面呈现第一页时的布局：
layout\whatsnew.xml
二、接下来实现PagerView里每一页view的布局：
layout\whats0.xml
layout\whats1.xml
layout\whats2.xml
layout\whats3.xml
layout\whats4.xml
layout\whats5.xml
三、java代码：
WhatsNew.java
四、绿色按钮的状态机实现：
drawable\state_btn_green.xml
五、在AndroidManifest.xml中实现以下语句：
六、所用素材：
首先是效果图：
很酷炫吧？在许多应用里，第一次启动程序都会出现这个，用来展示软件的特色，其实，安卓已经提供一个类来实现滑动界面，那就是ViewPager类，当然，在用低版本安卓开发的时候，需要导入安卓低版本的兼容包android-support-v4.jar。
在这里，用三句话来点破使用ViewPager的精髓。
1、当打开滑动界面时，为呈现的第一页编写xml；
2、对滑动界面ViewPager里的每一页View编写xml；
3、在后台代码中对其装载实现。
稍微有难度的是下面圆点的实现，其实用了FrameLayout布局的话非常简单，因为这个布局是层叠式的，所以能够让圆点始终放在ViewPager上面，并且不随着滑动而消失。
一、首先是实现滑动界面呈现第一页时的布局：
layout\whatsnew.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="30dp"
android:gravity="center_horizontal" >
<ImageView android:id="@+id/page0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@drawable/page_now" />
<ImageView android:id="@+id/page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
<ImageView android:id="@+id/page2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
<ImageView android:id="@+id/page3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
<ImageView android:id="@+id/page4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
<ImageView android:id="@+id/page5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
</LinearLayout>
</FrameLayout>二、接下来实现PagerView里每一页view的布局：
layout\whats0.xml
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@drawable/page0"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="\n微信\n超过1亿人使用的手机应用"
android:layout_alignParentTop="true"
android:layout_marginTop="35dp"
android:textSize="22sp"
android:textColor="#fff"
/>
</RelativeLayout>layout\whats1.xml
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@drawable/page1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="\n按住就能说话\n聊天是如此简单轻松"
android:layout_alignParentTop="true"
android:layout_marginTop="35dp"
android:textSize="22sp"
android:textColor="#fff"
/>
</RelativeLayout>layout\whats2.xml
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@drawable/page2"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="透过视频聊天\n你甚至可以和朋友们\n面对面沟通"
android:layout_alignParentTop="true"
android:layout_marginTop="35dp"
android:textSize="22sp"
android:textColor="#fff"
/>
</RelativeLayout>layout\whats3.xml
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@drawable/page3"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="摇一摇手机\n或者看看附近的人\n认识更多的朋友"
android:layout_alignParentTop="true"
android:layout_marginTop="35dp"
android:textSize="22sp"
android:textColor="#fff"
/>
</RelativeLayout>layout\whats4.xml
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@drawable/page4"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="\n你还可以透过朋友圈\n和朋友们分享彼此的生活"
android:layout_alignParentTop="true"
android:layout_marginTop="35dp"
android:textSize="22sp"
android:textColor="#fff"
/>
</RelativeLayout>layout\whats5.xml
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@drawable/page5"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text=" \n \n微信，是一个生活方式"
android:layout_alignParentTop="true"
android:layout_marginTop="35dp"
android:textSize="22sp"
android:textColor="#fff"
/>
<Button android:id="@+id/startBtn"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="120dp"
android:text="开始"
android:textSize="18sp"
android:textColor="#fff"
android:background="@drawable/state_btn_green"
android:layout_gravity="center_vertical"
/>
</RelativeLayout>三、java代码：
WhatsNew.java
package t.first;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
public class WhatsNew extends Activity{
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.whatsnew);
//初始化
final ViewPager viewPager = (ViewPager)findViewById(R.id.viewpager);
final ImageView page0 = (ImageView)findViewById(R.id.page0); //下面的点
final ImageView page1 = (ImageView)findViewById(R.id.page1);
final ImageView page2 = (ImageView)findViewById(R.id.page2);
final ImageView page3 = (ImageView)findViewById(R.id.page3);
final ImageView page4 = (ImageView)findViewById(R.id.page4);
final ImageView page5 = (ImageView)findViewById(R.id.page5);
//类似findViewById，把整个界面给获取出来
LayoutInflater mLi = LayoutInflater.from(this);
View view0 = mLi.inflate(R.layout.whats0, null);
View view1 = mLi.inflate(R.layout.whats1, null);
View view2 = mLi.inflate(R.layout.whats2, null);
View view3 = mLi.inflate(R.layout.whats3, null);
View view4 = mLi.inflate(R.layout.whats4, null);
View view5 = mLi.inflate(R.layout.whats5, null);
//获取其他XML里的控件的方法
Button startBtn = (Button) view5.findViewById(R.id.startBtn);
//封装数据
final ArrayList<View> views = new ArrayList<View>();
views.add(view0);
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
views.add(view5);
//定制
viewPager.setAdapter(new PagerAdapter() {
@Override
public void startUpdate(View arg0) {
// TODO 自动生成的方法存根
}
@Override
public Parcelable saveState() {
// TODO 自动生成的方法存根
return null;
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
// TODO 自动生成的方法存根
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO 自动生成的方法存根
return arg0 == arg1;
}
@Override
public Object instantiateItem(View context, int position) {
// TODO 自动生成的方法存根
((ViewPager)context).addView(views.get(position));
return views.get(position);
}
@Override
public int getCount() {
// TODO 自动生成的方法存根
return views.size();
}
@Override
public void finishUpdate(View arg0) {
// TODO 自动生成的方法存根
}
@Override
public void destroyItem(View context, int position, Object arg2) {
// TODO 自动生成的方法存根
((ViewPager)context).removeView(views.get(position));
}
});
//设置监听器,更新下面的点的状态
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
public void onPageSelected(int which) {
// TODO 自动生成的方法存根
switch (which)
{
case 0:
page0.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
page1.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 1:
page1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
page0.setImageDrawable(getResources().getDrawable(R.drawable.page));
page2.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 2:
page2.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
page1.setImageDrawable(getResources().getDrawable(R.drawable.page));
page3.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 3:
page3.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
page4.setImageDrawable(getResources().getDrawable(R.drawable.page));
page2.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 4:
page4.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
page3.setImageDrawable(getResources().getDrawable(R.drawable.page));
page5.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 5:
page5.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
page4.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
}
}
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO 自动生成的方法存根
}
public void onPageScrollStateChanged(int arg0) {
// TODO 自动生成的方法存根
}
});
//按钮监听器
startBtn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO 自动生成的方法存根
Intent intent = new Intent(WhatsNew.this,WhatsDoor.class); //在第（六）节内容中实现该类
startActivity(intent);
WhatsNew.this.finish();
}
});
}
}四、绿色按钮的状态机实现：
drawable\state_btn_green.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="false"
android:drawable="@drawable/btn_style_one_disabled"
/>
<item android:state_pressed="true"
android:drawable="@drawable/btn_style_one_pressed"
/>
<item android:state_focused="true"
android:drawable="@drawable/btn_style_one_focused"
/>
<item android:drawable="@drawable/btn_style_one_normal"
/>
</selector>五、在AndroidManifest.xml中实现以下语句：
<activity android:name=".WhatsNew" android:theme="@style/Fullscreen_Notitle_Fade"/> <!-- 此自定义主题样式在第（二）节内容中有详细介绍 -->
六、所用素材：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android之高仿微信“登录界面”（三）
- Android仿微信的开机滑动界面
- Android 高仿QQ 界面滑动效果
- android 高仿微信界面源码
- Android 高仿微信（QQ）滑动弹出编辑、删除菜单效果，增加下拉刷新功能
- 仿微信首次启动滑动界面效果
- Android中实现仿微信界面切换平滑滑动效果
- Android之高仿微信“登录加载框”（四）
- android design潮流，高仿微信5.2界面实现
- Android开发之高仿微信界面（1)
- android开发之高仿微信6.0+滑动Tab
- 仿微信首次启动滑动界面效果
- Android之高仿微信“登录导航”（二）
- 安卓Android之高仿微信聊天的界面
- 【cocos2d-x-3.2】【高仿微信打飞机系列一】【开始界面 子弹生成 背景滑动 主飞机】
- Android之高仿微信聊天的界面
- Android 高仿QQ 界面滑动效果
- 高仿仿微信界面二维码扫描效果 之 Android 基于google Zxing实现二维码、条形码扫描
- [Android 界面] 微信高仿导航页引导帮助开门效果（送上源码）
- Android UI设计初体验（模仿微信登录界面）