android仿微信引导页面
来源:互联网 发布:skycc软件怎么下载 编辑:程序博客网 时间:2024/05/17 04:40
1效果图:
2、接着在guide_view01.xml等几个布局页面中添加引导界面要显示的图片和控件,因为这几个布局界面都大同小异,所以在这里我就不一一贴出来了吧,有需要的同学可以直接下载源码,guide_view01.xml:
3、然后是要实现动画效果的布局界面,guide_door.xml:
布局界面已经讲解完毕,接下来让我们进行详细的代码讲解,ViewPager适配器代码,ViewPagerAdapter.java:package com.yangyu.myguideview02;
主程序入口activity类,MainActivity.java:
大家也许想借用此模板进行不同个数的画面进行切换,比如说三个画面切换,当设置view的个数为三个时候,进行相关改动运行后,程序会报错,错误截图为
vpAdapter为自定义ViewPager适配器。
2.程序的目录结构
三、具体的编码实现
1、 在主布局界面中加入ViewPager组件,以及底部的小点,activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="wrap_content" android:layout_height="wrap_content" > <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="fill_parent" /> <LinearLayout android:id="@+id/ll" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="24.0dip" android:orientation="horizontal" > <ImageView android:id="@+id/page0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5dip" android:src="@drawable/page_indicator_focused" /> <ImageView android:id="@+id/page1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5dip" android:src="@drawable/page_indicator_unfocused" /> <ImageView android:id="@+id/page2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5dip" android:src="@drawable/page_indicator_unfocused" /> <ImageView android:id="@+id/page3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5dip" android:src="@drawable/page_indicator_unfocused" /> <ImageView android:id="@+id/page4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5dip" android:src="@drawable/page_indicator_unfocused" /> <ImageView android:id="@+id/page5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:padding="5dip" android:src="@drawable/page_indicator_unfocused" /> </LinearLayout> </RelativeLayout>
2、接着在guide_view01.xml等几个布局页面中添加引导界面要显示的图片和控件,因为这几个布局界面都大同小异,所以在这里我就不一一贴出来了吧,有需要的同学可以直接下载源码,guide_view01.xml:
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/w01" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginTop="35dp" android:gravity="center" android:text="@string/guide_text01" android:textColor="@color/TextColor" android:textSize="22sp" /></RelativeLayout>
3、然后是要实现动画效果的布局界面,guide_door.xml:
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageView android:id="@+id/imageLeft" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentLeft="true" android:scaleType="fitXY" android:src="@drawable/w_left" /> <ImageView android:id="@+id/imageRight" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:scaleType="fitXY" android:src="@drawable/w_right" android:visibility="visible" /> <TextView android:id="@+id/anim_text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginTop="35dp" android:gravity="center" android:text=" \n \n微信,是一个生活方式\n \n " android:textColor="#fff" android:textSize="22sp" /></RelativeLayout>
布局界面已经讲解完毕,接下来让我们进行详细的代码讲解,ViewPager适配器代码,ViewPagerAdapter.java:package com.yangyu.myguideview02;
package com.yangyu.myguideview02;import java.util.ArrayList;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;/** * @author yangyu * 功能描述:ViewPager适配器,用来绑定数据和view */public class ViewPagerAdapter extends PagerAdapter { //界面列表 private ArrayList<View> views; public ViewPagerAdapter (ArrayList<View> views){ this.views = views; } /** * 获得当前界面数 */ @Override public int getCount() { if (views != null) { return views.size(); } return 0; } /** * 初始化position位置的界面 */ @Override public Object instantiateItem(View view, int position) { ((ViewPager) view).addView(views.get(position), 0); return views.get(position); } /** * 判断是否由对象生成界面 */ @Override public boolean isViewFromObject(View view, Object arg1) { return (view == arg1); } /** * 销毁position位置的界面 */ @Override public void destroyItem(View view, int position, Object arg2) { ((ViewPager) view).removeView(views.get(position)); }}
主程序入口activity类,MainActivity.java:
package com.yangyu.myguideview02;import java.util.ArrayList;import android.app.Activity;import android.content.Intent;import android.os.Bundle;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.widget.Button;import android.widget.ImageView;/** * @author yangyu * 功能描述:主程序入口activity */public class MainActivity extends Activity { // 定义ViewPager对象 private ViewPager viewPager; // 定义ViewPager适配器 private ViewPagerAdapter vpAdapter; // 定义一个ArrayList来存放View private ArrayList<View> views; //定义各个界面View对象 private View view1,view2,view3,view4,view5,view6; // 定义底部小点图片 private ImageView pointImage0, pointImage1, pointImage2, pointImage3,pointImage4, pointImage5; //定义开始按钮对象 private Button startBt; // 当前的位置索引值 private int currIndex = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); } /** * 初始化组件 */ private void initView() { //实例化各个界面的布局对象 LayoutInflater mLi = LayoutInflater.from(this); view1 = mLi.inflate(R.layout.guide_view01, null); view2 = mLi.inflate(R.layout.guide_view02, null); view3 = mLi.inflate(R.layout.guide_view03, null); view4 = mLi.inflate(R.layout.guide_view04, null); view5 = mLi.inflate(R.layout.guide_view05, null); view6 = mLi.inflate(R.layout.guide_view06, null); // 实例化ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); // 实例化ArrayList对象 views = new ArrayList<View>(); // 实例化ViewPager适配器 vpAdapter = new ViewPagerAdapter(views); // 实例化底部小点图片对象 pointImage0 = (ImageView) findViewById(R.id.page0); pointImage1 = (ImageView) findViewById(R.id.page1); pointImage2 = (ImageView) findViewById(R.id.page2); pointImage3 = (ImageView) findViewById(R.id.page3); pointImage4 = (ImageView) findViewById(R.id.page4); pointImage5 = (ImageView) findViewById(R.id.page5); //实例化开始按钮 startBt = (Button) view6.findViewById(R.id.startBtn); } /** * 初始化数据 */ private void initData() { // 设置监听 viewPager.setOnPageChangeListener(new MyOnPageChangeListener()); // 设置适配器数据 viewPager.setAdapter(vpAdapter); //将要分页显示的View装入数组中 views.add(view1); views.add(view2); views.add(view3); views.add(view4); views.add(view5); views.add(view6); // 给开始按钮设置监听 startBt.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { startbutton(); } }); } public class MyOnPageChangeListener implements OnPageChangeListener { @Override public void onPageSelected(int position) { switch (position) { case 0: pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); break; case 1: pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); break; case 2: pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); break; case 3: pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); break; case 4: pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); break; case 5: pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); break; } currIndex = position; // animation.setFillAfter(true);// True:图片停在动画结束位置 // animation.setDuration(300); // mPageImg.startAnimation(animation); } @Override public void onPageScrollStateChanged(int arg0) { } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } } /** * 相应按钮点击事件 */ private void startbutton() { Intent intent = new Intent(); intent.setClass(MainActivity.this,GuideViewDoor.class); startActivity(intent); this.finish(); } }
大家也许想借用此模板进行不同个数的画面进行切换,比如说三个画面切换,当设置view的个数为三个时候,进行相关改动运行后,程序会报错,错误截图为
The application’s PagerAdapter changed the adapter’s contents without calling PagerAdapter#notifyDataSetChanged
FATAL EXCEPTION: main java.lang.IllegalStateException: The application’s PagerAdapter changed the adapter’s contents without calling PagerAdapter#notifyDataSetChanged!
出这个错,是因为你的PagerAdapter中的数据变了,但是没有调用adapter.notifyDataSetChanged方法。
此时大家不用急,只用加一个函数就可以解决问题
vpAdapter.notifyDataSetChanged();
vpAdapter为自定义ViewPager适配器。
源码下载:点击下载源码
主要内容引用链接:http://www.apkbus.com/android-4205-1.html
0 0
- android仿微信引导页面
- android引导页面
- Android引导页面
- Android 引导页面
- Android引导页面
- android视频引导页面
- Android中的页面引导
- Android引导页面
- Android 引导页面 欢迎页面
- android-左右滑动页面设计-仿微信滑动引导页面
- android-左右滑动页面设计-仿微信滑动引导页面
- android-左右滑动页面设计-仿微信滑动引导页面
- android 程序 页面引导图
- Android界面之引导页面
- Android引导页面的设计
- Android引导页面的实现
- Android屏蔽开机引导页面
- Android 欢迎页面 引导页
- 使用 Windows Vista 的凭据提供程序创造自定义的登录体验
- IT忍者神龟之Hibernate的HQL总结
- c标准库头文件的C++版本
- linux中test命令详解
- 第10周项目2 M$pszi$y 含义
- android仿微信引导页面
- 用git部署网站代码到生产环境VPS
- IOS-UIButton
- 谷俊丽:基于大数据的深度学习
- 使用sql更改表的列的数据类型和添加新列和约束
- 跨平台 字符集编码问题 C++ PHP互通字符集的问题
- Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端
- java垃圾回收器GC对性能吞吐量的影响
- Js 获取当前日期时间