智慧北京开发第三天（上）
ViewPagerIndicator的使用
ViewPager指针项目，在使用ViewPager的时候能够指示ViewPager所在的位置，就像Google Play中切换的效果一样，还能使用在应用初始化的介绍页面。
运行效果：
导入开源项目Android-ViewPagerIndicator-master中的第三方库文件library，并运行它的demo文件，熟悉它所实现的功能，参考demo，将所需要的功能整合到自己的项目中去。将开源项目的第三方库文件library导入工作区间中。
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="@+id/ib_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:background="@android:color/transparent"
android:src="@drawable/news_cate_arr" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_menu_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>NewsMenuDetailPager.java
package com.xbmu.wisdombj.base.menudetail;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.event.OnClick;
import com.viewpagerindicator.TabPageIndicator;
import com.xbmu.wisdombj.R;
import com.xbmu.wisdombj.base.BaseNewsDetailPager;
import com.xbmu.wisdombj.base.TabDetailPager;
import com.xbmu.wisdombj.bean.NewsData;
import java.util.ArrayList;
import java.util.List;
/**
* 新闻页面-详情
* Created by Administrator on 2016/2/6 0006.
*/
public class NewsMenuDetailPager extends BaseNewsDetailPager {
private ArrayList<NewsData.NewsTabData> mTabDatas;
private ViewPager vpMenuDetail;
private List<TabDetailPager> tabDetailPagersList = new ArrayList<>();
private TabPageIndicator tabPageIndicator;//tab页签指针符对象
public NewsMenuDetailPager(Activity mActiviy, ArrayList<NewsData.NewsTabData> newsTabDatas) {
super(mActiviy);
this.mTabDatas = newsTabDatas;
}
@Override
public View initView() {
View view = View.inflate(mActivity, R.layout.news_menu_detail, null);
vpMenuDetail = (ViewPager) view.findViewById(R.id.vp_menu_detail);
tabPageIndicator = (TabPageIndicator) view.findViewById(R.id.indicator);
ViewUtils.inject(this,view);
return view;
}
@Override
public void initData() {
super.initData();
System.out.println("子标签页的个数:" + mTabDatas.size());
for (int i = 0; i < mTabDatas.size(); i++) {
tabDetailPagersList.add(new TabDetailPager(mActivity, mTabDatas.get(i)));
}
vpMenuDetail.setAdapter(new NewsMenuDetailAdapter());
tabPageIndicator.setViewPager(vpMenuDetail);// 将viewpager和mIndicator关联起来,必须在viewpager设置完adapter后才能调用
}
/**
* 12个页签的向右的箭头的监听事件
* @param view
*/
@OnClick(R.id.ib_next)
public void tabIndicatorNext(View view) {
int currentItem = vpMenuDetail.getCurrentItem();
tabPageIndicator.setCurrentItem(++currentItem);
}
private class NewsMenuDetailAdapter extends PagerAdapter {
@Override
public CharSequence getPageTitle(int position) {
return mTabDatas.get(position).title;
}
@Override
public int getCount() {
return mTabDatas.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
TabDetailPager tabDetailPager = tabDetailPagersList.get(position);
container.addView(tabDetailPager.rootView);
tabDetailPager.initData();
return tabDetailPager.rootView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
ViewPagerIndicator样式修改
样式修改，参考demo
<activity
android:name=".MainActivity"
android:label="@string/title_activity_main"
android:theme="@style/Theme.PageIndicatorDefaults"></activity>修改样式中的图片，文字颜色等
vpi_styles.xml(在第三方库文件中)
<style name="Widget.TabPageIndicator" parent="Widget">
<item name="android:gravity">center</item>
<item name="android:background">@drawable/vpi__tab_indicator</item>
<item name="android:paddingLeft">22dip</item>
<item name="android:paddingRight">22dip</item>
<item name="android:paddingTop">12dp</item>
<item name="android:paddingBottom">12dp</item>
<item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">@drawable/vpi__tab_text_indicator</item>
<item name="android:maxLines">1</item>
</style>
滑动事件处理：
HorizontalViewPager.javapackage com.xbmu.wisdombj.view;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
/**
* 11个子页签水平滑动的ViewPager
* Created by Administrator on 2016/2/8 0008.
*/
public class HorizontalViewPager extends ViewPager {
public HorizontalViewPager(Context context) {
super(context);
}
public HorizontalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
/**
* 事件分发，请求父控件及其祖宗控件是否拦截事件
*
* @param ev
* @return
*/
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (getCurrentItem() == 0) {
//如果是第一个页面，需要显示侧边栏，请求负控件拦截
getParent().requestDisallowInterceptTouchEvent(false);//用getParent()去请求，拦截
} else {
getParent().requestDisallowInterceptTouchEvent(true);//用getParent()去请求，不拦截
}
return super.dispatchTouchEvent(ev);
}
}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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="@+id/ib_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:background="@android:color/transparent"
android:src="@drawable/news_cate_arr" />
</LinearLayout>
<com.xbmu.wisdombj.view.HorizontalViewPager
android:id="@+id/vp_menu_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>运行效果：
头条新闻展示&BitmapUtils
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="@+id/ib_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:background="@android:color/transparent"
android:src="@drawable/news_cate_arr" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_menu_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>NewsMenuDetailPager.java
package com.xbmu.wisdombj.base.menudetail;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.event.OnClick;
import com.viewpagerindicator.TabPageIndicator;
import com.xbmu.wisdombj.MainActivity;
import com.xbmu.wisdombj.R;
import com.xbmu.wisdombj.base.BaseNewsDetailPager;
import com.xbmu.wisdombj.base.TabDetailPager;
import com.xbmu.wisdombj.bean.NewsData;
import java.util.ArrayList;
import java.util.List;
/**
* 新闻页面-详情
* Created by Administrator on 2016/2/6 0006.
*/
public class NewsMenuDetailPager extends BaseNewsDetailPager implements ViewPager.OnPageChangeListener {
private ArrayList<NewsData.NewsTabData> mTabDatas;
private ViewPager vpMenuDetail;
private List<TabDetailPager> tabDetailPagersList = new ArrayList<>();
private TabPageIndicator tabPageIndicator;//tab页签指针符对象
public NewsMenuDetailPager(Activity mActiviy, ArrayList<NewsData.NewsTabData> newsTabDatas) {
super(mActiviy);
this.mTabDatas = newsTabDatas;
}
@Override
public View initView() {
View view = View.inflate(mActivity, R.layout.news_menu_detail, null);
vpMenuDetail = (ViewPager) view.findViewById(R.id.vp_menu_detail);
tabPageIndicator = (TabPageIndicator) view.findViewById(R.id.indicator);
ViewUtils.inject(this, view);
//注意：ViewPager和ViewPagerIndicator绑定时，滑动监听需要设置给ViewPagerIndicator，而不是ViewPager
// vpMenuDetail.addOnPageChangeListener(this);
tabPageIndicator.setOnPageChangeListener(this);
return view;
}
@Override
public void initData() {
super.initData();
System.out.println("子标签页的个数:" + mTabDatas.size());
for (int i = 0; i < mTabDatas.size(); i++) {
tabDetailPagersList.add(new TabDetailPager(mActivity, mTabDatas.get(i)));
}
vpMenuDetail.setAdapter(new NewsMenuDetailAdapter());
tabPageIndicator.setViewPager(vpMenuDetail);
}
/**
* 12个页签的向右的箭头的监听事件
* @param view
*/
@OnClick(R.id.ib_next)
public void tabIndicatorNext(View view) {
int currentItem = vpMenuDetail.getCurrentItem();
tabPageIndicator.setCurrentItem(++currentItem);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
MainActivity mainActivity = (MainActivity) mActivity;
SlidingMenu slidingMenu = mainActivity.getSlidingMenu();
if(position==0){
slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
}else{
slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
private class NewsMenuDetailAdapter extends PagerAdapter {
@Override
public CharSequence getPageTitle(int position) {
return mTabDatas.get(position).title;
}
@Override
public int getCount() {
return mTabDatas.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
TabDetailPager tabDetailPager = tabDetailPagersList.get(position);
container.addView(tabDetailPager.rootView);
tabDetailPager.initData();
return tabDetailPager.rootView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
tab_detail_pager.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.xbmu.wisdombj.view.NewTopViewPager
android:id="@+id/vp_tab_top"
android:layout_width="match_parent"
android:layout_height="160dp" />
<ListView
android:id="@+id/lv_tab_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</ListView>
</LinearLayout>TabDetailPager.java
package com.xbmu.wisdombj.base;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast;
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.HttpMethod;
import com.lidroid.xutils.view.annotation.ViewInject;
import com.xbmu.wisdombj.R;
import com.xbmu.wisdombj.bean.NewsData.NewsTabData;
import com.xbmu.wisdombj.bean.TabData;
import com.xbmu.wisdombj.global.GlobalVariables;
/**
* 页签详情页，表示每一个页签的对象
* Created by Administrator on 2016/2/7 0007.
*/
public class TabDetailPager extends BaseNewsDetailPager {
private NewsTabData mTabData;
@ViewInject(R.id.vp_tab_top)
private ViewPager vpTabPagerTop;
@ViewInject(R.id.lv_tab_list)
private ListView lvTabList;
private String mUrl;
private TabData tabData;
public TabDetailPager(Activity mActivity, NewsTabData newsTabDatas) {
super(mActivity);
this.mTabData = newsTabDatas;
mUrl = GlobalVariables.BASE_URL + newsTabDatas.url;
}
@Override
public View initView() {
View view = View.inflate(mActivity, R.layout.tab_detail_pager,null);
ViewUtils.inject(this,view);
return view;
}
@Override
public void initData() {
super.initData();
getDataFromServer();
}
/**
* 从服务器获取数据
*/
public void getDataFromServer() {
HttpUtils httpUtils = new HttpUtils();
httpUtils.send(HttpMethod.GET, mUrl, new RequestCallBack<String>() {
@Override
public void onSuccess(ResponseInfo<String> responseInfo) {
String result = responseInfo.result;
System.out.print("从网络获取的子页签详情数据:" + result);
//解析数据
paserData(result);
}
@Override
public void onFailure(HttpException e, String msg) {
Toast.makeText(mActivity, msg, Toast.LENGTH_SHORT).show();
e.printStackTrace();
}
});
}
/**
* 解析数据
* @param result
*/
private void paserData(String result) {
Gson gson = new Gson();
tabData = gson.fromJson(result, TabData.class);
vpTabPagerTop.setAdapter(new NewsTopAdapter());
}
/**
* 新闻头条适配器
*/
private class NewsTopAdapter extends PagerAdapter{
private BitmapUtils bitmapUtils;
public NewsTopAdapter() {
bitmapUtils = new BitmapUtils(mActivity);
bitmapUtils.configDefaultLoadingImage(R.drawable.topnews_item_default);//设置默认图片
}
@Override
public int getCount() {
return tabData.data.topnews.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(mActivity);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);//基于控件大小填充图片
TabData.TopNewsData topNewsData = tabData.data.topnews.get(position);
bitmapUtils.display(imageView,topNewsData.topimage);//传递imageView对象和图片地址
container.addView(imageView);
System.out.println("topNews：" + position);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
}
NewTopViewPager.java
package com.xbmu.wisdombj.view;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
/**
* Created by Administrator on 2016/2/9 0009.
*/
public class NewTopViewPager extends ViewPager {
private int startX;
private int startY;
private int endX;
private int endY;
public NewTopViewPager(Context context) {
super(context);
}
public NewTopViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
/**
* 事件分发，请求父控件及祖宗控件是否拦截事件：
* 1.右滑，而且是第一个页面，需要父控件拦截
* 2.左滑，而且是最后一个页面，需要父控件拦截
* 3.上下滑动，需要父控件拦截
* @param ev
* @return
*/
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
switch (ev.getAction()){
case MotionEvent.ACTION_DOWN:
getParent().requestDisallowInterceptTouchEvent(true);//不要拦截，这样是为了保证ACTION_MOVE调用
startX = (int) ev.getRawX();
startY = (int) ev.getRawY();
break;
case MotionEvent.ACTION_MOVE:
endX = (int) ev.getRawX();
endY = (int) ev.getRawY();
if(Math.abs(endX-startX) > Math.abs(endY-startY)){//左右滑动
if(endX > startX){
//右滑
if(getCurrentItem()==0){
//第一个页面，需要父控件拦截
getParent().requestDisallowInterceptTouchEvent(false);
}
}else{
//左滑
if(getCurrentItem() == getAdapter().getCount()-1){
//最后一个页面，需要拦截
getParent().requestDisallowInterceptTouchEvent(false);
}
}
}else{//上下滑动
getParent().requestDisallowInterceptTouchEvent(false);
}
break;
default:
break;
}
return super.dispatchTouchEvent(ev);
}
}
运行效果：