Android最简单的引导页（基于Android侧滑菜单的改造）

最新推荐文章于 2021-12-05 18:11:15 发布

洋大阔天

最新推荐文章于 2021-12-05 18:11:15 发布

阅读量657

点赞数 1

分类专栏： Android UI 文章标签：洋大阔天 android 布局引导页

本文链接：https://blog.csdn.net/u012600997/article/details/50721117

版权

Android UI 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

今天给大家带来的是最简单的引导页面，这是在Android侧滑菜单（最简）上加以改变得到的，大家如果现看懂了那篇文章，这个理解起来就很简单了。

首先给大家讲解一下原理：在引导页里面横着放4个线性布局，铺满全屏，然后根据每一个线性布局的触碰事件控制第一个线性布局的左边距即可。然后还要在设置一个常量，控制是否显示引导页。

接下来看一下效果图：

如果这是你需要的效果就继续往下面看吧

首先是引导页的页面布局

activity_welcome.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="gulubaobao.com.mywelcome.WelcomeActivity">
    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30dp"
            android:text="欢迎一"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linear2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30dp"
            android:text="欢迎二"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linear3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30dp"
            android:text="欢迎三"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30dp"
            android:text="欢迎四"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="开始"
            android:onClick="onWelClick"/>
    </LinearLayout>
</LinearLayout>

然后是主页面的页面布局：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        android:text="主页面"/>

</LinearLayout>

然后是主页面的java类：

MainActivity.java

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

接下来就是主要的引导页的java类了，里面注释还算比较整齐，大家仔细看肯定是可以看懂的

WelcomeActivity.java

import android.content.Intent;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;

public class WelcomeActivity extends AppCompatActivity {

