Android之高仿微信“首次登录滑动界面”（五）
来源：互联网 发布：centos 6.8 安装pptp 编辑：程序博客网 时间：2024/06/07 03:02
此节内容是对第（四）节内容中WhatsNew.class类的实现。
首先是效果图：
很酷炫吧？在许多应用里，第一次启动程序都会出现这个，用来展示软件的特色，其实，安卓已经提供一个类来实现滑动界面，那就是ViewPager类，当然，在用低版本安卓开发的时候，需要导入安卓低版本的兼容包android-support-v4.jar。
在这里，用三句话来点破使用ViewPager的精髓。
1、当打开滑动界面时，为呈现的第一页编写xml；
2、对滑动界面ViewPager里的每一页View编写xml；
3、在后台代码中对其装载实现。
稍微有难度的是下面圆点的实现，其实用了FrameLayout布局的话非常简单，因为这个布局是层叠式的，所以能够让圆点始终放在ViewPager上面，并且不随着滑动而消失。
一、首先是实现滑动界面呈现第一页时的布局：
layout\whatsnew.xml
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="30dp" android:gravity="center_horizontal" > <ImageView android:id="@+id/page0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/page_now" /> <ImageView android:id="@+id/page1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:scaleType="matrix" android:src="@drawable/page" /> <ImageView android:id="@+id/page2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:scaleType="matrix" android:src="@drawable/page" /> <ImageView android:id="@+id/page3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:scaleType="matrix" android:src="@drawable/page" /> <ImageView android:id="@+id/page4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:scaleType="matrix" android:src="@drawable/page" /> <ImageView android:id="@+id/page5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:scaleType="matrix" android:src="@drawable/page" /> </LinearLayout> </FrameLayout>
二、接下来实现PagerView里每一页view的布局：
layout\whats0.xml
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:background="@drawable/page0" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="\n微信\n超过1亿人使用的手机应用" android:layout_alignParentTop="true" android:layout_marginTop="35dp" android:textSize="22sp" android:textColor="#fff" /> </RelativeLayout>
layout\whats1.xml
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:background="@drawable/page1" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="\n按住就能说话\n聊天是如此简单轻松" android:layout_alignParentTop="true" android:layout_marginTop="35dp" android:textSize="22sp" android:textColor="#fff" /> </RelativeLayout>
layout\whats2.xml
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:background="@drawable/page2" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="透过视频聊天\n你甚至可以和朋友们\n面对面沟通" android:layout_alignParentTop="true" android:layout_marginTop="35dp" android:textSize="22sp" android:textColor="#fff" /> </RelativeLayout>
layout\whats3.xml
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:background="@drawable/page3" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="摇一摇手机\n或者看看附近的人\n认识更多的朋友" android:layout_alignParentTop="true" android:layout_marginTop="35dp" android:textSize="22sp" android:textColor="#fff" /></RelativeLayout>
layout\whats4.xml
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:background="@drawable/page4" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="\n你还可以透过朋友圈\n和朋友们分享彼此的生活" android:layout_alignParentTop="true" android:layout_marginTop="35dp" android:textSize="22sp" android:textColor="#fff" /> </RelativeLayout>
layout\whats5.xml
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:background="@drawable/page5" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text=" \n \n微信，是一个生活方式" android:layout_alignParentTop="true" android:layout_marginTop="35dp" android:textSize="22sp" android:textColor="#fff" /> <Button android:id="@+id/startBtn" android:layout_width="120dp" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="120dp" android:text="开始" android:textSize="18sp" android:textColor="#fff" android:background="@drawable/state_btn_green" android:layout_gravity="center_vertical" /> </RelativeLayout>
三、java代码：
WhatsNew.java
package t.first;import java.util.ArrayList;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.Parcelable;import android.support.v4.view.PagerAdapter;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;public class WhatsNew extends Activity{public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.whatsnew); //初始化 final ViewPager viewPager = (ViewPager)findViewById(R.id.viewpager); final ImageView page0 = (ImageView)findViewById(R.id.page0); //下面的点 final ImageView page1 = (ImageView)findViewById(R.id.page1); final ImageView page2 = (ImageView)findViewById(R.id.page2); final ImageView page3 = (ImageView)findViewById(R.id.page3); final ImageView page4 = (ImageView)findViewById(R.id.page4); final ImageView page5 = (ImageView)findViewById(R.id.page5); //类似findViewById，把整个界面给获取出来 LayoutInflater mLi = LayoutInflater.from(this); View view0 = mLi.inflate(R.layout.whats0, null); View view1 = mLi.inflate(R.layout.whats1, null); View view2 = mLi.inflate(R.layout.whats2, null); View view3 = mLi.inflate(R.layout.whats3, null); View view4 = mLi.inflate(R.layout.whats4, null); View view5 = mLi.inflate(R.layout.whats5, null); //获取其他XML里的控件的方法 Button startBtn = (Button) view5.findViewById(R.id.startBtn); //封装数据 final ArrayList<View> views = new ArrayList<View>(); views.add(view0); views.add(view1); views.add(view2); views.add(view3); views.add(view4); views.add(view5); //定制 viewPager.setAdapter(new PagerAdapter() {@Overridepublic void startUpdate(View arg0) {// TODO 自动生成的方法存根}@Overridepublic Parcelable saveState() {// TODO 自动生成的方法存根return null;}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {// TODO 自动生成的方法存根}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO 自动生成的方法存根return arg0 == arg1;}@Overridepublic Object instantiateItem(View context, int position) {// TODO 自动生成的方法存根((ViewPager)context).addView(views.get(position));return views.get(position);}@Overridepublic int getCount() {// TODO 自动生成的方法存根return views.size();}@Overridepublic void finishUpdate(View arg0) {// TODO 自动生成的方法存根}@Overridepublic void destroyItem(View context, int position, Object arg2) {// TODO 自动生成的方法存根((ViewPager)context).removeView(views.get(position));}}); //设置监听器,更新下面的点的状态 viewPager.setOnPageChangeListener(new OnPageChangeListener() {public void onPageSelected(int which) {// TODO 自动生成的方法存根switch (which) {case 0:page0.setImageDrawable(getResources().getDrawable(R.drawable.page_now));page1.setImageDrawable(getResources().getDrawable(R.drawable.page));break;case 1:page1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));page0.setImageDrawable(getResources().getDrawable(R.drawable.page));page2.setImageDrawable(getResources().getDrawable(R.drawable.page));break;case 2:page2.setImageDrawable(getResources().getDrawable(R.drawable.page_now));page1.setImageDrawable(getResources().getDrawable(R.drawable.page));page3.setImageDrawable(getResources().getDrawable(R.drawable.page));break;case 3:page3.setImageDrawable(getResources().getDrawable(R.drawable.page_now));page4.setImageDrawable(getResources().getDrawable(R.drawable.page));page2.setImageDrawable(getResources().getDrawable(R.drawable.page));break;case 4:page4.setImageDrawable(getResources().getDrawable(R.drawable.page_now));page3.setImageDrawable(getResources().getDrawable(R.drawable.page));page5.setImageDrawable(getResources().getDrawable(R.drawable.page));break;case 5:page5.setImageDrawable(getResources().getDrawable(R.drawable.page_now));page4.setImageDrawable(getResources().getDrawable(R.drawable.page));break;}}public void onPageScrolled(int arg0, float arg1, int arg2) {// TODO 自动生成的方法存根}public void onPageScrollStateChanged(int arg0) {// TODO 自动生成的方法存根}}); //按钮监听器 startBtn.setOnClickListener(new OnClickListener() {public void onClick(View v) {// TODO 自动生成的方法存根Intent intent = new Intent(WhatsNew.this,WhatsDoor.class); //在第（六）节内容中实现该类startActivity(intent);WhatsNew.this.finish();}}); }}drawable\state_btn_green.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_enabled="false" android:drawable="@drawable/btn_style_one_disabled" /> <item android:state_pressed="true" android:drawable="@drawable/btn_style_one_pressed" /> <item android:state_focused="true" android:drawable="@drawable/btn_style_one_focused" /> <item android:drawable="@drawable/btn_style_one_normal" /> </selector>
五、在AndroidManifest.xml中实现以下语句：
<activity android:name=".WhatsNew" android:theme="@style/Fullscreen_Notitle_Fade"/> <!-- 此自定义主题样式在第（二）节内容中有详细介绍 -->
0 0
- Android之高仿微信“首次登录滑动界面”（五）
- Android之高仿微信“登录界面”（三）
- Android 之登录界面
- Android之登录界面
- 仿微信首次启动滑动界面效果
- 仿微信首次启动滑动界面效果
- 仿微信首次启动滑动界面效果
- Android之应用首次使用的欢迎界面实例
- Android判断是否首次登录
- Android客户端首次启动时的引导界面（viewpager）
- Android学习之界面篇（五）animateLayoutChanges
- React Native入门（五）之使用输入框TextInput，按钮Button搭建登录界面
- 登录界面（Android studio）
- 登录界面异常（Android）
- 登录界面 Android简单http get请求（含服务器端）五 iOS端（特别篇）
- android客户端首次进入轮播引导图（五）
- Android初探之QQ登录界面
- android实现首次开机滑动帮助
- 在泛型为Integer的ArrayList中存放一个String类型的对象。
- 全选，反选，清除
- ural 1750 Tree 2（树的直径 + 倍增）
- HDU4966
- NYOJ题目139我排第几个（康拓排序）
- Android之高仿微信“首次登录滑动界面”（五）
- HDU4966详解
- Android核心基础——S02E04_android下Junit
- 关于哲学家就餐问题 源代码(linux)
- 关于git远程仓库
- HDU4972
- 我很快乐哈哈哈哈
- A Head of Time
- ios开发(四)
