自定义控件淘宝头条【ViewFlipper】

最新推荐文章于 2024-10-04 11:47:50 发布

weixin_34148508

最新推荐文章于 2024-10-04 11:47:50 发布

阅读量71

点赞数

文章标签：移动开发

简易版

代码

public class UPMarqueeView extends ViewFlipper {

   public UPMarqueeView(Context context, AttributeSet attrs) {

super ( context );
init ( context , null , 0 );
}
p ublic UPMarqueeView ( Context context , AttributeSet attrs ) {
super ( context , attrs );
init ( context , attrs , 0 );
}
private void init ( Context context , AttributeSet attrs , int defStyleAttr ) {
setFlipInterval ( 3000 );
Animation animIn = AnimationUtils . loadAnimation ( getContext () , R.anim . anim_marquee_in );
animIn . setDuration ( 500 );
setInAnimation ( animIn );
Animation animOut = AnimationUtils . loadAnimation ( getContext () , R.anim . anim_marquee_out );
animOut . setDuration ( 500 );
setOutAnimation ( animOut );
}

/** 设置循环滚动的View数组 */
public void setViews ( final List < UPMarqueeViewData > datas ) {
if ( datas == null || datas . size () == 0 ) return ;
int size = datas . size ();
for ( int i = 0 ; i < size ; i ++) {
final int num = i ;
TextView tv = new TextView ( getContext ());
tv . setText ( datas . get ( i ). Title );
tv . setTextColor ( 0xff424954 );
tv . setTextSize ( TypedValue . COMPLEX_UNIT_SP , 12 );
tv . setOnClickListener ( new OnClickListener () {
@Override
public void onClick ( View v ) {
Activity_Browser . launche ( getContext () , "移动端公告" , datas . get ( num ). PageUrl );
}
} );
addView ( tv );
}
}
}

public class UPMarqueeViewData {
   public String Title;
   public String PageUrl;
}

public List<UPMarqueeViewData> mList;

tb.setViews(mList);
tb.startFlipping();

布局

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:background="@android:color/white"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:paddingLeft="15dp"
    android:paddingRight="15dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/main_tb"/>

    <com.bcb.presentation.view.custom.UPMarqueeView
        android:id="@+id/tb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:gravity="center_vertical"/>

</LinearLayout>

2017-2-27

Activity中使用

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

UPMarqueeView upview = (UPMarqueeView) findViewById(R.id.upview);

List<UPMarqueeViewData> data = new ArrayList<UPMarqueeViewData>();

data.add(new UPMarqueeViewData("疯传", "家人给2岁孩子喝这个，孩子智力倒退10岁！", "1"));

data.add(new UPMarqueeViewData("头条", "iPhone8最感人变化成真，必须买买买！", "2"));

data.add(new UPMarqueeViewData("热议", "简直是白菜价！日本玩家33万甩卖15万张游戏王卡", "3"));

data.add(new UPMarqueeViewData("哈哈", "iPhone7价格曝光了！看完感觉我的腰子有点疼，包青天包青天包青天包青天包青天", "4"));

data.add(new UPMarqueeViewData("呵呵", "主人内疚逃命时没带够，回废墟狂挖30小时！", "5"));

upview.setViews(data);

upview.startFlipping();

}

自定义的View

/**

* 仿淘宝首页的淘宝头条滚动的自定义View

public class UPMarqueeView extends ViewFlipper {

private Context mContext;

/**是否开启动画*/

private boolean isSetAnimDuration = true;

/**时间间隔*/

private int interval = 3000;

/**动画时间 */

private int animDuration = 500;

public UPMarqueeView(Context context) {

super(context);

init(context, null, 0);

}

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

if (isSetAnimDuration) {

Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_in);

animIn.setDuration(animDuration);

setInAnimation(animIn);

Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_out);

animOut.setDuration(animDuration);

setOutAnimation(animOut);

}

/**

* 设置循环滚动的View数组

* @param views

public void setViews(final List<UPMarqueeViewData> datas) {

if (datas == null || datas.size() == 0) return;

int size = datas.size();

for (int i = 0; i < size; i += 2) {

final int position = i;

//根布局

LinearLayout item = (LinearLayout) LayoutInflater.from(mContext).inflate(R.layout.item, null);

//设置监听

item.findViewById(R.id.rl).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Toast.makeText(mContext, "你点击了" + datas.get(position).getValue(), Toast.LENGTH_SHORT).show();

}

});

//控件赋值

((TextView) item.findViewById(R.id.tv1)).setText(datas.get(position).getValue());

((TextView) item.findViewById(R.id.title1)).setText(datas.get(position).getTitle());

//当数据是奇数时，最后那个item仅有一项

if (position + 1 < size) {

item.findViewById(R.id.rl2).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Toast.makeText(mContext, "你点击了" + datas.get(position + 1).getValue(), Toast.LENGTH_SHORT).show();

}

});

((TextView) item.findViewById(R.id.tv2)).setText(datas.get(position + 1).getValue());

((TextView) item.findViewById(R.id.title2)).setText(datas.get(position + 1).getTitle());

} else item.findViewById(R.id.rl2).setVisibility(View.GONE);

addView(item);

}

public boolean isSetAnimDuration() {

return isSetAnimDuration;

}

public void setSetAnimDuration(boolean isSetAnimDuration) {

this.isSetAnimDuration = isSetAnimDuration;

}

public int getInterval() {

return interval;

}

public void setInterval(int interval) {

this.interval = interval;

}

public int getAnimDuration() {

return animDuration;

}

public void setAnimDuration(int animDuration) {

this.animDuration = animDuration;

}

数据bean

public class UPMarqueeViewData {

private String title;

private String value;

private String url;

public UPMarqueeViewData(String title, String value, String url) {

super();

this.title = title;

this.value = value;

this.url = url;

}

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

public String getUrl() {

return url;

}

public void setUrl(String url) {

this.url = url;

}

public String getValue() {

return value;

}

public void setValue(String value) {

this.value = value;

}

item的布局

<?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:background="@color/gray"

android:gravity="center"

android:orientation="vertical" >

<RelativeLayout

android:id="@+id/rl"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" >

<TextView

android:id="@+id/title1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_marginRight="6dp"

android:background="@drawable/border"

android:padding="2dp"

android:textColor="@color/red"

android:textSize="12sp" />

<TextView

android:id="@+id/tv1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_toRightOf="@+id/title1"

android:ellipsize="end"

android:maxLines="1"

android:textSize="14sp" />

</RelativeLayout>

<RelativeLayout

android:id="@+id/rl2"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" >

<TextView

android:id="@+id/title2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_marginRight="6dp"

android:background="@drawable/border"

android:padding="2dp"

android:textColor="@color/red"

android:textSize="12sp" />

<TextView

android:id="@+id/tv2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_toRightOf="@+id/title2"

android:ellipsize="end"

android:maxLines="1"

android:textSize="14sp" />

</RelativeLayout>

</LinearLayout>

附件列表

weixin_34148508

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

自定义控件 淘宝头条【ViewFlipper】

简易版

Activity中使用

自定义的View

数据bean

item的布局

附件列表

自定义控件淘宝头条【ViewFlipper】