目录
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
首先还是要绑定组件,
然后要实现接口
然后完成方法编写,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还带一定的动画效果,可以简单的设置一下来使用它们,在👇图示地方加上几句代码即可,就不再贴代码了...
当然动画效果挺多的,也不一定要这样配。
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;
}
}