Android利用ViewPager实现一个简单的载入界面

Android利用ViewPager实现一个简单的载入界面

载入界面是目前的基本上所有的app都会用到的一个功能，一般主要是用来大致介绍app的一些特色功能。有的app的载入界面是一张有显示时长的图片，那个主要的实现逻辑是在Activity里面使用Handle的postdelay的方式，或者还有别的方式来实现。另外的可能使用更加广泛的一种载入界面的方式就是采用viewPager，在每一个view布局里面介绍某一个特色的功能，然后滑动界面，最终完成这样一个功能。那么我这里的话，会通过一个比较小的例子来大致讲解一下我对这个东西的理解。

1.首先，我先创建一个GuideActivity（绑定界面：activity_guide_page）

我这里直接就把对应的代码全部给出了，因为代码里面也有注释，所以这次我就先偷个懒，就不详细讲解代码的原理了，如果真的想要知道实现过程的话，可以直接百度“viewpager原理”，里面有很多的大神给出的详细讲解，我这边就直接把代码给出啦。
import java.util.ArrayList;
import java.util.List;

import com.example.mynote.R;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;

public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {

private ViewPager vp_guide;
private ViewPagerAdapter vp_guide_Adapter;
private List<View> views;
private ImageView[] dots;
private int[] guide_dot_ids = { R.id.guide_dot_01, R.id.guide_dot_02, R.id.guide_dot_03 };

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_guide_page);
initViews();
initDots();
}

// 初始化
private void initViews() {
// LayoutInflater 实例化
LayoutInflater inflater = LayoutInflater.from(this);
views = new ArrayList<View>();
views.add(inflater.inflate(R.layout.guide_page_one, null));
views.add(inflater.inflate(R.layout.guide_page_two, null));
views.add(inflater.inflate(R.layout.guide_page_three, null));
// 将数据传入适配器
vp_guide_Adapter = new ViewPagerAdapter(views, this);
vp_guide = (ViewPager) findViewById(R.id.viewpager_guide);
vp_guide.setAdapter(vp_guide_Adapter);
views.get(2).findViewById(R.id.enter_MainActivity_btn).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(GuideActivity.this, MainActivity.class);
startActivity(intent);
finish();
}
});
vp_guide.setOnPageChangeListener(this);

}

private void initDots() {
dots = new ImageView[views.size()];
for (int i = 0; i < views.size(); i++) {
dots[i] = (ImageView) findViewById(guide_dot_ids[i]);
}
}

// 当页面被滑动时调用
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

// 当前新的页面被选中时调用
@Override
public void onPageSelected(int position) {
for (int i = 0; i < dots.length; i++) {
if (position == i) {
dots[i].setImageResource(R.drawable.guide_dot_selected);
} else {
dots[i].setImageResource(R.drawable.guide_dot);
}
}
}

// 滑动状态改变时调用
@Override
public void onPageScrollStateChanged(int state) {

}
}

// 构造适配器
class ViewPagerAdapter extends PagerAdapter {

private List<View> views;
private Context context;

public ViewPagerAdapter(List<View> views, Context context) {
this.views = views;
this.context = context;
}

@Override
public void destroyItem(View container, int position, Object object) {

((ViewPager) container).removeView(views.get(position));
}

@Override
public Object instantiateItem(View container, int position) {

((ViewPager) container).addView(views.get(position));
return views.get(position);
}

@Override
public int getCount() {
return views.size();
}

aeff
@Override
public boolean isViewFromObject(View view, Object object) {
return (view == object);
}
}
2.activity_guide_page

<?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.support.v4.view.ViewPager
android:id="@+id/viewpager_guide"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</android.support.v4.view.ViewPager>

<LinearLayout
android:id="@+id/guide_dots"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:layout_marginBottom="24.0dp"
android:orientation="horizontal">

<ImageView
android:id="@+id/guide_dot_01"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="15.0dip"
android:src="@drawable/guide_dot_selected"/>

<ImageView
android:id="@+id/guide_dot_02"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="15.0dip"
android:src="@drawable/guide_dot"/>

<ImageView
android:id="@+id/guide_dot_03"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="15.0dip"
android:src="@drawable/guide_dot"/>

</LinearLayout>

</RelativeLayout>


然后，这里可见，我在这个布局文件里面定义了一个ViewPager控件，然后这里值得注意的就是需要引入V4的jar包，可以在网上找到这个文件，然后下载并且放到lib目录下面就可以了。其次，我在下方定义了三个imgview，也就是我们在界面上面可以看到的那三个“点”，这个点会在java代码里面对它进行操作，让它能够产生一个“滑动指示”的功能。因为我没有在网上找到对应的图片，所以当时是自己用画图软件自己画的一个，因为确实不是很漂亮，那么就不上传了

，然后大家在参考代码的时候也可以自己尝试画一下，我感觉自己画的话也挺有意思的。

3.Views（也就是里面显示的view布局，一共有三个，我分开给，和对应的界面效果）

（1）guide_page_one

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

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide_page_one"/>
</LinearLayout>

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

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide_page_two"/>
</LinearLayout>
（3）guide_page_two

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

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide_page_three"/>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:layout_marginBottom="120dp"
android:orientation="horizontal">

<Button
android:id="@+id/enter_MainActivity_btn"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Go!"
android:background="#ff0000"
android:textColor="#ffffff"/>

</LinearLayout>

</RelativeLayout>







这里就是我想要展示的三个view，那么在GuideActivity里面有代码把这三个view放入views中，然后再通过适配器显示到我的activity_guide_page界面。详细的简介可以看我的java代码里面写的逻辑。然后从我的布局文件里面前两个都只是添加了一个ImageView，然后第三个界面是额外添加了一个Button，用于向我的注册登陆界面做跳转。当然这是我自己设计的逻辑，也可以添加自己希望的一些功能。然后这部分用Intent做跳转的代码也都在java代码里面。

最后我就把最终实现的效果给大家展示一下，当然自己也没有做gif图片，只是把每个界面的效果大体上做一个展示。







然后到这里，我们用ViewPager实现一个导航界面（载入界面）就基本上完成了。大家也可以自己试着做一下。然后如果有对代码里面有什么问题的，可以在评论里面留言，虽然笔者能力有限，但还是非常愿意尝试讲解的。