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+"");

    }

}

巴特西

Android仿淘宝头条滚动广告条

最新文章

热门文章