    public int windowWidth,tomove;//屏幕宽度，正在滑动的值
    public LinearLayout linear1,linear2,linear3,linear4;
    public LinearLayout.LayoutParams linearp1,linearp2,linearp3,linearp4;
    public float xdown,xmove;//触碰、移动的绝对位置

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        if(!config.ISSHOWWEL){
            startActivity(new Intent(WelcomeActivity.this,MainActivity.class));
            WelcomeActivity.this.finish();
        }
        windowWidth = getWindowManager().getDefaultDisplay().getWidth();//获取屏幕宽度
        //获取控件
        linear1 = (LinearLayout) findViewById(R.id.linear1);
        linear2 = (LinearLayout) findViewById(R.id.linear2);
        linear3 = (LinearLayout) findViewById(R.id.linear3);
        linear4 = (LinearLayout) findViewById(R.id.linear4);
        //定义父容器和父容器的宽度
        linearp1 =(LinearLayout.LayoutParams)linear1.getLayoutParams();
        linearp1.width = windowWidth;
        linearp2 =(LinearLayout.LayoutParams)linear2.getLayoutParams();
        linearp2.width = windowWidth;
        linearp3 =(LinearLayout.LayoutParams)linear3.getLayoutParams();
        linearp3.width = windowWidth;
        linearp4 =(LinearLayout.LayoutParams)linear4.getLayoutParams();
        linearp4.width = windowWidth;
        //初始化控件
        initView(0);
        linear1.setOnTouchListener(new MyOnTouchListener());
        linear2.setOnTouchListener(new MyOnTouchListener());
        linear3.setOnTouchListener(new MyOnTouchListener());
        linear4.setOnTouchListener(new MyOnTouchListener());
    }
    /**
     * 页面的初始位置和移动时显示
     * @param index
     */
    private void initView(int index) {
        linearp1.leftMargin=-index*windowWidth-tomove;
        linear1.setLayoutParams(linearp1);
    }
    //几个引导页面的触碰事件
    class MyOnTouchListener implements View.OnTouchListener {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (v.getId()){
                case R.id.linear1:
                    switch (event.getAction()){
                        case MotionEvent.ACTION_DOWN:
                            xdown = event.getRawX();
                            break;
                        case MotionEvent.ACTION_MOVE:
                            xmove = event.getRawX();
                            //根据手指滑动的方向确定页面的偏移量
                            if(xdown<xmove){//向右滑
                                tomove = -(int)(xmove-xdown);
                            }else{//向左滑
                                tomove = (int)(xdown-xmove);
                                //时时显示偏移量
                                initView(0);
                            }
                            break;
                        case MotionEvent.ACTION_UP:
                            //根据偏移量判断是否换页和换到哪一页
                            if(tomove<0){//上一页
                                //没有上一页
                            }else{//下一页
                                if(Math.abs(tomove)>windowWidth/2){//可换页
                                    tomove = 0;
                                    new ScrollTask().execute(-20,1);
                                }else{//不可换页
                                    tomove = 0;
                                    new ScrollTask().execute(20,0);
                                }
                            }
                            break;
                    }
                    break;
                case R.id.linear2:
                    switch (event.getAction()){
                        case MotionEvent.ACTION_DOWN:
                            xdown = event.getRawX();
                            break;
                        case MotionEvent.ACTION_MOVE:
                            xmove = event.getRawX();
                            if(xdown<xmove){//向右滑
                                tomove = -(int)(xmove-xdown);
                            }else{//向左滑
                                tomove = (int)(xdown-xmove);
                            }
                            System.out.println(tomove);
                            initView(1);
                            break;
                        case MotionEvent.ACTION_UP:
                            if(tomove<0){//上一页
                                if(Math.abs(tomove)>windowWidth/2){//可换页
                                    tomove = 0;
                                    new ScrollTask().execute(20, 0);
                                }else{
                                    tomove = 0;
                                    new ScrollTask().execute(-20, 1);
                                }
                            }else{//下一页
                                if(Math.abs(tomove)>windowWidth/2){//可换页
                                    tomove = 0;
                                    new ScrollTask().execute(-20,2);
                                }else{
                                    tomove = 0;
                                    new ScrollTask().execute(20, 1);
                                }
                            }
                            break;
                    }
                    break;
                case R.id.linear3:
                    switch (event.getAction()){
                        case MotionEvent.ACTION_DOWN:
                            xdown = event.getRawX();
                            break;
                        case MotionEvent.ACTION_MOVE:
                            xmove = event.getRawX();
                            if(xdown<xmove){//向右滑
                                tomove = -(int)(xmove-xdown);
                            }else{//向左滑
                                tomove = (int)(xdown-xmove);
                            }
                            System.out.println(tomove);
                            initView(2);
                            break;
                        case MotionEvent.ACTION_UP:
                            if(tomove<0){//上一页
                                if(Math.abs(tomove)>windowWidth/2){//可换页
                                    tomove = 0;
                                    new ScrollTask().execute(20,1);
                                }else{
                                    tomove = 0;
                                    new ScrollTask().execute(-20, 2);
                                }
                            }else{//下一页
                                if(Math.abs(tomove)>windowWidth/2){//可换页
                                    tomove = 0;
                                    new ScrollTask().execute(-20,3);
                                }else{
                                    tomove = 0;
                                    new ScrollTask().execute(20, 2);
                                }
                            }
                            break;
                    }
                    break;
                case R.id.linear4:
                    switch (event.getAction()){
                        case MotionEvent.ACTION_DOWN:
                            xdown = event.getRawX();
                            break;
                        case MotionEvent.ACTION_MOVE:
                            xmove = event.getRawX();
                            if(xdown<xmove){//向右滑
                                tomove = -(int)(xmove-xdown);
                                initView(3);
                            }else{//向左滑
                                tomove = (int)(xdown-xmove);
                            }
                            System.out.println(tomove);

                            break;
                        case MotionEvent.ACTION_UP:
                            if(tomove<0){//上一页
                                if(Math.abs(tomove)>windowWidth/2){//可换页
                                    tomove = 0;
                                    new ScrollTask().execute(20, 2);
                                }else{
                                    tomove = 0;
                                    new ScrollTask().execute(-20, 3);
                                }
                            }else{//下一页
                                //没有下一页
                            }
                            break;
                    }
                    break;
            }
            return true;
        }
    }
    //异步线程控制屏幕在翻页和回滚时候的速度和偏移量，给人滑动过去的感觉
    class ScrollTask extends AsyncTask<Integer,Integer,Integer>{
        @Override
        protected Integer doInBackground(Integer... params) {
            int leftMargin = linearp1.leftMargin;
            while (true){
                leftMargin+=params[0];
                if (params[0]<0){//屏幕向左滑，实现回滚和下一页
                    if(leftMargin<-params[1]*windowWidth){
                        leftMargin = -params[1]*windowWidth;
                        break;
                    }
                }else{//屏幕想右滚，实现回滚和上一页
                    if(leftMargin>-params[1]*windowWidth){
                        leftMargin = -params[1]*windowWidth;
                        break;
                    }
                }
                publishProgress(leftMargin);//跟新页面的偏移量
                try {
                    Thread.sleep(30);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            return leftMargin;
        }
        //异步每一步执行之后的偏移量
        @Override
        protected void onProgressUpdate(Integer... leftMargin) {
            linearp1.leftMargin = leftMargin[0];
            linear1.setLayoutParams(linearp1);
        }
        //初始化执行的偏移量
        @Override
        protected void onPostExecute(Integer leftMargin) {
            linearp1.leftMargin = leftMargin;
            linear1.setLayoutParams(linearp1);
        }
    }
    //开始按钮的点击事件
    public void onWelClick(View v){
        config.ISSHOWWEL = false;
        startActivity(new Intent(WelcomeActivity.this,MainActivity.class));
        WelcomeActivity.this.finish();
    }
}

这样就只差配置文件了，少了配置文件可不行，所以大家还需要定义一个配置类，添加是否显示引导页的判断，毕竟引导页只会在软件刚刚下载的时候运行，之后就不会运行了，所以还需要

config.java

public class config {
    public static boolean ISSHOWWEL = true;
}

最后就是添加这两个类的启动项了，这个不能够忘记哟AndroidManifest.xml

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".WelcomeActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity" android:screenOrientation="portrait"/>
    </application>

这样就大功告成了，如果你还是看不懂就只能够去下载源码 Android最简单的引导页（基于Android侧滑菜单的改造，然后再自己研究了，不过下载源码是需要1积分的哟，所以还是静下心来多看看吧，其实很好懂的。
如果对你有所帮助，请点个赞，谢谢！