Android UI—引导页ViewPager使用
由于工作需要,准备转型Android开发。对于公司来说,可以集中力量开发Android产品,加快开发进度;对于个人来说,掌握另一门编程语言,也是提升自我的一个机会,正所谓技多不压身^^。
前言
今天学习了ViewPager控件的基本使用方法,实现了引导页的滑动、导航点的添加、进入主页面按钮、首次启动显示引导页,再次启动直接进入主页面等功能。总结如下:
一.引导页XML + Activity
1.引导页布局文件:导航点布局文件:one.xml … 、guide.xml
在layout布局文件中新建one.xml导航点,tow.xml、three.xml类似one.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/guide_1"/>
</LinearLayout>
新建guide.xml,并定义三个ImageView:
<?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.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#00000000"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/ll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/iv1"
android:src="@drawable/login_point_selected"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/iv2"
android:src="@drawable/login_point"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/iv3"
android:src="@drawable/login_point"/>
</LinearLayout>
</RelativeLayout>
- 引导页Activity:Guide,并继承自ViewPager.OnPageChangeListener
初始化视图数据:
private void initViews() {
LayoutInflater inflater = LayoutInflater.from(this);
views = new ArrayList<View>();
views.add(inflater.inflate(R.layout.one, null));
views.add(inflater.inflate(R.layout.two, null));
views.add(inflater.inflate(R.layout.three, null));
//传views到ViewPagerAdapter
vpAdapter = new ViewPagerAdapter(views, this);
vp = (ViewPager) findViewById(R.id.viewpager);
vp.setAdapter(vpAdapter);
//设置对pager的监听
vp.setOnPageChangeListener(this);
//初始化
start_btn = views.get(2).findViewById(R.id.start_btn);
start_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent i = new Intent(Guide.this, MainActivity.class);
startActivity(i);
//该Activity结束,并关闭该Activity
finish();
}
});
//设置导航点
dots = new ImageView[views.size()];
for (int i = 0; i < views.size(); i++) {
dots[i] = (ImageView) findViewById(ids[i]);
}
}
重写onCreate方法:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide);
initViews();
}
重写ViewPager.OnPageChangeListener相关方法:
//滑动每个pager后调用
@Override
public void onPageSelected(int i) {
for (int j = 0; j < ids.length; j++) {
if (j == i) {
dots[j].setImageResource(R.drawable.login_point_selected);
}
else {
dots[j].setImageResource(R.drawable.login_point);
}
}
}
二.ViewPagerAdapter
1.创建ViewPagerAdapter类,继承自PagerAdapter
重写ViewPagerAdapter构造方法:
public ViewPagerAdapter(List<View> views, Context context) {
this.views = views;
this.context = context;
}
重写PagerAdapter相关方法:
//销毁View时调用
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
((ViewPager) container).removeView(views.get(position));
}
//加载View时调用
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
((ViewPager) container).addView(views.get(position));
return views.get(position);
}
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
return (view == o);
}
三.欢迎页:XML + WelcomeAct
1.在layout中新建xml文件
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/welcome_weibo"
/>
</LinearLayout>
- 创建WelcomeAct
private boolean isFirstIn = false;
private static final int TIME = 2000;
private static final int GO_HOME = 1000;
private static final int GO_GUIDE = 1001;
//定义Handler:首次启动进入引导页,之后启动直接进入主页面
private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case GO_HOME: {
goHome();
}
break;
case GO_GUIDE: {
goGuide();
}
break;
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.welcome);
init();
}
private void init() {
//使用SharedPreferences记录状态
SharedPreferences pref = getSharedPreferences("zjf", MODE_PRIVATE);
isFirstIn = pref.getBoolean("isFirstIn", true);
if (!isFirstIn) {
mHandler.sendEmptyMessageDelayed(GO_HOME, TIME);
}
else {
mHandler.sendEmptyMessageDelayed(GO_GUIDE, TIME);
//存储数据
SharedPreferences.Editor editor = pref.edit();
editor.putBoolean("isFirstIn", false);
editor.commit();
}
}
//跳转主页面
private void goHome() {
Intent i = new Intent(WelcomeAct.this, MainActivity.class);
startActivity(i);
finish();
}
//跳转引导页面
private void goGuide() {
Intent i = new Intent(WelcomeAct.this, Guide.class);
startActivity(i);
finish();
}
四.修改AndroidManifest.xml中启动页
- 启动页为WelcomeAct
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.zjf.viewpaperdemo">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity"></activity>
<activity android:name=".Guide"></activity>
<activity android:name=".WelcomeAct">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
详细代码见GitHub。
上述对于PagerView的基本功能都已实现,后续PagerView其它高级功能继续更新。