Android开发实战《智慧北京》——3.完善视图

曾经终败给现在 2023-07-02 04:26 68阅读 0赞

### 文章目录 ###

*  1.给新闻菜单详情页ViewPager填充数据
 *  2.处理页签无法滑动的Bug
 *  3.使用ViewPagerIndicator
 *  4.修改ViewPagerIndicator样式
 *  5.跳转到下一个页签
 *  6.指示器请求所有父控件不拦截事件
 *  7.页签滑动时呼出侧边栏的Bug修复
 *  8.请求页签网格数据并解析
 *  9.页签加网络缓存
 *  10.BitmapUtils的使用
 *  11.头条新闻滑动事件处理
 *  12.头条新闻标题更新
 *  13.头条新闻小圆点
 *  14.ImageView的CenterCrop属性
 *  15.展示新闻列表
 *  16.给ListView添加头布局展示头条新闻
 *  18.自定义下拉刷新 & 隐藏头布局
 *  19.自定义圆环进度条

# 1.给新闻菜单详情页ViewPager填充数据 #

在上一篇博客的末尾，我们完成了侧边栏的逻辑，现在需要将获得的数据传到ViewPager中，即让内容显示出来，我们现在来完成这个逻辑。

1.  新建paper\_news\_menu\_detail.xml布局文件，作为ViewPager的数据填充布局，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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_news_menu_detail" android:layout_width="match_parent" android:layout_height="match_parent"/>
    
    </LinearLayout>

1.  修改NewsMenuDetailPaper，修改initViews()方法，使用刚刚创建好的布局文件，代码如下：

package com.example.zhbj.base.impl.menudetail;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.support.v4.view.ViewPager;
    import android.view.Gravity;
    import android.view.View;
    import android.widget.TextView;
    
    import com.example.zhbj.R;
    import com.example.zhbj.base.BaseMenuDetailPaper;
    import com.lidroid.xutils.ViewUtils;
    import com.lidroid.xutils.view.annotation.ViewInject;
    
    /** * 菜单详情页 - 新闻 */
    public class NewsMenuDetailPaper extends BaseMenuDetailPaper { 
    
        /** * ViewPager对象 */
        @ViewInject(R.id.vp_news_menu_detail)
        private ViewPager mViewPager;
    
        public NewsMenuDetailPaper(Activity activity) { 
            super(activity);
        }
    
        @Override
        public View initViews() { 
            // 给空的帧布局动态添加布局对象
            /* TextView view = new TextView(mActivity); view.setTextSize(22); view.setTextColor(Color.RED); view.setGravity(Gravity.CENTER); // 居中显示 view.setText("菜单详情页-新闻"); */
            View view = View.inflate(mActivity, R.layout.paper_news_menu_detail, null);
            ViewUtils.inject(this,view);
            return view;
        }
    }

1.  修改NewsMenuDetailPaper，添加initData()方法，为ViewPager初始化数据，同时新建内部类NewsMenuDetailAdapter，用于创建适配器逻辑，代码如下：

1.  在base/impl包下新建TabDetailPaper，继承BaseMenuDetailPaper，作为详情页的标签条，代码如下：

package com.example.zhbj.base.impl;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.view.Gravity;
    import android.view.View;
    import android.widget.TextView;
    
    import com.example.zhbj.base.BaseMenuDetailPaper;
    
    /** * 页签详情页，包含北京、中国、国际等页签 */
    public class TabDetailPaper extends BaseMenuDetailPaper { 
    
        public TabDetailPaper(Activity activity) { 
            super(activity);
        }
    
        @Override
        public View initViews() { 
            TextView view = new TextView(mActivity);
            view.setTextSize(22);
            view.setTextColor(Color.RED);
            view.setGravity(Gravity.CENTER); // 居中显示
            view.setText("页签");
            return view;
        }
    }

1.  修改NewsCenterPaper，修改processData()方法，在添加菜单详情页时额外添加一个参数，代码如下：

/** * 解析从服务器获取的JSON数据 */
        private void processData(String json) { 
            Gson gson = new Gson();
            // 通过json和对象类，来生成一个对象
            newsMenu = gson.fromJson(json, NewsMenu.class);
    
            // 找到侧边栏对象
            MainActivity mainUI = (MainActivity) mActivity;
            LeftMenuFragment fragment = mainUI.getLeftMenuFragment();
            fragment.setMenuData(newsMenu.data);
    
            // 网络请求成功之后，初始化四个菜单详情页
            mPapers = new ArrayList<>();
            mPapers.add(new NewsMenuDetailPaper(mActivity,newsMenu.data.get(0).children)); // 通过构造方法传递数据
            mPapers.add(new TopicMenuDetailPaper(mActivity));
            mPapers.add(new PhotosMenuDetailPaper(mActivity));
            mPapers.add(new InteractMenuDetailPaper(mActivity));
    
            // 设置新闻菜单详情页为默认页面
            setMenuDetailPager(0);
        }

1.  修改InteractMenuDetailPaper、NewsMenuDetailPaper、PhotosMenuDetailPaper、TopicMenuDetailPaper，修改其构造方法，添加参数，这里只演示其中一个类的修改，其他同理，代码如下：

1.  修改NewsMenuDetailPaper，修改initData()方法，获取十二个页签对象，并且修改NewsMenuDetailAdapter内部类的方法，使其相匹配，代码如下：

1.  修改NewsMenuDetailPaper，修改initData()方法，将网络数据填充进去，代码如下：

@Override
        public void initData() { 
            // 初始化12个页签对象，具体数量以服务器为准
            mPaper = new ArrayList<>();
            for (int i = 0; i < children.size(); i++) { 
                TabDetailPaper paper = new TabDetailPaper(mActivity,children.get(i));
                mPaper.add(paper);
            }
            mViewPager.setAdapter(new NewsMenuDetailAdapter());
        }

与此同时，修改TabDetailPaper，将构造方法修改成与其相对应，代码如下：

package com.example.zhbj.base.impl;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.view.Gravity;
    import android.view.View;
    import android.widget.TextView;
    
    import com.example.zhbj.base.BaseMenuDetailPaper;
    import com.example.zhbj.domain.NewsMenu;
    
    /** * 页签详情页，包含北京、中国、国际等页签 */
    public class TabDetailPaper extends BaseMenuDetailPaper { 
    
        /** * 当前页签数据 */
        private NewsMenu.NewsTabData newsTabData;
    
        public TabDetailPaper(Activity activity, NewsMenu.NewsTabData newsTabData) { 
            super(activity);
            this.newsTabData = newsTabData;
        }
    
        @Override
        public View initViews() { 
            TextView view = new TextView(mActivity);
            view.setTextSize(22);
            view.setTextColor(Color.RED);
            view.setGravity(Gravity.CENTER); // 居中显示
            view.setText("页签");
            return view;
        }
    }

1.  修改NewsMenuDetailPaper，修改initData()方法，设置其页面显示的内容，代码如下：

package com.example.zhbj.base.impl;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.view.Gravity;
    import android.view.View;
    import android.widget.TextView;
    
    import com.example.zhbj.base.BaseMenuDetailPaper;
    import com.example.zhbj.domain.NewsMenu;
    
    /** * 页签详情页，包含北京、中国、国际等页签 */
    public class TabDetailPaper extends BaseMenuDetailPaper { 
    
        /** * 当前页签数据 */
        private NewsMenu.NewsTabData newsTabData;
    
        /** * 文本框对象 */
        private TextView view;
    
        public TabDetailPaper(Activity activity, NewsMenu.NewsTabData newsTabData) { 
            super(activity);
            this.newsTabData = newsTabData;
        }
    
        @Override
        public View initViews() { 
            view = new TextView(mActivity);
            view.setTextSize(22);
            view.setTextColor(Color.RED);
            view.setGravity(Gravity.CENTER); // 居中显示
            view.setText("页签");
            return view;
        }
    
        @Override
        public void initData() { 
            view.setText(newsTabData.title); // 修改当前布局的数据
        }
    }

# 2.处理页签无法滑动的Bug #

现在数据设置好了，当前页面只有一个数据“北京”，由于界面是一个ViewPager，按理说应该可以滑动，然而在滑动时出现了无法滑动的bug（即滑动冲突），我们现在来处理一下。

