2013/4/29

仿網易新聞效果之源碼分析

張貼者： Nason 於 凌晨12:04


這種效果是目前很多網頁都會使用之動畫技巧，到底是如何做出來的，從網上找到了兩份代碼，原理基本相同，兩份代碼中應該有相互參考部分，現在簡單解析下做一個記錄，代碼中實作些許不妨礙功能的修改（但未用fragment來實現），先看一下最終完成結果之效果圖：
        主要針對網頁中如下之主體部分作講解：
此新聞網頁欲實現之功能參考如下之注釋說明：
/**
 * Android實現局部圖片滑動指引效果
 * @Description: 實現以下功能：
 * 1、頂部單張圖片左右拖拉滑動；
 * 2、帶指引；
 * 3、僅滑動頂部單張圖片，不滑動頁面，下面的圖文內容不動；
 * 4、類似於新聞用戶端的功能 */
依上面圖形先行定義在主Activity裡面的全域變數：
public class MainActivity extends ActivityGroup implements OnClickListener{
    private TextView mSelectedItem = null;       // 選中的新聞條目
    private RelativeLayout mHeader = null;    // 頭部新聞條目的Layout
    private RelativeLayout mNewsMainLayout = null; // 中間新聞主體的Layout
    private LayoutParams params = null;
    private TextView mNetEaseTop = null;                 //頂部提示
    private TextView mNewsItem = null;            //新聞分類
    private TextView mInfoItem = null;
    private TextView mBlogItem = null;
    private TextView mMagezineItem = null;
    private TextView mDomainItem = null;
    private TextView mMoreItem = null;
    private int mItemWidth = 0;          //新聞分類中每條分類的寬度
    private int startX = 0;                     //條目背景移動開始位置
    private Intent mIntent = null;
    private View mNewsMain = null; //設置新聞主題
可以看到這個activity繼承自ActivityGroup類，但ActivityGroup類在3.0以後是deprecated，可用fragment重新實現。
Deprecated. Use the new Fragment and FragmentManager APIs instead; these are also available on older platforms through the Android compatibility package.
實作onCreate方法：
@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);     
       
        initeViews();    //初始化控制項(自訂方法)
    }
   
    private void initeViews(){       //初始化控制項之自訂方法
            mNewsItem = (TextView) findViewById(R.id.tv_title_news);
            mInfoItem = (TextView) findViewById(R.id.tv_title_info);
            mBlogItem = (TextView) findViewById(R.id.tv_title_blog);
            mMagezineItem = (TextView) findViewById(R.id.tv_title_magazine);
            mDomainItem = (TextView) findViewById(R.id.tv_title_domain);
            mMoreItem = (TextView) findViewById(R.id.tv_title_more);
           
            mNewsItem.setOnClickListener(this);
            mInfoItem.setOnClickListener(this);
            mBlogItem.setOnClickListener(this);
            mMagezineItem.setOnClickListener(this);
            mDomainItem.setOnClickListener(this);
            mMoreItem.setOnClickListener(this);

            //設置選中條目屬性
            mSelectedItem = new TextView(this);
            mSelectedItem.setText(R.string.title_news_category_tops);
            mSelectedItem.setTextColor(Color.WHITE);
            mSelectedItem.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 17);
            mSelectedItem.setGravity(Gravity.CENTER);
            mSelectedItem.setWidth((getScreenWidth() - DimensionUtility.dip2px(this, 20)) / 6);
            mSelectedItem.setBackgroundResource(R.drawable.slidebar);
            RelativeLayout.LayoutParams param = new RelativeLayout.LayoutParams(
                            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            param.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);
           
            mHeader = (RelativeLayout) findViewById(R.id.layout_title_bar);
            mNetEaseTop = (TextView) findViewById(R.id.tv_netease_top);
           
            mHeader.addView(mSelectedItem, param);
           
            // 設置頭條新聞主體
            mIntent = new Intent(MainActivity.this, TopicNews.class);
            mNewsMain = getLocalActivityManager().startActivity(
                            "TopicNews", mIntent).getDecorView();
            params = new LayoutParams(
                            LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
            mNewsMainLayout = (RelativeLayout) findViewById(R.id.layout_news_main);
            mNewsMainLayout.addView(mNewsMain, params);
    }
