Android實現(xiàn)局部圖片滑動指引效果示例

更新時間：2016年10月19日 16:04:44 作者：Healtheon

現(xiàn)在滑動效果用的比較多,尤其是在手機端上面,本文介紹了Android實現(xiàn)局部圖片滑動指引效果示例,現(xiàn)在就分享給大家,也給大家做個參考。

今天發(fā)布本文的原因是應(yīng)一個網(wǎng)友要求，就是實現(xiàn)局部的圖片滑動指引效果。這種效果一般是在新聞客戶端上比較常見，其功能是：

1、頂部單張圖片左右拖拉滑動；

2、帶指引；

3、僅滑動頂部單張圖片，不滑動頁面，下面的圖文內(nèi)容不動；

4、類似于新聞客戶端的功能

為了大家能更好的理解，我們先來看下要實現(xiàn)的效果圖：

以上便是實現(xiàn)的效果圖，其實實現(xiàn)原理也并不難，我們只需要將android-support-v4.jar包中ViewPager控件設(shè)置成局部就可以，只是處理界面時稍微有點麻煩，不過看完本篇之后，大家以后使用時直接調(diào)用就行。也希望本篇能夠?qū)Υ蠹矣兴鶐椭?br />

好了，下面讓我們開始我們的實現(xiàn)過程，主要給大家介紹一下實現(xiàn)步驟和一些核心代碼。首先我們需要將android-support-v4.jar添加到工程當中，然后讓我們看一下程序結(jié)構(gòu)：

我先簡要介紹其實現(xiàn)原理：

在布局頁面中將設(shè)置成局部，限制其高度，然后為滑動的圖片集合生成布局界面，并在代碼中設(shè)置相應(yīng)的數(shù)據(jù)適配器和監(jiān)聽事件。在切換事件監(jiān)聽器中更改相應(yīng)的圓點圖片和顯示標題，由于滑動圖片下方的界面不需要改變內(nèi)容，所以很很容易內(nèi)容超過屏幕，所以需要設(shè)置ScrollView以在內(nèi)容比較多時顯示滾動條，我會在下面介紹如何讓ViewPager和ScrollView結(jié)合使用。

先看下android.support.v4.view.ViewPager在布局界面中的核心代碼：

<android.support.v4.view.ViewPager
    android:id="@+id/image_slide_page"
    android:layout_width="fill_parent"
    android:layout_height="180dip"
    android:focusable="true" />

在程序結(jié)構(gòu)中，MainActivity.java是啟動的Activity,而TopicNews.java是顯示頭條的Acitivity。在顯示時，我們需要將TopicNews.java中的對象進行初始化設(shè)置，如下代碼：

/**
   * 初始化
   */
  private void initeViews(){
    // 滑動圖片區(qū)域
    imagePageViews = new ArrayList<View>();
    LayoutInflater inflater = getLayoutInflater(); 
    main = (ViewGroup)inflater.inflate(R.layout.page_topic_news, null);
    viewPager = (ViewPager) main.findViewById(R.id.image_slide_page); 
    
    // 圓點圖片區(qū)域
    parser = new NewsXmlParser();
    int length = parser.getSlideImages().length;
    imageCircleViews = new ImageView[length];
    imageCircleView = (ViewGroup) main.findViewById(R.id.layout_circle_images);
    slideLayout = new SlideImageLayout(TopicNews.this);
    slideLayout.setCircleImageLayout(length);
    
    for(int i = 0;i < length;i++){
      imagePageViews.add(slideLayout.getSlideImageLayout(parser.getSlideImages()[i]));
      imageCircleViews[i] = slideLayout.getCircleImageLayout(i);
      imageCircleView.addView(slideLayout.getLinearLayout(imageCircleViews[i], 10, 10));
    }
    
    // 設(shè)置默認的滑動標題
    tvSlideTitle = (TextView) main.findViewById(R.id.tvSlideTitle);
    tvSlideTitle.setText(parser.getSlideTitles()[0]);
    
    setContentView(main);
    
    // 設(shè)置ViewPager
    viewPager.setAdapter(new SlideImageAdapter()); 
    viewPager.setOnPageChangeListener(new ImagePageChangeListener());
  }

