热门头条的实现—MarqueeView、ViewFlipper

最新推荐文章于 2024-04-04 09:40:38 发布

原创最新推荐文章于 2024-04-04 09:40:38 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #热门头条 #ViewFlippe #marqueeVie

Android 专栏收录该内容

62 篇文章

订阅专栏

本文介绍两种实现类似淘宝热门头条效果的方法：使用ViewFlipper和MarqueeView。通过示例代码展示了如何设置布局、添加文本视图及实现自动翻页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类似于淘宝热门头条的实现——ViewFlipper。布局文件：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="20px">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/bulletin" />

        <ViewFlipper
            android:id="@+id/viewflipper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30px">
        </ViewFlipper>
    </LinearLayout>

主要代码如下：

public class ViewFlipper1 extends Activity{
    private ViewFlipper viewFlipper;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.actitivity_view_flipper);
        viewFlipper =(ViewFlipper) findViewById(R.id.viewflipper);
        for (int i = 0; i < 5; i++) {
            viewFlipper.addView(getTextViewTitle("这里是热门头条" + i));
        }
        //点击事件
        viewFlipper.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ViewFlipper1.this, viewFlipper.getDisplayedChild()+"", Toast.LENGTH_SHORT).show();
            }
        });
        viewFlipper.setFlipInterval(1500);//多长时间换下一个
        viewFlipper.startFlipping();
    }
    private TextView getTextViewTitle(String title) {
        TextView textView = new TextView(this);
        textView.setGravity(Gravity.CENTER_VERTICAL);
        textView.setText(title);
        return textView;
    }
}

这里没法直接加文字，我是先手动创建TextView，然后把标题设置好，添加到ViewFlipper。没有设置动画，要设置动画自己写。为了增加用户体验可以在onstart()，onStop()写对应的方法startFlipping()、stopFlipping()。
然后是一个第三方的——MarqueeView，首先依赖

compile 'com.sunfusheng:marqueeview:1.2.0'

布局文件如下：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="20px">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/bulletin"
            android:layout_marginLeft="30px"/>
        <com.sunfusheng.marqueeview.MarqueeView
            android:id="@+id/marqueeView"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginLeft="30px"
            app:mvAnimDuration="500"
            app:mvInterval="2000"
            app:mvTextColor="@color/colorAccent"
            app:mvTextSize="14sp"
            app:mvSingleLine="true"/>
    </LinearLayout>

属性：
Attribute 属性    Description 描述
mvAnimDuration  一行文字动画执行时间
mvInterval  两行文字翻页时间间隔
mvTextSize  文字大小
mvTextColor 文字颜色
mvGravity   文字位置:left、center、right
mvSingleLine    单行设置
主要代码如下：

public class MarqueeView1 extends Activity{
    private MarqueeView marqueeView;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_marquee);
        marqueeView = (MarqueeView) findViewById(R.id.marqueeView);
        List<String> info = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            info.add("这里是热门头条" + i);
        }
        marqueeView.startWithList(info);
        //点击事件
        marqueeView.setOnItemClickListener(new MarqueeView.OnItemClickListener() {
            @Override
            public void onItemClick(int position, TextView textView) {
                Toast.makeText(getApplicationContext(), String.valueOf(marqueeView.getPosition()) + ". " + textView.getText(), Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public void onStart() {
        super.onStart();
        marqueeView.startFlipping();
    }

    @Override
    public void onStop() {
        super.onStop();
        marqueeView.stopFlipping();
    }
}

这里就直接调用对应的方法，传对应的变量就可以了，还有动画。

项目链接