此节内容是对第(四)节内容中WhatsNew.class类的实现。
首先是效果图:
很酷炫吧?在许多应用里,第一次启动程序都会出现这个,用来展示软件的特色,其实,安卓已经提供一个类来实现滑动界面,那就是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"/> <!-- 此自定义主题样式在第(二)节内容中有详细介绍 -->