实现京东首页的轮播广告效果,包含三个以上产品广告

用于高校Android studio课程课后作业实例,如无必要,请勿抄袭

目前很多APP中都有这个图片轮播的功能,项目中也时常会用到,图片轮播一般是在用户不主动进行切换的时候每隔一段时间进行自动切换,用户主动切换时停止自动切换,手指离开时重新计时开始轮播,下面我们就来实现这个功能

目录

实例代码

activity_mian.xml

view_flipper_left_out.xml

view_flipper_right_out.xml

view_flipper_page1.xml

MainActivity.java

实例代码

activity_mian.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top|fill"
    android:alignmentMode="alignMargins"
    android:background="#eeeeee"
    android:columnCount="4"
    android:rowCount="2">
    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:flipInterval="3000"
        android:inAnimation="@anim/view_flipper_right_in"
        android:outAnimation="@anim/view_flipper_left_out">
        <include layout="@layout/view_flipper_page1" />
        <include layout="@layout/view_flipper_page2" />
    </ViewFlipper>
    <Button
        android:id="@+id/button_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1.0"
        android:text="开始" />
    <Button
        android:id="@+id/button_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1.0"
        android:text="停止" />
    <Button
        android:id="@+id/button_previous"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1.0"
        android:text="上一页" />
    <Button
        android:id="@+id/button_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1.0"
        android:text="下一页" />
</GridLayout>

view_flipper_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>

view_flipper_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>

view_flipper_page1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        app:srcCompat="@mipmap/img_1656" />
</LinearLayout>

MainActivity.java

package com.vt.(/  *# /);

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {
private ViewFlipper mVewFlipper;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        View view3 = View.inflate(MainActivity.this, R.layout.view_flipper_page3, null);
        ImageView imageView4 = new ImageView(this);
        imageView4.setAdjustViewBounds(true);
        imageView4.setImageResource(R.mipmap.img_9546);
        mVewFlipper = findViewById(R.id.view_flipper);
        mVewFlipper.addView(imageView4);
        mVewFlipper.addView(view3,2);
        mVewFlipper.startFlipping();
        mVewFlipper.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "当前显示的子视图索引号为"+mVewFlipper.getDisplayedChild(), Toast.LENGTH_SHORT).show();
            }
        });
        Button startBtn = findViewById(R.id.button_start);
        startBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mVewFlipper.startFlipping();
            }
        });
        Button stopBtn = findViewById(R.id.button_stop);
        stopBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mVewFlipper.stopFlipping();
            }
        });
        Button previousBtn = findViewById(R.id.button_previous);
        previousBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mVewFlipper.showPrevious();
            }
        });
        Button nextBtn = findViewById(R.id.button_next);
        nextBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mVewFlipper.showNext();
            }
        });
    }
}

最后运行代码显示如图轮播图,多添加几张图片显示效果即可

同学们,交了学费一定要好好学习啊,抄来抄去终究害己

加关注点赞,感谢!!!

注意:直接复制代码使用时 ,请添加自己的背景图片和修改文件名,其他报错请留言

如有需要定制微信小程序,海报设计,logo设计的,请添加小哥VX:Doi000101,备注来意

猜你喜欢

转载自blog.csdn.net/weixin_46165323/article/details/127181683