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 views;private ImageView[] dots;private int[] guide_dot_ids = { R.id.guide_dot_01, R.id.guide_dot_02, R.id.guide_dot_03 };@Overrideprotected 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();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() {@Overridepublic 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]);}}// 当页面被滑动时调用@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}// 当前新的页面被选中时调用@Overridepublic 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);}}}// 滑动状态改变时调用@Overridepublic void onPageScrollStateChanged(int state) {}}// 构造适配器class ViewPagerAdapter extends PagerAdapter {private List views;private Context context;public ViewPagerAdapter(List views, Context context) {this.views = views;this.context = context;}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView(views.get(position));}@Overridepublic Object instantiateItem(View container, int position) {((ViewPager) container).addView(views.get(position));return views.get(position);}@Overridepublic int getCount() {return views.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return (view == object);}}
2.activity_guide_page
<?xml version="1.0" encoding="utf-8"?>                                        
然后，这里可见，我在这个布局文件里面定义了一个ViewPager控件，然后这里值得注意的就是需要引入V4的jar包，可以在网上找到这个文件，然后下载并且放到lib目录下面就可以了。其次，我在下方定义了三个imgview，也就是我们在界面上面可以看到的那三个“点”，这个点会在java代码里面对它进行操作，让它能够产生一个“滑动指示”的功能。因为我没有在网上找到对应的图片，所以当时是自己用画图软件自己画的一个，因为确实不是很漂亮，那么就不上传了，然后大家在参考代码的时候也可以自己尝试画一下，我感觉自己画的话也挺有意思的。

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

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

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

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

更多相关文章

随机推荐