修改NoScrollViewPaper，重写onInterceptTouchEvent()方法，让父类不要拦截子类的事件，代码如下：

/** * 事件中断，拦截 * @param ev * @return */
        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev) { 
            // true:拦截，false:不拦截，传给子控件
            return false; // 标签页的ViewPager不拦截标签菜单详情页页签的ViewPager
        }

# 3.使用ViewPagerIndicator #

在编写新的逻辑代码前，再去梳理一下当前的UI框架图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]

在这个基础上，现在要编写标题栏上的条签，这里我们使用第三方组件**ViewPagerIndicator**来实现这个效果。引入这个第三方模块，然后开始编写我们接下来的逻辑。

1.  修改paper\_news\_menu\_detail.xml，添加相关组件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
    
        <com.viewpagerindicator.TabPageIndicator android:id="@id/indicator" android:layout_width="match_parent" android:layout_height="wrap_content"/>
    
        <android.support.v4.view.ViewPager android:id="@+id/vp_news_menu_detail" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/>
    
    </LinearLayout>

1.  修改NewsMenuDetailPaper，注册TagPageIndicator控件，并且绑定，代码如下：

1.  修改NewsMenuDetailPaper，重写getPageTitle()方法、添加返回标题的逻辑，代码如下：

# 4.修改ViewPagerIndicator样式 #

现在ViewPagerIndicator创建好了，不过样式不太好看，那么这一节我们就来修改一下它的样式。

1.  修改AndroidManifest.xml，修改MainActivity的默认样式，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.zhbj">
    
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    
        <application android:allowBackup="true" android:icon="@drawable/icon_150" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme">
            <uses-library android:name="org.apache.http.legacy" android:required="false" />
            <activity android:name=".SplashActivity" android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
            <activity android:name=".GuideActivity" />
            <activity android:name=".MainActivity" android:theme="@style/Theme.PageIndicatorDefaults"/>
        </application>
    
    </manifest>

1.  修改activity\_main.xml，将背景颜色改为白色，以替换修改新样式后变成的黑色，（在java类中修改ContentFragment的布局也可以）代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/fl_content" android:background="#fff" android:layout_width="match_parent" android:layout_height="match_parent">
    
    </FrameLayout>

1.  为了优化显示效果，修改vpi\_\_tab\_indicator.xml文件（在指示器文件夹中），注意将需要用到的图片拷到ViewPageIndicator的res/drawable中，不然无法引用，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    
    
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
        <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" />
    
        
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
        <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" />
    
        
        
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
        <item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" />
    
        
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
        <item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" />
    </selector>

1.  为了优化文字效果，修改vpi\_\_dark\_theme文件（在指示器文件夹中），代码如下：

<?xml version="1.0" encoding="utf-8"?>
    
    
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false" android:color="#000"/>
        <item android:state_window_focused="false" android:color="#000"/>
        <item android:state_pressed="true" android:color="#000"/>
        <item android:state_selected="true" android:color="#f00"/>
        
        <item android:color="#000"/> 
    </selector>

# 5.跳转到下一个页签 #

之前我们实现了页签条的配置，现在需要在页签条的末尾加上一个箭头，点击后会跳转到下一个页面，现在开始实现这个逻辑。

1.  修改paper\_news\_menu\_detail.xml，增加箭头图标，代码如下：

1.  修改NewsMenuDetailPaper，为刚刚添加的按钮注册点击事件，由于使用的是Xutils，所以新建一个nextPage()方法来完成这个逻辑，代码如下：

/** * 通过Xutils来添加按钮的点击事件 * 注意：在xml中，配置组件的onClick属性只适用于Activity * @param view */
        @OnClick(R.id.btn_next)
        public void nextPage(View view){ 
            // 跳转到下一个页面
            int currentPos = mViewPager.getCurrentItem();
            //mIndicator.setCurrentItem(++currentPos); 会导致显示bug
            mViewPager.setCurrentItem(++currentPos);
        }

# 6.指示器请求所有父控件不拦截事件 #

在向右滑动标签条时，可能会将侧边栏也滑动出来，这就需要让指示器请求所有父控件而不拦截事件，现在开始实现。

修改viewpagerIndicator中的TabPageIndicator，重写dispatchTouchEvent()方法，代码如下：

/** * 事件处理：dispatchTouchEvent(事件分发) -> onInterceptTouchEvent -> onTouchEvent * @param ev * @return */
        @Override
        public boolean dispatchTouchEvent(MotionEvent ev) { 
            // 请求父控件和祖宗控件不要拦截事件
            getParent().requestDisallowInterceptTouchEvent(true);
            return super.dispatchTouchEvent(ev);
        }

# 7.页签滑动时呼出侧边栏的Bug修复 #

在第六节中我们让指示器请求所有父控件不拦截事件，现在来修复一个bug：页签滑动到第二个页签时，左滑会呼出侧边栏。现在开始实现这个逻辑。

1.  修改NewsMenuDetailPaper，修改initData()方法，并且实现OnPageChangeListener接口，代码如下：

package com.example.zhbj.base.impl.menudetail;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.support.annotation.NonNull;
    import android.support.annotation.Nullable;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.view.Gravity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    import com.example.zhbj.R;
    import com.example.zhbj.base.BaseMenuDetailPaper;
    import com.example.zhbj.base.impl.TabDetailPaper;
    import com.example.zhbj.domain.NewsMenu;
    import com.lidroid.xutils.ViewUtils;
    import com.lidroid.xutils.view.annotation.ViewInject;
    import com.lidroid.xutils.view.annotation.event.OnClick;
    import com.viewpagerindicator.TabPageIndicator;
    
    import java.util.ArrayList;
    
    /** * 菜单详情页 - 新闻 */
    public class NewsMenuDetailPaper extends BaseMenuDetailPaper implements ViewPager.OnPageChangeListener { 
    
        /** * ViewPager对象 */
        @ViewInject(R.id.vp_news_menu_detail)
        private ViewPager mViewPager;
    
        /** * indicator指示器 */
        @ViewInject(R.id.indicator)
        private TabPageIndicator mIndicator;
    
        /** * 存储标题 */
        private ArrayList<NewsMenu.NewsTabData> children;
    
        /** * 存储详情页 */
        private ArrayList<TabDetailPaper> mPaper;
    
        public NewsMenuDetailPaper(Activity activity, ArrayList<NewsMenu.NewsTabData> children) { 
            super(activity);
            this.children = children;
        }
    
        @Override
        public View initViews() { 
            // 给空的帧布局动态添加布局对象
            /* TextView view = new TextView(mActivity); view.setTextSize(22); view.setTextColor(Color.RED); view.setGravity(Gravity.CENTER); // 居中显示 view.setText("菜单详情页-新闻"); */
            View view = View.inflate(mActivity, R.layout.paper_news_menu_detail, null);
            ViewUtils.inject(this,view);
            return view;
        }
    
        @Override
        public void initData() { 
            // 初始化12个页签对象，具体数量以服务器为准
            mPaper = new ArrayList<>();
            for (int i = 0; i < children.size(); i++) { 
                TabDetailPaper paper = new TabDetailPaper(mActivity,children.get(i));
                mPaper.add(paper);
            }
            mViewPager.setAdapter(new NewsMenuDetailAdapter());
            mIndicator.setViewPager(mViewPager); // 将ViewPager和ViewPageIndicator绑定在一起，注意需要在setAdapter结束之后再调
    
            // 设置页面的触摸监听
            // mViewPager.setOnPageChangeListener(this);
            mIndicator.setOnPageChangeListener(this); // 当ViewPager和Indicator绑定时，事件需要设置给mIndicator
        }
    
        /** * 通过Xutils来添加按钮的点击事件 * 注意：在xml中，配置组件的onClick属性只适用于Activity * @param view */
        @OnClick(R.id.btn_next)
        public void nextPage(View view){ 
            // 跳转到下一个页面
            int currentPos = mViewPager.getCurrentItem();
            //mIndicator.setCurrentItem(++currentPos); 会导致显示bug
            mViewPager.setCurrentItem(++currentPos);
        }
    
        @Override
        public void onPageScrolled(int i, float v, int i1) { 
    
        }
    
        @Override
        public void onPageSelected(int i) { 
    
        }
    
        @Override
        public void onPageScrollStateChanged(int i) { 
    
        }
    
        class NewsMenuDetailAdapter extends PagerAdapter{ 
    
            @Override
            public int getCount() { 
                return mPaper.size();
            }
    
            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object o) { 
                return view == o;
            }
    
            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) { 
                TabDetailPaper paper = mPaper.get(position);
                paper.initData(); // 初始化数据
                container.addView(paper.mRootView);
                return paper.mRootView;
            }
    
            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { 
                container.removeView((View) object);
            }
    
            /** * 返回指示器Indicator的标题 * @param position * @return */
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) { 
                return children.get(position).title;
            }
        }
    
    
    }

