您的位置: 首页  >  文章  >  从零开始水安卓——高级UI组件3（ImageSwitcher TextSwitcher）

从零开始水安卓——高级UI组件3（ImageSwitcher TextSwitcher）

分类: 文章 • 2023-03-24 23:50:08

目录

 

ImageSwitcher 

概述

补充

实现

activity_main.xml

MainActivity

TextSwitcher 

activity_main.xml

MainActivity

ImageSwitcher 

概述

这是一个控制图片展示效果的控件，相当于imageview的选择器，可以实现诸多效果如“幻灯片切换效果”

当左右滑动的时候，ImageSwitcher控制两个子view（imageview）来回切换

 

此外，创建ImageSwitcher是通过工厂（ViewFactory）来实现的

补充

建议用真机调试...用鼠标来模拟滑动实在没有感觉...很僵硬...

实现

主要依靠代码来实现，所以布局非常简单，基本上啥也不用写，然后为了测试，准备几张图片，放在mipmap目录下

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</android.support.constraint.ConstraintLayout>

MainActivity

首先还是要绑定组件，

然后要实现接口

从零开始水安卓——高级UI组件3（ImageSwitcher TextSwitcher）

从零开始水安卓——高级UI组件3（ImageSwitcher TextSwitcher）

然后完成方法编写，new一个ImageView，并为它准备一个图片资源的int类型数组images，通过

setImageResource(images[0]) 设置图片

并定义一个int变量index作为下标。

即完了初步代码，如下：

package com.example.imageswitcher;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;

public class MainActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory {
    private ImageSwitcher imageSwitcher;
    private int[] images = {R.mipmap.a1,R.mipmap.a2,R.mipmap.a3,R.mipmap.a4,R.mipmap.a5};
    private int index;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageSwitcher = findViewById(R.id.imageSwitcher);
        imageSwitcher.setFactory(this);
    }

    @Override
    public View makeView() {
        ImageView iv = new ImageView(this);
        iv.setImageResource(images[0]);
        return iv;
    }
}

这样基本上就只是纯粹的显示了一张图片，要实现滑动切换，还需要

 View.OnTouchListener

重写其onTouch方法，即触屏事件

然后准备两个float变量，保存坐标参数

float startX = 0.0f;
float endX = 0.0f;
利用event.getX()获取左标，如果坐标参数相差一定的值，就让索引自增，同时还得判断索引是否到了边界，如果到了及时归零，所以代码引入了一段三目运算的表达式。索引自增的同时，使用
imageSwitcher.setImageResource(images[index])修改图片内容。

类似的，将上述过程取反即显示上一张的操作。（相差一定的值从startX-endX>a????endX-startX>a，然后索引自减）

最后不要忘记  imageSwitcher.setOnTouchListener(this);

即完成了这部分代码的修改。

package com.example.imageswitcher;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;

public class MainActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory , View.OnTouchListener {
    private ImageSwitcher imageSwitcher;
    private int[] images = {R.mipmap.a1,R.mipmap.a2,R.mipmap.a3,R.mipmap.a4,R.mipmap.a5};
    private int index;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageSwitcher = findViewById(R.id.imageSwitcher);
        imageSwitcher.setFactory(this);
        imageSwitcher.setOnTouchListener(this);
    }

    @Override
    public View makeView() {
        ImageView iv = new ImageView(this);
        iv.setImageResource(images[0]);
        return iv;
    }

    float startX = 0.0f;
    float endX = 0.0f;
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action =event.getAction();//获取当前事件动作
        if(action==MotionEvent.ACTION_DOWN){
            startX = event.getX();
            return true;
        }
        if (action==MotionEvent.ACTION_UP){
            endX = event.getX();
            if(startX-endX>20){
                index = index+1<images.length?++index:0;
            }else if(endX-startX>20){
                index = index-1<0?--index:images.length-1;
            }
            imageSwitcher.setImageResource(images[index]);
        }
        return false;
    }
}

 

效果的话不好展示...总是就是滑动切换图片....

然后Android还带一定的动画效果，可以简单的设置一下来使用它们，在????图示地方加上几句代码即可，就不再贴代码了...

当然动画效果挺多的，也不一定要这样配。

从零开始水安卓——高级UI组件3（ImageSwitcher TextSwitcher）

TextSwitcher 

有了前面的经验，这部分就不难理解了。只需要把imageView相关替换成Textview相关即可

下面直接开始代码:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextSwitcher
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/textSwitcher"></TextSwitcher>

</android.support.constraint.ConstraintLayout>

MainActivity

package com.example.text;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextSwitcher;
import android.widget.TextView;
import android.widget.ViewSwitcher;

public class MainActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory, View.OnTouchListener {
    private TextSwitcher textSwitcher;
    private String[]texts ={"你好","我好","大家好"};
    private int index;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textSwitcher = findViewById(R.id.textSwitcher);
        textSwitcher.setOnTouchListener(this);
        textSwitcher.setFactory(this);
    }

    @Override
    public View makeView() {
        TextView textView = new TextView(this);
        textView.setText(texts[index]);
        return textView;

    }

    float startX = 0.0f;
    float endX = 0.0f;
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action =event.getAction();//获取当前事件动作
        if(action==MotionEvent.ACTION_DOWN){
            startX = event.getX();
            return true;
        }
        if (action==MotionEvent.ACTION_UP){
            endX = event.getX();
            if(startX-endX>20){
                index = index+1<texts.length?++index:0;
                textSwitcher.setInAnimation(this,android.R.anim.fade_in);
                textSwitcher.setOutAnimation(this,android.R.anim.fade_out);
            }else if(endX-startX>20){
                index = index-1<=1?--index:texts.length-1;
                textSwitcher.setInAnimation(this,android.R.anim.fade_in);
                textSwitcher.setOutAnimation(this,android.R.anim.fade_out);
            }
            textSwitcher.setText(texts[index]);
        }
        return false;
    }
}

相关推荐