Android 引导页制作(加小圆点)
1.导包:导入viewpager包(4.0版本以上已自带)/或者使用viewpager2
implementation 'androidx.viewpager2:viewpager2:1.1.0-alpha01'
主要流程:布局文件添加viewpage控件 以及 自定义Layout控件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ccc"
tools:context=".MainActivity">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<requestFocus />
</androidx.viewpager.widget.ViewPager>
<com.example.viewpager.BottomLinulayout
android:id="@+id/btx"
android:layout_width="match_parent"
android:layout_marginTop="600dp"
android:layout_height="wrap_content" />
</RelativeLayout>
viewpager2可以添加滑动方向(竖直或水平)
package com.example.viewpager;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.content.Intent;
import android.graphics.Point;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
int currentItem;
ArrayList<View> views = new ArrayList<View>(); private static final int[] pics = { R.layout.layout1,
R.layout.layout2, R.layout.layout3};//初始化图片资源,创建XML文件显示引导页
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViewPager();
}
private void initViewPager() {
ViewPager viewPager =(ViewPager)findViewById(R.id.viewpager);
for (int i = 0; i < pics.length; i++) {
View view = LayoutInflater.from(this).inflate(pics[i], null);
if (i == pics.length - 1) {
Button btt = view.findViewById(R.id.jr);//**重点:这里必须添加view来绑定控件,否则会空指针**
btt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this, Main2Activity.class);
startActivity(intent);
}
});
}
views.add(view);//list添加页面
}
final BottomLinulayout bt=findViewById(R.id.btx);//绑定小圆点控件
bt.initViews(views.size(),30,2);//参数:圆点个数、高度、间距
MYViewPageAdapter adapter = new MYViewPageAdapter();
adapter.setViews(views);//设置适配器参数
viewPager.setAdapter(adapter);//设置适配器
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if(bt != null){
bt.changePosition(position);//当页面改变后改变圆点位置,通过view的position同步
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
viewPager.setOnTouchListener(new View.OnTouchListener() {
float startX;
float startY;
float endX;
float endY;
@Override
public boolean onTouch(View view, MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN://当触摸按下
startX=event.getX();
startY=event.getY();
break;
case MotionEvent.ACTION_UP://当触摸抬起来
endX=event.getX();
endY=event.getY();
WindowManager windowManager= (WindowManager) getApplicationContext().getSystemService(MainActivity.this.WINDOW_SERVICE);
//获取屏幕的宽度
Point size = new Point();
windowManager.getDefaultDisplay().getSize(size);
int width=size.x;
//首先要确定的是,是否到了最后一页,然后判断是否向左滑动,并且滑动距离是否符合,我这里的判断距离是屏幕宽度的4分之一(这里可以适当控制)
if(currentItem==(views.size()-1)&&startX-endX>0&&startX-endX>=(width/4)){
// goToMainActivity();//跳转页面
overridePendingTransition(R.xml.slide_in_right,R.xml.slide_in_left);//实现两个 Activity 切换时的动画。左滑 右滑,通过xml进行动画编辑
}
break;
} return false;
}
});
}
private void goToMainActivity() {
Intent intent=new Intent(this,Main2Activity.class);
startActivity(intent);
}
}
其中,需要自定义适配器,继承pageadpter:
package adpter;
import android.view.View;
import android.widget.BaseAdapter;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import java.util.ArrayList;
public class MYViewPageAdapter extends PagerAdapter {
private ArrayList<View> views;
public void setViews(ArrayList<View> views){
this.views = views;
}
@Override
public int getCount() {
return views.size();
}//返回view个数
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(views.get(position));
}//删除页面
@Override
public Object instantiateItem(View container, int position) {
((ViewPager) container).addView(views.get(position));
return views.get(position);//生成页面
}
}
小圆点的自定义布局文件:
package com.example.viewpager;
import android.content.Context;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import androidx.annotation.Nullable;
public class BottomLinulayout extends LinearLayout {
private int itemDefaultBgResId = R.drawable.normal;//单个元素默认背景样式
private int itemSelectedBgResId = R.drawable.select;//单个元素选中背景样式
private int currentPosition;//当前选中位置
private int itemHeight = 50;//item宽高
private int itemMargin = 5;//item间距
public BottomLinulayout(Context context) {
this(context, null, 0);
}
public BottomLinulayout(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public BottomLinulayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setOrientation(HORIZONTAL);
setGravity(Gravity.CENTER);
}
public void initViews(int count, int itemHeight, int itemMargin) {//设置小圆点
this.itemHeight = itemHeight;
this.itemMargin = itemMargin;
removeAllViews();//每次创建移除views
if(count == 0 || itemHeight == 0){
return;
}
View view = createView(itemHeight,itemMargin);//创建一个view
view.setBackgroundResource(itemSelectedBgResId);//设置当前选中的样式
addView(view);//将view添加到布局中
if(count == 1){
return;//如果只有一个 不必生成未选中的图
}
for (int i = 1; i < count; i++) {
view = createView(itemHeight,itemMargin);
view.setBackgroundResource(itemDefaultBgResId);//生成未选中的样式
addView(view);
}
}
/**
* 创建view
* @param sideLength 边长
* @param itemMargin 外间距
* @return
*/
public View createView(int sideLength,int itemMargin){
TextView textview = new TextView(getContext());
LinearLayout.LayoutParams params = new LayoutParams(sideLength, sideLength);//LayoutParams 是 ViewGroup 的一个内部类,这是一个基类,
if(itemMargin > 0){
params.setMargins(itemMargin,0,itemMargin,0);
}
textview.setLayoutParams(params);//设置textview的Parms
return textview;
}
public void changePosition(int position) {//改变选中的view
if(getChildCount() <= 1){
return;
}
getChildAt(currentPosition).setBackgroundResource(itemDefaultBgResId);
currentPosition = position % getChildCount();
getChildAt(currentPosition).setBackgroundResource(itemSelectedBgResId);
}
}
小圆点实心或者空心文件,通过shape文件控制
//空心
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">//shape设置形状 oval为椭圆 rectangle(矩形),ov,line(线形),ring(圆环)
<solid android:color="#fff"/>//设置填充色
<size
android:width="10dp"//设置宽
android:height="10dp"></size>
<stroke android:color="#ccc" android:width="1dp"/>
</shape>
```java
//实心
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/cardview_dark_background"/>
<size
android:width="9dp"
android:height="9dp"></size>
<!--<stroke android:color="#fff" android:width="1dp"/>-->
</shape>