以上對象的聲明代碼如下所示：

// 滑動圖片的集合
  private ArrayList<View> imagePageViews = null;
  private ViewGroup main = null;
  private ViewPager viewPager = null;
  // 當前ViewPager索引
  private int pageIndex = 0; 
  
  // 包含圓點圖片的View
  private ViewGroup imageCircleView = null;
  private ImageView[] imageCircleViews = null; 
  
  // 滑動標題
  private TextView tvSlideTitle = null;
  
  // 布局設(shè)置類
  private SlideImageLayout slideLayout = null;
  // 數(shù)據(jù)解析類
  private NewsXmlParser parser = null;

由于在顯示頭條的Activity即TopicNews中，設(shè)置布局文件不是直接設(shè)置的，也就是通過inflate將Layout轉(zhuǎn)化為View控件的，所以在使用page_topic_news.xml中的View時，需要通過main.findViewById()，即如下代碼所示：

main = (ViewGroup)inflater.inflate(R.layout.page_topic_news, null);
viewPager = (ViewPager) main.findViewById(R.id.image_slide_page);

而不能像這樣直接使用:

viewPager = (ViewPager) findViewById(R.id.image_slide_page);

這點大家在使用時需要注意。

NewsXmlParser類是用于對顯示的數(shù)據(jù)進行解析，由于本示例只是一個演示示例，所以在這個類里我只是設(shè)置一些要顯示的固定數(shù)據(jù)，沒有設(shè)置動態(tài)數(shù)據(jù)，這點明白就可以，代碼如下：

package com.image.indicator.parser;

import java.io.InputStream;
import java.util.HashMap;
import java.util.List;

import org.xmlpull.v1.XmlPullParser;

import android.util.Xml;

import com.image.indicator.R;
import com.image.indicator.entity.News;
import com.image.indicator.utility.FileAccess;

/**
 * 解析新聞數(shù)據(jù)列表
 * @Description: 解析新聞數(shù)據(jù)列表，這里只是個示例，具體地不再實現(xiàn)。

 * @File: NewsXmlParser.java

 * @Package com.image.indicator.parser

 * @Author Hanyonglu

 * @Date 2012-6-18 下午02:31:26

 * @Version V1.0
 */
public class NewsXmlParser {
  // 新聞列表
  private List<HashMap<String, News>> newsList = null;
  
  // 滑動圖片的集合，這里設(shè)置成了固定加載，當然也可動態(tài)加載。
  private int[] slideImages = {
      R.drawable.image01,
      R.drawable.image02,
      R.drawable.image03,
      R.drawable.image04,
      R.drawable.image05};
  
  // 滑動標題的集合
  private int[] slideTitles = {
      R.string.title1,
      R.string.title2,
      R.string.title3,
      R.string.title4,
      R.string.title5,
  };
  
  // 滑動鏈接的集合
  private String[] slideUrls = {
      "http://mobile.csdn.net/a/20120616/2806676.html",
      "http://cloud.csdn.net/a/20120614/2806646.html",
      "http://mobile.csdn.net/a/20120613/2806603.html",
      "http://news.csdn.net/a/20120612/2806565.html",
      "http://mobile.csdn.net/a/20120615/2806659.html",
  };
  
  public int[] getSlideImages(){
    return slideImages;
  }
  
  public int[] getSlideTitles(){
    return slideTitles;
  }
  
  public String[] getSlideUrls(){
    return slideUrls;
  }
  
  /**
   * 獲取XmlPullParser對象
   * @param result
   * @return
   */
  private XmlPullParser getXmlPullParser(String result){
    XmlPullParser parser = Xml.newPullParser();
    InputStream inputStream = FileAccess.String2InputStream(result);
    
    try {
      parser.setInput(inputStream, "UTF-8");
    } catch (Exception e) {
      // TODO: handle exception
      e.printStackTrace();
    }
    
    return parser;
  }
  