這裡所說的選中條目，就是上圖中，選中的高亮部分，它其實可以理解為和下面六個是上下兩層的關係。而mNetEaseTop指的是
這一塊和下面內容應同步更新，而設置新聞主題下面預設選擇項為第一項（頭條新聞）。
此新聞網頁之佈局檔：
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:orientation="vertical"  
    android:weightSum="10" >  
  
    <include  
        android:id="@+id/header"  
        layout="@layout/header" />  
  
    <RelativeLayout  
        android:id="@+id/layout_news_main"  
        android:layout_width="fill_parent"  
        android:layout_height="0dp"  
        android:layout_weight="9" >  
    </RelativeLayout>  
  
    <RelativeLayout  
        android:id="@+id/layout_bottom"  
        android:layout_weight="1"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content" >  
  
        <RadioGroup  
            android:id="@+id/radiogroup"  
            android:layout_width="fill_parent"  
            android:layout_height="0dp"  
            android:background="@drawable/bottombg"  
            android:gravity="center_vertical"  
            android:orientation="horizontal" >  
  
            <RadioButton  
                android:id="@+id/radio_news"  
                android:layout_width="wrap_content"  
                android:background="@drawable/tab_selector_news"  
                android:button="@null"  
                android:checked="true" />  
  
            <RadioButton  
                android:id="@+id/radio_topic"  
                android:layout_width="wrap_content"  
                android:background="@drawable/tab_selector_topic"  
                android:button="@null" />  
  
            <RadioButton  
                android:id="@+id/radio_pic"  
                android:layout_width="wrap_content"  
                android:background="@drawable/tab_selector_pic"  
                android:button="@null" />  
  
            <RadioButton  
                android:id="@+id/radio_follow"  
                android:layout_width="wrap_content"  
                android:background="@drawable/tab_selector_follow"  
                android:button="@null" />  
  
            <RadioButton  
                android:id="@+id/radio_vote"  
                android:layout_width="wrap_content"  
                android:background="@drawable/tab_selector_vote"  
                android:button="@null" />  
        </RadioGroup>  
    </RelativeLayout>  
  
</LinearLayout>  
中間的layout_new_main就是mNewsMainLayout新聞網頁之主體，作為一個整體空間規劃之佔位作用，下面的RadioGroup就是最下面的標記欄。裡面用到的佈局檔主要是header.xml：
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:orientation="vertical" >  
  
    <RelativeLayout  
        android:id="@+id/layout_top"  
        android:layout_width="match_parent"  
        android:layout_height="40dip"  
        android:background="#990000" >  
  
        <TextView  
            android:id="@+id/tv_netease_top"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_centerVertical="true"  
            android:layout_marginLeft="10dip"  
            android:textSize="20sp"  
            android:textColor="@android:color/white"  
            android:text="@string/news_top_left_text1" />  
  
        <TextView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_centerVertical="true"  
            android:layout_toRightOf="@+id/tv_netease_top"  
            android:text="@string/news_top_left_text2"  
            android:textColor="@android:color/white"  
            android:textSize="20sp" />  
  
        <ImageView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_alignParentRight="true"  
            android:src="@drawable/duoyun"  
            android:contentDescription="@string/img_duoyun_desc" />  
          
    </RelativeLayout>  
  
    <RelativeLayout  
        android:id="@+id/layout_title_bar"  
        android:layout_width="fill_parent"  
        android:layout_height="40dip"  
        android:paddingLeft="5dip"  
        android:paddingRight="5dip"  
        android:background="@drawable/bg_header_top">  
  
        <LinearLayout  
            android:id="@+id/header_item"  
            android:layout_width="fill_parent"  
            android:layout_height="match_parent"  
            android:orientation="horizontal" >  
  
            <RelativeLayout  
                android:id="@+id/layout"  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:layout_weight="1" >  
  
                <TextView  
                    android:id="@+id/tv_title_news"  
                    android:layout_width="match_parent"  
                    android:layout_height="match_parent"  
                    android:layout_centerInParent="true"  
                    style="@style/header_title_style"  
                    android:gravity="center"  
                    android:text="@string/title_news_category_tops" />  
                  
            </RelativeLayout>  
  
            <RelativeLayout  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:layout_weight="1" >  
  
                <TextView  
                    android:id="@+id/tv_title_info"  
                    android:layout_width="match_parent"  
                    android:layout_height="match_parent"  
                    android:layout_centerInParent="true"  
                    style="@style/header_title_style"  
                    android:gravity="center"  
                    android:text="@string/title_news_category_info" />  
                  
            </RelativeLayout>  
  
            <RelativeLayout  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:layout_weight="1" >  
  
                <TextView  
                    android:id="@+id/tv_title_blog"  
                    android:layout_width="match_parent"  
                    android:layout_height="match_parent"  
                    android:layout_centerInParent="true"  
                    style="@style/header_title_style"  
                    android:gravity="center"  
                    android:text="@string/title_news_category_blog" />  
                  
            </RelativeLayout>  
  
            <RelativeLayout  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:layout_weight="1" >  
  
                <TextView  
                    android:id="@+id/tv_title_magazine"  
                    android:layout_width="match_parent"  
                    android:layout_height="match_parent"  
                    android:layout_centerInParent="true"  
                    style="@style/header_title_style"  
                    android:gravity="center"  
                    android:text="@string/title_news_category_magazine" />  
                  
            </RelativeLayout>  
  
            <RelativeLayout  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:layout_weight="1" >  
  
                <TextView  
                    android:id="@+id/tv_title_domain"  
                    android:layout_width="match_parent"  
                    android:layout_height="match_parent"  
                    android:layout_centerInParent="true"  
                    style="@style/header_title_style"  
                    android:gravity="center"  
                    android:text="@string/title_news_category_domain" />  
                  
            </RelativeLayout>  
  
            <RelativeLayout  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:layout_weight="1" >  
  
                <TextView  
                    android:id="@+id/tv_title_more"  
                    android:layout_width="match_parent"  
                    android:layout_height="match_parent"  
                    android:layout_centerInParent="true"  
                    style="@style/header_title_style"  
                    android:gravity="center"  
                    android:text="@string/title_news_category_more" />  
            </RelativeLayout>  
        </LinearLayout>  
    </RelativeLayout>  
</LinearLayout>  
上面代碼中設置選中項之寬帶實作：
mSelectedItem.setWidth((getScreenWidth() - DimensionUtility.dip2px(this, 20)) / 6);
使用之getScreenWidth方法實作：
/**
     * 獲取螢幕的寬度
     * @return
     */
    private int getScreenWidth(){
            WindowManager windowManager = getWindowManager();
                Display display = windowManager.getDefaultDisplay();
//             Point point = new Point();
//             display.getSize(point);
//             int screenWidth = point.x;
                int screenWidth = display.getWidth();
                return screenWidth;
    }
        display的getWidth方法在3.0中好像沒被deprecated，亦可以使用注釋掉的代碼獲取螢幕寬度。
        下面是最重要的部分──點擊切換(說明列述於注釋裡)：
