自定义类继承 ViewFlipper
package com.dreamlive.upmarqueeview; import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ViewFlipper; import java.util.List; /** * 仿淘宝首页的 淘宝头条滚动的自定义View * */ public class UPMarqueeView extends ViewFlipper { private Context mContext; private boolean isSetAnimDuration = false; /** * 要多久 烙下一个视图 不搞的话 默认是3000 * 意思就是 切换的间隔 */ private int interval = 2000; /** * 动画时间 * 因为设置的是 进入 和 出去 的动画为 透明 和 位移 */ private int animDuration = 500; public UPMarqueeView(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs, 0); } private void init(Context context, AttributeSet attrs, int defStyleAttr) { this.mContext = context; // 设置区间间隔 setFlipInterval(interval); Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_in); if (isSetAnimDuration) animIn.setDuration(animDuration); setInAnimation(animIn); Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_out); if (isSetAnimDuration) animOut.setDuration(animDuration); setOutAnimation(animOut); } /** * 设置循环滚动的View数组 * * @param views */ 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 position=i; //设置监听回调 views.get(i).setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (onItemClickListener != null) { onItemClickListener.onItemClick(position, views.get(position)); } } }); addView(views.get(i)); } startFlipping(); } /** * 设置动画时长 默认为500ms * @param ms */ public void setAnimDuration(int ms){ this.animDuration = ms; } /** * 设置间隔时长区间 这里默认给的2s 系统源码里面默认给的3s * @param interval */ public void setInterval(int interval) { this.interval = interval; } /** * 点击 */ private OnItemClickListener onItemClickListener; /** * 设置监听接口 * @param onItemClickListener */ public void setOnItemClickListener(OnItemClickListener onItemClickListener) { this.onItemClickListener = onItemClickListener; } /** * item_view的接口 */ public interface OnItemClickListener { void onItemClick(int position, View view); } }
使用：
1.xml 布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <RelativeLayout android:layout_width="match_parent" android:layout_height="80dp"> <TextView android:id="@+id/tbtv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:layout_centerVertical="true" android:textSize="22sp" android:textColor="@color/red" android:text="@string/taobao" /> <com.dreamlive.upmarqueeview.UPMarqueeView android:id="@+id/upview1" android:layout_marginLeft="20dp" android:layout_width="match_parent" android:layout_toRightOf="@+id/tbtv" android:layout_centerVertical="true" android:layout_marginTop="10dp" android:layout_height="match_parent"></com.dreamlive.upmarqueeview.UPMarqueeView> </RelativeLayout> </LinearLayout>
item_view:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <RelativeLayout android:id="@+id/rl" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/title_tv1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="热议" android:textSize="9sp" android:padding="3dp" android:background="@drawable/textview_border" android:layout_marginRight="6dp" android:textColor="@color/red" /> <TextView android:id="@+id/tv1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/title_tv1" android:ellipsize="end" android:textSize="14sp" android:maxLines="1" /> </RelativeLayout> <RelativeLayout android:id="@+id/rl2" android:layout_width="match_parent" android:layout_marginTop="5dp" android:layout_height="wrap_content"> <TextView android:id="@+id/title_tv2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="热评" android:padding="3dp" android:textSize="9sp" android:background="@drawable/textview_border" android:layout_marginRight="6dp" android:textColor="@color/red" /> <TextView android:id="@+id/tv2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/title_tv2" android:ellipsize="end" android:textSize="14sp" android:maxLines="1" /> </RelativeLayout> </LinearLayout>
2.代码
package com.dreamlive.upmarqueeviewdemo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.LayoutInflater; import android.view.View; import android.widget.LinearLayout; import android.widget.TextView; import android.widget.Toast; import com.dreamlive.upmarqueeview.UPMarqueeView; import java.util.ArrayList; import java.util.List; /** * 仿淘宝首页的 淘宝头条滚动的自定义View */ public class MainActivity extends AppCompatActivity { private UPMarqueeView upview1; List<String> data = new ArrayList<>(); List<View> views = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initParam(); initdata(); initView(); } /** * 实例化控件 */ private void initParam() { upview1 = (UPMarqueeView) findViewById(R.id.upview1); } /** * 初始化界面程序 */ private void initView() { setView(); upview1.setViews(views); /** * 设置item_view的监听 */ upview1.setOnItemClickListener(new UPMarqueeView.OnItemClickListener() { @Override public void onItemClick(int position, View view) { Toast.makeText(MainActivity.this, "你点击了第几个items" + position, Toast.LENGTH_SHORT).show(); } }); } /** * 初始化需要循环的View * 为了灵活的使用滚动的View，所以把滚动的内容让用户自定义 * 假如滚动的是三条或者一条，或者是其他，只需要把对应的布局，和这个方法稍微改改就可以了， */ private void setView() { for (int i = 0; i < data.size(); i = i + 2) { final int position = i; //设置滚动的单个布局 LinearLayout moreView = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.item_view, null); //初始化布局的控件 TextView tv1 = (TextView) moreView.findViewById(R.id.tv1); TextView tv2 = (TextView) moreView.findViewById(R.id.tv2); /** * 设置监听 */ moreView.findViewById(R.id.rl).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this, position + "你点击了" + data.get(position).toString(), Toast.LENGTH_SHORT).show(); } }); /** * 设置监听 */ moreView.findViewById(R.id.rl2).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this, position+1 + "你点击了" + data.get(position+1).toString(), Toast.LENGTH_SHORT).show(); } }); //进行对控件赋值 tv1.setText(data.get(i).toString()); if (data.size() > i + 1) { //因为淘宝那儿是两条数据，但是当数据是奇数时就不需要赋值第二个，所以加了一个判断，还应该把第二个布局给隐藏掉 tv2.setText(data.get(i + 1).toString()); } else { moreView.findViewById(R.id.rl2).setVisibility(View.GONE); } //添加到循环滚动数组里面去 views.add(moreView); } } /** * 初始化数据 */ private void initdata() { data = new ArrayList<>(); data.add("阿斯顿发大发发的阿斯蒂芬发"); data.add("是大法官啥地方公司公司发十分大"); data.add("的风格换地方更好的更好地发给电饭锅好"); data.add("二爷任天野儿童儿太爷爷儿童呀"); data.add("去玩儿切勿日期去玩儿群翁人"); // data.add(" 推塔UI他又uit踢兔兔呀"); } }
资源文件：
in ----
<?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>
out----
<?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>