devbox
编程先知
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

类似淘宝的Text标签的来回滚动_tittle滚动

作者：编程先知 | 2024-02-05 12:43:52

赞

踩

tittle滚动

       由于公司做的是商城类的app，有很多样式及功能都是借鉴的淘宝。近期，产品要求做一个类似淘宝一样的两个text标签来回的滚动，在网上也查阅了很多的资料，总感觉要么是比较的复杂化，要么就是达不到自己想要的效果，所以就自己动手码代码。

     先上效果图：


   模拟器的运行效果较差，再加上gif的录制，整体看起来不是很流畅，真机上跑起来比较流畅。

  技术要点：

        1  两套布局来回进行平移动画。

        2  两套布局的隐藏可见的控制。

        3  数据显示的逻辑处理。

先看xml的布局：

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="60dp"
  6.     android:background="#1344ff"
  7.     android:gravity="center_vertical" >
  8.  
  9.     <FrameLayout
  10.         android:layout_width="match_parent"
  11.         android:layout_height="match_parent"
  12.         android:layout_toRightOf="@+id/iv_1"
  13.          >
  14.  
  15.         <RelativeLayout
  16.             android:id="@+id/rela_move"
  17.             android:layout_width="match_parent"
  18.             android:layout_height="match_parent" 
  19.             >
  20.  
  21.             <TextView
  22.                 android:id="@+id/tv_1_1"
  23.                 android:layout_width="wrap_content"
  24.                 android:layout_height="wrap_content"
  25.                 android:background="@drawable/background"
  26.                 android:paddingBottom="4dp"
  27.                 android:paddingLeft="12dp"
  28.                 android:paddingRight="12dp"
  29.                 android:paddingTop="4dp"
  30.                 android:text="热议" />
  31.  
  32.             <TextView
  33.                 android:id="@+id/tv_1_2"
  34.                 android:layout_width="wrap_content"
  35.                 android:layout_height="wrap_content"
  36.                 android:layout_toRightOf="@+id/tv_1_1"
  37.                 android:paddingBottom="4dp"
  38.                 android:paddingLeft="12dp"
  39.                 android:paddingRight="12dp"
  40.                 android:paddingTop="4dp"
  41.                 android:text="疤痕的假发片接文件夹我看挺好" />
  42.                <TextView
  43.                 android:id="@+id/tv_2_1"
  44.                 android:layout_below="@+id/tv_1_1"
  45.                 android:layout_width="wrap_content"
  46.                 android:layout_height="wrap_content"
  47.                 android:background="@drawable/background"
  48.                 android:paddingBottom="4dp"
  49.                 android:paddingLeft="12dp"
  50.                 android:paddingRight="12dp"
  51.                 android:paddingTop="4dp"
  52.                 android:text="热议" />
  53.  
  54.             <TextView
  55.                 android:id="@+id/tv_2_2"
  56.                 android:layout_width="wrap_content"
  57.                 android:layout_height="wrap_content"
  58.                 android:layout_below="@+id/tv_1_2"
  59.                 android:layout_toRightOf="@+id/tv_2_1"
  60.                 android:paddingBottom="4dp"
  61.                 android:paddingLeft="12dp"
  62.                 android:paddingRight="12dp"
  63.                 android:paddingTop="4dp"
  64.                 android:text="疤痕的假发片接文件夹我看挺好" />
  65.         </RelativeLayout>
  66.         
  67.           <RelativeLayout
  68.             android:id="@+id/rela_move2"
  69.             android:layout_width="match_parent"
  70.             android:layout_height="match_parent" 
  71.             android:visibility="invisible"
  72.             >
  73.  
  74.             <TextView
  75.                 android:id="@+id/tv2_1_1"
  76.                 android:layout_width="wrap_content"
  77.                 android:layout_height="wrap_content"
  78.                 android:background="@drawable/background"
  79.                 android:paddingBottom="4dp"
  80.                 android:paddingLeft="12dp"
  81.                 android:paddingRight="12dp"
  82.                 android:paddingTop="4dp"
  83.                 android:text="热议222" />
  84.  
  85.             <TextView
  86.                 android:id="@+id/tv2_1_2"
  87.                 android:layout_width="wrap_content"
  88.                 android:layout_height="wrap_content"
  89.                 android:layout_toRightOf="@+id/tv2_1_1"
  90.                 android:paddingBottom="4dp"
  91.                 android:paddingLeft="12dp"
  92.                 android:paddingRight="12dp"
  93.                 android:paddingTop="4dp"
  94.                 android:text="疤痕的假发片接文件夹我看挺好" />
  95.                <TextView
  96.                 android:id="@+id/tv2_2_1"
  97.                 android:layout_below="@+id/tv2_1_1"
  98.                 android:layout_width="wrap_content"
  99.                 android:layout_height="wrap_content"
  100.                 android:background="@drawable/background"
  101.                 android:paddingBottom="4dp"
  102.                 android:paddingLeft="12dp"
  103.                 android:paddingRight="12dp"
  104.                 android:paddingTop="4dp"
  105.                 android:text="热议222" />
  106.  
  107.             <TextView
  108.                 android:id="@+id/tv2_2_2"
  109.                 android:layout_width="wrap_content"
  110.                 android:layout_height="wrap_content"
  111.                 android:layout_below="@+id/tv2_1_2"
  112.                 android:layout_toRightOf="@+id/tv2_2_1"
  113.                 android:paddingBottom="4dp"
  114.                 android:paddingLeft="12dp"
  115.                 android:paddingRight="12dp"
  116.                 android:paddingTop="4dp"
  117.                 android:text="疤痕的假发片接文件夹我看挺好" />
  118.         </RelativeLayout>
  119.     </FrameLayout>
  120.  
  121.     <ImageView
  122.         android:id="@+id/iv_1"
  123.         android:layout_width="wrap_content"
  124.         android:layout_height="wrap_content"
  125.         android:layout_alignParentLeft="true"
  126.         android:layout_centerVertical="true"
  127.         android:src="@drawable/ic_launcher" />
  128.  
  129. </RelativeLayout>
    布局没有什么好说的，就是一个Framelayout包含两个相对的布局，一个可见，一个不可见。

    UI大家可以自己定制。

    下面看代码：

  1. package com.demo.xsl.text;
  2.  
  3. import java.util.ArrayList;
  4. import java.util.List;
  5.  
  6. import android.app.Activity;
  7. import android.os.Bundle;
  8. import android.os.Handler;
  9. import android.view.View;
  10. import android.view.animation.Animation;
  11. import android.view.animation.Animation.AnimationListener;
  12. import android.view.animation.TranslateAnimation;
  13. import android.widget.RelativeLayout;
  14. import android.widget.TextView;
  15.  
  16. public class VerticalScrollTextActivity extends Activity {
  17.  
  18. 	VerticalScrollTextView mSampleView;
  19. 	VerticalScrollTextView mSampleView2;
  20. 	private Handler handler;
  21. 	private int count = 1;
  22. 	List<String> tittleList = new ArrayList<String>();
  23. 	List<String> contentList = new ArrayList<String>();
  24.  
  25. 	@Override
  26. 	public void onCreate(Bundle savedInstanceState) {
  27. 		super.onCreate(savedInstanceState);
  28. 		setContentView(R.layout.main);
  29.  
  30. 		
  31. 		//世纪情况的数据模拟  数据可能为单数 也可能为双数
  32. 		tittleList.add("热议");
  33. 		tittleList.add("女人");
  34. 		tittleList.add("手机");
  35. //		tittleList.add("哇哈哈");
  36. //		tittleList.add("苹果");
  37. //		tittleList.add("橘子");
  38.  
  39. 		contentList.add("热议  鸡年大吉");
  40. 		contentList.add("女人  鸡年大吉");
  41. 		contentList.add("手机  鸡年大吉");
  42. //		contentList.add("哇哈哈  还是比较好喝的");
  43. //		contentList.add("苹果很甜知道不知道");
  44. //		contentList.add("橘子哈是有点酸");
  45.  
  46. 		handler = new Handler();
  47. 		
  48. 		//两套布局
  49. 		final RelativeLayout rela_move = (RelativeLayout) findViewById(R.id.rela_move);
  50. 		final RelativeLayout rela_move2 = (RelativeLayout) findViewById(R.id.rela_move2);
  51.  
  52. 		final TextView tv_1_1 = (TextView) findViewById(R.id.tv_1_1);
  53. 		final TextView tv_1_2 = (TextView) findViewById(R.id.tv_1_2);
  54. 		final TextView tv_2_1 = (TextView) findViewById(R.id.tv_2_1);
  55. 		final TextView tv_2_2 = (TextView) findViewById(R.id.tv_2_2);
  56.  
  57. 		final TextView tv2_1_1 = (TextView) findViewById(R.id.tv2_1_1);
  58. 		final TextView tv2_1_2 = (TextView) findViewById(R.id.tv2_1_2);
  59. 		final TextView tv2_2_1 = (TextView) findViewById(R.id.tv2_2_1);
  60. 		final TextView tv2_2_2 = (TextView) findViewById(R.id.tv2_2_2);
  61.  
  62. 		//数据源的初始化的设置
  63. 		tv_1_1.setText(tittleList.get(0));
  64. 		tv_1_2.setText(contentList.get(0));
  65. 		tv_2_1.setText(tittleList.get(1));
  66. 		tv_2_2.setText(contentList.get(1));
  67.  
  68. 		//进入动画  具体的平移高度大家自己可设置 我只是为了方便 随意设置的值
  69. 		final Animation translateAnimation2 = new TranslateAnimation(1.0f, 1.0f, 240.0f, 1.0f);
  70. 		translateAnimation2.setDuration(600);
  71.  
  72. 		// 出去动画  具体的平移高度大家自己可设置 我只是为了方便 随意设置的值
  73. 		final Animation translateAnimation = new TranslateAnimation(1.0f, 1.0f, 1.0f, -200.0f);
  74. 		// 设置动画时间
  75. 		translateAnimation.setDuration(600);
  76. 		rela_move.startAnimation(translateAnimation);
  77. 		translateAnimation.setAnimationListener(new AnimationListener() {
  78.  
  79. 			@Override
  80. 			public void onAnimationStart(Animation animation) {
  81. 				count++;
  82.  
  83. 				if (tittleList.size() % 2 == 0) {  //数据源为双数的情况
  84. 					int number = (2 * count) % tittleList.size();
  85. 					//主要是布局二的值改变 让布局一更随布局二的值改变
  86. 					if (number == 0) {
  87. 						tv2_1_1.setText(tittleList.get(tittleList.size() - 2));
  88. 						tv2_1_2.setText(contentList.get(tittleList.size() - 2));
  89. 						tv2_2_1.setText(tittleList.get(tittleList.size() - 1));
  90. 						tv2_2_2.setText(contentList.get(tittleList.size() - 1));
  91. 					} else {
  92. 						tv2_1_1.setText(tittleList.get(number - 2));
  93. 						tv2_1_2.setText(contentList.get(number - 2));
  94. 						tv2_2_1.setText(tittleList.get(number - 1));
  95. 						tv2_2_2.setText(contentList.get(number - 1));
  96. 					}
  97.  
  98. 				}else {  //数据源为单数的情况
  99. 					int number = (2 * count) % tittleList.size();
  100. 					if (number == 0) {
  101. 						tv2_1_1.setText(tittleList.get(tittleList.size() - 2));
  102. 						tv2_1_2.setText(contentList.get(tittleList.size() - 2));
  103. 						tv2_2_1.setText(tittleList.get(tittleList.size() - 1));
  104. 						tv2_2_2.setText(contentList.get(tittleList.size() - 1));
  105. 					}else if (number == 1) {
  106. 						tv2_1_1.setText(tittleList.get(tittleList.size() - 1));
  107. 						tv2_1_2.setText(contentList.get(tittleList.size() - 1));
  108. 						tv2_2_1.setText(tittleList.get(0));
  109. 						tv2_2_2.setText(contentList.get(0));
  110. 					} else {
  111. 						tv2_1_1.setText(tittleList.get(number - 2));
  112. 						tv2_1_2.setText(contentList.get(number - 2));
  113. 						tv2_2_1.setText(tittleList.get(number - 1));
  114. 						tv2_2_2.setText(contentList.get(number - 1));
  115. 					}
  116. 				}
  117.                 //布局一的出去动画一致性就执行布局二的进入动画
  118. 				rela_move2.startAnimation(translateAnimation2);
  119. 			}
  120.  
  121. 			@Override
  122. 			public void onAnimationRepeat(Animation animation) {
  123.  
  124. 			}
  125.  
  126. 			@Override
  127. 			public void onAnimationEnd(Animation animation) {
  128. 				//布局二的动画结束后让布局一不可见
  129. 				rela_move.setVisibility(View.INVISIBLE);
  130.  
  131. 			}
  132. 		});
  133. 		translateAnimation2.setAnimationListener(new AnimationListener() {
  134.  
  135. 			@Override
  136. 			public void onAnimationStart(Animation animation) {
  137.  
  138. 				rela_move2.setVisibility(View.VISIBLE);
  139.  
  140. 			}
  141.  
  142. 			@Override
  143. 			public void onAnimationRepeat(Animation animation) {
  144.  
  145. 			}
  146.  
  147. 			@Override
  148. 			public void onAnimationEnd(Animation animation) {
  149.  
  150. 				handler.postDelayed(new Runnable() {
  151.  
  152. 					@Override
  153. 					public void run() {
  154. 						//停留1.5s后 布局二的值全部赋值给布局一
  155. 						tv_1_1.setText(tv2_1_1.getText());
  156. 						tv_1_2.setText(tv2_1_2.getText());
  157. 						tv_2_1.setText(tv2_2_1.getText());
  158. 						tv_2_2.setText(tv2_2_2.getText());
  159.              
  160. 						rela_move.setVisibility(View.VISIBLE);
  161. 						rela_move2.setVisibility(View.INVISIBLE);
  162. 						rela_move.startAnimation(translateAnimation);
  163. 					}
  164. 				}, 1500);
  165.  
  166. 			}
  167. 		});
  168. 	}
  169. }










    代码注释的很清楚，其中最重要的就是其中的逻辑关系，需要静静地理清楚。



   第一次写博客，仅自勉。


  不喜勿喷。





                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/编程先知/article/detail/60767
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号