  public int getNewsListCount(String result){
    int count = -1;
    
    try {
      XmlPullParser parser = getXmlPullParser(result);
      int event = parser.getEventType();//產(chǎn)生第一個事件
      
      while(event != XmlPullParser.END_DOCUMENT){
        switch(event){
        case XmlPullParser.START_DOCUMENT:
          break;
        case XmlPullParser.START_TAG://判斷當前事件是否是標簽元素開始事件
          if("count".equals(parser.getName())){//判斷開始標簽元素是否是count
            count = Integer.parseInt(parser.nextText());
          }
          
          break;
        case XmlPullParser.END_TAG://判斷當前事件是否是標簽元素結(jié)束事件
//          if("count".equals(parser.getName())){//判斷開始標簽元素是否是count
//            count = Integer.parseInt(parser.nextText());
//          }
          
          break;
        }
      
        event = parser.next();//進入下一個元素并觸發(fā)相應(yīng)事件
      }
    } catch (Exception e) {
      // TODO: handle exception
      e.printStackTrace();
    }
    
    // 無返回值，則返回-1
    return count;
  }
}

關(guān)于NewsXmlParser這個類，實現(xiàn)比較簡單，不再詳述，有興趣的朋友可以在開發(fā)過程中將其設(shè)置成動態(tài)數(shù)據(jù)并進行解析。

剛才在上面介紹其實現(xiàn)原理時，我提到需要設(shè)置滑動圖片集合的布局界面，那么如何設(shè)置其布局呢？這里我們需要用到SlideImageLayout。

SlideImageLayout類是用于生成滑動圖片區(qū)域布局和圓點圖片布局的類。我在上面的代碼中（即在TopicNews.java的初始化方法initeViews()）使用for循環(huán)設(shè)置滑動圖片及圓點圖片的布局。在循環(huán)中就用到了getSlideImageLayout()、getCircleImageLayout()和getLinearLayout()這幾個方法。下面分別看下其功能，先看下getSlideImageLayout()實現(xiàn)代碼：

/**
   * 生成滑動圖片區(qū)域布局
   * @param index
   * @return
   */
  public View getSlideImageLayout(int index){
    // 包含TextView的LinearLayout
    LinearLayout imageLinerLayout = new LinearLayout(activity);
    LinearLayout.LayoutParams imageLinerLayoutParames = new LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.WRAP_CONTENT, 
        LinearLayout.LayoutParams.WRAP_CONTENT,
        1);
    
    ImageView iv = new ImageView(activity);
    iv.setBackgroundResource(index);
    iv.setOnClickListener(new ImageOnClickListener());
    imageLinerLayout.addView(iv,imageLinerLayoutParames);
    imageList.add(iv);
    
    return imageLinerLayout;
  }

由于滑動圖片一般需要設(shè)置其鏈接或是相應(yīng)的ID，以便在點擊時轉(zhuǎn)向相應(yīng)的Activity，顯示相應(yīng)的內(nèi)容或詳細信息。這里我沒有過多的設(shè)置，只是在點擊時顯示標題及鏈接地址，代碼如下：

// 滑動頁面點擊事件監(jiān)聽器
  private class ImageOnClickListener implements OnClickListener{
    @Override
    public void onClick(View v) {
      // TODO Auto-generated method stub
      Toast.makeText(activity, parser.getSlideTitles()[pageIndex], Toast.LENGTH_SHORT).show();
      Toast.makeText(activity, parser.getSlideUrls()[pageIndex], Toast.LENGTH_SHORT).show();
    }
  }

getCircleImageLayout()方法主要是為圓點圖片生成相應(yīng)的ImageView對象，代碼如下：

/**
   * 生成圓點圖片區(qū)域布局對象
   * @param index
   * @return
   */
  public ImageView getCircleImageLayout(int index){
    imageView = new ImageView(activity); 
    imageView.setLayoutParams(new LayoutParams(10,10));
    imageView.setScaleType(ScaleType.FIT_XY);
    
    imageViews[index] = imageView;
     
    if (index == 0) { 
      //默認選中第一張圖片
      imageViews[index].setBackgroundResource(R.drawable.dot_selected); 
    } else { 
      imageViews[index].setBackgroundResource(R.drawable.dot_none); 
    } 
     
    return imageViews[index];
  }

getLinearLayout()方法則是為圓點圖片添加相應(yīng)的LinearLayout布局，以便設(shè)置圓點圖片之間的距離，代碼如下：

/**
   * 獲取LinearLayout
   * @param view
   * @param width
   * @param height
   * @return
   */
  public View getLinearLayout(View view,int width,int height){
    LinearLayout linerLayout = new LinearLayout(activity);
    LinearLayout.LayoutParams linerLayoutParames = new LinearLayout.LayoutParams(
        width, 
        height,
        1);
    // 這里最好也自定義設(shè)置，有興趣的自己設(shè)置。
    linerLayout.setPadding(10, 0, 10, 0);
    linerLayout.addView(view, linerLayoutParames);
    
    return linerLayout;
  }

getCircleImageLayout()和getLinearLayout()方法在NewsTopic.java中for循環(huán)的結(jié)構(gòu)中結(jié)合代碼如下：

imageCircleViews[i] = slideLayout.getCircleImageLayout(i);
imageCircleView.addView(slideLayout.getLinearLayout(imageCircleViews[i], 10, 10));

這兩個方法結(jié)合使用便能優(yōu)美地實現(xiàn)其圓點圖片的布局。

以上是關(guān)于NewsXmlParser和SlideImageLayout兩個類的介紹，下面讓我們再回到TopicNews類中繼續(xù)介紹相關(guān)知識。在TopicNews中進行對象初始化（initeViews()方法）以后，還需要設(shè)置ViewPager對象中的數(shù)據(jù)適配器和監(jiān)聽事件。ViewPager中數(shù)據(jù)適配器的代碼如下：

// 滑動圖片數(shù)據(jù)適配器
  private class SlideImageAdapter extends PagerAdapter { 
    @Override 
    public int getCount() { 
      return imagePageViews.size(); 
    } 
 
    @Override 
    public boolean isViewFromObject(View arg0, Object arg1) { 
      return arg0 == arg1; 
    } 
 
    @Override 
    public int getItemPosition(Object object) { 
      // TODO Auto-generated method stub 
      return super.getItemPosition(object); 
    } 
 
    @Override 
    public void destroyItem(View arg0, int arg1, Object arg2) { 
      // TODO Auto-generated method stub 
      ((ViewPager) arg0).removeView(imagePageViews.get(arg1)); 
    } 
 
    @Override 
    public Object instantiateItem(View arg0, int arg1) { 
      // TODO Auto-generated method stub 
      ((ViewPager) arg0).addView(imagePageViews.get(arg1));
      
      return imagePageViews.get(arg1); 
    } 
 
    @Override 
    public void restoreState(Parcelable arg0, ClassLoader arg1) { 
      // TODO Auto-generated method stub 
 
    } 
 
    @Override 
    public Parcelable saveState() { 
      // TODO Auto-generated method stub 
      return null; 
    } 
 
    @Override 
    public void startUpdate(View arg0) { 
      // TODO Auto-generated method stub 
 
    } 
 
    @Override 
    public void finishUpdate(View arg0) { 
      // TODO Auto-generated method stub 
 
    } 
  }

而ViewPager的事件監(jiān)聽器代碼如下：

// 滑動頁面更改事件監(jiān)聽器
  private class ImagePageChangeListener implements OnPageChangeListener {
    @Override 
    public void onPageScrollStateChanged(int arg0) { 
      // TODO Auto-generated method stub 
 
    } 
 
    @Override 
    public void onPageScrolled(int arg0, float arg1, int arg2) { 
      // TODO Auto-generated method stub 
 
    } 
 
    @Override 
    public void onPageSelected(int index) { 
      pageIndex = index;
      slideLayout.setPageIndex(index);
      tvSlideTitle.setText(parser.getSlideTitles()[index]);
      
      for (int i = 0; i < imageCircleViews.length; i++) { 
        imageCircleViews[index].setBackgroundResource(R.drawable.dot_selected);
        
        if (index != i) { 
          imageCircleViews[i].setBackgroundResource(R.drawable.dot_none); 
        } 
      }
    } 
  }

事件監(jiān)聽器中主要在回調(diào)函數(shù)onPageSelected(int index)中變換標題和圓點圖片。

