很赞的引导界面效果Android控件ImageSwitcher实现

本文实例为大家分享了Android控件ImageSwitcher实现引导界面的代码,供大家参考,具体内容如下

效果图:

布局代码:

<?xml version="1.0" encoding="UTF-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">

  <ImageSwitcher
    android:id="@+id/imageSwitcher"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
  </ImageSwitcher>

  <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
      android:id="@+id/ll_view"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_marginBottom="30dp"
      android:gravity="center_horizontal"
      android:orientation="horizontal">
    </LinearLayout>
  </RelativeLayout>
</FrameLayout>

页面代码:

public class ImageSwitcherActivity extends Activity implements ViewSwitcher.ViewFactory, View.OnTouchListener {
  private int[] imgIds;//图片id数组
  private int currentPosition;//当前选中的图片id序号
  private ImageSwitcher mImageSwitcher;//ImagaSwitcher 的引用

  private float downX;//按下点的X坐标
  private ImageView[] tips;//点点数组
  private LinearLayout linearLayout;//装载点点的容器

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_switcher);

    imgIds = new int[]{R.drawable.bg, R.drawable.c2, R.drawable.c3, R.drawable.c4, R.drawable.c5, R.drawable.c6, R.drawable.c7, R.drawable.c8, R.drawable.c9};

    mImageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);//实例化ImageSwitcher
    mImageSwitcher.setFactory(this); //设置Factory
    mImageSwitcher.setOnTouchListener(this);//设置OnTouchListener,我们通过Touch事件来切换图片

    linearLayout = (LinearLayout) findViewById(R.id.ll_view);//指示器布局
    tips = new ImageView[imgIds.length];
    for (int i = 0; i < imgIds.length; i++) {
      ImageView mImageView = new ImageView(this);
      tips[i] = mImageView;
      LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
      layoutParams.rightMargin = 3;
      layoutParams.leftMargin = 3;

      mImageView.setBackgroundResource(R.drawable.page_indicator_unfocused);
      linearLayout.addView(mImageView, layoutParams);
    }

    //上一个界面传过来的位置
    currentPosition = getIntent().getIntExtra("position", 0);
    mImageSwitcher.setImageResource(imgIds[currentPosition]);

    setImageBackground(currentPosition);

  }

  //设置选中的tip的背景
  private void setImageBackground(int selectItems) {
    for (int i = 0; i < tips.length; i++) {
      if (i == selectItems) {
        tips[i].setBackgroundResource(R.drawable.page_indicator_focused);
      } else {
        tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
      }
    }
  }

  @Override
  public View makeView() {
    final ImageView i = new ImageView(this);
    i.setBackgroundColor(0xff000000);
    i.setScaleType(ImageView.ScaleType.CENTER_CROP);
    i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
    return i;
  }

  @Override
  public boolean onTouch(View v, MotionEvent event) {
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN: {
        downX = event.getX();//手指按下的X坐标
        break;
      }
      case MotionEvent.ACTION_UP: {
        float lastX = event.getX();
        //抬起的时候的X坐标大于按下的时候就显示上一张图片
        if (lastX > downX) {
          if (currentPosition > 0) {
            //设置动画
            mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.left_in));
            mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_out));
            currentPosition--;
            mImageSwitcher.setImageResource(imgIds[currentPosition % imgIds.length]);
            setImageBackground(currentPosition);
          } else {
            Toast.makeText(getApplication(), "已经是第一张", Toast.LENGTH_SHORT).show();
          }
        }

        if (lastX < downX) {
          if (currentPosition < imgIds.length - 1) {
            mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_in));
            mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.lift_out));
            currentPosition++;
            mImageSwitcher.setImageResource(imgIds[currentPosition]);
            setImageBackground(currentPosition);
          } else {
            Toast.makeText(getApplication(), "到了最后一张", Toast.LENGTH_SHORT).show();
          }
        }
      }

      break;
    }

    return true;
  }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android引导页面的简单实现

    第一次进入应用的时候,都会有一个引导页面,引导页面的实现起来也很简单,实现的方式也有很多,下面是自己写的一个引导页面的效果,大致的实现思路为: 最外层是一个FragmentActivity,里面包含4个fragment,在fragment中给ViewPager开一个循环,这样实现了图片播,其实效果就是在FragmentActivity中几个fragment滑动切换, fragment中ViewPager无限轮播和滑动切换: 下面为代码实现: public class MainActivity e

  • Android 新手引导蒙层效果实现代码示例

    先上效果图: 这个效果一开始我是想直接让UI给个切图,后来发现这样不行,适配很差,达不到效果.所以就自己动手写代码,其实思路也很简单:在这个布局的父布局上面再手动添加一个view(通常LinearLayout比较方便),然后把这个linearlayout的背景设置成#88000000,之后就是给这个linearlayout动态增加子view,初步效果就能达到. 下面直接上代码: public void showGuideView() { View view = getWindow().getDe

  • Android开发实战之漂亮的ViewPager引导页

    目前很多软件安装时都会出现引导页面,用户体验很好. 下面就来DIY下: 因为视频上传很麻烦,所以截图了. 首先看看效果图: 点击小点可自由切换,滑动也可以自由切换,最后一个导航页添加了点击跳转. 开始实现引导页: 一.采集需要的图片放入drawable文件里 二.初始化每个导航页的视图 import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.suppo

  • Android应用自动跳转到应用市场详情页面的方法

    前言 众所周知在Android应用开发过程中,可能会有需求,比如:推广时跳转到应用市场下载应用,跳转到应用市场给自己的应用打分,跳转到应用市场更新自己的应用. 那如何跳转到应用市场呢? 可能跳转的方法大家都是知道的,方法如下: public static void goToMarket(Context context, String packageName) { Uri uri = Uri.parse("market://details?id=" + packageName); Int

  • Android绘制炫酷引导界面

    一个超炫的引导界面,分享给大家 代码: MainActivity.java package com.bzu.gxs.webview1; import android.app.Activity; import android.os.Build; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.KeyEvent; import android.view.Men

  • ViewPager实现带引导小圆点与自动跳转的引导界面

    实现引导小圆点的方法其实很简单,可直接在布局上放置与引导页面等量的ImageView,然后在切换页面的时候更改图片资源就好了.这里顺便提一下,有些APP是干脆在制作引导页面图片的时候加上引导小圆点,这种方式显然最简单不过了,但是既然是附在图片上的,在切换的时候也是随着图片滑动的,显然看起来效果并不是很好,甚至在我们需要加入小圆点的切换动画时,那就更不能这么去做了. 首先我们先来看看实现效果 这里我们的小圆点图片资源是采用shape绘制的,这里我弄的很随便,所以很粗糙,如果觉得不是很美观那就自行修

  • android实现App活动定时自动跳转效果

    App的小功能点,很简单几十行代码就可以实现 主页面代码 package com.buildingbuilding; import android.content.Intent; import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.WindowManag

  • Android启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果. 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0" enco

  • android 引导界面的实现方法

    复制代码 代码如下: /** * 实现 * @author dujinyang * */ 顺序是: OneAcitivity  -->MainActivity -> TwoActivity 然后第2次进去就是:OneActivity -> TwoActivity 代码里都有注释的了,这里就不多说了.OneActivity的代码如下: [java] 复制代码 代码如下: package cn.djy.activity; import android.app.Activity; import

  • 很赞的引导界面效果Android控件ImageSwitcher实现

    本文实例为大家分享了Android控件ImageSwitcher实现引导界面的代码,供大家参考,具体内容如下 效果图: 布局代码: <?xml version="1.0" encoding="UTF-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent&

  • Android控件ImageSwitcher实现左右图片切换功能

    ImageSwitcher类是ViewSwitcher类的子类,它实现的效果是在完成ImageView的切换并且带有动画效果.要使用这个类需要以下两个步骤: 1)为ImageSwitcher类提供一个ViewFactory,该ViewFactory生成的View组件必须是ImageView. 2)需要切换的时候,只需要嗲用ImageSwitcher的setImageDrawable().setImageResource().setImageURL()方法即可实现切换. activity_main

  • Android利用ViewPager实现用户引导界面效果的方法

    本文实例讲述了Android利用ViewPager实现用户引导界面效果.分享给大家供大家参考,具体如下: 我相信有很多朋友在装完软件首次打开时,有很多软件都有一个软件功能介绍, 例如刚装完微信打开它,有很多介绍微信功能的图片,并且在屏幕下方有很多小圆点提示你当前图片的位置. 今天我就来实现这么个功能 所实现的功能: 1.可以左右滑动功能图片. 2.图片的索引 看出当前图片所在的位置. 3.可循环滑动. 4.图片的索引带有动画效果. 本次学习主要是利用ViewPager实现用户引导界面 在这里,我

  • Android控件RecyclerView实现混排效果仿网易云音乐

    前言 最近在使用网易云音乐的时候,看到如下图的排版效果图,自己也想实现一个 这里采用网上用法最多的方式,而且是比较简单的方式实现的,想要做项目的同学也可以快速入手搞定首页界面,可以在最快的时间内模仿出来,且效果达到90%以上的相似 效果演示 至于图片的加载你们可以根据网上的Api获取相应的图片加载到对应的位置,这里只是采用本地图片来演示 实现分析 这里是采用RecyclerView的GridLayoutManager的一个SpanSize这么一个东西,从下图很容易知道其意思 项目结构 项目结构可

  • Android控件之使用ListView实现时间轴效果

     实现思路: 该View是通过ListView实现的,通过实体两个字段内容content和时间time来展示每个ListItem 时间轴是使用上面一条线(20dp)和中间一个圆(15dp)和下面一条线(40dp)组装成的 在ListView中,设置其分割线为空,并且没有点击效果 效果图: 步骤一:使用xml画出一个灰色的圆点(time_cycle.xml) <?xml version="1.0" encoding="utf-8"?> <shape

  • Android实现在列表List中显示半透明小窗体效果的控件用法详解

    本文实例讲述了Android实现在列表List中显示半透明小窗体效果的控件用法.分享给大家供大家参考,具体如下: Android 在列表List中显示半透明小窗体效果的控件,多的不多直接上代码,要说的都在注释里了: import com.hiapk.market.R; import android.content.Context; import android.graphics.PixelFormat; import android.os.Handler; import android.view

  • android控件实现单击拖动效果

    本文实例为大家分享了android控件实现单击拖动效果的具体代码,供大家参考,具体内容如下 分析 setOnClickListener setOnClickListener 可以接收控件的单击动作,无返回值 要想拖动控件,就要利用 setOnTouchListener 自己定义了 setOnTouchListener 通过按下时的坐标和移动时的坐标之间的差值,来计算移动的距离,然后更改控件的位置以达到拖动的目的 因 Touch 事件执行完成后如果返回false则会继续执行单击事件,不是我们想要的

  • android控件Banner实现简单轮播图效果

    本文实例为大家分享了android控件Banner实现简单轮播图效果的具体代码,供大家参考,具体内容如下 实现这个轮播图是在Fragment里实现的,所以要想实现,首先要创建Fragment 首先是布局文件中的展示 <com.youth.banner.Banner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="500dp"

  • 详解Android 裸眼3D效果View控件

    描述:这是一个裸眼3D效果的控件View. Tips:本项目代码部分逻辑参考于其他文章(自如的3D裸眼实现),众人拾柴火焰高,希望大家能多多补充. 项目代码:https://gitee.com/jiugeishere/uidesign 控件效果如下: 实现功能: 实现三层图片叠加效果(裸眼3D效果) 可设置每层图片移动速率 可设置每层图片移动的限制度数 可直接设置图片或引入图片 设计核心: 主要的设计核心是依赖于传感器对手机晃动的监听(重力感应监听器),对每层图片进行不同的移动,实现仿3D效果.

  • Android 控件设置阴影效果

    本文主要记录Android控件设置阴影 给控件设置阴影,会使得界面元素更好看一写,google 给我们提供了一个现成的控CardView,可以将CardView看做是FrameLayout在自身之上添加了圆角和阴影效果 本文是使用给控件设置背景实现阴影 在res/drawable 下新建一个 Drawable Resource File 使用 layer-list 图层 就是说可以多个图层一层一层盖上去 新建一个渐变的图层 item作为背景图层,主要是 gradient,shape是用来定义形状

随机推荐