// 新聞分類事件監聽
        @Override
        public void onClick(View v) {
                mItemWidth = findViewById(R.id.layout).getWidth();
               
                switch (v.getId()) {
                case R.id.tv_title_news:
                        //動畫滑動
                        ImageAnimation.SetImageSlide(mSelectedItem, startX, 0, 0, 0);
                        //設置滑動後動畫開始位置
                        startX = 0;
                        //設置選中項顯示文字，也就是高亮部分文字
                        mSelectedItem.setText(R.string.title_news_category_tops);
                        //設置左上角提示文字
                        mNetEaseTop.setText(R.string.title_news_category_tops);
                       
                        // 顯示頭條資訊
                        mIntent.setClass(MainActivity.this, TopicNews.class);
                        mNewsMain = getLocalActivityManager().startActivity(
                                    "TopicNews", mIntent).getDecorView();
                        break;
                case R.id.tv_title_info:
                        ImageAnimation.SetImageSlide(mSelectedItem, startX, mItemWidth, 0, 0);
                        startX = mItemWidth;
                        mSelectedItem.setText(R.string.title_news_category_info);
                        mNetEaseTop.setText(R.string.title_news_category_info);
                       
                        // 顯示資訊資訊
                        mIntent.setClass(MainActivity.this, InfoNews.class);
                        mNewsMain = getLocalActivityManager().startActivity(
                                    "InfoNews", mIntent).getDecorView();
                        break;
                case R.id.tv_title_blog:
                        ImageAnimation.SetImageSlide(mSelectedItem, startX, mItemWidth * 2, 0, 0);
                        startX = mItemWidth * 2;
                        mSelectedItem.setText(R.string.title_news_category_blog);
                        mNetEaseTop.setText(R.string.title_news_category_blog);
                       
                        // 顯示博客資訊
                        mIntent.setClass(MainActivity.this, BlogNews.class);
                        mNewsMain = getLocalActivityManager().startActivity(
                                    "BlogNews", mIntent).getDecorView();
                        break;
                case R.id.tv_title_magazine:
                        ImageAnimation.SetImageSlide(mSelectedItem, startX, mItemWidth * 3, 0, 0);
                        startX = mItemWidth * 3;
                        mSelectedItem.setText(R.string.title_news_category_magazine);
                        mNetEaseTop.setText(R.string.title_news_category_magazine);
                       
                        // 顯示雜誌資訊
                        mIntent.setClass(MainActivity.this, MagazineNews.class);
                        mNewsMain = getLocalActivityManager().startActivity(
                                    "MagazineNews", mIntent).getDecorView();
                        break;
                case R.id.tv_title_domain:
                        ImageAnimation.SetImageSlide(mSelectedItem, startX, mItemWidth * 4, 0, 0);
                        startX = mItemWidth * 4;
                        mSelectedItem.setText(R.string.title_news_category_domain);
                        mNetEaseTop.setText(R.string.title_news_category_domain);
                        // 顯示業界資訊
                        mIntent.setClass(MainActivity.this, DomainNews.class);
                        mNewsMain = getLocalActivityManager().startActivity(
                                    "DomainNews", mIntent).getDecorView();
                        break;
                case R.id.tv_title_more:
                        ImageAnimation.SetImageSlide(mSelectedItem, startX, mItemWidth * 5, 0, 0);
                        startX = mItemWidth * 5;
                        mSelectedItem.setText(R.string.title_news_category_more);
                        mNetEaseTop.setText(R.string.title_news_category_more);
                       
                        // 顯示更多資訊
                        mIntent.setClass(MainActivity.this, MoreNews.class);
                        mNewsMain = getLocalActivityManager().startActivity(
                                    "MoreNews", mIntent).getDecorView();
                        break;
                default:
                        break;
                }              
                // 更換Layout中的新聞主體
                mNewsMainLayout.removeAllViews();
                mNewsMainLayout.addView(mNewsMain, params);
        }
上述代碼中之ImageAnimation類為實作移間動畫之技巧，其代碼如下：
public class ImageAnimation {
    /**
     * 設置圖像移動動畫效果
     * @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);
    }
}
如此就完成頂部標示之部份，接下來要分析如下之圖形顯示：
這個代碼設計在TopicNews類中，先看下使用到之全域變數：
public class TopicNews extends Activity{
    // 滑動圖片的集合
    private ArrayList<View> mImagePageViewList = null;
    private ViewGroup mMainView = null;
    private ViewPager mViewPager = null;
    // 當前ViewPager索引
// private int pageIndex = 0;
   
    // 包含圓點圖片的View
    private ViewGroup mImageCircleView = null;
    private ImageView[] mImageCircleViews = null;
   
    // 滑動標題
    private TextView mSlideTitle = null;
   
    // 佈局設置類
    private SlideImageLayout mSlideLayout = null;
    // 數據解析類
    private NewsXmlParser mParser = null;
裡面的ViewPager類是用於滑動控制項，SlideImageLayout類是用於上面圖片和下面標誌點的佈局，而NewsXmlParser類提供資料。
        onCreate方法之實作：
        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setTheme(android.R.style.Theme_Translucent_NoTitleBar);               
                // 初始化(自訂方法)
                initeViews();
        }
       
       
        private void initeViews(){       // 初始化
                // 滑動圖片區域
                mImagePageViewList = new ArrayList<View>();
                LayoutInflater inflater = getLayoutInflater(); 
                mMainView = (ViewGroup)inflater.inflate(R.layout.page_topic_news, null);
                mViewPager = (ViewPager) mMainView.findViewById(R.id.image_slide_page); 
               
                // 圓點圖片區域
                mParser = new NewsXmlParser();
                int length = mParser.getSlideImages().length;
                mImageCircleViews = new ImageView[length];
                mImageCircleView = (ViewGroup) mMainView.findViewById(R.id.layout_circle_images);
                mSlideLayout = new SlideImageLayout(TopicNews.this);
                mSlideLayout.setCircleImageLayout(length);
               
                for(int i = 0; i < length; i++){
                        mImagePageViewList.add(mSlideLayout.getSlideImageLayout(mParser.getSlideImages()[i]));
                        mImageCircleViews[i] = mSlideLayout.getCircleImageLayout(i);
                        mImageCircleView.addView(mSlideLayout.getLinearLayout(mImageCircleViews[i], 10, 10));
                }
               
                // 設置默認的滑動標題
                mSlideTitle = (TextView) mMainView.findViewById(R.id.tvSlideTitle);
                mSlideTitle.setText(mParser.getSlideTitles()[0]);
               
                setContentView(mMainView);
               
                // 設置ViewPager
        mViewPager.setAdapter(new SlideImageAdapter()); 
        mViewPager.setOnPageChangeListener(new ImagePageChangeListener());
        }
圓點圖片區域之代碼：
// 圓點圖片區域
                mParser = new NewsXmlParser();
                int length = mParser.getSlideImages().length;
                mImageCircleViews = new ImageView[length];
                mImageCircleView = (ViewGroup) mMainView.findViewById(R.id.layout_circle_images);
                mSlideLayout = new SlideImageLayout(TopicNews.this);
                mSlideLayout.setCircleImageLayout(length);
               
                for(int i = 0; i < length; i++){
                        mImagePageViewList.add(mSlideLayout.getSlideImageLayout(mParser.getSlideImages()[i]));
                        mImageCircleViews[i] = mSlideLayout.getCircleImageLayout(i);
                        mImageCircleView.addView(mSlideLayout.getLinearLayout(mImageCircleViews[i], 10, 10));
                }
裡面主要是調用了NewsXmlParser類和SlideImageLayout的方法，那就先看下NewsXmlParser的getSlideImages方法：
public int[] getSlideImages(){
                return slideImages;
        }
這裡的slideImage是在類中事先定義好的：
// 滑動圖片的集合，這裡設置成了固定載入，當然也可動態載入
    private int[] slideImages = {
                    R.drawable.image01,
                    R.drawable.image02,
                    R.drawable.image03,
                    R.drawable.image04,
                    R.drawable.image05};
        再看一下用到的SlideImageLayout類的getSlideImageLayout：獲取圖片的佈局：
/**
     * 生成滑動圖片區域佈局
     * @param id
     * @return
     */
    public View getSlideImageLayout(int id){
            // 包含TextView的LinearLayout
            LinearLayout imageLinerLayout = new LinearLayout(mContext);
            LinearLayout.LayoutParams imageLinerLayoutParames = new LinearLayout.LayoutParams(
                            LinearLayout.LayoutParams.WRAP_CONTENT,
                            LinearLayout.LayoutParams.WRAP_CONTENT,
                            1);
           
            ImageView iv = new ImageView(mContext);
            iv.setBackgroundResource(id);
            iv.setOnClickListener(new ImageOnClickListener());
            imageLinerLayout.addView(iv,imageLinerLayoutParames);
            mImageList.add(iv);
           
            return imageLinerLayout;
    }
創建一個Layout，之後再創建一個ImageView,再將此ImageView加入到Layout中並回傳此Layout。同理，我們再看下set和getCircleImageLayout：
/** 設置圓點個數
     * @param size
     */
    public void setCircleImageLayout(int size){
            mImageViews = new ImageView[size];
    }
   
    /**
     * 生成圓點圖片區域佈局物件
     * @param index
     * @return
     */
    public ImageView getCircleImageLayout(int index){
            mImageView = new ImageView(mContext); 
            mImageView.setLayoutParams(new LayoutParams(10,10));
        mImageView.setScaleType(ScaleType.FIT_XY);
       
        mImageViews[index] = mImageView;
        
        if (index == 0) { 
            //預設選中第一張圖片
            mImageViews[index].setBackgroundResource(R.drawable.dot_selected); 
        } else { 
            mImageViews[index].setBackgroundResource(R.drawable.dot_none); 
        } 
        
        return mImageViews[index];
    }
獲取圓點圖片的Image並回傳。在initViews中還有設置滑動圖片標題：
// 設置默認的滑動標題
                mSlideTitle = (TextView) mMainView.findViewById(R.id.tvSlideTitle);
                mSlideTitle.setText(mParser.getSlideTitles()[0]);
               
                setContentView(mMainView);
最後是設置Viewpager的Adapter及其監聽事件
// 設置ViewPager
        mViewPager.setAdapter(new SlideImageAdapter()); 
        mViewPager.setOnPageChangeListener(new ImagePageChangeListener());
先看一下SlideImageAdapter類：
// 滑動圖片資料適配器
    private class SlideImageAdapter extends PagerAdapter { 
        @Override 
        public int getCount() {
            return mImagePageViewList.size(); 
        } 
 
        @Override 
        public boolean isViewFromObject(View view, Object object) { 
            return view == object; 
        } 
 
        @Override 
        public int getItemPosition(Object object) { 
            return super.getItemPosition(object); 
        } 
 
        @Override 
        public void destroyItem(View view, int arg1, Object arg2) { 
            ((ViewPager) view).removeView(mImagePageViewList.get(arg1)); 
        } 
 
        @Override 
        public Object instantiateItem(View view, int position) { 
                ((ViewPager) view).addView(mImagePageViewList.get(position));
           
            return mImagePageViewList.get(position); 
        } 
 
        @Override 
        public void restoreState(Parcelable arg0, ClassLoader arg1) { 
 
        } 
 
        @Override 
        public Parcelable saveState() { 
            return null; 
        } 
 
        @Override 
        public void startUpdate(View arg0) { 
        } 
 
        @Override 
        public void finishUpdate(View arg0) { 
        } 
    }
一個典型的適配器類，主要看下面兩個方法：
@Override 
        public void destroyItem(View view, int arg1, Object arg2) { 
            ((ViewPager) view).removeView(mImagePageViewList.get(arg1)); 
        } 
 
