android 欢迎界面翻页效果,仿微信第一次登陆介绍翻页界面

本实例做的相对比较简单主要是对翻页控件的使用,有时候想要做一些功能是主要是先了解下是否有现成的控件可以使用,做起来比较简单不用费太大的劲去找别的资料,或者别的办法设计。有空多读读android API了解熟悉了做什么都比较容易。(注意:ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中加入“android-support-v4.jar” 如果sdk是4.0及以上的都包含了该包)本例步骤如下:

第一步:main.xml设计,其中ViewPager为多页显示控件,PagerTitleStrip用于显示当前页面的标题,下面的imagee是圆点展示当前页状态和总页数:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/whatsnew_viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" > <!--如果不需要显示什么标题的话可以去点这个控件这里是为了连接控件的作用所以添加上去的 -->
<android.support.v4.view.PagerTitleStrip
android:id="@+id/pagertitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@null"
android:textColor="#3399cc" />
</android.support.v4.view.ViewPager> <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" />
<ImageView
android:id="@+id/page6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:scaleType="matrix"
android:src="@drawable/page" />
</LinearLayout> </FrameLayout>

第二步:创建MyPagerAdapter 继承PagerAdapter这个适配器比较简单,如下:

import java.util.ArrayList;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
public class MyPagerAdapter extends PagerAdapter{
private ArrayList<View> views;
private ArrayList<String> titles;
public MyPagerAdapter(ArrayList<View> views,ArrayList<String> titles){
this.views = views;
this.titles = titles;
}
@Override
public int getCount() {
return this.views.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(views.get(position));
}
//标题, 如果不要标题可以去掉这里
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
//页面view
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(views.get(position));
return views.get(position);
}
}

第三步:编写MainActivity :

import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
public class MainActivity extends Activity {
//翻页控件
private ViewPager mViewPager;
private PagerTitleStrip mPagerTitleStrip;
//这5个是底部显示当前状态点imageView
private ImageView mPage0;
private ImageView mPage1;
private ImageView mPage2;
private ImageView mPage3;
private ImageView mPage4;
private ImageView mPage5;
private ImageView mPage6;
@Override
public void onCreate(Bundle savedInstanceState) {
//去掉标题栏全屏显示
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager)findViewById(R.id.whatsnew_viewpager);
mPagerTitleStrip = (PagerTitleStrip)findViewById(R.id.pagertitle); mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
mPage0 = (ImageView)findViewById(R.id.page0);
mPage1 = (ImageView)findViewById(R.id.page1);
mPage2 = (ImageView)findViewById(R.id.page2);
mPage3 = (ImageView)findViewById(R.id.page3);
mPage4 = (ImageView)findViewById(R.id.page4);
mPage5 = (ImageView)findViewById(R.id.page5);
mPage6 = (ImageView)findViewById(R.id.page6); /*
* 这里是每一页要显示的布局,根据应用需要和特点自由设计显示的内容
* 以及需要显示多少页等
*/
LayoutInflater mLi = LayoutInflater.from(this);
View view1 = mLi.inflate(R.layout.whats_news_gallery_one, null);
View view2 = mLi.inflate(R.layout.whats_news_gallery_two, null);
View view3 = mLi.inflate(R.layout.whats_news_gallery_three, null);
View view4 = mLi.inflate(R.layout.whats_news_gallery_four, null);
View view5 = mLi.inflate(R.layout.whats_news_gallery_five, null);
View view6 = mLi.inflate(R.layout.whats_news_gallery_six, null);
View view7 = mLi.inflate(R.layout.whats_news_gallery_seven, null);
/*
* 这里将每一页显示的view存放到ArrayList集合中
* 可以在ViewPager适配器中顺序调用展示
*/
final ArrayList<View> views = new ArrayList<View>();
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
views.add(view5);
views.add(view6);
views.add(view7); /*
* 每个页面的Title数据存放到ArrayList集合中
* 可以在ViewPager适配器中调用展示
*/
final ArrayList<String> titles = new ArrayList<String>();
titles.add("tab1");
titles.add("tab2");
titles.add("tab3");
titles.add("tab4");
titles.add("tab5");
titles.add("tab6");
titles.add("tab7"); //填充ViewPager的数据适配器
MyPagerAdapter mPagerAdapter = new MyPagerAdapter(views,titles);
mViewPager.setAdapter(mPagerAdapter);
} public class MyOnPageChangeListener implements OnPageChangeListener { public void onPageSelected(int page) {
//翻页时当前page,改变当前状态园点图片
switch (page) {
case 0:
mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 1:
mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page));
mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 2:
mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));
mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 3:
mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page));
mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 4:
mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));
mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 5:
mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page));
mPage6.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
case 6:
mPage6.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page));
break;
}
}
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
public void onPageScrollStateChanged(int arg0) {
}
} }

