当前位置: 首页 > 工具软件 > MarqueeView > 使用案例 >

热门头条的实现—MarqueeView、ViewFlipper

孙星鹏
2023-12-01
类似于淘宝热门头条的实现——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();
    }
}
这里就直接调用对应的方法,传对应的变量就可以了,还有动画。

项目链接

 类似资料: