今天發(fā)布本文的原因是應(yīng)一個(gè)網(wǎng)友要求，就是實(shí)現(xiàn)局部的圖片滑動(dòng)指引效果。這種效果一般是在新聞客戶端上比較常見，其功能是：
1、頂部單張圖片左右拖拉滑動(dòng)；
2、帶指引；
3、僅滑動(dòng)頂部單張圖片，不滑動(dòng)頁面，下面的圖文內(nèi)容不動(dòng)；
4、類似于新聞客戶端的功能
為了大家能更好的理解，我們先來看下要實(shí)現(xiàn)的效果圖：
以上便是實(shí)現(xiàn)的效果圖，其實(shí)實(shí)現(xiàn)原理也并不難，我們只需要將android-support-v4.jar包中ViewPager控件設(shè)置成局部就可以，只是處理界面時(shí)稍微有點(diǎn)麻煩，不過看完本篇之后，大家以后使用時(shí)直接調(diào)用就行。也希望本篇能夠?qū)Υ蠹矣兴鶐椭?br />
好了，下面讓我們開始我們的實(shí)現(xiàn)過程，主要給大家介紹一下實(shí)現(xiàn)步驟和一些核心代碼。首先我們需要將android-support-v4.jar添加到工程當(dāng)中，然后讓我們看一下程序結(jié)構(gòu)：
我先簡要介紹其實(shí)現(xiàn)原理：
在布局頁面中將設(shè)置成局部，限制其高度，然后為滑動(dòng)的圖片集合生成布局界面，并在代碼中設(shè)置相應(yīng)的數(shù)據(jù)適配器和監(jiān)聽事件。在切換事件監(jiān)聽器中更改相應(yīng)的圓點(diǎn)圖片和顯示標(biāo)題，由于滑動(dòng)圖片下方的界面不需要改變內(nèi)容，所以很很容易內(nèi)容超過屏幕，所以需要設(shè)置ScrollView以在內(nèi)容比較多時(shí)顯示滾動(dòng)條，我會(huì)在下面介紹如何讓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是啟動(dòng)的Activity,而TopicNews.java是顯示頭條的Acitivity。在顯示時(shí)，我們需要將TopicNews.java中的對象進(jìn)行初始化設(shè)置，如下代碼：
/** * 初始化 */ private void initeViews(){ // 滑動(dòng)圖片區(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); // 圓點(diǎn)圖片區(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è)置默認(rèn)的滑動(dòng)標(biāo)題 tvSlideTitle = (TextView) main.findViewById(R.id.tvSlideTitle); tvSlideTitle.setText(parser.getSlideTitles()[0]); setContentView(main); // 設(shè)置ViewPager viewPager.setAdapter(new SlideImageAdapter()); viewPager.setOnPageChangeListener(new ImagePageChangeListener()); }以上對象的聲明代碼如下所示：
// 滑動(dòng)圖片的集合 private ArrayList<View> imagePageViews = null; private ViewGroup main = null; private ViewPager viewPager = null; // 當(dāng)前ViewPager索引 private int pageIndex = 0; // 包含圓點(diǎn)圖片的View private ViewGroup imageCircleView = null; private ImageView[] imageCircleViews = null; // 滑動(dòng)標(biāo)題 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時(shí)，需要通過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);
這點(diǎn)大家在使用時(shí)需要注意。
NewsXmlParser類是用于對顯示的數(shù)據(jù)進(jìn)行解析，由于本示例只是一個(gè)演示示例，所以在這個(gè)類里我只是設(shè)置一些要顯示的固定數(shù)據(jù)，沒有設(shè)置動(dòng)態(tài)數(shù)據(jù)，這點(diǎn)明白就可以，代碼如下：
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ù)列表，這里只是個(gè)示例，具體地不再實(shí)現(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; // 滑動(dòng)圖片的集合，這里設(shè)置成了固定加載，當(dāng)然也可動(dòng)態(tài)加載。 private int[] slideImages = { R.drawable.image01, R.drawable.image02, R.drawable.image03, R.drawable.image04, R.drawable.image05}; // 滑動(dòng)標(biāo)題的集合 private int[] slideTitles = { R.string.title1, R.string.title2, R.string.title3, R.string.title4, R.string.title5, }; // 滑動(dòng)鏈接的集合 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)生第一個(gè)事件 while(event != XmlPullParser.END_DOCUMENT){ switch(event){ case XmlPullParser.START_DOCUMENT: break; case XmlPullParser.START_TAG://判斷當(dāng)前事件是否是標(biāo)簽元素開始事件 if("count".equals(parser.getName())){//判斷開始標(biāo)簽元素是否是count count = Integer.parseInt(parser.nextText()); } break; case XmlPullParser.END_TAG://判斷當(dāng)前事件是否是標(biāo)簽元素結(jié)束事件// if("count".equals(parser.getName())){//判斷開始標(biāo)簽元素是否是count// count = Integer.parseInt(parser.nextText());// } break; } event = parser.next();//進(jìn)入下一個(gè)元素并觸發(fā)相應(yīng)事件 } } catch (Exception e) { // TODO: handle exception e.printStackTrace(); } // 無返回值，則返回-1 return count; }}關(guān)于NewsXmlParser這個(gè)類，實(shí)現(xiàn)比較簡單，不再詳述，有興趣的朋友可以在開發(fā)過程中將其設(shè)置成動(dòng)態(tài)數(shù)據(jù)并進(jìn)行解析。
剛才在上面介紹其實(shí)現(xiàn)原理時(shí)，我提到需要設(shè)置滑動(dòng)圖片集合的布局界面，那么如何設(shè)置其布局呢？這里我們需要用到SlideImageLayout。
SlideImageLayout類是用于生成滑動(dòng)圖片區(qū)域布局和圓點(diǎn)圖片布局的類。我在上面的代碼中（即在TopicNews.java的初始化方法initeViews()）使用for循環(huán)設(shè)置滑動(dòng)圖片及圓點(diǎn)圖片的布局。在循環(huán)中就用到了getSlideImageLayout()、getCircleImageLayout()和getLinearLayout()這幾個(gè)方法。下面分別看下其功能，先看下getSlideImageLayout()實(shí)現(xiàn)代碼：
/** * 生成滑動(dòng)圖片區(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; }由于滑動(dòng)圖片一般需要設(shè)置其鏈接或是相應(yīng)的ID，以便在點(diǎn)擊時(shí)轉(zhuǎn)向相應(yīng)的Activity，顯示相應(yīng)的內(nèi)容或詳細(xì)信息。這里我沒有過多的設(shè)置，只是在點(diǎn)擊時(shí)顯示標(biāo)題及鏈接地址，代碼如下：
// 滑動(dòng)頁面點(diǎn)擊事件監(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()方法主要是為圓點(diǎn)圖片生成相應(yīng)的ImageView對象，代碼如下：
/** * 生成圓點(diǎn)圖片區(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) { //默認(rèn)選中第一張圖片 imageViews[index].setBackgroundResource(R.drawable.dot_selected); } else { imageViews[index].setBackgroundResource(R.drawable.dot_none); } return imageViews[index]; }getLinearLayout()方法則是為圓點(diǎn)圖片添加相應(yīng)的LinearLayout布局，以便設(shè)置圓點(diǎn)圖片之間的距離，代碼如下：
/** * 獲取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));
這兩個(gè)方法結(jié)合使用便能優(yōu)美地實(shí)現(xiàn)其圓點(diǎn)圖片的布局。
以上是關(guān)于NewsXmlParser和SlideImageLayout兩個(gè)類的介紹，下面讓我們再回到TopicNews類中繼續(xù)介紹相關(guān)知識。在TopicNews中進(jìn)行對象初始化（initeViews()方法）以后，還需要設(shè)置ViewPager對象中的數(shù)據(jù)適配器和監(jiān)聽事件。ViewPager中數(shù)據(jù)適配器的代碼如下：
// 滑動(dòng)圖片數(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)聽器代碼如下：
// 滑動(dòng)頁面更改事件監(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)中變換標(biāo)題和圓點(diǎn)圖片。
由于滑動(dòng)區(qū)域下方的內(nèi)容是不變的，也就是不滑動(dòng)的，正如在我在上面提到的，內(nèi)容可能會(huì)超出屏幕的范圍，所以我們需要使用ScrollView以便內(nèi)容過多的時(shí)候顯示滾動(dòng)條。可能一部分朋友會(huì)想到，要顯示滾動(dòng)條我也知道使用ScrollView。我想在這里說的是，這里即有ViewPager控件，也有ScrollView，如果兩個(gè)View單獨(dú)使用不會(huì)有什么問題。然而不幸的是，兩個(gè)一結(jié)合使用就出現(xiàn)了問題。什么問題呢？就是在滑動(dòng)圖片時(shí)出現(xiàn)反彈的現(xiàn)象，就是在滑動(dòng)時(shí)很難滑動(dòng)，我滑動(dòng)時(shí)感覺很吃力，而且圖片就是滑動(dòng)不過去，這個(gè)就是兩個(gè)View之間的沖突，因?yàn)閮蓚€(gè)View都是滑動(dòng)的View，都會(huì)計(jì)算相應(yīng)的位置和判斷相應(yīng)的距離。
我們?nèi)绾蝸斫鉀Q這個(gè)沖突呢？這里我們需要重寫ScrollView的onInterceptTouchEvent()回調(diào)函數(shù)。需要在程序里新加一個(gè)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中的滑動(dòng)反彈問題 * @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 { // 滑動(dòng)距離及坐標(biāo) 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); }}然后在我們的布局代碼中添加這個(gè)擴(kuò)展的View，如下代碼：
<com.image.indicator.control.ScrollViewExtend android:layout_width="match_parent" android:layout_height="fill_parent"> ……</com.image.indicator.control.ScrollViewExtend>
以上的操作便可解決ViewPager和ScrollView之間沖突問題，這樣便可使用滾動(dòng)條順利顯示下方不變的內(nèi)容。在這里再次給大家說明一下，由于本示例只是個(gè)演示示例，所以在滑動(dòng)圖片的下方，我只是用了一張圖片固定地顯示頭條Activity的下方。當(dāng)然有需要的朋友，可以將其進(jìn)行改造，將滑動(dòng)圖片的下方區(qū)域添加個(gè)ListView等View之類的以顯示相應(yīng)要求的信息。
一些朋友可能會(huì)注意到，在滑動(dòng)圖片區(qū)域的下方有一段透明的效果，如下圖所示：
這個(gè)實(shí)現(xiàn)也不難，只是在相應(yīng)的布局代碼中添加background屬性即可，如下：
android:background="#55000000"
當(dāng)然，透明度的設(shè)置有個(gè)范圍，有興趣的朋友到網(wǎng)上查找一下，這里不再詳述。
本示例除了實(shí)現(xiàn)Android局部圖片滑動(dòng)指引效果以外，還實(shí)現(xiàn)了上方導(dǎo)航菜單切換的效果，關(guān)于這個(gè)效果并不稀奇，因?yàn)榫W(wǎng)上有一些人已經(jīng)實(shí)現(xiàn)該功能。不過在這里，我跟他們做不太一樣的是，點(diǎn)擊上方的新聞分類時(shí)靈敏度比較好，也就是說點(diǎn)中的概率比較大。因?yàn)樯戏降男侣劮诸愇淖直容^小，要想點(diǎn)中有時(shí)不是件容易的事。下面簡要說一下其實(shí)現(xiàn)過程及相應(yīng)的代碼。
由于要在點(diǎn)擊新聞?lì)悇e時(shí)背景圖片需要?jiǎng)赢嬓Ч晕姨砑恿艘粋€(gè)類：ImageAnimatioin，用于處理圖片移動(dòng)時(shí)動(dòng)畫效果。其
代碼如下：
/** * 設(shè)置圖像移動(dòng)動(dòng)畫效果 * @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); }下面展示一下點(diǎn)擊新聞?lì)悇e時(shí)的事件監(jiān)聽器中的代碼，因?yàn)樵谶@個(gè)過程中需要計(jì)算移動(dòng)圖片的位置和切換下面的主體內(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è)置時(shí)是在一個(gè)主框架中變換新聞?lì)悇e的布局，而不是直接顯示，所以需要注意下。另外，在點(diǎn)擊除頭條之外的新聞?lì)悇e時(shí)，下方展示的也只是個(gè)圖片而已，有需要的朋友將其進(jìn)行改造，這點(diǎn)不再多說。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
