Android ViewPager 打造炫酷欢迎页
2016-05-31 22:17
387 查看
Android ViewPager 打造炫酷欢迎页
ViewPager是Android扩展v4包中的类,这个类可以让用户切换当前的View。对于这个类的应用场景,稍加修改就可以应用到多个环境下。比如:App的欢迎页,App导航页设计,app的侧滑退出和app的侧边栏应用界面设计等都可以用ViewPager实现。1. 关于欢迎页的导航设计
设计思想:欢迎页的导航包括几个app说明(欢迎页),页面的下方有导航点,显示当前所在的页面数,自动跳转下一页,最后一页有进入的 登陆\注册 的按钮。或者有提示进入的按钮。或者有直接的登陆或者注册的输入框。输入完成后进入主界面。代码设计:创建包容欢迎页面的视图集合,包含指示当前第几页的“点”的集合,包含最后一页的跳转设计,包含用户当前不操作的自动跳转,包含用户销毁当前应用第二次进入的跳过欢迎页等设计。
2. 欢迎页的引导页设计
1.引导类://建立Guide类继承自 AppCompatActivity,实现OnPageChangeListener 并实现OnPageChangeListener的onPageScrolled,onPageSelected,onPageScrollStateChanged类。
public class Guide extends AppCompatActivity implements ViewPager.OnPageChangeListener { private ViewPager vp; private ViewPagerAdapter vpAdapter; //创建ViewPager适配器 private List<View> views; //创建视图集合 private ImageView[] dots; //创建指示点集合 private int[] ids = {R.id.iv_bit1, R.id.iv_bit2, R.id.iv_bit3, R.id.iv_bit4}; //初始化指示点集合 private Button btn_start; //初始末页跳转按钮 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); //欢迎页无标题设置 setContentView(R.layout.guide_layout); initViews(); initDots(); } private void initViews() { LayoutInflater inflater = LayoutInflater.from(this); views = new ArrayList<View>(); views.add(inflater.inflate(R.layout.one, null)); views.add(inflater.inflate(R.layout.two, null)); views.add(inflater.inflate(R.layout.three, null)); views.add(inflater.inflate(R.layout.four, null)); vpAdapter = new ViewPagerAdapter(views, this); vp = (ViewPager) findViewById(R.id.viewPager); vp.setAdapter(vpAdapter); //适配器适配页面 btn_start = (Button) views.get(3).findViewById(R.id.btn_start); //到第四页点击按钮跳转 btn_start.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(Guide.this,MainActivity.class); //跳转到主Activity startActivity(intent); finish(); //销毁没有用的内存占用 } }); vp.setOnPageChangeListener(this); } private void initDots() { dots = new ImageView[views.size()]; for (int i = 0; i < views.size(); i++) { dots[i] = (ImageView) findViewById(ids[i]); //根据当前页面的views.size()来变化指示图标 } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //指示点的变化函数 @Override public void onPageSelected(int position) { for (int i = 0; i < ids.length; i++) { if (position == i) { dots[i].setImageResource(R.drawable.login_point_selected); } else { dots[i].setImageResource(R.drawable.login_point); } } } @Override public void onPageScrollStateChanged(int state) { } }
2.引导视图:
位于页面最下方的四个点:第一个是默认被选中的点。
<?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" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00333333" > </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal" android:gravity="center_horizontal" > <ImageView android:id="@+id/iv_bit1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/login_point_selected" /> <ImageView android:id="@+id/iv_bit2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/login_point" /> <ImageView android:id="@+id/iv_bit3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/login_point" /> <ImageView android:id="@+id/iv_bit4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/login_point" /> </LinearLayout> </RelativeLayout>
3.打造视图适配器:
//建立ViewPagerAdapter继承自 PagerAdapter,并实现其destroyItem,instantiateItem,getCount,isViewFromObject方法。构造ViewPagerAdapter的内部类,创建View的数组类和联系上下文的Context。
public 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); } }
4.分别实现四个欢迎视图:
第一个欢迎界面:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv_one" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/guide_one" /> </LinearLayout>
第四(末)个欢迎界面:
<?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"> <ImageView android:id="@+id/iv_four" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/guide_four" /> <LinearLayout android:id="@+id/btn_welcome" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:gravity="center_horizontal" android:orientation="horizontal" > <Button android:id="@+id/btn_start" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="welcome" /> </LinearLayout> </RelativeLayout>
5.建立控制进入与跳转变化的类WelCome:
//用异步的方法来实现跳转的判断
public class Welcome extends AppCompatActivity { private boolean isFirstIn = false; //设置第一次进入为false private static final int TIME = 2300; //从logo界面到欢迎页的时间为2.3秒 private static final int GO_HOME = 1000; //到主页的时间 private static final int GO_GUIDE = 1001; //到欢迎页的时间多1来判断 private Handler mHandler = new Handler(){ //异步信息 @Override public void handleMessage(Message msg) { switch (msg.what){ case GO_HOME: goHome(); break; case GO_GUIDE: goGuide(); break; default: break; } } }; @Override protected void onCreate(Bundle savedInstanceState) { final Intent intent = new Intent(Welcome.this,MainActivity.class); super.onCreate(savedInstanceState); setContentView(R.layout.welcome_layout); init(); //自定义方法判断是否第一次开启App //设置自动跳转时间Timer 无响应后10秒自动跳转 Timer timer = new Timer(); TimerTask task = new TimerTask() { @Override public void run() { startActivity(intent); } }; timer.schedule(task,1000*10); finish(); } private void init(){ SharedPreferences preferences = getPreferences(MODE_PRIVATE); isFirstIn = preferences.getBoolean("isFirstIn",true); if (!isFirstIn){ mHandler.sendEmptyMessageDelayed(GO_HOME,TIME); }else { mHandler.sendEmptyMessageDelayed(GO_GUIDE,TIME); SharedPreferences.Editor editor = preferences.edit(); editor.putBoolean("isFirstIn",false); editor.commit(); } } private void goHome() { Intent intent = new Intent(Welcome.this,MainActivity.class); startActivity(intent); finish(); } private void goGuide() { Intent intent = new Intent(Welcome.this,Guide.class); startActivity(intent); finish(); } }
6.WelCome视图:
加入logo的ImageView视图:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/welcome_android" /> </LinearLayout>
7.修改AndroidManifest.xml 注册信息以及首选开启项:
修改主题为NoTitleBar,修改引导页为WelCome类:
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.asdemot"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"> <activity android:name=".MainActivity" android:label="@string/app_name" android:theme="@style/AppTheme.NoActionBar"> </activity> <activity android:name="com.example.asdemot.Guide"> </activity> <activity android:name="com.example.asdemot.Welcome"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
8.总结:
需要导入V4的jar包。至此,一个热气腾腾的欢迎页就完成了。
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件
- SourceProvider.getJniDirectories