1) ViewPager提供了左右滑动切换页面的方法,但是它所提供的标题只是无语,估计没有真正的项目会照搬拿过来;并且它只能一页一页滑,我想直接查看最后一页要滑半天;
2) 看了腾讯新闻客户端感觉体验很好,所以就仿着写了,因为只是做个demo供大家交流也是给自己做个笔记,所以功能实现就行demo比较简单;
3) 有兴趣的可以在demo的基础拓展,如果哪里写得不好还望大家多多赐教、一起交流
4) 直接上主要代码,所以注释都写在代码里,最后会给工程包。(PS是在AS环境下生成的)
先放个效果图:
MainActivity.java
package qi.demo; import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView; import java.util.ArrayList; import qi.demo.adapter.MyViewPagerAdapter; public class MainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener{ private MainActivity mActivity;
private ViewPager viewPager;
private HorizontalScrollView scrollView;
private LinearLayout titleLayout;
private ArrayList<Integer> moveToList; //viewPager滑动时标题栏跟随滑动距离
private int mTitleMargin; //每个标题间的间隔 private ArrayList<Fragment> fragmentsList; //viewPager加载类
private ArrayList<TextView> textViewList; //标题控件集合
private ArrayList<String> titleList; //标题文字集合
private TestFragment fragment;
private MyViewPagerAdapter mAdapter; private int currentPos; //现在显示的是第几页
private String[] strList = new String[]{"物业服务", "教育", "医疗卫生", "劳动保障", "交通出行", "投资服务", "关于左邻右里"};
private int[] idList = new int[]{, , , , , , }; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mActivity = this;
mTitleMargin = dip2px(this, );
initView();
initData();
} private void initView(){
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setOnPageChangeListener(mActivity);
scrollView = (HorizontalScrollView) findViewById(R.id.scrollView);
titleLayout = (LinearLayout) findViewById(R.id.titleLayout);
} /**
* 1）初始化viewPager
* 2）设置默认的Fragment
*/
private void initData(){
fragmentsList = new ArrayList<>();
titleList = new ArrayList<>();
textViewList = new ArrayList<>();
moveToList = new ArrayList<>();
mAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
for(int i=; i<strList.length; i++){
titleList.add(strList[i]);
fragment = new TestFragment(mActivity, idList[i]);
fragmentsList.add(fragment);
addTitleLayout(titleList.get(i), idList[i]);
}
mAdapter.setData(fragmentsList);
viewPager.setAdapter(mAdapter);
viewPager.setOffscreenPageLimit();
textViewList.get().setTextColor(Color.rgb(, , ));
currentPos = ;
} /**
* 添加标题栏
* @param title 标题名称
* @param position 标题索引
*/
private void addTitleLayout(String title, int position){
final TextView textView = (TextView) getLayoutInflater().inflate(R.layout.title, null);
textView.setText(title);
textView.setTag(position);
textView.setOnClickListener(new posOnClickListener());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.leftMargin = dip2px(mActivity, mTitleMargin);
params.rightMargin = dip2px(mActivity, mTitleMargin);
titleLayout.addView(textView, params);
textViewList.add(textView);
int width;
//如果是第一个标题则不设滑动距离
if(position==){
width = ;
moveToList.add(width);
}
//第N个标题的滑动距离是上一个标题的宽度加上标题之间的间隔,这样的话滑动viewPager的时候保证当前标题栏在最左侧
else{
int w = View.MeasureSpec.makeMeasureSpec(, View.MeasureSpec.UNSPECIFIED);
int h = View.MeasureSpec.makeMeasureSpec(, View.MeasureSpec.UNSPECIFIED);
textViewList.get(position-).measure(w, h);
width = textViewList.get(position-).getMeasuredWidth() + mTitleMargin*;
moveToList.add(width+moveToList.get(moveToList.size()-));
}
} @Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } /**
* 滑动viewPager
*/
@Override
public void onPageSelected(int position) {
textViewList.get(currentPos).setTextColor(Color.rgb(, , )); //将之前的标题栏颜色变回来
textViewList.get(position).setTextColor(Color.rgb(, , )); //将当前标题栏变色
currentPos = position; //设置当前索引
scrollView.scrollTo((int) moveToList.get(position), ); //标题栏跟随viewPager滑动
} @Override
public void onPageScrollStateChanged(int state) { } /**
* 点击标题栏
*/
class posOnClickListener implements View.OnClickListener{
@Override
public void onClick(View view) {
//点击的是当前标题什么都不做
if((int)view.getTag()==currentPos){
return;
}
//标题栏变色且设置viewPager
textViewList.get(currentPos).setTextColor(Color.rgb(, , ));
currentPos = (int) view.getTag();
textViewList.get(currentPos).setTextColor(Color.rgb(, , ));
viewPager.setCurrentItem(currentPos);
}
} /**
* 根据手机的分辨率从 dp 的单位 转成为 px(像素)
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
} }
MyViewPagerAdapter.java
public class MyViewPagerAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> fragmentList;
public MyViewPagerAdapter(FragmentManager fm) {
super(fm);
}
public void setData(ArrayList<Fragment> fragmentList){
this.fragmentList = fragmentList;
}
@Override
public Fragment getItem(int arg0) {
return fragmentList.get(arg0);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
activity_main.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"> <HorizontalScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="60dp"
android:scrollbars="none"
android:background="#FFFFFF">
<LinearLayout
android:id="@+id/titleLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal"/>
</HorizontalScrollView> <android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTabStrip
android:id="@+id/pagerTabStrip"
android:layout_width="0dp"
android:layout_height="0dp"/>
</android.support.v4.view.ViewPager> </LinearLayout>