最近了解了一下app启动页滑动翻页介绍,根据自己查找的资料还有别人的写的demo,自己也写了一个,分享一下。
实现效果:
代码:
package com.app.startdemo;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
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.view.ViewGroup;
import android.widget.TextView;
public class MainActivity extends Activity {
ViewPager viewPage;
TextView tvStart;
TextView[] textColor=new TextView[3];
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPage=(ViewPager) findViewById(R.id.vp_page);
tvStart=(TextView) findViewById(R.id.tv_start);
//ViewPage加载的数据源
LayoutInflater infl=LayoutInflater.from(this);
final ArrayList<View> views=new ArrayList<View>();
for(int i=0;i<3;i++){
String name="what"+i;
views.add(infl.inflate(getResources().getIdentifier(name, "layout", getPackageName()), null));
}
//初始化下面的三个圆点
textColor[0]=(TextView) findViewById(R.id.tv_paget1);
textColor[1]=(TextView) findViewById(R.id.tv_paget2);
textColor[2]=(TextView) findViewById(R.id.tv_paget3);
PagerAdapter adapter=new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return views.size();
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
container.removeView(views.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position));
return views.get(position);
}
};
viewPage.setAdapter(adapter);
viewPage.addOnPageChangeListener(new MyonPageChangeListener());
viewPage.setOffscreenPageLimit(3);
tvStart.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent=new Intent(MainActivity.this,SecondActivity.class);
startActivity(intent);
}
});
}
class MyonPageChangeListener implements OnPageChangeListener{
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int position) {
//滑动到哪一个页面就把对应的圆点颜色改变
textColor[position].setBackgroundColor(Color.RED);
//如果不是第一页就把上一页对应的圆点颜色还原
if(position!=0){
textColor[position-1].setBackgroundColor(Color.WHITE);
}
//如果不是最后一页就把下一页对应的圆点颜色还原
if(position!=2){
textColor[position+1].setBackgroundColor(Color.WHITE);
//隐藏启动按钮
tvStart.setVisibility(View.GONE);
}
//如果是最后一页就显示启动按钮
if(position==2){
tvStart.setVisibility(View.VISIBLE);
}
}
}
}
布局文件:
<FrameLayout 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"
tools:context="com.app.startdemo.MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/vp_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/page1"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center|bottom"
>
<TextView
android:id="@+id/tv_start"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="@null"
android:text="现在开启"
android:textSize="20sp"
android:textColor="#ffffff"
android:gravity="center"
android:visibility="gone"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center|top"
android:orientation="horizontal"
>
<TextView
android:id="@+id/tv_paget1"
android:layout_width="5dp"
android:layout_height="5dp"
android:background="#ffffff"
/>
<TextView
android:id="@+id/tv_paget2"
android:layout_width="5dp"
android:layout_height="5dp"
android:background="#ffffff"
android:layout_marginLeft="10dp"
/>
<TextView
android:id="@+id/tv_paget3"
android:layout_width="5dp"
android:layout_height="5dp"
android:background="#ffffff"
android:layout_marginLeft="10dp"
/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
关于ViewPage加载的数据源是三个XML布局文件:内容很简单就是LinearLayout加一个背景图片
详细解释就不写了,注释很详细,还有一个注意事项就是由于加载的图片比较大,我选的是720X1080分辨率的图片,造成运行的时候viewpage滑动有些卡顿,后来知道是因为我只在一个drawable目录下放置着三个图片,最好是在每个目录下都放置图片,然后再运行时就不会卡顿了,这个问题是有关屏幕适配的问题,有兴趣可以自己了解。