Android 引导页

慢慢来_静下心
638 阅读2分钟

1:布局

//  res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_guide"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/guide_ViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <requestFocus />
    </androidx.viewpager.widget.ViewPager>
    <LinearLayout
        android:id="@+id/dot_Layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:layout_marginBottom="45dip"
        >
        <View
            android:id="@+id/circle0"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/guide_circle_bg2"
            android:layout_marginRight="10dp"/>
        <View
            android:id="@+id/circle1"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/guide_circle_bg1"
            android:layout_marginRight="10dp"/>
        <View
            android:id="@+id/circle2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/guide_circle_bg1"
            android:layout_marginRight="10dp"/>
        <View
            android:id="@+id/circle3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/guide_circle_bg1"
            android:layout_marginRight="10dp"/>
        <View
            android:id="@+id/circle4"
            android:layout_width="10dp"
            android:background="@drawable/guide_circle_bg1"
            android:layout_height="10dp" />
    </LinearLayout>

</RelativeLayout>

//  res/drawable/guide_circle_bg1

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <corners android:radius="5dp"/>
    <solid android:color="#666666"/>
    <size android:width="10dp"
        android:height="10dp"/>

</shape>

//  res/drawable/guide_circle_bg2

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <corners android:radius="5dp"/>
    <solid android:color="#9932cd"/>
    <size android:width="10dp"
        android:height="10dp"/>

</shape>

// res/layout/fragment_guide

<?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">

    <ImageView
        android:id="@+id/guide_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"/>

</LinearLayout>

2:Fragment

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class GuideFragment extends Fragment {
    private ImageView mGuideImg;

    public static Fragment newInstance(int paramInt) {
        GuideFragment guideFragment = new GuideFragment();
        Bundle localBundle = new Bundle();
        localBundle.putInt("ImageID", paramInt);
        guideFragment.setArguments(localBundle);
        return guideFragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_guide, container, false);
        mGuideImg = view.findViewById(R.id.guide_image);
        mGuideImg.setImageResource(getArguments().getInt("ImageID", 0));
        return view;
    }
}

3:Adapter

import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
/*
* FragmentPagerAdapter不销毁Fragment实例，只销毁视图；
* FragmentStatePagerAdapter销毁实例。
* 
* FragmentPagerAdapter在不用的时候执行detach，当又需要用到的时候再attach；
* FragmentStatePagerAdapter在不用的时候执行remove又需要时再add。
* 因此在选择的时候建议如下
*   当页面比较多的时候，为了节省内存，优先使用FragmentStatePagerAdpater;
*   只有几个页面时候就用FragmentPagerAdapter，减少反复创建销毁的开销。
* */
public class ViewPagerAdapter extends FragmentPagerAdapter {

    private FragmentManager mfragmentManager;
    private List<Fragment> mlist;

    public ViewPagerAdapter(FragmentManager fm,List<Fragment> list) {
        super(fm);
        mlist = list;
    }

    @Override
    public Fragment getItem(int arg0) {
        return mlist.get(arg0);//显示第几个页面
    }

    @Override
    public int getCount() {
        return mlist.size();//有几个页面
    }
}

4:Activity


import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.util.Log;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager mViewPager;
    //当确定具体个数时，带参初始化ArrayList。
    private List<Fragment> mListFragment = new ArrayList<>(5);
    private List<View> mListView = new ArrayList<>(5);
    private ViewPagerAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }
    private void initView(){
        mViewPager = findViewById(R.id.guide_ViewPager);
        mViewPager.setOnPageChangeListener(this);
        mListFragment.add(GuideFragment.newInstance(R.mipmap.welcome_1));
        mListFragment.add(GuideFragment.newInstance(R.mipmap.welcome_2));
        mListFragment.add(GuideFragment.newInstance(R.mipmap.welcome_3));
        mListFragment.add(GuideFragment.newInstance(R.mipmap.welcome_5));
        mListFragment.add(GuideFragment.newInstance(R.mipmap.welcome_7));
        mAdapter = new ViewPagerAdapter(getSupportFragmentManager(),mListFragment);
        mListView.add(findViewById(R.id.circle0));
        mListView.add(findViewById(R.id.circle1));
        mListView.add(findViewById(R.id.circle2));
        mListView.add(findViewById(R.id.circle3));
        mListView.add(findViewById(R.id.circle4));
        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(0);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
    @Override
    public void onPageSelected(int position) {
        Log.d("lsc","--lsc:" + position);
        switch (position) {
            case 0:
                setCircle(0);
                break;
            case 1:
                setCircle(1);
                break;
            case 2:
                setCircle(2);
                break;
            case 3:
                setCircle(3);
                break;
            case 4:
                setCircle(4);
                break;
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }
    private void setCircle(int position){
        for (int i=0;i<mListView.size();i++){
            if (position == i){
                mListView.get(i).setBackgroundResource(R.drawable.guide_circle_bg2);
                continue;
            }
            mListView.get(i).setBackgroundResource(R.drawable.guide_circle_bg1);
        }
    }
}
avatar
文章
阅读
粉丝