由于滑動區(qū)域下方的內(nèi)容是不變的，也就是不滑動的，正如在我在上面提到的，內(nèi)容可能會超出屏幕的范圍，所以我們需要使用ScrollView以便內(nèi)容過多的時候顯示滾動條?？赡芤徊糠峙笥褧氲剑@示滾動條我也知道使用ScrollView。我想在這里說的是，這里即有ViewPager控件，也有ScrollView，如果兩個View單獨使用不會有什么問題。然而不幸的是，兩個一結(jié)合使用就出現(xiàn)了問題。什么問題呢？就是在滑動圖片時出現(xiàn)反彈的現(xiàn)象，就是在滑動時很難滑動，我滑動時感覺很吃力，而且圖片就是滑動不過去，這個就是兩個View之間的沖突，因為兩個View都是滑動的View，都會計算相應(yīng)的位置和判斷相應(yīng)的距離。

我們?nèi)绾蝸斫鉀Q這個沖突呢？這里我們需要重寫ScrollView的onInterceptTouchEvent()回調(diào)函數(shù)。需要在程序里新加一個ScrollViewExtend類并繼承自ScrollView，下面是其代碼：

package com.image.indicator.control;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;

/**
 * 能夠兼容ViewPager的ScrollView
 * @Description: 解決了ViewPager在ScrollView中的滑動反彈問題

 * @File: ScrollViewExtend.java

 * @Package com.image.indicator.control

 * @Author Hanyonglu

 * @Date 2012-6-18 下午01:34:50

 * @Version V1.0
 */
public class ScrollViewExtend extends ScrollView {
  // 滑動距離及坐標
  private float xDistance, yDistance, xLast, yLast;

  public ScrollViewExtend(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  @Override
  public boolean onInterceptTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
      case MotionEvent.ACTION_DOWN:
        xDistance = yDistance = 0f;
        xLast = ev.getX();
        yLast = ev.getY();
        break;
      case MotionEvent.ACTION_MOVE:
        final float curX = ev.getX();
        final float curY = ev.getY();
        
        xDistance += Math.abs(curX - xLast);
        yDistance += Math.abs(curY - yLast);
        xLast = curX;
        yLast = curY;
        
        if(xDistance > yDistance){
          return false;
        } 
    }

    return super.onInterceptTouchEvent(ev);
  }
}

然后在我們的布局代碼中添加這個擴展的View，如下代碼：

<com.image.indicator.control.ScrollViewExtend
    android:layout_width="match_parent"
    android:layout_height="fill_parent">

    ……

</com.image.indicator.control.ScrollViewExtend>

以上的操作便可解決ViewPager和ScrollView之間沖突問題，這樣便可使用滾動條順利顯示下方不變的內(nèi)容。在這里再次給大家說明一下，由于本示例只是個演示示例，所以在滑動圖片的下方，我只是用了一張圖片固定地顯示頭條Activity的下方。當然有需要的朋友，可以將其進行改造，將滑動圖片的下方區(qū)域添加個ListView等View之類的以顯示相應(yīng)要求的信息。

一些朋友可能會注意到，在滑動圖片區(qū)域的下方有一段透明的效果，如下圖所示：

這個實現(xiàn)也不難，只是在相應(yīng)的布局代碼中添加background屬性即可，如下：

android:background="#55000000"

當然，透明度的設(shè)置有個范圍，有興趣的朋友到網(wǎng)上查找一下，這里不再詳述。

本示例除了實現(xiàn)Android局部圖片滑動指引效果以外，還實現(xiàn)了上方導(dǎo)航菜單切換的效果，關(guān)于這個效果并不稀奇，因為網(wǎng)上有一些人已經(jīng)實現(xiàn)該功能。不過在這里，我跟他們做不太一樣的是，點擊上方的新聞分類時靈敏度比較好，也就是說點中的概率比較大。因為上方的新聞分類文字比較小，要想點中有時不是件容易的事。下面簡要說一下其實現(xiàn)過程及相應(yīng)的代碼。

由于要在點擊新聞類別時背景圖片需要動畫效果，所以我添加了一個類：ImageAnimatioin，用于處理圖片移動時動畫效果。其

代碼如下：

