Android仿淘宝头条滚动广告条

之前我使用TextView+Handler+动画，实现了一个简单的仿淘宝广告条的滚动，https://download.csdn.net/download/qq_35605213/9660825；

无意中发现ViewFlipper这个控件，拿来一试；很轻松的就实现了文字的替换功能；

代码：

private ViewFlipper vf;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    vf = findViewById(R.id.vf);
    vf.setFlipInterval(2000);//设置时间间隔
    setData();
}
String datas[] = {"对Kotlin的第一印象"
        ,"Android.Kotlin的杀手锏"
        ,"Kotlin很简洁"
        ,"Kotlin很擅长“拿来主义"
        ,"其实我也就是走马观花"};
private void setData() {
    for (int i = 0; i < datas.length; i++) {
        TextView tv = new TextView(this);
        tv.setText(datas[i]);
        vf.addView(tv); //把需要滚动布局添加到ViewFlipper
    }
    vf.startFlipping(); //开始滚动
}

XML布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.admin.viewflipperdemo.MainActivity">

    <ViewFlipper
        android:id="@+id/vf"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        />

</RelativeLayout>

只不过没有动画的效果，下面我再给它加上从下面滑进来和向上滑出去的动画；

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--进场动画-->
    <translate
        android:duration="300"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--滑出动画-->
    <translate
        android:duration="400"
        android:fromYDelta="0"
        android:toYDelta="-100%p"/>
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

vf.setInAnimation(this,R.anim.in); //设置动画效果
vf.setOutAnimation(this,R.anim.out);

哈哈，这下效果就很像了；

不过淘宝是双条的，这个怎么实现呢？

private ViewFlipper vf;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    vf = findViewById(R.id.vf);
    vf.setFlipInterval(2000);//设置时间间隔
    vf.setInAnimation(this,R.anim.in);
    vf.setOutAnimation(this,R.anim.out);
    setData();
}
String datas[] = {"鹿皮绒高腰小西装裤子女九分阔腿裤侧边条纹"
        ,"显瘦休闲运动裤女春秋薄款直筒长裤宽松卫裤"
        ,"春季浅色格子裤女九分裤松紧腰捆绳宽松显瘦千鸟格哈伦休闲裤"
        ,"秋冬新款宽松毛呢小脚哈伦裤休闲裤女显瘦呢子长裤加厚款大码潮"
        ,"春秋季新款心型碎花松紧腰长袖中长款连衣裙女宽松显瘦波点裙"
        ,"运动服套装女春秋时尚2018新款修身韩版卫衣春季休闲跑步两件套潮"
        ,"职业装女装套装时尚西装连衣裙ol气质工作服女春秋正装套装裙"
        ,"秋季卫衣女韩版学生百搭上衣宽松显瘦连帽2017时尚新款长袖外套潮"
,"2鹿皮绒高腰小西装裤子女九分阔腿裤侧边条纹"};
private void setData() {
    for (int i = 0; i < datas.length; i= i+2) { //一次遍历两条数据
        View v = View.inflate(this,R.layout.item,null);
        TextView tv1 = v.findViewById(R.id.tv1);
        TextView tv2 = v.findViewById(R.id.tv2);
        tv1.setText(datas[i]);
        if (datas.length > i+1){
            tv2.setText(datas[i+1]);
        }else {
            tv2.setVisibility(View.GONE);
        }
        vf.addView(v); //把需要滚动布局添加到ViewFlipper
    }
    vf.startFlipping(); //开始滚动
}

布局文件：

<?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="wrap_content"
    xmlns:tools="http://schemas.android.com/tools">
    <ImageView
        android:id="@+id/iv"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:src="@mipmap/icon"
        />
    <TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:text="@string/app_name"
        android:textColor="#fd6300"
        android:lines="1"
        android:layout_toRightOf="@id/iv"
        android:paddingLeft="12dp"
        />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:text="@string/app_name"
        android:textColor="#fd6300"
        android:layout_toRightOf="@id/iv"
        android:paddingLeft="12dp"
        android:lines="1"
        android:layout_below="@id/tv1"
        android:layout_marginTop="8dp"
        />

