`
104zz
  • 浏览: 1508422 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

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

阅读更多

 

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

 

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




 

 

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


  • 大小: 158.3 KB
  • 大小: 185.9 KB
  • 大小: 191.7 KB
分享到:
评论
6 楼 qianzhenxin01 2015-01-06  
很好。谢谢分享!
5 楼 wyyl1 2014-08-28  
很好,相当感谢!
4 楼 www6wzk 2014-06-21  
  
3 楼 tangbin0213 2014-02-17  
||||||||||||||||||||||||||||
|||||||||||||||||||||||||||
|||||||||||||||||||||||||||
||||||||||||||||||||||||||
||||||||||||||||||||||||||
|||||||||||||||||||||||||
|||||||||||||||||||||||||
||||||||||||||||||||||||
||||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
||||||||||||||||||||||
||||||||||||||||||||||
|||||||||||||||||||||
|||||||||||||||||||||
||||||||||||||||||||
||||||||||||||||||||
|||||||||||||||||||
|||||||||||||||||||
||||||||||||||||||
||||||||||||||||||
|||||||||||||||||
|||||||||||||||||
||||||||||||||||
||||||||||||||||
|||||||||||||||
|||||||||||||||
||||||||||||||
||||||||||||||
|||||||||||||
|||||||||||||
||||||||||||
||||||||||||
|||||||||||
|||||||||||
||||||||||
||||||||||
|||||||||
|||||||||
||||||||
||||||||
|||||||
|||||||
||||||
||||||
|||||
|||||
||||
||||
|||
|||
||
||
|
|
2 楼 ergouge 2013-03-23  

借鉴。。。
1 楼 Nick1211 2012-12-11  

相关推荐

    android 实现仿微信通讯录

    android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android 实现仿微信通讯录android ...

    Android 仿微信聊天界面

    在Android开发中,仿微信聊天界面是一个常见的需求,它涉及到许多关键技术和组件的集成。这个项目可能包括消息列表的展示、输入框设计、表情键盘、发送按钮、未读消息提示等多个方面。以下是一些相关的重要知识点: ...

    android高仿微信聊天界面

    在Android平台上,构建一个高度仿真的微信聊天界面是一项复杂而精细的工作,涉及到多个技术层面和设计元素。这个项目包括了用户登录、摇一摇功能以及信息发送等核心交互部分,充分体现了Android应用开发中的UI设计与...

    基于Android Studio开发的安卓的高仿微信

    在本文中,我们将深入探讨如何基于Android Studio开发一个高仿微信的应用程序。Android Studio是Google提供的官方集成开发环境(IDE),特别适用于Android应用的开发。它提供了丰富的工具集,包括代码编辑器、调试器...

    isweixin_android 界面设计潮流:仿微信5.2界面源码.rar

    【标题】"isweixin_android 界面设计潮流:仿微信5.2界面源码" 涉及的是Android平台上的一款界面设计实例,它模仿了微信5.2版本的用户界面,旨在帮助开发者理解和实现类似微信的交互体验。在Android应用开发中,界面...

    android开发仿微信界面实现

    本项目中,我们主要利用ViewPager这一组件来实现类似微信聊天界面的滑动切换效果,同时结合其他Android UI元素,如Fragment、Adapter等,构建出一个功能丰富的应用界面。 首先,`ViewPager`是Android SDK提供的一种...

    android ScrollView 阻尼回弹效果 仿微信

    而“阻尼回弹”或“橡皮筋”效果则是指在ScrollView滚动到边界时,手指松开后,内容会像橡皮筋一样有一种自然的反弹效果,就像微信朋友圈那样,给人一种更加真实的交互体验。 实现这种效果的关键在于自定义一个...

    仿微信 Android Studio

    【标题】"仿微信 Android Studio" 是一个专为Android开发者设计的项目,旨在帮助他们学习如何构建类似微信的用户界面。这个项目不仅关注外观的模仿,更注重代码的组织结构和可读性,使得初学者能够理解并学习到...

    Android应用源码之高仿微信.zip

    "Android应用源码之高仿微信"是一个关于Android开发的项目,旨在模仿微信这款流行的社交应用程序的功能和界面。这个标题表明我们将会深入到Android应用的开发细节中,学习如何构建一个类似微信的用户界面和交互逻辑...

    在androidstudio上的基于listview的仿微信界面

    在androidstudio上的基于listview的仿微信界面 使用了java和xml语言 内容只有一个列表(包含头像和名称),然后点进去有对话框(包含发送按钮 输入框)不连服务器 可作为开发聊天软件的基本框架

    android studio仿微信主界面

    在Android开发领域,构建类似微信主界面的应用是一个常见的需求,这涉及到用户界面设计、导航以及交互体验等多个方面。本文将详细讲解如何使用Android Studio来实现这一目标,主要聚焦于ViewPager和Fragment的结合...

    Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)

    Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)

    Android 完美高仿的微信源码.rar

    此外,还会涉及到Drawable、颜色主题、动画效果等元素,这些都是实现微信风格界面不可或缺的部分。图片资源如readme.md和一系列的png图片,可能是用于展示应用界面设计和功能的截图,帮助开发者更好地理解源码实现。...

    Android--仿微信聊天界面

    在Android平台上,构建一个仿微信聊天界面涉及到许多关键的技术点,包括UI设计、消息处理、数据存储、网络通信等。以下是对这些知识点的详细说明: 1. **UI设计**: - 使用`RecyclerView`:微信聊天界面的核心是...

    仿微信界面Android源码

    对于微信的滑动返回(Swipe Back)效果,开发者需要利用Android的GestureDetector和Scroller类,或者第三方库如SwipeBackLayout,来监听用户的滑动手势并平滑地执行返回操作。 在仿微信朋友圈功能时,涉及到的内容...

    Android安卓仿微信最新版源码 微信APP源码.zip

    这篇详尽的文章将深入探讨基于Android的仿微信应用的源码结构、主要功能模块和关键技术。首先,我们从标题和描述中可以了解到,这是一份针对Android平台开发的微信应用程序的源代码,它旨在模仿微信的最新功能和用户...

    android 仿微信界面

    在Android开发中,仿微信界面是一项常见的需求,它涉及到用户界面设计、动画效果以及功能实现等多个方面。微信作为一款社交应用,其用户界面简洁而高效,具有很高的用户体验标准。下面,我们将深入探讨如何在Android...

    html5仿微信聊天界面

    HTML5仿微信聊天界面是一种利用现代网页技术,如HTML5、CSS3以及JavaScript,来创建类似于微信客户端的聊天用户体验的实践。这个项目旨在提供一个基于Web的交互式平台,让用户在浏览器中体验到与微信类似的聊天功能...

    android 仿微信语音聊天demo

    【Android 微信语音聊天Demo】是一个典型的移动应用开发示例,主要展示了如何在Android平台上构建类似微信的语音聊天功能。这个Demo包含了按钮状态切换、语音录制、本地存储、回放和加载等一系列关键操作,是Android...

    android 仿微信扫一扫样式

    在Android开发中,"仿微信扫一扫样式"是一个常见的需求,主要涉及到二维码扫描功能的实现以及界面风格的定制。本文将详细讲解如何实现这样一个功能,并覆盖到相关的关键知识点。 首先,我们要明白二维码扫描的核心...

Global site tag (gtag.js) - Google Analytics