在Android应用中, 当我们首次使用某一个应用的时候,都会给我们有一个引导页,显示该软件的功能等一些信息,让用户能够大概了解该软的基本情况。实现该功能可以使用ViewPager来实现,
实现过程:
效果如下:
一
二:
实现过如下:
布局
如下的ImageView为引导页中的小圆点
<?xml version="1.0" encoding="utf-8"?>
<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">
<android.support.v4.view.ViewPager
android:id="@+id/gideviewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center" />
<LinearLayout
android:id="@+id/point_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="160dp"
android:src="@drawable/s" />
<ImageView
android:id="@+id/imageView"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="@drawable/k" />
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignBottom="@+id/imageView"
android:src="@drawable/k" />
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:src="@drawable/k" />
</LinearLayout>
</FrameLayout>
当然引导页的图片也要分别放入一个布局中。
在MianActivity中与pageView使用相似,需要适配器,并且需要实现 ViewPager.OnPageChangeListene 接口。
具体代码如下:
public class GideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private ViewPager viewPager;
private ArrayList<View> views = new ArrayList<>();
private ImageView [] imageViews ;
private int currentindex = 0 ;// 当前正在显示的卡页
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.gidemain);
invitViews();
initPoit();
}
private void invitViews() {
viewPager = (ViewPager) findViewById(R.id.gideviewpager);
views.add(getLayoutInflater().inflate(R.layout.layout1, null));
views.add(getLayoutInflater().inflate(R.layout.layout2, null));
views.add(getLayoutInflater().inflate(R.layout.layout3, null));
views.add(getLayoutInflater().inflate(R.layout.layout4, null));
viewPager.setOnPageChangeListener(this);
viewPager.setAdapter(new MypageAdapter());
}
// 设置小圆点的图片(滑动时改变小圆点的位置)
private void setCurrentPoint (int position) {
//position 代表的是当前选中(滑动到的页面)。currentindex为当前的页面
if (currentindex<0 || currentindex==position || currentindex>imageViews.length-1){
return;
}
imageViews[currentindex].setImageResource(R.drawable.k);
imageViews[position].setImageResource(R.drawable.s);
currentindex= position;
}
// 初始化
private void initPoit() {
LinearLayout pointer = (LinearLayout) findViewById(R.id.point_layout);
imageViews= new ImageView[views.size()];
for (int i = 0 ; i < imageViews.length; i++){
// 循环获取每一个组件
imageViews[i]= (ImageView)pointer.getChildAt(i);
}
currentindex =0;
// 首次初始化的时候将当前页的圆圈设置为实心的
imageViews[currentindex].setImageResource(R.drawable.s);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
// 选中的位置
@Override
public void onPageSelected(int position) {
setCurrentPoint (position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
class MypageAdapter extends PagerAdapter {
@Override
public int getCount() {
return views.size();
}
// 实例化每一个布局
@Override
public Object instantiateItem(ViewGroup container, int position) {
View v = views.get(position);
container.addView(v);
return v;
}
// 删除选项卡
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
// 判断当前视图V是否为返回的对象
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}
}