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(); } @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实现一个导航界面(载入界面)就基本上完成了。大家也可以自己试着做一下。然后如果有对代码里面有什么问题的,可以在评论里面留言,虽然笔者能力有限,但还是非常愿意尝试讲解的。
Android利用ViewPager实现一个简单的载入界面
版权声明:如果需要引用文中内容,希望可以带上相应的链接地址,万分感谢。地址: https://blog.csdn.net/shaowanyunBLOG/article/details/71055402
猜你喜欢
转载自blog.csdn.net/shaowanyunBLOG/article/details/71055402
今日推荐
周排行