kotiln实现滑屏界面（图片切换）

最新推荐文章于 2022-07-21 18:30:46 发布
最新推荐文章于 2022-07-21 18:30:46 发布
阅读量829 收藏 3
点赞数 2
分类专栏： kotiln 文章标签： android java kotlin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43276983/article/details/106005136
版权

kotlin实现滑屏界面（图片切换）

首先我们先来看一下Java的滑屏是怎样实现的。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

/**
 * create by dragon
 */
public class bootInterfaceActivity extends baseActivity {
    private Button btnEnter;
    private LinearLayout LLSmallView;
    private ViewPager viewpager;
    private List<View> mlist;
    private int[] image;
    private Button btnEnterNow;
    /*
     布局绑定
     */
    @Override
    protected int findLayout() {
        return R.layout.activity_boot_interface;
    }

    /*
    控件绑定
     */
    @Override
    protected void findView() {
        btnEnterNow = findViewById(R.id.enterNow);
        btnEnter = findViewById(R.id.btn_enter);
        LLSmallView = findViewById(R.id.LL_smallView);
        viewpager = findViewById(R.id.viewpager);

    }

    /*
    数据加载
     */
    @Override
    protected void initData() {
        mlist = new ArrayList<>();
        image = new int[]{R.drawable.pic_guidepage_1, R.drawable.pic_guidepage_2,
                R.drawable.pic_guidepage_3, R.drawable.pic_guidepage_4};
        for (int i = 0; i < image.length; i++) {
            LinearLayout.LayoutParams layoutParams = new
                    LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.MATCH_PARENT);
            ImageView imageView = new ImageView(this);
            imageView.setLayoutParams(layoutParams);
            imageView.setBackgroundResource(image[i]);
            mlist.add(imageView);
        }
        viewpager.setAdapter(new bootInterfaceAdapter(mlist));
        /*
        加载底部小圆点
        当前页面位于第一页的情况下
         */
        initSmallView(0);
    }

    /*
      监听事件
    */

    @Override
    protected void setListener() {
   /*
      顶部跳过按键
      响应事件
      跳转到主界面
    */
        btnEnter.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(bootInterfaceActivity.this, MainActivity.class));
                finish();
            }
        });
        /*
        底部直接跳转按键
        实现直接跳转到主界面
         */
        btnEnterNow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(bootInterfaceActivity.this, MainActivity.class));
                finish();
            }
        });

        /*
        viewpager监听器
         */
        viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {
                /*
                设置按钮隐藏
                如果当前序列等于数组的长度减一显示按键
                其他情况下隐藏
                 */
                if (i == mlist.size() - 1) {
                    btnEnterNow.setVisibility(VISIBLE);
                } else {
                    btnEnterNow.setVisibility(GONE);
                }
            }

            @Override
            public void onPageSelected(int i) {
                initSmallView(i);
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    /*
    实现底部小圆点
     */
    private void initSmallView(int i) {
        /*
        每次滑动页面
        移除所有小圆点视图
         */
        LLSmallView.removeAllViews();
        /*
        循环添加视图
         */
        for (int j = 0; j < mlist.size(); j++) {
           
            ImageView imageView = new ImageView(this);
            /*
            小圆点图片添加
             */
            if (i == j) {
                imageView.setImageResource(R.drawable.point_on);
            } else {
                imageView.setImageResource(R.drawable.point_off);
            }
            /*
            图片转换器
            小圆点的大小30*30dp
             */
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(30, 30);
            //小圆点的左间距15dp 右间距15dp
            layoutParams.leftMargin = 15;
            layoutParams.rightMargin = 15;
            //将试图加载到底部的线性布局中
            LLSmallView.addView(imageView, layoutParams);
        }
    }
}

这是功能实现然后，我们看一下适配器
在这里插入图片描述


import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

public class bootInterfaceAdapter extends PagerAdapter {
    List<View>list;

    /**
     * 构造方法
     * @param list
     */
    public bootInterfaceAdapter(List<View>list){
        this.list=list;
    }

