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

于 2017-02-10 11:26:48 发布
阅读量507 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 安卓 文章标签： 整体布局的滚动 类似淘宝 博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/engineer_zh/article/details/54965899

       由于公司做的是商城类的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);

			}
		});
	}
}







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



   第一次写博客，仅自勉。


  不喜勿喷。




                

        

    

    
  



    



            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值