第四步;运行效果如图底部是标题栏:

去掉底部是标题栏如下效果:

【转】android 欢迎界面翻页成效,仿微信第一次登陆介绍翻页界面的更多相关文章

  1. Android特效专辑(九)——仿微信雷达搜索好友特效,逻辑清晰实现简单

    Android特效专辑(九)--仿微信雷达搜索好友特效,逻辑清晰实现简单 不知不觉这个春节也已经过完了,遗憾家里没网,没能及时给大家送上祝福,今天回到深圳,明天就要上班了,小伙伴们是不是和我一样呢?今 ...

  2. Android控件-Fragment+ViewPager(高仿微信界面)

    什么是Fragment? Fragment是Android3.0后新增的概念,Fragment名为碎片,不过却和Activity十分相似,具有自己的生命周期,它是用来描述一些行为或一部分用户界面在一个 ...

  3. Android ActionBar应用实战,高仿微信主界面的设计

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...

  4. 【Android UI设计与开发】第03期:引导界面(三)仿微信引导界面以及动画效果

    基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧 ...

  5. android新闻App源码、仿微信源码、地图音乐源码等

    Android精选源码 一款实用的休闲类App,新闻视频和技术应有尽有. android实现交互式K线图表源码 android新闻客户端和服务器源码 android MatetialDesign设计 ...

  6. Fragment+ViewPager实现仿微信点击和滑动切换界面

    这是在我写的新闻App中实现的界面切换 贴出切换界面的主要代码: xml代码: <span style="font-size:14px;"> <android.s ...

  7. Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...

  8. 【Android开发】【布局】 仿微信UI

    Demo地址

  9. [Android] Android 手机下 仿 微信 客户端 界面 -- 微聊

    Android 手机下 仿 微信 客户端 界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现 列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...

随机推荐

  1. Cocos2dx 3.0 交流篇

    创建项目: For(MAC) Runtime Requirements Android 2.3 or newer iOS 5.0 or newer OS X 10.7 or newer Windows ...

  2. SpringAccess数据库(oracle)构造

    陈科朝:http://blog.csdn.net/u013474104/article/details/44279309 ================ 1.spring 对数据库訪问的支持 当我们 ...

  3. 用Owin Host实现脱离IIS跑Web API单元测试

    开发笔记:用Owin Host实现脱离IIS跑Web API单元测试   今天在开发一个ASP.NET Web API项目写单元测试时,实在无法忍受之前的笨方法,决定改过自新. 之前Web API的单 ...

  4. Cordova 使用经验

    1. 需要下载ant,ant需要的文件: build.xml <?xml version="1.0" ?> <project name ="antPro ...

  5. Jquery 插件初学习

    参考文章:插件开发精品教程,让你的jQuery提升一个台阶 刚刚学了一下jquery的插件插件开发,写个demo记录.练习一下.毕竟,输出才是最好的学习. 这个也不过是最基础的一个插件写法,只是,自己 ...

  6. 使用JS的FormData对象

    利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...

  7. oracle_SQL 实验查询及删除重复记录 依据条件 (row)

    除数据库表中的重复记录 根据条件 ① 创建表准备数据 创建表 tab_test -- Create table create table TAB_TEST ( ID NUMBER, NAME NVAR ...

  8. 朴素UNIX之-打开历史

    它可以毫不夸张地说,,UNIX模型是现代操作系统的原型.无论是真实的UNIX让我们大系列AIX,Solaris,HP-UX,FreeBSD,NetBSD,...或类别UNIX实例Linux...或基于 ...

  9. Notification(一个)——使用演示样本的基础知识

    main.xml如下面: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  10. ThinkPHP神秘应用架构扩展

    ThinkPHP应用模式提供了机会,改变核心框架.它可以让你的应用程序,以适应环境和其他许多不同的需求. 每一个应用模式都有自己的模式定义文件,相对与ThinkPHP3.1版本号.ThinkPHP3. ...