1.  修改NewsMenuDetailPaper，实现onPageSelected()方法，用于控制侧边栏的开启和关闭，代码如下：

package com.example.zhbj.base.impl.menudetail;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.support.annotation.NonNull;
    import android.support.annotation.Nullable;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.view.Gravity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    import com.example.zhbj.MainActivity;
    import com.example.zhbj.R;
    import com.example.zhbj.base.BaseMenuDetailPaper;
    import com.example.zhbj.base.impl.TabDetailPaper;
    import com.example.zhbj.domain.NewsMenu;
    import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
    import com.lidroid.xutils.ViewUtils;
    import com.lidroid.xutils.view.annotation.ViewInject;
    import com.lidroid.xutils.view.annotation.event.OnClick;
    import com.viewpagerindicator.TabPageIndicator;
    
    import java.util.ArrayList;
    
    /** * 菜单详情页 - 新闻 */
    public class NewsMenuDetailPaper extends BaseMenuDetailPaper implements ViewPager.OnPageChangeListener { 
    
        /** * ViewPager对象 */
        @ViewInject(R.id.vp_news_menu_detail)
        private ViewPager mViewPager;
    
        /** * indicator指示器 */
        @ViewInject(R.id.indicator)
        private TabPageIndicator mIndicator;
    
        /** * 存储标题 */
        private ArrayList<NewsMenu.NewsTabData> children;
    
        /** * 存储详情页 */
        private ArrayList<TabDetailPaper> mPaper;
    
        public NewsMenuDetailPaper(Activity activity, ArrayList<NewsMenu.NewsTabData> children) { 
            super(activity);
            this.children = children;
        }
    
        @Override
        public View initViews() { 
            // 给空的帧布局动态添加布局对象
            /* TextView view = new TextView(mActivity); view.setTextSize(22); view.setTextColor(Color.RED); view.setGravity(Gravity.CENTER); // 居中显示 view.setText("菜单详情页-新闻"); */
            View view = View.inflate(mActivity, R.layout.paper_news_menu_detail, null);
            ViewUtils.inject(this,view);
            return view;
        }
    
        @Override
        public void initData() { 
            // 初始化12个页签对象，具体数量以服务器为准
            mPaper = new ArrayList<>();
            for (int i = 0; i < children.size(); i++) { 
                TabDetailPaper paper = new TabDetailPaper(mActivity,children.get(i));
                mPaper.add(paper);
            }
            mViewPager.setAdapter(new NewsMenuDetailAdapter());
            mIndicator.setViewPager(mViewPager); // 将ViewPager和ViewPageIndicator绑定在一起，注意需要在setAdapter结束之后再调
    
            // 设置页面的触摸监听
            // mViewPager.setOnPageChangeListener(this);
            mIndicator.setOnPageChangeListener(this); // 当ViewPager和Indicator绑定时，事件需要设置给mIndicator
        }
    
        /** * 通过Xutils来添加按钮的点击事件 * 注意：在xml中，配置组件的onClick属性只适用于Activity * @param view */
        @OnClick(R.id.btn_next)
        public void nextPage(View view){ 
            // 跳转到下一个页面
            int currentPos = mViewPager.getCurrentItem();
            //mIndicator.setCurrentItem(++currentPos); 会导致显示bug
            mViewPager.setCurrentItem(++currentPos);
        }
    
        @Override
        public void onPageScrolled(int i, float v, int i1) { 
    
        }
    
        @Override
        public void onPageSelected(int i) { 
            if (i == 0){ 
                // 打开侧边栏
                setSlidingMenuEnable(true);
            }else { 
                // 禁用侧边栏
                setSlidingMenuEnable(false);
            }
        }
    
        @Override
        public void onPageScrollStateChanged(int i) { 
    
        }
    
        /** * 开启/禁用侧边栏 */
        private void setSlidingMenuEnable(boolean enable){ 
            // 获取MainActivity对象
            MainActivity mainUI = (MainActivity) mActivity;
    
            // 获取SlidingMenu对象
            SlidingMenu slidingMenu = mainUI.getSlidingMenu();
            if (enable){ 
                slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
            }else { 
                slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
            }
    
        }
    
        class NewsMenuDetailAdapter extends PagerAdapter{ 
    
            @Override
            public int getCount() { 
                return mPaper.size();
            }
    
            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object o) { 
                return view == o;
            }
    
            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) { 
                TabDetailPaper paper = mPaper.get(position);
                paper.initData(); // 初始化数据
                container.addView(paper.mRootView);
                return paper.mRootView;
            }
    
            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { 
                container.removeView((View) object);
            }
    
            /** * 返回指示器Indicator的标题 * @param position * @return */
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) { 
                return children.get(position).title;
            }
        }
    }

# 8.请求页签网格数据并解析 #

现在处理好了页签的逻辑，接下来我们需要给主页面请求页签网格数据并解析。

在完成逻辑之前，让我们先看看现在UI图的结构：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 1]

1.  新建一个布局文件paper\_tab\_detail.xml，作为图片的展示布局，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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_tab_detail" android:layout_width="match_parent" android:layout_height="180dp" />
    </LinearLayout>

1.  修改TabDetailPaper，注释掉之前的视图，换上新的视图，并且编写TopNewsAdapter，作为这个Pager的数据适配器，代码如下：

1.  在domain包下新建NewsTab类，作为显示图片的实体类，代码如下：

package com.example.zhbj.domain;
    
    import java.util.ArrayList;
    
    /** * 页签网络数据 */
    public class NewsTab { 
    
        public NewsTabData data;
    
        public class NewsTabData{ 
            public String more;
            public ArrayList<TopNews> topnews;
            public ArrayList<News> news;
        }
    
        public class TopNews{ 
            public String id;
            public String pubdate;
            public String title;
            public String topimage;
            public String url;
        }
    
        public class News{ 
            public String id;
            public String pubdate;
            public String title;
            public String listimage;
            public String url;
        }
    }

1.  修改TabDetailPaper，新增getDataFromServer()方法，用于从服务器上获取数据。再新增processData()方法，用于解析json数据，代码如下：

# 9.页签加网络缓存 #

现在我们获取到了服务器上的数据，就像之前一样，现在需要获得数据后加入到缓存中，现在开始编写这个逻辑。

修改TabDetailPaper，修改initData()方法，用于将网上的数据缓存到本地。再修改RequestCallBack内部类中的onSuccess()方法，用于读取本地缓存，代码如下：

# 10.BitmapUtils的使用 #

现在我们取到了数据，接下来要做的就是将数据中的url链接解析出来，然后显示到主页上，开始编写这个逻辑。

1.  修改TabDetailPaper，解析获得的数据，代码如下：

1.  修改TabDetailPaper，由于将图片解析过来的工程量过大，这里直接使用**xUtils**中的BitmapUtils，代码如下：

# 11.头条新闻滑动事件处理 #

之前我们完成了图片的解析和加载，现在需要处理头条新闻图片的滑动事件，现在开始完成这个逻辑。

1.  在view包下新建TopNewsViewPaper，表示头条新闻的标题栏，代码如下：

1.  修改paper\_tab\_detail.xml，用刚才编写的viewpaper替换掉原来的组件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
    
        <com.example.zhbj.view.TopNewsViewPaper android:id="@+id/vp_tab_detail" android:layout_width="match_parent" android:layout_height="180dp" />
    </LinearLayout>

1.  修改TabDetailPaper，修改mViewPaper的类型，需要与刚才的类型同步，代码如下：

