kotiln实现滑屏界面（图片切换）
首先我们先来看一下Java的滑屏是怎样实现的。
/**
* create by dragon
*/
public class bootInterfaceActivity extends baseActivity {
private Button btnEnter;
private LinearLayout LLSmallView;
private ViewPager viewpager;
private List
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
/**
* 构造方法
* @param list
*/
public bootInterfaceAdapter(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));
}
}
现在来解释一下
执行逻辑
首先将图片添加到数组中，然后将图片转化为视图，接着将视图传给适配器，最后适配器判断并加载视图。
小圆点的加载是判断当前是哪个页面，然后在一次性加载视图。
接下来上kotiln代码
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
var list: List
fun bootInterfaceAdapter(list: List
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
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
}
val bootInterfaceAdapter=BootInterfaceAdapter(mlist as ArrayList
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();
}
布局代码
android:layout_width="match_parent" android:layout_height="match_parent"> android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> 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="跳过" /> android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="15dp" android:gravity="center" android:orientation="vertical"> android:id="@+id/enterNow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="立即进入"> android:id="@+id/LL_smallView" android:layout_width="wrap_content" android:layout_height="35dp" android:orientation="horizontal">