/**
   * 設(shè)置圖像移動動畫效果
   * @param v
   * @param startX
   * @param toX
   * @param startY
   * @param toY
   */
  public static void SetImageSlide(View v, int startX, int toX, int startY, int toY) {
    TranslateAnimation anim = new TranslateAnimation(startX, toX, startY, toY);
    anim.setDuration(100);
    anim.setFillAfter(true);
    v.startAnimation(anim);
  }

下面展示一下點擊新聞類別時的事件監(jiān)聽器中的代碼，因為在這個過程中需要計算移動圖片的位置和切換下面的主體內(nèi)容，如下：

 // 新聞分類事件監(jiān)聽器
  private class ItemOnclickListener implements OnClickListener{
    @Override
    public void onClick(View v) {
      // TODO Auto-generated method stub
      itemWidth = findViewById(R.id.layout).getWidth();
      
      switch (v.getId()) {
      case R.id.tv_title_news:
        ImageAnimatioin.SetImageSlide(tvSelectedItem, startX, 0, 0, 0);
        startX = 0;
        tvSelectedItem.setText(R.string.title_news_category_tops);
        
        // 顯示頭條信息
        intent.setClass(MainActivity.this, TopicNews.class);
        vNewsMain = getLocalActivityManager().startActivity(
            "TopicNews", intent).getDecorView();
        break;
      case R.id.tv_title_info:
        ImageAnimatioin.SetImageSlide(tvSelectedItem, startX, itemWidth, 0, 0);
        startX = itemWidth;
        tvSelectedItem.setText(R.string.title_news_category_info);
        
        // 顯示資訊信息
        intent.setClass(MainActivity.this, InfoNews.class);
        vNewsMain = getLocalActivityManager().startActivity(
            "InfoNews", intent).getDecorView();
        break;
      case R.id.tv_title_blog:
        ImageAnimatioin.SetImageSlide(tvSelectedItem, startX, itemWidth * 2, 0, 0);
        startX = itemWidth * 2;
        tvSelectedItem.setText(R.string.title_news_category_blog);
        
        // 顯示博客信息
        intent.setClass(MainActivity.this, BlogNews.class);
        vNewsMain = getLocalActivityManager().startActivity(
            "BlogNews", intent).getDecorView();
        break;
      case R.id.tv_title_magazine:
        ImageAnimatioin.SetImageSlide(tvSelectedItem, startX, itemWidth * 3, 0, 0);
        startX = itemWidth * 3;
        tvSelectedItem.setText(R.string.title_news_category_magazine);
        
        // 顯示雜志信息
        intent.setClass(MainActivity.this, MagazineNews.class);
        vNewsMain = getLocalActivityManager().startActivity(
            "MagazineNews", intent).getDecorView();
        break;
      case R.id.tv_title_domain:
        ImageAnimatioin.SetImageSlide(tvSelectedItem, startX, itemWidth * 4, 0, 0);
        startX = itemWidth * 4;
        tvSelectedItem.setText(R.string.title_news_category_domain);
        // 顯示業(yè)界信息
        intent.setClass(MainActivity.this, DomainNews.class);
        vNewsMain = getLocalActivityManager().startActivity(
            "DomainNews", intent).getDecorView();
        break;
      case R.id.tv_title_more:
        ImageAnimatioin.SetImageSlide(tvSelectedItem, startX, itemWidth * 5, 0, 0);
        startX = itemWidth * 5;
        tvSelectedItem.setText(R.string.title_news_category_more);
        
        // 顯示更多信息
        intent.setClass(MainActivity.this, MoreNews.class);
        vNewsMain = getLocalActivityManager().startActivity(
            "MoreNews", intent).getDecorView();
        break;
      default:
        break;
      }
      
      // 更換Layout中的新聞主體
      rlNewsMain.removeAllViews();
      rlNewsMain.addView(vNewsMain, params);
    }
  }

這里設(shè)置時是在一個主框架中變換新聞類別的布局，而不是直接顯示，所以需要注意下。另外，在點擊除頭條之外的新聞類別時，下方展示的也只是個圖片而已，有需要的朋友將其進行改造，這點不再多說。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: