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

Posted 2022-12-07 清风伴佳人

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>