【Android UI設計與開發】第02期:引導界面(二)使用ViewPager實現歡迎引導頁面


轉載請注明出處:http://blog.csdn.net/yangyu20121224/article/details/8983770

       

       本系列文章都會以一個程序的實例開發為主線來進行講解,以求達到一個循序漸進的學習效果,這樣更能加深大家對於程序為什么要這樣寫的用意,理論加上實際的應用才能達到事半功倍的效果,不是嗎?

       最下方有源碼的下載地址,幾乎源碼的每一行都有注釋,寫的通俗易懂,非常清晰,如有不懂的可以留言,本博主一定盡心盡力,為大家答題解惑,希望大家多多支持,好的,話不多說,讓我們回歸到今天的正題。


一、實現的效果圖


        也許是養成了這樣一個習慣,每次看別人的代碼前,必須要先看實現的效果圖達到了一個什么樣的效果,是不是跟自己想要實現的效果類似,有圖才有真相嘛,呵呵。






二、編碼前的准備工作


       ViewPager是Android3.0之后提供的新特性,所以要想讓你的應用向下兼容就必須要android-support-v4.jar這個包的支持,這是一個來自google提供的一個附加包。大家搜下即可。


三、項目結構圖




四、具體的編碼實現


1、  布局界面比較簡單,加入ViewPager組件,以及底部的引導小點,activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

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

     <LinearLayout
        android:id="@+id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24.0dip"
        android:orientation="horizontal">
 
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="15.0dip"
            android:src="@drawable/point"/>
    </LinearLayout>
</RelativeLayout>
2、其中小點的圖片用一個selector來控制顏色 point.xml:

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:drawable="@drawable/point_normal" />
    <item android:state_enabled="false" android:drawable="@drawable/point_select" />
</selector>
3、 ViewPager適配器代碼, ViewPagerAdapter.java:

package com.yangyu;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

/**
 * @author yangyu
 *  功能描述:ViewPager適配器,用來綁定數據和view
 */
public class ViewPagerAdapter extends PagerAdapter {
	
	//界面列表
    private ArrayList<View> views;
    
    public ViewPagerAdapter (ArrayList<View> views){
        this.views = views;
    }
       
	/**
	 * 獲得當前界面數
	 */
	@Override
	public int getCount() {
		 if (views != null) {
             return views.size();
         }      
         return 0;
	}

	/**
	 * 初始化position位置的界面
	 */
    @Override
    public Object instantiateItem(View view, int position) {
       
        ((ViewPager) view).addView(views.get(position), 0);
       
        return views.get(position);
    }
    
    /**
	 * 判斷是否由對象生成界面
	 */
	@Override
	public boolean isViewFromObject(View view, Object arg1) {
		return (view == arg1);
	}

	/**
	 * 銷毀position位置的界面
	 */
    @Override
    public void destroyItem(View view, int position, Object arg2) {
        ((ViewPager) view).removeView(views.get(position));       
    }
}
4、主程序入口類,MainActivity.java:

package com.yangyu;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.example.myguideview01.R;

/**
 * @author yangyu
 *  功能描述:主程序入口類
 */
public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener {
	//定義ViewPager對象
	private ViewPager viewPager;
	
	//定義ViewPager適配器
	private ViewPagerAdapter vpAdapter;
	
	//定義一個ArrayList來存放View
	private ArrayList<View> views;

	//引導圖片資源
        private static final int[] pics = {R.drawable.guide1,R.drawable.guide2,R.drawable.guide3,R.drawable.guide4};
    
        //底部小點的圖片
        private ImageView[] points;
    
        //記錄當前選中位置
        private int currentIndex;
    
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		initView();
		
		initData();	
	}

	/**
	 * 初始化組件
	 */
	private void initView(){
		//實例化ArrayList對象
		views = new ArrayList<View>();
		
		//實例化ViewPager
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		
		//實例化ViewPager適配器
		vpAdapter = new ViewPagerAdapter(views);
	}
	
	/**
	 * 初始化數據
	 */
	private void initData(){
		//定義一個布局並設置參數
		LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,
                														  LinearLayout.LayoutParams.FILL_PARENT);
       
        //初始化引導圖片列表
        for(int i=0; i<pics.length; i++) {
            ImageView iv = new ImageView(this);
            iv.setLayoutParams(mParams);
            iv.setImageResource(pics[i]);
            views.add(iv);
        } 
        
        //設置數據
        viewPager.setAdapter(vpAdapter);
        //設置監聽
        viewPager.setOnPageChangeListener(this);
        
        //初始化底部小點
        initPoint();
	}
	
	/**
	 * 初始化底部小點
	 */
	private void initPoint(){
		LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);       
		
        points = new ImageView[pics.length];

        //循環取得小點圖片
        for (int i = 0; i < pics.length; i++) {
        	//得到一個LinearLayout下面的每一個子元素
        	points[i] = (ImageView) linearLayout.getChildAt(i);
        	//默認都設為灰色
        	points[i].setEnabled(true);
        	//給每個小點設置監聽
        	points[i].setOnClickListener(this);
        	//設置位置tag,方便取出與當前位置對應
        	points[i].setTag(i);
        }
        
        //設置當面默認的位置
        currentIndex = 0;
        //設置為白色,即選中狀態
        points[currentIndex].setEnabled(false);
	}
	
	/**
	 * 當滑動狀態改變時調用
	 */
	@Override
	public void onPageScrollStateChanged(int arg0) {

	}
	
	/**
	 * 當當前頁面被滑動時調用
	 */

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {

	}
	
	/**
	 * 當新的頁面被選中時調用
	 */

	@Override
	public void onPageSelected(int position) {
		//設置底部小點選中狀態
        setCurDot(position);
	}

	/**
	 * 通過點擊事件來切換當前的頁面
	 */
	@Override
	public void onClick(View v) {
		 int position = (Integer)v.getTag();
         setCurView(position);
         setCurDot(position);		
	}

	/**
	 * 設置當前頁面的位置
	 */
	private void setCurView(int position){
         if (position < 0 || position >= pics.length) {
             return;
         }
         viewPager.setCurrentItem(position);
     }

     /**
     * 設置當前的小點的位置
     */
    private void setCurDot(int positon){
         if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {
             return;
         }
         points[positon].setEnabled(false);
         points[currentIndex].setEnabled(true);

         currentIndex = positon;
     }	
}

         這篇主要是讓大家能夠實現一個簡單的例子,讓你的程序先動起來,才有信心和勇氣挑戰更復雜的UI設計和開發,在后面的幾篇章節中,博主也會以同樣生動和富有激情的講解,給大家帶來更加的復雜的演示和代碼,如仿微信、和人人網的引導界面的開發,加入了動畫的效果,運行起來也會更炫一點。


源碼下載地址






注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com