/** * ViewPager对象 */
        @ViewInject(R.id.vp_tab_detail)
        private TopNewsViewPaper mViewPaper;

1.  修改TopNewsViewPaper，优化滑动事件的处理，代码如下：

package com.example.zhbj.view;
    
    import android.content.Context;
    import android.support.annotation.NonNull;
    import android.support.annotation.Nullable;
    import android.support.v4.view.ViewPager;
    import android.util.AttributeSet;
    import android.view.MotionEvent;
    
    /** * 头条新闻的ViewPager */
    public class TopNewsViewPaper extends ViewPager { 
    
        /** * 起始的X坐标 */
        private int startX;
    
        /** * 起始的Y坐标 */
        private int startY;
    
        /** * 终点的X坐标 */
        private int endX;
    
        /** * 终点的Y坐标 */
        private int endY;
    
        /** * X坐标的偏移量 */
        private int dX;
    
        /** * Y坐标的便宜量 */
        private int dY;
    
        public TopNewsViewPaper(@NonNull Context context) { 
            super(context);
        }
    
        public TopNewsViewPaper(@NonNull Context context, @Nullable AttributeSet attrs) { 
            super(context, attrs);
        }
    
        /** * 需要分情况来判断是否需要拦截事件 * 1.上下滑动，需要拦截 * 2.左滑时，最后一个页面需要拦截 * 3.右滑时，第一个页面需要拦截 * @param ev * @return */
        @Override
        public boolean dispatchTouchEvent(MotionEvent ev) { 
            // 请求父控件不拦截事件
            getParent().requestDisallowInterceptTouchEvent(true);
    
            switch (ev.getAction()){ 
                case MotionEvent.ACTION_DOWN:
                    // 按下
                    startX = (int) ev.getX();
                    startY = (int) ev.getY();
                    break;
                case MotionEvent.ACTION_MOVE:
                    // 移动
                    endX = (int) ev.getX();
                    endY = (int) ev.getY();
                    dX = endX - startX;
                    dY = endY - startY;
                    if (Math.abs(dX) > Math.abs(dY)){ 
                        // 左右滑动
                        int currentPos = getCurrentItem();
                        if (dX > 0){ 
                            // 右滑动
                            if (currentPos == 0){ 
                                getParent().requestDisallowInterceptTouchEvent(false);
                            }
                        }else { 
                            // 左滑动
                            int count = getAdapter().getCount(); // 当前viewpager中的item总数
                            if (currentPos == count - 1){ 
                                getParent().requestDisallowInterceptTouchEvent(false);
                            }
                        }
                    }else { 
                        // 上下滑动
                        getParent().requestDisallowInterceptTouchEvent(false);
                    }
                    break;
                default:break;
            }
            return super.dispatchTouchEvent(ev);
        }
    }

# 12.头条新闻标题更新 #

现在解决了头条新闻的滑动问题，接下来就是给每条新闻增加标题栏，现在开始实现逻辑。

1.  修改paper\_tab\_detail.xml，添加标题，代码如下：

1.  修改TabDetailPaper，获取刚刚创建的控件，并且修改processData()方法，用于绑定数据，代码如下：

# 13.头条新闻小圆点 #

标题已经弄好了，我们现在需要弄好一个显示图片的小圆点的功能，现在开始实现逻辑（这里借鉴一下ViewpageIndicator的实现）。

1.  修改paper\_tab\_detail.xml，添加圆点指示器组件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
    
        <FrameLayout android:layout_width="match_parent" android:layout_height="180dp">
    
            <com.example.zhbj.view.TopNewsViewPaper android:id="@+id/vp_tab_detail" android:layout_width="match_parent" android:layout_height="180dp"/>
    
            <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:padding="5dp" android:background="#9000">
    
                <TextView android:id="@+id/tv_title2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#fff" android:textSize="16sp"/>
    
                <com.viewpagerindicator.CirclePageIndicator android:id="@+id/indicator2" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:paddingLeft="5dp" android:paddingRight="5dp" app:radius="3dp" app:fillColor="#f00" app:pageColor="#cccccc" app:strokeWidth="0dp" />
            </RelativeLayout>
        </FrameLayout>
    </LinearLayout>

1.  修改TabDetailPaper，获取刚刚创建的组件实例，然后再绑定事件，代码如下：

package com.example.zhbj.base.impl;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.support.annotation.NonNull;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.text.TextUtils;
    import android.view.Gravity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import com.example.zhbj.R;
    import com.example.zhbj.base.BaseMenuDetailPaper;
    import com.example.zhbj.domain.NewsMenu;
    import com.example.zhbj.domain.NewsTab;
    import com.example.zhbj.global.GlobalConstans;
    import com.example.zhbj.util.CacheUtil;
    import com.example.zhbj.view.TopNewsViewPaper;
    import com.google.gson.Gson;
    import com.lidroid.xutils.BitmapUtils;
    import com.lidroid.xutils.HttpUtils;
    import com.lidroid.xutils.ViewUtils;
    import com.lidroid.xutils.exception.HttpException;
    import com.lidroid.xutils.http.ResponseInfo;
    import com.lidroid.xutils.http.callback.RequestCallBack;
    import com.lidroid.xutils.http.client.HttpRequest;
    import com.lidroid.xutils.view.annotation.ViewInject;
    import com.viewpagerindicator.CirclePageIndicator;
    
    import java.util.ArrayList;
    
    /** * 页签详情页，包含北京、中国、国际等页签 * ViewPagerIndicator * 1.引入ViewPagerIndicator库 * 2.解决v4冲突，用大的版本覆盖小的版本 * 3.仿照sample中的程序进行拷贝SampleTabsDefault */
    public class TabDetailPaper extends BaseMenuDetailPaper { 
    
        /** * 当前页签数据 */
        private NewsMenu.NewsTabData newsTabData;
    
        /** * 文本框对象 */
         // private TextView view;
    
        /** * ViewPager对象 */
        @ViewInject(R.id.vp_tab_detail)
        private TopNewsViewPaper mViewPaper;
    
        /** * 请求的URL地址 */
        private String mUrl;
    
        /** * 保存头条新闻图片的集合 */
        private ArrayList<NewsTab.TopNews> mTopNewsList;
    
        /** * TextView控件实例 */
        @ViewInject(R.id.tv_title2)
        private TextView tvTitle;
    
        @ViewInject(R.id.indicator2)
        private CirclePageIndicator mIndicator;
    
        public TabDetailPaper(Activity activity, NewsMenu.NewsTabData newsTabData) { 
            super(activity);
            this.newsTabData = newsTabData;
            mUrl = GlobalConstans.SERVER_URL + newsTabData.url;
        }
    
        @Override
        public View initViews() { 
            /* view = new TextView(mActivity); view.setTextSize(22); view.setTextColor(Color.RED); view.setGravity(Gravity.CENTER); // 居中显示 view.setText("页签"); */
            View view = View.inflate(mActivity,R.layout.paper_tab_detail,null);
            ViewUtils.inject(this,view);
            return view;
        }
    
        @Override
        public void initData() { 
            // view.setText(newsTabData.title); // 修改当前布局的数据
            String cache = CacheUtil.getCache(mActivity, mUrl);
            if (!TextUtils.isEmpty(cache)){ 
                // 有缓存
                processData(cache);
            }
            getDataFromServer();
        }
    
        /** * 从服务器中获取数据 */
        private void getDataFromServer() { 
            HttpUtils utils = new HttpUtils();
            utils.send(HttpRequest.HttpMethod.GET, mUrl, new RequestCallBack<String>() { 
                @Override
                public void onSuccess(ResponseInfo<String> responseInfo) { 
                    String result = responseInfo.result;
                    processData(result);
                    CacheUtil.setCache(mActivity,mUrl,result);
                }
    
                @Override
                public void onFailure(HttpException e, String s) { 
                    e.printStackTrace();
                    Toast.makeText(mActivity,s,Toast.LENGTH_SHORT).show();
                }
            });
        }
    
        private void processData(String result) { 
            Gson gson = new Gson();
            NewsTab newsTab = gson.fromJson(result, NewsTab.class);
    
            // 初始化头条新闻数据
            mTopNewsList = newsTab.data.topnews;
            if (mTopNewsList != null){ 
                mViewPaper.setAdapter(new TopNewsAdapter());
                mIndicator.setViewPager(mViewPaper); // 将圆形指示器和viewpager绑定
                mIndicator.setSnap(true); // 快照展示方式
                mIndicator.onPageSelected(0); // 将圆点位置归零，保证圆点和页面同步
                mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
                    @Override
                    public void onPageScrolled(int i, float v, int i1) { 
    
                    }
    
                    @Override
                    public void onPageSelected(int i) { 
                        // 更新头条新闻的标题
                        tvTitle.setText(mTopNewsList.get(i).title);
                    }
    
                    @Override
                    public void onPageScrollStateChanged(int i) { 
    
                    }
                });
    
                // 初始化首页标题
                tvTitle.setText(mTopNewsList.get(0).title);
            }
        }
    
        class TopNewsAdapter extends PagerAdapter{ 
    
            /** * xUtils中的BitmapUtils工具类 */
            private BitmapUtils mBitmapUtils;
    
            public TopNewsAdapter() { 
               mBitmapUtils = new BitmapUtils(mActivity);
               // 设置加载中的默认图片
               mBitmapUtils.configDefaultLoadingImage(R.drawable.pic_item_list_default);
            }
    
            @Override
            public int getCount() { 
                return mTopNewsList.size();
            }
    
            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object o) { 
                return view == o;
            }
    
            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) { 
                ImageView view = new ImageView(mActivity);
                NewsTab.TopNews topNews = mTopNewsList.get(position);
                String topimage = topNews.topimage; // 图片的下载链接
    
                view.setScaleType(ImageView.ScaleType.FIT_XY); // 设置缩放模式：宽高匹配窗体
                /** * 1,根据url下载图片 * 2.将图片设置给ImageView * 3.将图片作成缓存 * 4.避免内存溢出 * 由于工程量巨大，这里使用xUtils中的BitmapUtils里的api来完成这四个逻辑 */
                mBitmapUtils.display(view,topimage);
    
                container.addView(view);
                return view;
            }
    
            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { 
                container.removeView((View) object);
            }
        }
    }

