【转】android 欢迎界面翻页成效，仿微信第一次登陆介绍翻页界面

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 欢迎界面翻页成效，仿微信第一次登陆介绍翻页界面

时间： 2024-12-25 18:24:23

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

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

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Andr

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

什么是Fragment? Fragment是Android3.0后新增的概念,Fragment名为碎片,不过却和Activity十分相似,具有自己的生命周期,它是用来描述一些行为或一部分用户界面在一个Activity中,我们可以合并多个Fragment在一个单独的activity中建立多个UI面板,或者重用Fragment在多个activity中. 关于Fragment的生命周期,由于Fragment需要依赖Activity,也就是说当一个Activity的生命周期结束之后,那么Fragment

设置引导页（第一次登陆进入引导页）

#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window; @end #import "AppDelegate.h" #import "GuideViewController.h" #import "RootViewControl

iOS中ScrollView(滚屏,引导界面,和判段是否是第一次登陆)

#import "RootViewController.h" #import "SecondViewController.h" #define kScreenWidth [UIScreen mainScreen].bounds.size.width #define kScreenHeight [UIScreen mainScreen].bounds.size.height #define kImageCount 6 #define kImageName @"

Android高仿微信图片选择上传工具

源码托管地址:https://github.com/SleepyzzZ/photo-selector 话不多说,先上效果图(高仿微信图片选择器): 图片选择界面: 图片预览界面: 批量上传图片: 实现的功能介绍: 1.图片异步加载,使用Glide开源库实现加载; 2.图片的预览界面,支持左右滑动,双击放大浏览; 3.图片批量上传,使用OkHttp来实现与Servlet服务器的通信; 使用方法(Android Studio): 新建工程,File->New->Import Module导入pho

Android自己定义控件实战——仿多看阅读平移翻页

转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38728119 之前自己做的一个APP须要用到翻页阅读,网上看过立体翻页效果,只是bug太多了还不兼容.看了一下多看阅读翻页是採用平移翻页的,于是就仿写了一个平移翻页的控件.效果例如以下: 在翻页时页面右边缘绘制了阴影.效果还不错.要实现这样的平移翻页控件并不难,仅仅须要定义一个布局管理页面就能够了. 详细实现上有下面难点: 1.循环翻页,页面的反复利用. 2.在翻页时过滤掉

Android ActionBar仿微信界面

ActionBar仿微信界面 1.学习了别人的两篇关于ActionBar博客,在结合别人的文章来仿造一下微信的界面: 思路如下:1).利用ActionBar生成界面的头部,在用ActionBar的ActionProvider时候要注意引入的包一定是android.view.ActionProvider,不能是android.support.v4.view.ActionProvider 2),切换的Title可以参考之前之前一篇文章利用RadioGroup来做,这里是利用一个开源的项目PagerS

Android利用ViewPager仿微信主界面-android学习之旅(78)

首先是介绍ViewPager这个控件 ,这个控件需要pagerAdapter作为容器来提供数据,同时pagerAdapter的数据源是View数组 效果图如下 部分代码如下,实现如下的方法 mPagerAdapter = new PagerAdapter(){ @Override public int getCount() { return mViews.size(); } @Override public boolean isViewFromObject(View view, Object o

Android仿微信语音聊天界面

有段时间没有看视频了,昨天晚上抽了点空时间,又看了下鸿洋大神的视频教程,又抽时间写了个学习记录.代码和老师讲的基本一样,网上也有很多相同的博客.我只是在AndroidStudio环境下写的. --主界面代码-- public class MainActivity extends Activity { private ListView mListView; private ArrayAdapter<Recorder> mAdapter; private List<Recorder>