        @Override 
        public Object instantiateItem(View view, int position) { 
            ((ViewPager) view).addView(mImagePageViewList.get(position));
           
            return mImagePageViewList.get(position); 
        } 
產生實體Item和銷毀Item。前述中在initViews方法裡面為mImagePageViewList裡面載入了很多view，在這裡取出，加入到ViewPager中去。
至於滑動監聽事件特別簡單，就是改變一下選中圖片、標識圓點和標題文字：
// 滑動頁面更改事件監聽器
    private class ImagePageChangeListener implements OnPageChangeListener {
        @Override 
        public void onPageScrollStateChanged(int arg0) { 
        } 
 
        @Override 
        public void onPageScrolled(int arg0, float arg1, int arg2) { 
        } 
 
        @Override 
        public void onPageSelected(int index) { 
//        pageIndex = index;
            mSlideLayout.setPageIndex(index);
            mSlideTitle.setText(mParser.getSlideTitles()[index]);
           
            for (int i = 0; i < mImageCircleViews.length; i++) { 
                mImageCircleViews[index].setBackgroundResource(R.drawable.dot_selected);
               
                if (index != i) { 
                    mImageCircleViews[i].setBackgroundResource(R.drawable.dot_none); 
                } 
            }
        } 
    }  
另在網易新聞裡有個如下之底部標記欄：
這個功能是如何實現的呢？作法如下：
xml佈局檔：
<RelativeLayout  
        android:id="@+id/layout_bottom"  
        android:layout_weight="1"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content" >  
  
        <RadioGroup  
            android:id="@+id/radiogroup"  
            android:layout_width="fill_parent"  
            android:layout_height="0dp"  
            android:background="@drawable/bottombg"  
            android:gravity="center_vertical"  
            android:orientation="horizontal" >  
  
            <RadioButton  
                android:id="@+id/radio_news"  
                android:layout_width="wrap_content"  
                android:background="@drawable/tab_selector_news"  
                android:button="@null"  
                android:checked="true" />  
  
            <RadioButton  
                android:id="@+id/radio_topic"  
                android:layout_width="wrap_content"  
                android:background="@drawable/tab_selector_topic"  
                android:button="@null" />  
  
            <RadioButton  
                android:id="@+id/radio_pic"  
                android:layout_width="wrap_content"  
                android:background="@drawable/tab_selector_pic"  
                android:button="@null" />  
  
            <RadioButton  
                android:id="@+id/radio_follow"  
                android:layout_width="wrap_content"  
                android:background="@drawable/tab_selector_follow"  
                android:button="@null" />  
  
            <RadioButton  
                android:id="@+id/radio_vote"  
                android:layout_width="wrap_content"  
                android:background="@drawable/tab_selector_vote"  
                android:button="@null" />  
        </RadioGroup>  
    </RelativeLayout>  
其中background圖片之切換如下：
<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
  
    <item android:drawable="@drawable/current_topic_tab" android:state_checked="true"/>  
    <item android:drawable="@drawable/back_topic_tab" android:state_checked="false"/>  
  
</selector>  
切換代碼如下：
@Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {

            switch (checkedId) {
            case R.id.radio_news:
                    ImageAnimation.SetImageSlide(mImageView, startLeft, 0, 0, 0);
                    startLeft = 0;
                    break;
            case R.id.radio_topic:
                    ImageAnimation.SetImageSlide(mImageView, startLeft, mImageView.getWidth(), 0, 0);
                    startLeft = mImageView.getWidth();
           
                    break;
            case R.id.radio_pic:
                    ImageAnimation.SetImageSlide(mImageView, startLeft, mImageView.getWidth() * 2, 0, 0);
                    startLeft = mImageView.getWidth() * 2;
                    break;
            case R.id.radio_follow:
                    ImageAnimation.SetImageSlide(mImageView, startLeft, mImageView.getWidth() * 3, 0, 0);
                    startLeft = mImageView.getWidth() * 3;
                    break;
            case R.id.radio_vote:
                    ImageAnimation.SetImageSlide(mImageView, startLeft, mImageView.getWidth() * 4, 0, 0);
                    startLeft = mImageView.getWidth() * 4;
                    break;

            default:
                    break;
            }
       
可運行一下程式看看結果顯示。

 

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)