Android開發-歡迎引導模塊(引導)

Android開發-歡迎引導模塊(引導)

前言

緊接着上篇博客,我們一起來實現一下引導頁功能這個常用於向第一次安裝這個軟件的用戶介紹軟件的特性和功能,分頁輪播。

繪製佈局

線性佈局:ViewPage(滑動視圖)+Button(按鈕)+LinearLayout(圓點)

<?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:gravity="center"
    >


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/new_pg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/new_bg3" />

    <Button
        android:id="@+id/sat_new"
        android:layout_width="match_parent"
        android:background="#00000000"
        android:layout_height="50dp"
        android:textColor="#FF9D00"
        android:textSize="30dp"
        android:text="立即體驗"
        android:layout_marginTop="600dp"/>
    <LinearLayout
        android:id="@+id/pointer"
        android:layout_below="@+id/sat_new"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:gravity="center"
        android:orientation="horizontal">

    </LinearLayout>

</RelativeLayout>

實現功能

首先定義一個兩張以上圖片的數組(int[] imgs = {};),然後編寫viewpage適配器(格式固定寫法,套用即可),getCount() 方法裏可以指定顯示可滑動圖片的張數,最後在guidePoint.setBackgroundResource(R.drawable.yuandian) 裏設置圓點樣式。

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

import java.util.ArrayList;

import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;

public class StarActivity extends AppCompatActivity {
    private ViewPager guideVp;
    //定義一個圓點容器
    private LinearLayout guideLl;
    //定義一個在最後一頁顯示的按鈕
    private Button guideBtn;
    //定義一個圖片數組
    public int[] imgs = {R.drawable.new_bg1,R.drawable.new_bg2,R.drawable.new_bg3};
    public ArrayList<ImageView> imageViewArrayList;
    private int guidePointPsition = 0;  //上次顯示的位置

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //全屏展示
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_new);
        //控件初始化
        initView();
        //小圓點
        initData();
        //獲取適配器對象
        GuideAdapter guideAdapter = new GuideAdapter(imageViewArrayList);
        //應用適配器
        guideVp.setAdapter(guideAdapter);
        guideVp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                guideLl.getChildAt(position).setEnabled(true);
                guideLl.getChildAt(guidePointPsition).setEnabled(false);
                guidePointPsition = position;

                if (imageViewArrayList.size()-1 == position){
                    //如果到了最後一頁,就顯示按鈕
                    guideBtn.setVisibility(View.VISIBLE);
                }else{
                    guideBtn.setVisibility(View.GONE);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        guideBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(new Intent(StarActivity.this, LoginActivity.class));
            }
        });
    }

    private void initData() {
        imageViewArrayList = new ArrayList<>();
        for (int i = 0; i < imgs.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(imgs[i]);
            imageViewArrayList.add(imageView);

            ImageView guidePoint = new ImageView(this);
            //小圓點樣式設置
            guidePoint.setBackgroundResource(R.drawable.yuandian);

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
            if (i == 0)
                guidePoint.setEnabled(true);
            else {
                guidePoint.setEnabled(false);
                params.setMarginStart(15);
            }
            guidePoint.setLayoutParams(params);

            guideLl.addView(guidePoint);
        }
    }

    private void initView() {
        guideVp = findViewById(R.id.new_pg);
        guideBtn = findViewById(R.id.sat_new);
        guideLl = findViewById(R.id.pointer);
        guideBtn.setVisibility(View.GONE);
    }
    //ViewPager適配器
    class GuideAdapter extends PagerAdapter {
        private ArrayList<ImageView> imageViews;

        public GuideAdapter(ArrayList<ImageView> imageViews) {
            this.imageViews = imageViews;
        }

        @Override
        public int getCount() {
            return imageViewArrayList.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView view = imageViewArrayList.get(position);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

}

效果展示

在這裏插入圖片描述
按鈕沒有固定對象,所以效果展示上有點問題,解決方法如下:
可見佔位:
android:visibility=“visible”;
Java代碼:view.setVisibility(View.VISIBLE);
不可見佔位:
android:visibility=“invisible”;
Java代碼:view.setVisibility(View.INVISIBLE);
隱藏不佔位:
android:visibility=“gone”;
Java代碼:view.setVisibility(View.GONE);
相關文章: Android開發-歡迎引導模塊(歡迎)

發佈了17 篇原創文章 · 獲贊 3 · 訪問量 1362
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章