152.n1-使用ViewPager实现引导页

本文介绍如何在Android应用中设计并实现引导页,包括使用ViewPager进行页面切换、通过selector自定义按钮样式以及整体布局的设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

布局中引入ViewPager的方法,直接在ViewPager.class复制全名,然后创建相应的组件就可以使用了

<android.support.v4.view.ViewPager
        android:id="@+id/vp_guide"
        android:layout_width="match_parent"
    	android:layout_height="match_parent"
        />

使用selector创建自定义图标的属性,首先在res目录下面创建一个drawable的文件夹

以图片按钮为例,图片按钮中有背景颜色和文字,背景和文字在常规状态和按下状态分别显示不同的图片和颜色。

在res/drawable下面分别创建

res/drawable/btn_guide_selector.xml按钮不同状态的背景图片

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 引导页的按钮 -->
    <!-- 按钮按下 -->
	<item android:state_pressed="true" android:drawable="@drawable/button_red_pressed"/>
	<!-- 常规状态 -->
	<item android:drawable="@drawable/button_red_normal"/>
</selector>

res/drawable/btn_guide_text_selector.xml按钮中的文本在不同的状态下显示不同的颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 引导页的按钮 -->
    <!-- 按钮按下字体是黑色 -->
	<item android:state_pressed="true" android:color="@android:color/black"/>
	<!-- 常规状态字体是白色 -->
	<item android:color="@android:color/white"/>
</selector>
res/layout/activity_guide.xml引导页的布局

<?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:orientation="vertical" >
    
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_guide"
        android:layout_width="match_parent"
    	android:layout_height="match_parent"
        />

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="75dp"
        android:paddingLeft="3dp"
        android:paddingRight="3dp"
        android:background="@drawable/btn_guide_selector"
        android:textColor="@drawable/btn_guide_text_selector"
        android:text="开始体验" />

</RelativeLayout>
GuideActivity.java引导页的逻辑文件
package com.ldw.news;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.Button;
import android.widget.ImageView;

public class GuideActivity extends Activity {

	private ViewPager vp_guide;
	private Button btn_start;
	private static final int[] mImageIds = new int[] { R.drawable.guide_1,
		R.drawable.guide_2, R.drawable.guide_3 };//初始化三张图片
	private ArrayList<ImageView> mImageList;
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        //初始化界面
        initView();
        //填充内容
        vp_guide.setAdapter(new GuideAdapter());
        
	}
	
	/*
	 * 初始化界面
	 */
	private void initView(){
		requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题
		mImageList = new ArrayList<ImageView>();
		
		setContentView(R.layout.activity_guide);
		vp_guide = (ViewPager) findViewById(R.id.vp_guide);
        btn_start = (Button) findViewById(R.id.btn_start);
        
        //添加图片,初始化引导页
        for(int i = 0; i < mImageIds.length; i++){
        	ImageView image = new ImageView(this);
        	//设置引导页的背景
        	image.setBackgroundResource(mImageIds[i]);
        	mImageList.add(image);
        }
	}
	
	/*
	 * ViewPager页面适配
	 */
	class GuideAdapter extends PagerAdapter{

		@Override
		public int getCount() {
			return mImageIds.length;
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}
		
		//初始化界面
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(mImageList.get(position));
			return mImageList.get(position);
		}

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值