Android ViewPager 打造炫酷欢迎页

原创 2016年05月31日 22:17:47

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包。至此,一个热气腾腾的欢迎页就完成了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

android viewpager教您打造炫酷的(从左到右,从上到下)引导页 随便玩!

最近看到旅游攻略这款app的引导页,从下往上滑动,顺便结合动画。让我忍不住想来模仿一下这个比较炫酷的效果。首先在我脑海第一个想到的是viewpager,因为我们经常用viewpager来做左右滑动的效...

android viewpager tab indicator炫酷的Tab动画效果

首先看看效果图:     源码访问:GitHub地址

Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/44098729,本文出自:【张鸿洋的博客】1、概述本篇博客的产生呢,是因为,群里的...

Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/44098729,本文出自:【张鸿洋的博客】 1、概述 本篇博客的产生呢...

Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/44098729,本文出自:【张鸿洋的博客】 1、概述 本篇博客的产生呢,是因为...

Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器 .

[+] 概述效果图 简单使用结合ViewPager使用 原理实现 自定义属性和获取onMeasureonDraw 测试 简单测试结合ViewPager 转载请标明...

Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器

1、概述 本篇博客的产生呢,是因为,群里的哥们暖暖给我发了个效果图,然后问我该如何实现顶部ViewPager指示器的字体变色,该效果图是这样的: 大概是今天头条的app,神奇的...

viewpager打造炫酷的动画效果,做出不一样的引导页

就算Google从很早开始就自带了设置引导页动画的接口,但是就我目前看来市面上使用引导页动画的还是很少的,也不知道是为什么,一想到Material Design的使用率也这么少表示很心塞。  首先来看...

android viewPager实现引导页

  • 2017-09-12 18:15
  • 19.34MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)