由于公司做的是商城类的app，有很多样式及功能都是借鉴的淘宝。近期，产品要求做一个类似淘宝一样的两个text标签来回的滚动，在网上也查阅了很多的资料，总感觉要么是比较的复杂化，要么就是达不到自己想要的效果，所以就自己动手码代码。
先上效果图：
模拟器的运行效果较差，再加上gif的录制，整体看起来不是很流畅，真机上跑起来比较流畅。
技术要点：
1 两套布局来回进行平移动画。
2 两套布局的隐藏可见的控制。
3 数据显示的逻辑处理。
先看xml的布局：
<?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="60dp" android:background="#1344ff" android:gravity="center_vertical" > <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_toRightOf="@+id/iv_1" > <RelativeLayout android:id="@+id/rela_move" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/tv_1_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/background" android:paddingBottom="4dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:paddingTop="4dp" android:text="热议" /> <TextView android:id="@+id/tv_1_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/tv_1_1" android:paddingBottom="4dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:paddingTop="4dp" android:text="疤痕的假发片接文件夹我看挺好" /> <TextView android:id="@+id/tv_2_1" android:layout_below="@+id/tv_1_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/background" android:paddingBottom="4dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:paddingTop="4dp" android:text="热议" /> <TextView android:id="@+id/tv_2_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/tv_1_2" android:layout_toRightOf="@+id/tv_2_1" android:paddingBottom="4dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:paddingTop="4dp" android:text="疤痕的假发片接文件夹我看挺好" /> </RelativeLayout> <RelativeLayout android:id="@+id/rela_move2" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="invisible" > <TextView android:id="@+id/tv2_1_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/background" android:paddingBottom="4dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:paddingTop="4dp" android:text="热议222" /> <TextView android:id="@+id/tv2_1_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/tv2_1_1" android:paddingBottom="4dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:paddingTop="4dp" android:text="疤痕的假发片接文件夹我看挺好" /> <TextView android:id="@+id/tv2_2_1" android:layout_below="@+id/tv2_1_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/background" android:paddingBottom="4dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:paddingTop="4dp" android:text="热议222" /> <TextView android:id="@+id/tv2_2_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/tv2_1_2" android:layout_toRightOf="@+id/tv2_2_1" android:paddingBottom="4dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:paddingTop="4dp" android:text="疤痕的假发片接文件夹我看挺好" /> </RelativeLayout> </FrameLayout> <ImageView android:id="@+id/iv_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/ic_launcher" /></RelativeLayout> 布局没有什么好说的，就是一个Framelayout包含两个相对的布局，一个可见，一个不可见。UI大家可以自己定制。
下面看代码：
package com.demo.xsl.text;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.view.View;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.TranslateAnimation;import android.widget.RelativeLayout;import android.widget.TextView;public class VerticalScrollTextActivity extends Activity { VerticalScrollTextView mSampleView; VerticalScrollTextView mSampleView2; PRivate Handler handler; private int count = 1; List<String> tittleList = new ArrayList<String>(); List<String> contentList = new ArrayList<String>(); @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //世纪情况的数据模拟 数据可能为单数 也可能为双数 tittleList.add("热议"); tittleList.add("女人"); tittleList.add("手机");// tittleList.add("哇哈哈");// tittleList.add("苹果");// tittleList.add("橘子"); contentList.add("热议 鸡年大吉"); contentList.add("女人 鸡年大吉"); contentList.add("手机 鸡年大吉");// contentList.add("哇哈哈 还是比较好喝的");// contentList.add("苹果很甜知道不知道");// contentList.add("橘子哈是有点酸"); handler = new Handler(); //两套布局 final RelativeLayout rela_move = (RelativeLayout) findViewById(R.id.rela_move); final RelativeLayout rela_move2 = (RelativeLayout) findViewById(R.id.rela_move2); final TextView tv_1_1 = (TextView) findViewById(R.id.tv_1_1); final TextView tv_1_2 = (TextView) findViewById(R.id.tv_1_2); final TextView tv_2_1 = (TextView) findViewById(R.id.tv_2_1); final TextView tv_2_2 = (TextView) findViewById(R.id.tv_2_2); final TextView tv2_1_1 = (TextView) findViewById(R.id.tv2_1_1); final TextView tv2_1_2 = (TextView) findViewById(R.id.tv2_1_2); final TextView tv2_2_1 = (TextView) findViewById(R.id.tv2_2_1); final TextView tv2_2_2 = (TextView) findViewById(R.id.tv2_2_2); //数据源的初始化的设置 tv_1_1.setText(tittleList.get(0)); tv_1_2.setText(contentList.get(0)); tv_2_1.setText(tittleList.get(1)); tv_2_2.setText(contentList.get(1)); //进入动画 具体的平移高度大家自己可设置 我只是为了方便 随意设置的值 final Animation translateAnimation2 = new TranslateAnimation(1.0f, 1.0f, 240.0f, 1.0f); translateAnimation2.setDuration(600); // 出去动画 具体的平移高度大家自己可设置 我只是为了方便 随意设置的值 final Animation translateAnimation = new TranslateAnimation(1.0f, 1.0f, 1.0f, -200.0f); // 设置动画时间 translateAnimation.setDuration(600); rela_move.startAnimation(translateAnimation); translateAnimation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { count++; if (tittleList.size() % 2 == 0) { //数据源为双数的情况 int number = (2 * count) % tittleList.size(); //主要是布局二的值改变 让布局一更随布局二的值改变 if (number == 0) { tv2_1_1.setText(tittleList.get(tittleList.size() - 2)); tv2_1_2.setText(contentList.get(tittleList.size() - 2)); tv2_2_1.setText(tittleList.get(tittleList.size() - 1)); tv2_2_2.setText(contentList.get(tittleList.size() - 1)); } else { tv2_1_1.setText(tittleList.get(number - 2)); tv2_1_2.setText(contentList.get(number - 2)); tv2_2_1.setText(tittleList.get(number - 1)); tv2_2_2.setText(contentList.get(number - 1)); } }else { //数据源为单数的情况 int number = (2 * count) % tittleList.size(); if (number == 0) { tv2_1_1.setText(tittleList.get(tittleList.size() - 2)); tv2_1_2.setText(contentList.get(tittleList.size() - 2)); tv2_2_1.setText(tittleList.get(tittleList.size() - 1)); tv2_2_2.setText(contentList.get(tittleList.size() - 1)); }else if (number == 1) { tv2_1_1.setText(tittleList.get(tittleList.size() - 1)); tv2_1_2.setText(contentList.get(tittleList.size() - 1)); tv2_2_1.setText(tittleList.get(0)); tv2_2_2.setText(contentList.get(0)); } else { tv2_1_1.setText(tittleList.get(number - 2)); tv2_1_2.setText(contentList.get(number - 2)); tv2_2_1.setText(tittleList.get(number - 1)); tv2_2_2.setText(contentList.get(number - 1)); } } //布局一的出去动画一致性就执行布局二的进入动画 rela_move2.startAnimation(translateAnimation2); } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { //布局二的动画结束后让布局一不可见 rela_move.setVisibility(View.INVISIBLE); } }); translateAnimation2.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { rela_move2.setVisibility(View.VISIBLE); } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { handler.postDelayed(new Runnable() { @Override public void run() { //停留1.5s后 布局二的值全部赋值给布局一 tv_1_1.setText(tv2_1_1.getText()); tv_1_2.setText(tv2_1_2.getText()); tv_2_1.setText(tv2_2_1.getText()); tv_2_2.setText(tv2_2_2.getText()); rela_move.setVisibility(View.VISIBLE); rela_move2.setVisibility(View.INVISIBLE); rela_move.startAnimation(translateAnimation); } }, 1500); } }); }}代码注释的很清楚，其中最重要的就是其中的逻辑关系，需要静静地理清楚。第一次写博客，仅自勉。
不喜勿喷。
新闻热点
疑难解答
