Android 引导页

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>

猜你喜欢

转载自blog.csdn.net/u014627911/article/details/109030479