由于公司做的是商城類的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); } }); }}代碼注釋的很清楚，其中最重要的就是其中的邏輯關系，需要靜靜地理清楚。第一次寫博客，僅自勉。
不喜勿噴。
新聞熱點
疑難解答