</RelativeLayout>

很容易看懂的，轻松完成；

属性介绍:
android:autoStart：设置自动加载下一个View
android:flipInterval：设置View之间切换的时间间隔
android:inAnimation：设置切换View的进入动画
android:outAnimation：设置切换View的退出动画

方法介绍：
isFlipping：判断View切换是否正在进行
setFilpInterval：设置View之间切换的时间间隔
startFlipping：开始View的切换，而且会循环进行
stopFlipping：停止View的切换
setOutAnimation：设置切换View的退出动画
setInAnimation：设置切换View的进入动画
showNext：显示ViewFlipper里的下一个View

showPrevious：显示ViewFlipper里的上一个View

随便抽取一下，方便使用：

public class UpView extends ViewFlipper {
 private Context content;
    public UpView(Context context) {
        super(context);
        init(context);
    }
    private int Interval = 3000;

    public UpView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        this.content = context;
        setFlipInterval(Interval);//设置时间间隔
        setInAnimation(context,R.anim.in);
        setOutAnimation(context,R.anim.out);
    }
    public void setInterval(int i){
        Interval = i;
    }

    /**
     * 设置循环滚动的View数组
     */
    public void setViews(final List<View> views) {
        if (views == null || views.size() == 0) return;
        removeAllViews();
        for ( int i = 0; i < views.size(); i++) {
            final int finalposition=i;
            //设置监听回调
            views.get(i).setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (onItemClickListener != null) {
                        onItemClickListener.onItemClick(finalposition, views.get(finalposition));
                    }
                }
            });
            addView(views.get(i));
        }
        startFlipping();
    }
    
    private OnItemClickListener onItemClickListener;
    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }
    public interface OnItemClickListener {
        void onItemClick(int position, View view);
    }
}

使用：

public class MainActivity extends AppCompatActivity implements UpView.OnItemClickListener {

    private UpView vf;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vf = findViewById(R.id.vf);
        setData();
        vf.setOnItemClickListener(this);
    }
    String datas[] = {
            "鹿皮绒高腰小西装裤子女九分阔腿裤侧边条纹"
            ,"显瘦休闲运动裤女春秋薄款直筒长裤宽松卫裤"
            ,"春季浅色格子裤女九分裤松紧腰捆绳宽松显瘦千鸟格哈伦休闲裤"
            ,"秋冬新款宽松毛呢小脚哈伦裤休闲裤女显瘦呢子长裤加厚款大码潮"
            ,"春秋季新款心型碎花松紧腰长袖中长款连衣裙女宽松显瘦波点裙"
            ,"运动服套装女春秋时尚2018新款修身韩版卫衣春季休闲跑步两件套潮"
            ,"职业装女装套装时尚西装连衣裙ol气质工作服女春秋正装套装裙"
            ,"秋季卫衣女韩版学生百搭上衣宽松显瘦连帽2017时尚新款长袖外套潮"};
    private void setData() {
        List<View> views = new ArrayList<>();
        for (int i = 0; i < datas.length; i= i+2) { //一次遍历两条数据
            View v = View.inflate(this,R.layout.item,null);
            TextView tv1 = v.findViewById(R.id.tv1);
            TextView tv2 = v.findViewById(R.id.tv2);
            tv1.setText(datas[i]);
            if (datas.length > i+1){
                tv2.setText(datas[i+1]);
            }else {
                tv2.setVisibility(View.GONE);
            }
            views.add(v);
        }
        vf.setViews(views);
    }

    @Override
    public void onItemClick(int position, View view) {
        Log.i("TAG",position+"");
    }
}

posted on 2018-03-15 11:35 香蕉你个博纳纳阅读(474) 评论(0) 收藏举报