# 14.ImageView的CenterCrop属性 #

上面我们完成了图片的显示，这次需要实现新闻列表的编写。

1.  修改paper\_tab\_detail.xml，添加一个ListView组件，代码如下：

1.  修改TabDetailPaper，获取刚刚创建的ListView实例，并且写一个适配器内部类NewsAdapter绑定数据，代码如下：

package com.example.zhbj.base.impl;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.support.annotation.NonNull;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.text.TextUtils;
    import android.view.Gravity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.ListView;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import com.example.zhbj.R;
    import com.example.zhbj.base.BaseMenuDetailPaper;
    import com.example.zhbj.domain.NewsMenu;
    import com.example.zhbj.domain.NewsTab;
    import com.example.zhbj.global.GlobalConstans;
    import com.example.zhbj.util.CacheUtil;
    import com.example.zhbj.view.TopNewsViewPaper;
    import com.google.gson.Gson;
    import com.lidroid.xutils.BitmapUtils;
    import com.lidroid.xutils.HttpUtils;
    import com.lidroid.xutils.ViewUtils;
    import com.lidroid.xutils.exception.HttpException;
    import com.lidroid.xutils.http.ResponseInfo;
    import com.lidroid.xutils.http.callback.RequestCallBack;
    import com.lidroid.xutils.http.client.HttpRequest;
    import com.lidroid.xutils.view.annotation.ViewInject;
    import com.viewpagerindicator.CirclePageIndicator;
    
    import java.util.ArrayList;
    
    /**
     * 页签详情页，包含北京、中国、国际等页签
     * ViewPagerIndicator
     * 1.引入ViewPagerIndicator库
     * 2.解决v4冲突，用大的版本覆盖小的版本
     * 3.仿照sample中的程序进行拷贝SampleTabsDefault
     */
    public class TabDetailPaper extends BaseMenuDetailPaper {
    
        /**
         * 当前页签数据
         */
        private NewsMenu.NewsTabData newsTabData;
    
        /**
         * 文本框对象
         */
         // private TextView view;
    
        /**
         * ViewPager对象
         */
        @ViewInject(R.id.vp_tab_detail)
        private TopNewsViewPaper mViewPaper;
    
        /**
         * 请求的URL地址
         */
        private String mUrl;
    
        /**
         * 保存头条新闻图片的集合
         */
        private ArrayList<NewsTab.TopNews> mTopNewsList;
    
        /**
         * TextView控件实例
         */
        @ViewInject(R.id.tv_title2)
        private TextView tvTitle;
    
        /**
         * Indicator控件实例
         */
        @ViewInject(R.id.indicator2)
        private CirclePageIndicator mIndicator;
    
        /**
         * ListView控件实例
         */
        @ViewInject(R.id.lv_list)
        private ListView lvList;
    
        /**
         * 存储新闻列表的集合
         */
        private ArrayList<NewsTab.News> mNewsList;
    
        public TabDetailPaper(Activity activity, NewsMenu.NewsTabData newsTabData) {
            super(activity);
            this.newsTabData = newsTabData;
            mUrl = GlobalConstans.SERVER_URL + newsTabData.url;
        }
    
        @Override
        public View initViews() {
            /*
            view = new TextView(mActivity);
            view.setTextSize(22);
            view.setTextColor(Color.RED);
            view.setGravity(Gravity.CENTER); // 居中显示
            view.setText("页签");
             */
            View view = View.inflate(mActivity,R.layout.paper_tab_detail,null);
            ViewUtils.inject(this,view);
            return view;
        }
    
        @Override
        public void initData() {
            // view.setText(newsTabData.title); // 修改当前布局的数据
            String cache = CacheUtil.getCache(mActivity, mUrl);
            if (!TextUtils.isEmpty(cache)){
                // 有缓存
                processData(cache);
            }
            getDataFromServer();
        }
    
        /**
         * 从服务器中获取数据
         */
        private void getDataFromServer() {
            HttpUtils utils = new HttpUtils();
            utils.send(HttpRequest.HttpMethod.GET, mUrl, new RequestCallBack<String>() {
                @Override
                public void onSuccess(ResponseInfo<String> responseInfo) {
                    String result = responseInfo.result;
                    processData(result);
                    CacheUtil.setCache(mActivity,mUrl,result);
                }
    
                @Override
                public void onFailure(HttpException e, String s) {
                    e.printStackTrace();
                    Toast.makeText(mActivity,s,Toast.LENGTH_SHORT).show();
                }
            });
        }
    
        private void processData(String result) {
            Gson gson = new Gson();
            NewsTab newsTab = gson.fromJson(result, NewsTab.class);
    
            // 初始化头条新闻数据
            mTopNewsList = newsTab.data.topnews;
            if (mTopNewsList != null){
                mViewPaper.setAdapter(new TopNewsAdapter());
                mIndicator.setViewPager(mViewPaper); // 将圆形指示器和viewpager绑定
                mIndicator.setSnap(true); // 快照展示方式
                mIndicator.onPageSelected(0); // 将圆点位置归零，保证圆点和页面同步
                mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                    @Override
                    public void onPageScrolled(int i, float v, int i1) {
    
                    }
    
                    @Override
                    public void onPageSelected(int i) {
                        // 更新头条新闻的标题
                        tvTitle.setText(mTopNewsList.get(i).title);
                    }
    
                    @Override
                    public void onPageScrollStateChanged(int i) {
    
                    }
                });
    
                // 初始化首页标题
                tvTitle.setText(mTopNewsList.get(0).title);
            }
    
            /**
             * 初始化新闻列表数据
             */
            mNewsList = newsTab.data.news;
            if (mNewsList != null){
                lvList.setAdapter(new NewsAdapter());
            }
        }
    
        class TopNewsAdapter extends PagerAdapter{
    
            /**
             * xUtils中的BitmapUtils工具类
             */
            private BitmapUtils mBitmapUtils;
    
            public TopNewsAdapter() {
               mBitmapUtils = new BitmapUtils(mActivity);
               // 设置加载中的默认图片
               mBitmapUtils.configDefaultLoadingImage(R.drawable.pic_item_list_default);
            }
    
            @Override
            public int getCount() {
                return mTopNewsList.size();
            }
    
            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
                return view == o;
            }
    
            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                ImageView view = new ImageView(mActivity);
                NewsTab.TopNews topNews = mTopNewsList.get(position);
                String topimage = topNews.topimage; // 图片的下载链接
    
                view.setScaleType(ImageView.ScaleType.FIT_XY); // 设置缩放模式：宽高匹配窗体
                /**
                 * 1,根据url下载图片
                 * 2.将图片设置给ImageView
                 * 3.将图片作成缓存
                 * 4.避免内存溢出
                 * 由于工程量巨大，这里使用xUtils中的BitmapUtils里的api来完成这四个逻辑
                 */
                mBitmapUtils.display(view,topimage);
    
                container.addView(view);
                return view;
            }
    
            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView((View) object);
            }
        }
    
        /**
         * 新闻列表适配器
         */
        class NewsAdapter extends BaseAdapter{
    
            @Override
            public int getCount() {
                return mNewsList.size();
            }
    
            @Override
            public NewsTab.News getItem(int position) {
                return mNewsList.get(position);
            }
    
            @Override
            public long getItemId(int position) {
                return position;
            }
    
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                
                return null;
            }
        }
    }

1.  新建新闻列表中每条新闻的布局list\_item\_news.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:padding="5dp">
    
        <ImageView android:id="@+id/iv_icon" android:layout_width="100dp" android:layout_height="60dp" android:scaleType="fitXY" android:background="#a000" android:padding="1dp" android:layout_marginRight="5dp" android:src="@drawable/news_pic_default"/>
    
        <TextView android:id="@+id/tv_title3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/iv_icon" android:textColor="#000" android:textSize="16sp" android:maxLines="2" android:text="标题"/>
    
        <TextView android:id="@+id/tv_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/iv_icon" android:layout_alignLeft="@+id/tv_title3" android:textColor="#a000" android:text="时间"/>
    
    </RelativeLayout>

# 15.展示新闻列表 #

通过上一节我们完成了新闻列表的大致布局，这一节我们来实现新闻列表的展示

修改TabDetailPaper，添加ViewHolder，用于加载ListView中的数据，代码如下：

package com.example.zhbj.base.impl;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.support.annotation.NonNull;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.text.TextUtils;
    import android.view.Gravity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.ListView;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import com.example.zhbj.R;
    import com.example.zhbj.base.BaseMenuDetailPaper;
    import com.example.zhbj.domain.NewsMenu;
    import com.example.zhbj.domain.NewsTab;
    import com.example.zhbj.global.GlobalConstans;
    import com.example.zhbj.util.CacheUtil;
    import com.example.zhbj.view.TopNewsViewPaper;
    import com.google.gson.Gson;
    import com.lidroid.xutils.BitmapUtils;
    import com.lidroid.xutils.HttpUtils;
    import com.lidroid.xutils.ViewUtils;
    import com.lidroid.xutils.exception.HttpException;
    import com.lidroid.xutils.http.ResponseInfo;
    import com.lidroid.xutils.http.callback.RequestCallBack;
    import com.lidroid.xutils.http.client.HttpRequest;
    import com.lidroid.xutils.view.annotation.ViewInject;
    import com.viewpagerindicator.CirclePageIndicator;
    
    import java.util.ArrayList;
    
    /** * 页签详情页，包含北京、中国、国际等页签 * ViewPagerIndicator * 1.引入ViewPagerIndicator库 * 2.解决v4冲突，用大的版本覆盖小的版本 * 3.仿照sample中的程序进行拷贝SampleTabsDefault */
    public class TabDetailPaper extends BaseMenuDetailPaper { 
    
        /** * 当前页签数据 */
        private NewsMenu.NewsTabData newsTabData;
    
        /** * 文本框对象 */
         // private TextView view;
    
        /** * ViewPager对象 */
        @ViewInject(R.id.vp_tab_detail)
        private TopNewsViewPaper mViewPaper;
    
        /** * 请求的URL地址 */
        private String mUrl;
    
        /** * 保存头条新闻图片的集合 */
        private ArrayList<NewsTab.TopNews> mTopNewsList;
    
        /** * TextView控件实例 */
        @ViewInject(R.id.tv_title2)
        private TextView tvTitle;
    
        /** * Indicator控件实例 */
        @ViewInject(R.id.indicator2)
        private CirclePageIndicator mIndicator;
    
        /** * ListView控件实例 */
        @ViewInject(R.id.lv_list)
        private ListView lvList;
    
        /** * 存储新闻列表的集合 */
        private ArrayList<NewsTab.News> mNewsList;
    
        public TabDetailPaper(Activity activity, NewsMenu.NewsTabData newsTabData) { 
            super(activity);
            this.newsTabData = newsTabData;
            mUrl = GlobalConstans.SERVER_URL + newsTabData.url;
        }
    
        @Override
        public View initViews() { 
            /* view = new TextView(mActivity); view.setTextSize(22); view.setTextColor(Color.RED); view.setGravity(Gravity.CENTER); // 居中显示 view.setText("页签"); */
            View view = View.inflate(mActivity,R.layout.paper_tab_detail,null);
            ViewUtils.inject(this,view);
            return view;
        }
    
        @Override
        public void initData() { 
            // view.setText(newsTabData.title); // 修改当前布局的数据
            String cache = CacheUtil.getCache(mActivity, mUrl);
            if (!TextUtils.isEmpty(cache)){ 
                // 有缓存
                processData(cache);
            }
            getDataFromServer();
        }
    
        /** * 从服务器中获取数据 */
        private void getDataFromServer() { 
            HttpUtils utils = new HttpUtils();
            utils.send(HttpRequest.HttpMethod.GET, mUrl, new RequestCallBack<String>() { 
                @Override
                public void onSuccess(ResponseInfo<String> responseInfo) { 
                    String result = responseInfo.result;
                    processData(result);
                    CacheUtil.setCache(mActivity,mUrl,result);
                }
    
                @Override
                public void onFailure(HttpException e, String s) { 
                    e.printStackTrace();
                    Toast.makeText(mActivity,s,Toast.LENGTH_SHORT).show();
                }
            });
        }
    
        private void processData(String result) { 
            Gson gson = new Gson();
            NewsTab newsTab = gson.fromJson(result, NewsTab.class);
    
            // 初始化头条新闻数据
            mTopNewsList = newsTab.data.topnews;
            if (mTopNewsList != null){ 
                mViewPaper.setAdapter(new TopNewsAdapter());
                mIndicator.setViewPager(mViewPaper); // 将圆形指示器和viewpager绑定
                mIndicator.setSnap(true); // 快照展示方式
                mIndicator.onPageSelected(0); // 将圆点位置归零，保证圆点和页面同步
                mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
                    @Override
                    public void onPageScrolled(int i, float v, int i1) { 
    
                    }
    
                    @Override
                    public void onPageSelected(int i) { 
                        // 更新头条新闻的标题
                        tvTitle.setText(mTopNewsList.get(i).title);
                    }
    
                    @Override
                    public void onPageScrollStateChanged(int i) { 
    
                    }
                });
    
                // 初始化首页标题
                tvTitle.setText(mTopNewsList.get(0).title);
            }
    
            /** * 初始化新闻列表数据 */
            mNewsList = newsTab.data.news;
            if (mNewsList != null){ 
                lvList.setAdapter(new NewsAdapter());
            }
        }
    
        class TopNewsAdapter extends PagerAdapter{ 
    
            /** * xUtils中的BitmapUtils工具类 */
            private BitmapUtils mBitmapUtils;
    
            public TopNewsAdapter() { 
               mBitmapUtils = new BitmapUtils(mActivity);
               // 设置加载中的默认图片
               mBitmapUtils.configDefaultLoadingImage(R.drawable.pic_item_list_default);
            }
    
            @Override
            public int getCount() { 
                return mTopNewsList.size();
            }
    
            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object o) { 
                return view == o;
            }
    
            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) { 
                ImageView view = new ImageView(mActivity);
                NewsTab.TopNews topNews = mTopNewsList.get(position);
                String topimage = topNews.topimage; // 图片的下载链接
    
                view.setScaleType(ImageView.ScaleType.FIT_XY); // 设置缩放模式：宽高匹配窗体
                /** * 1,根据url下载图片 * 2.将图片设置给ImageView * 3.将图片作成缓存 * 4.避免内存溢出 * 由于工程量巨大，这里使用xUtils中的BitmapUtils里的api来完成这四个逻辑 */
                mBitmapUtils.display(view,topimage);
    
                container.addView(view);
                return view;
            }
    
            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { 
                container.removeView((View) object);
            }
        }
    
        /** * 新闻列表适配器 */
        class NewsAdapter extends BaseAdapter{ 
    
            /** * BitmapUtils工具类 */
            private BitmapUtils mBitmapUtils;
    
            public NewsAdapter() { 
                mBitmapUtils = new BitmapUtils(mActivity);
                mBitmapUtils.configDefaultLoadingImage(R.drawable.news_pic_default);
            }
    
            @Override
            public int getCount() { 
                return mNewsList.size();
            }
    
            @Override
            public NewsTab.News getItem(int position) { 
                return mNewsList.get(position);
            }
    
            @Override
            public long getItemId(int position) { 
                return position;
            }
    
            @Override
            public View getView(int position, View convertView, ViewGroup parent) { 
                ViewHolder holder;
                if (convertView == null){ 
                    convertView = View.inflate(mActivity,R.layout.list_item_news,null);
                    holder = new ViewHolder();
                    holder.ivIcon = (ImageView) convertView.findViewById(R.id.iv_icon);
                    holder.tvTitle = (TextView) convertView.findViewById(R.id.tv_title3);
                    holder.tvTime = (TextView) convertView.findViewById(R.id.tv_time);
    
                    convertView.setTag(holder);
                }else { 
                    holder = (ViewHolder) convertView.getTag();
                }
                NewsTab.News info = getItem(position);
                holder.tvTitle.setText(info.title);
                holder.tvTime.setText(info.pubdate);
                mBitmapUtils.display(holder.ivIcon,info.listimage);
                return convertView;
            }
        }
    
        static class ViewHolder{ 
            public ImageView ivIcon;
            public TextView tvTitle;
            public TextView tvTime;
        }
    
    }

# 16.给ListView添加头布局展示头条新闻 #

在上一节中我们添加了一个ListView，但是在实际使用时，我们发现ListView只能控制下部滑动，没有整体滑动，这里使用listView.addHeadView(View view)这个api来实现一下，这里我们来调整一下

1.  新建一个布局文件list\_item\_header.xml，将paper\_tab\_detail.xml中的图片轮播那块抽离出来，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="180dp">
    
        <com.example.zhbj.view.TopNewsViewPaper android:id="@+id/vp_tab_detail" android:layout_width="match_parent" android:layout_height="180dp"/>
    
        <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:padding="5dp" android:background="#9000">
    
            <TextView android:id="@+id/tv_title2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#fff" android:textSize="16sp"/>
    
            <com.viewpagerindicator.CirclePageIndicator android:id="@+id/indicator2" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:paddingLeft="5dp" android:paddingRight="5dp" app:radius="3dp" app:fillColor="#f00" app:pageColor="#cccccc" app:strokeWidth="0dp" />
        </RelativeLayout>
    </FrameLayout>

1.  修改paper\_tab\_detail，删除之前写的图片轮播部分，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
    
        
        <ListView android:id="@+id/lv_list" android:layout_width="match_parent" android:layout_height="0dp" android:cacheColorHint="@android:color/transparent" android:layout_weight="1"/>
    </LinearLayout>

1.  修改TabDetailPaper，修改initViews()方法，加载头布局，代码如下：

package com.example.zhbj.base.impl;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.support.annotation.NonNull;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.text.TextUtils;
    import android.view.Gravity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.ListView;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import com.example.zhbj.R;
    import com.example.zhbj.base.BaseMenuDetailPaper;
    import com.example.zhbj.domain.NewsMenu;
    import com.example.zhbj.domain.NewsTab;
    import com.example.zhbj.global.GlobalConstans;
    import com.example.zhbj.util.CacheUtil;
    import com.example.zhbj.view.TopNewsViewPaper;
    import com.google.gson.Gson;
    import com.lidroid.xutils.BitmapUtils;
    import com.lidroid.xutils.HttpUtils;
    import com.lidroid.xutils.ViewUtils;
    import com.lidroid.xutils.exception.HttpException;
    import com.lidroid.xutils.http.ResponseInfo;
    import com.lidroid.xutils.http.callback.RequestCallBack;
    import com.lidroid.xutils.http.client.HttpRequest;
    import com.lidroid.xutils.view.annotation.ViewInject;
    import com.viewpagerindicator.CirclePageIndicator;
    
    import java.util.ArrayList;
    
    /** * 页签详情页，包含北京、中国、国际等页签 * ViewPagerIndicator * 1.引入ViewPagerIndicator库 * 2.解决v4冲突，用大的版本覆盖小的版本 * 3.仿照sample中的程序进行拷贝SampleTabsDefault */
    public class TabDetailPaper extends BaseMenuDetailPaper { 
    
        /** * 当前页签数据 */
        private NewsMenu.NewsTabData newsTabData;
    
        /** * 文本框对象 */
         // private TextView view;
    
        /** * ViewPager对象 */
        @ViewInject(R.id.vp_tab_detail)
        private TopNewsViewPaper mViewPaper;
    
        /** * 请求的URL地址 */
        private String mUrl;
    
        /** * 保存头条新闻图片的集合 */
        private ArrayList<NewsTab.TopNews> mTopNewsList;
    
        /** * TextView控件实例 */
        @ViewInject(R.id.tv_title2)
        private TextView tvTitle;
    
        /** * Indicator控件实例 */
        @ViewInject(R.id.indicator2)
        private CirclePageIndicator mIndicator;
    
        /** * ListView控件实例 */
        @ViewInject(R.id.lv_list)
        private ListView lvList;
    
        /** * 存储新闻列表的集合 */
        private ArrayList<NewsTab.News> mNewsList;
    
        public TabDetailPaper(Activity activity, NewsMenu.NewsTabData newsTabData) { 
            super(activity);
            this.newsTabData = newsTabData;
            mUrl = GlobalConstans.SERVER_URL + newsTabData.url;
        }
    
        @Override
        public View initViews() { 
            /* view = new TextView(mActivity); view.setTextSize(22); view.setTextColor(Color.RED); view.setGravity(Gravity.CENTER); // 居中显示 view.setText("页签"); */
            View view = View.inflate(mActivity,R.layout.paper_tab_detail,null);
    
            // 加载头条新闻的头布局
            View headerView = View.inflate(mActivity,R.layout.list_item_header,null);
            ViewUtils.inject(this,view);
            ViewUtils.inject(this,headerView);
            lvList.addHeaderView(headerView); // 给ListView添加头布局
            return view;
        }
    
        @Override
        public void initData() { 
            // view.setText(newsTabData.title); // 修改当前布局的数据
            String cache = CacheUtil.getCache(mActivity, mUrl);
            if (!TextUtils.isEmpty(cache)){ 
                // 有缓存
                processData(cache);
            }
            getDataFromServer();
        }
    
        /** * 从服务器中获取数据 */
        private void getDataFromServer() { 
            HttpUtils utils = new HttpUtils();
            utils.send(HttpRequest.HttpMethod.GET, mUrl, new RequestCallBack<String>() { 
                @Override
                public void onSuccess(ResponseInfo<String> responseInfo) { 
                    String result = responseInfo.result;
                    processData(result);
                    CacheUtil.setCache(mActivity,mUrl,result);
                }
    
                @Override
                public void onFailure(HttpException e, String s) { 
                    e.printStackTrace();
                    Toast.makeText(mActivity,s,Toast.LENGTH_SHORT).show();
                }
            });
        }
    
        private void processData(String result) { 
            Gson gson = new Gson();
            NewsTab newsTab = gson.fromJson(result, NewsTab.class);
    
            // 初始化头条新闻数据
            mTopNewsList = newsTab.data.topnews;
            if (mTopNewsList != null){ 
                mViewPaper.setAdapter(new TopNewsAdapter());
                mIndicator.setViewPager(mViewPaper); // 将圆形指示器和viewpager绑定
                mIndicator.setSnap(true); // 快照展示方式
                mIndicator.onPageSelected(0); // 将圆点位置归零，保证圆点和页面同步
                mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
                    @Override
                    public void onPageScrolled(int i, float v, int i1) { 
    
                    }
    
                    @Override
                    public void onPageSelected(int i) { 
                        // 更新头条新闻的标题
                        tvTitle.setText(mTopNewsList.get(i).title);
                    }
    
                    @Override
                    public void onPageScrollStateChanged(int i) { 
    
                    }
                });
    
                // 初始化首页标题
                tvTitle.setText(mTopNewsList.get(0).title);
            }
    
            /** * 初始化新闻列表数据 */
            mNewsList = newsTab.data.news;
            if (mNewsList != null){ 
                lvList.setAdapter(new NewsAdapter());
            }
        }
    
        class TopNewsAdapter extends PagerAdapter{ 
    
            /** * xUtils中的BitmapUtils工具类 */
            private BitmapUtils mBitmapUtils;
    
            public TopNewsAdapter() { 
               mBitmapUtils = new BitmapUtils(mActivity);
               // 设置加载中的默认图片
               mBitmapUtils.configDefaultLoadingImage(R.drawable.pic_item_list_default);
            }
    
            @Override
            public int getCount() { 
                return mTopNewsList.size();
            }
    
            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object o) { 
                return view == o;
            }
    
            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) { 
                ImageView view = new ImageView(mActivity);
                NewsTab.TopNews topNews = mTopNewsList.get(position);
                String topimage = topNews.topimage; // 图片的下载链接
    
                view.setScaleType(ImageView.ScaleType.FIT_XY); // 设置缩放模式：宽高匹配窗体
                /** * 1,根据url下载图片 * 2.将图片设置给ImageView * 3.将图片作成缓存 * 4.避免内存溢出 * 由于工程量巨大，这里使用xUtils中的BitmapUtils里的api来完成这四个逻辑 */
                mBitmapUtils.display(view,topimage);
    
                container.addView(view);
                return view;
            }
    
            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { 
                container.removeView((View) object);
            }
        }
    
        /** * 新闻列表适配器 */
        class NewsAdapter extends BaseAdapter{ 
    
            /** * BitmapUtils工具类 */
            private BitmapUtils mBitmapUtils;
    
            public NewsAdapter() { 
                mBitmapUtils = new BitmapUtils(mActivity);
                mBitmapUtils.configDefaultLoadingImage(R.drawable.news_pic_default);
            }
    
            @Override
            public int getCount() { 
                return mNewsList.size();
            }
    
            @Override
            public NewsTab.News getItem(int position) { 
                return mNewsList.get(position);
            }
    
            @Override
            public long getItemId(int position) { 
                return position;
            }
    
            @Override
            public View getView(int position, View convertView, ViewGroup parent) { 
                ViewHolder holder;
                if (convertView == null){ 
                    convertView = View.inflate(mActivity,R.layout.list_item_news,null);
                    holder = new ViewHolder();
                    holder.ivIcon = (ImageView) convertView.findViewById(R.id.iv_icon);
                    holder.tvTitle = (TextView) convertView.findViewById(R.id.tv_title3);
                    holder.tvTime = (TextView) convertView.findViewById(R.id.tv_time);
    
                    convertView.setTag(holder);
                }else { 
                    holder = (ViewHolder) convertView.getTag();
                }
                NewsTab.News info = getItem(position);
                holder.tvTitle.setText(info.title);
                holder.tvTime.setText(info.pubdate);
                mBitmapUtils.display(holder.ivIcon,info.listimage);
                return convertView;
            }
        }
    
        static class ViewHolder{ 
            public ImageView ivIcon;
            public TextView tvTitle;
            public TextView tvTime;
        }
    
    }

# 18.自定义下拉刷新 & 隐藏头布局 #

现在我们将ListView配置好了，接下来就需要实现下拉刷新数据以及隐藏头布局的效果

1.  新建一个下拉刷新的布局pull\_to\_refresh\_header.xml，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">
    
        <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp">
    
            <ImageView android:id="@+id/iv_arrow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/common_listview_headview_red_arrow"/>
    
            <ProgressBar android:id="@+id/pb_loading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"/>
        </FrameLayout>
    
        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:layout_gravity="center" android:orientation="vertical">
    
            <TextView android:id="@+id/tv_state" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="下拉刷新" android:textColor="#f00" android:textSize="18sp"/>
    
            <TextView android:id="@+id/tv_time2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="刷新时间" android:layout_marginTop="5dp" android:textColor="#a000" android:textSize="16sp"/>
        </LinearLayout>
    
    
    </LinearLayout>

1.  为了在ListView上显示这个刷新效果，在view包下新建一个类RefreshListView，用于封装这些效果，代码如下：

1.  修改paper\_tab\_detail.xml，修改组件属性，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
    
        
        <com.example.zhbj.view.RefreshListView android:id="@+id/lv_list" android:layout_width="match_parent" android:layout_height="0dp" android:cacheColorHint="@android:color/transparent" android:layout_weight="1"/>
    </LinearLayout>

1.  修改TabDetailPaper，同步之前定义好的组件，代码如下：

/** * ListView控件实例 */
        @ViewInject(R.id.lv_list)
        private RefreshListView lvList;

1.  修改RefreshListView，修改initHeaderView()方法，添加隐藏加载条的逻辑，代码如下：

package com.example.zhbj.view;
    
    import android.content.Context;
    import android.util.AttributeSet;
    import android.view.View;
    import android.widget.ListView;
    
    import com.example.zhbj.R;
    
    /** * 下拉刷新ListView */
    public class RefreshListView extends ListView { 
    
        /** * 当前布局的高度 */
        private int mMeasuredHeight;
    
        /** * HeadView对象 */
        private View mHeadView;
    
        public RefreshListView(Context context) { 
            this(context, null);
        }
    
        public RefreshListView(Context context, AttributeSet attrs) { 
            this(context, attrs, -1);
        }
    
        public RefreshListView(Context context, AttributeSet attrs, int defStyleAttr) { 
            super(context, attrs, defStyleAttr);
            initHeaderView();
        }
    
        /** * 初始化头布局 */
        private void initHeaderView(){ 
            mHeadView = View.inflate(getContext(),R.layout.pull_to_refresh_header,null);
            addHeaderView(mHeadView); // 给ListView添加头布局
    
            /* 隐藏头布局 1.获取当前头布局高度 2.设置负paddingTop，布局就会向上走 */
            // int height = mHeadView.getHeight(); 不能这样获取宽高，因为没有绘制完毕
            mHeadView.measure(0,0); // 手动测量，宽高传0表示不参与具体宽高的设定，全由系统底层决定
            mMeasuredHeight = mHeadView.getMeasuredHeight(); // 获取测量后的高度
            mHeadView.setPadding(0,-mMeasuredHeight,0,0);
        }
    }

# 19.自定义圆环进度条 #

现在进度条的逻辑已经实现完毕，为了进一步的美化，这里我们想要自定义一个圆环形的进度条

1.  在drawable目录下新建shape\_custom\_progress.xml的shape文件，作为自定义的圆环进度条文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%">
        <shape android:shape="ring" android:useLevel="false" android:innerRadius="16dp" android:thickness="3dp">
    
            <gradient android:startColor="#fff" android:centerColor="#5f00" android:endColor="#f00" />
        </shape>
    </rotate>

1.  修改pull\_to\_refresh\_head.xml，使用indeterminateDrawable属性应用刚才创建好的shape文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">
    
        <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp">
    
            <ImageView android:id="@+id/iv_arrow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/common_listview_headview_red_arrow"/>
    
            <ProgressBar android:id="@+id/pb_loading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:indeterminateDrawable="@drawable/shape_custom_progress" android:layout_gravity="center"/>
        </FrameLayout>
    
        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:layout_gravity="center" android:orientation="vertical">
    
            <TextView android:id="@+id/tv_state" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="下拉刷新" android:textColor="#f00" android:textSize="18sp"/>
    
            <TextView android:id="@+id/tv_time2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="刷新时间" android:layout_marginTop="5dp" android:textColor="#a000" android:textSize="16sp"/>
        </LinearLayout>
    
    
    </LinearLayout>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200126142536812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200126142605764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUxNjU5,size_16,color_FFFFFF,t_70