    /**
     * 这个是页面的数量
     * @return
     */
    @Override
    public int getCount() {
        return list.size();
    }

    /**
     * 这个是到达某个页面时返回的数据（赋值）
     * @param view
     * @param o
     * @return
     */
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view==o;
    }

    /**
     * 加载视图
     * @param container
     * @param position
     * @return
     */
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        container.addView(list.get(position));
        return list.get(position);
    }

    /**
     * 删除视图
     * @param container
     * @param position
     * @param object
     */
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
       container.removeView(list.get(position));
    }
}

现在来解释一下

执行逻辑

首先将图片添加到数组中，然后将图片转化为视图，接着将视图传给适配器，最后适配器判断并加载视图。
小圆点的加载是判断当前是哪个页面，然后在一次性加载视图。

接下来上kotlin代码
在这里插入图片描述

import android.view.View
import android.view.ViewGroup
import androidx.annotation.NonNull
import androidx.viewpager.widget.PagerAdapter
import java.util.ArrayList

class BootInterfaceAdapter(mlist: ArrayList<View>) : PagerAdapter() {
    var list: List<View>? = null
    fun bootInterfaceAdapter(list: List<View>?) {
        this.list = list
    }

    override fun getCount(): Int {
        return list!!.size
    }

    override fun isViewFromObject(view: View, @NonNull o: Any): Boolean {
        return view === o
    }

    @NonNull
    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        container.addView(list!![position])
        return list!![position]
    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(list!![position])
    }

}

然后是功能代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

class BootInterFaceActivity : ActivityBase() {
    private var btnEnter: Button? = null
    private var LLSmallView: LinearLayout? = null
    private var viewpager: ViewPager? = null
    private var mlist: MutableList<View>? = null
    private lateinit var image: IntArray
    private var btnEnterNow: Button? = null

    /*
     布局绑定
     */
    override fun GetLayout(): Int {
        return R.layout.activity_boot_interface
    }


    /*
    控件绑定
     */
    override fun findView() {
        btnEnterNow = findViewById(R.id.enterNow)
        btnEnter = findViewById(R.id.btn_enter)
        LLSmallView = findViewById(R.id.LL_smallView)
        viewpager = findViewById(R.id.viewpager)
    }

    /*
    数据加载
     */
    override fun initData() {
        mlist = ArrayList()
        image = intArrayOf(R.drawable.pic_guidepage_1, R.drawable.pic_guidepage_2, R.drawable.pic_guidepage_3, R.drawable.pic_guidepage_4)
        for (i in image.indices) {
            val layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT)
            val imageView = ImageView(this)
            imageView.layoutParams = layoutParams
            imageView.setBackgroundResource(image[i])
            (mlist as ArrayList<View>).add(imageView)
        }
        val bootInterfaceAdapter=BootInterfaceAdapter(mlist as ArrayList<View>);
        viewpager?.setAdapter(bootInterfaceAdapter)
        /*
        加载底部小圆点
        当前页面位于第一页的情况下
         */initSmallView(0)
    }



    /*
      监听事件
    */

    /*
      监听事件
    */
    override fun setListener() {
        /*
      顶部跳过按键
      响应事件
      跳转到主界面
    */
        btnEnter!!.setOnClickListener {
            startActivity(Intent(this, LoginActivity::class.java))
            finish()
        }
        /*
        底部直接跳转按键
        实现直接跳转到主界面
         */btnEnterNow!!.setOnClickListener {
            startActivity(Intent(this, LoginActivity::class.java))
            finish()
        }

        /*
        viewpager监听器
         */viewpager?.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
            override fun onPageScrolled(i: Int, v: Float, i1: Int) {
                /*
                设置按钮隐藏
                如果当前序列等于数组的长度减一显示按键
                其他情况下隐藏
                 */
                if (i == mlist!!.size - 1) {
                    btnEnterNow!!.visibility = View.VISIBLE
                } else {
                    btnEnterNow!!.visibility = View.GONE
                }
            }

            override fun onPageSelected(i: Int) {
                initSmallView(i)
            }

            override fun onPageScrollStateChanged(i: Int) {}
        })
    }

    /*
    实现底部小圆点
     */
    private fun initSmallView(i: Int) {
        /*
        每次滑动页面
        移除所有小圆点视图
         */
        LLSmallView!!.removeAllViews()
        /*
        循环添加视图
         */for (j in mlist!!.indices) {
            /*
            创建视图
             */
            val imageView = ImageView(this)
            /*
            小圆点图片添加
             */if (i == j) {
                imageView.setImageResource(R.drawable.point_on)
            } else {
                imageView.setImageResource(R.drawable.point_off)
            }
            /*
            图片转换器
            小圆点的大小30*30dp
             */
            val layoutParams = LinearLayout.LayoutParams(30, 30)
            //小圆点的左间距15dp 右间距15dp
            layoutParams.leftMargin = 15
            layoutParams.rightMargin = 15
            //将试图加载到底部的线性布局中
            LLSmallView!!.addView(imageView, layoutParams)
        }
    }
}

最后附上布局和Base
在这里插入图片描述
base代码

public abstract class ActivityBase extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(GetLayout());
        findView();
        initData();
        setListener();
    }

    protected abstract int GetLayout();

    protected abstract void findView();

    protected abstract void initData();

    protected abstract void setListener();


}

布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <Button
        android:id="@+id/btn_enter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="20dp"
        android:layout_marginRight="35dp"
        android:alpha="0.6"
        android:text="跳过" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="15dp"
        android:gravity="center"
        android:orientation="vertical">
        <Button
            android:id="@+id/enterNow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="立即进入"></Button>
        <LinearLayout
            android:id="@+id/LL_smallView"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:orientation="horizontal"></LinearLayout>
    </LinearLayout>
</RelativeLayout>
清风伴佳人
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Github项目解析（十三）-->使用Kotlin实现UC头条ViewPager左右滑动效果
一片枫叶的专栏
09-26 3708
本文我们将介绍一个使用kotlin实现的仿照UC头条ViewPager的左右滑动效果。这个项目是为了学习kotlin的使用以及基本语法，在实现的过程中主要需要注意的有两点：一个是UC头条在滑动过程中的遮盖动画效果，一个是跨多个Tab点击屏蔽多个页面滑动效果
Android实现ViewPager适配器kotlin简单实现
weixin_51143190的博客
09-14 1315
注意是viewpager实现的，viewpager2的适配器和1不同。layoutList整型列表，保存要切换的视图id。context上下文，即调用它的Activity。override时记得把高亮的todo提示删掉。itemCount：页数，从1开始。在n个视图间水平滑动切换。类名：VPAdapter。
安卓无障碍AccessibilityService滑动滚动控制距离长度
gallonyin的博客
07-06 4319
在安卓中使用无障碍服务 AccessibilityService，如何实现上下滚动和左右滚动，如何控制滚动时间和滚动距离，相信很多小伙伴并不知道如何操作，本文就来介绍一种通过系统 API 组合提供的完美解决方案。提供的这两个 API，没有设置滚动距离的参数。Android 7.0 开始官方引入了 Gesturedescription 模拟手势，使用模拟手势 API，我们可以对屏幕任意位置进行模拟点击、长按和滑动等操作。笔划路径持续的时间，从手势开始到笔划应该开始的时间......
Android kotlin (美团app左右滑动菜单栏)用RecyclerView(androidx+BRVAH3.0.6)实现ViewPager(androidx+左右滑动)菜单栏功能
彬sir哥的博客
11-06 4025
翻页时，也就是说在左右滑动时，下面小圆点的状态也要相应地做出改变。3、在初始化数据源时，如何动态获取资源。布局小圆点的状态可以被左右滑动。这依赖包还需要得到要添加，在。在添加以下代码，不添加就不行。（2）是从数据顺序获取的。出多少个小圆点，并且在。，方便不用添加任何图标。
Android Studio kotlin编程实现图片滑动浏览 stepbystep
jaz的专栏
08-07 2525
1 基本介绍 参照 kotlin官网：使用 RecyclerView 显示可滚动列表的 案例实现 功能：采用RecyclerView 空间实现图片和文字的滚动浏览。
初学Kotlin——在自定义View里的应用
weixin_34209851的博客
03-26 1251
什么是Kotlin Kotlin，它是JetBrains开发的基于JVM的面向对象的语言。2017年的时候被Google推荐Android的官方语言，同时Android studio 3.0正式支持这门语言，在这个编译器上创建一个Kotlin项目，非常方便，甚至可以Java转为Kotlin。 我主要是在通过实现自定义View过程中,说一下Kotlin与Java的异同,其实两者非常相似 对Kotli...
KotlinDemo2.zip
05-24
6. 消息气泡：聊天界面中，不同类型的（文字、图片、语音等）消息通常会被包装在形状各异的气泡中，这需要自定义View或者使用第三方库如BubbleView实现。 这个KotlinDemo2项目就是一个很好的实践案例，它将理论知识...
Android实现类似qq微信消息悬浮窗通知功能
01-04
实现方法：（需要开启悬浮窗通知权限、允许应用在其他应用上显示） 一.利用headsup 悬挂式Notification，他是5.0中新增的，也就是API中的Headsup的Notification，可以在不打断用户操作的时候，给用户通知 二.使用...
Kotlin扩展函数及实现机制的深入探索
01-04
先让我们看下实现同样的功能，Java和Kotiln的对比： // JAVA，20多行代码，充斥着findViewById，类型转换，匿名内部类这样的无意义代码 public class MainJavaActivity extends Activity { @Override public void...
Android-使用Kotlin实现的高仿UC头条ViewPager左右滑动效果
08-13
使用Kotlin实现的高仿UC头条ViewPager左右滑动效果
Kotlin的基础使用
06-14
项目中设计到使用kotlin语言，实现了属性动画模式，Activity之间的跳转，布局控件的获取，Fragment碎片的填充，Viewpager填充碎片左右滚动的实现
kotlin--利用TabLayout、ViewPager、Fragment实现滑动切换页面
02-15
利用TabLayout、ViewPager、Fragment实现滑动切换页面
android 仿京东，滚动屏幕标题栏渐变+（启动页面动画）
03-17
此资源只使用自定义scrollview 实现标题栏渐变和上拉下拉刷新。如果需要listview，等其他控件，需实现onScrollListener，在onscroll中嵌入渐变代码。
Android-app-kotiln:使用Kotlin进行android开发的基本功能
03-17
在Kotlin中，这可以在`MainActivity.kt`文件中的`onCreate`方法中实现： ```kotlin import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import android.widget.TextView class ...
Android图片预览功能（可旋转、缩放、左右切换）
热门推荐
yeaper_yeo的博客
03-12 1万+
我们要实现的效果 1、点击图片出现预览界面 2、可对图片进行旋转、缩放 3、能左右滑动，预览其他图片 4、单击预览界面后，回到上一界面 具体如下图：            使用到的第三方库 1、图片加载缓存库 Picasso：https://github.com/square/picasso 2、图片浏览缩放控件 PhotoView：https://git
用kotlin怎么写Android切换界面
qq_44856481的博客
07-21 1206
跳转页面
安卓Kotlin 使用ViewPager2实现简易左右滑动翻页效果
星空千代
07-21 2480
布局很简单，R.layout.onepage仅有一个占满全屏幕的ImageView名为onei，R.layout.activity_view仅有一个占满全屏幕的ViewPager2名为vp 以下为Activity的全部代码： class ViewActivity:Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) set
kotlin 实现viewpager图片切换
安卓兼职framework和app工程师的博客
11-16 955
通过kotlin 来实现viewpager案例，代码部分如下 1.class ViewPagersActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layou...
Kotiln open
最新发布
11-02
Kotlin中的open关键字用于声明一个类或方法是可继承或可重写的。如果一个类或方法没有使用open关键字，则默认是不可继承或不可重写的。在Kotlin中，类和方法默认是final的，这意味着它们不能被继承或重写。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清风伴佳人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值