ViewPager和Fragment结合使用实现新闻类app框架（二）

ViewPager和Fragment结合使用实现新闻类app框架（二）

注：本文是在上一篇博客的基础上继续完善之前的ViewPager和Fragment结合使用实现新闻类app框架（一）

首先来看一下今天实现的效果：

package zhangtao.wind.viewpager;

import android.app.Activity;
import android.app.Fragment;
import android.content.Context;
import android.content.pm.ActivityInfo;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.MainThread;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import Listener.MyOnPageChangedListener;
import MyView.MyFragment;
import MyView.MyLinearLayout;

public class MainActivity extends FragmentActivity {

    private ViewPager viewPager;
    private MyLinearLayout mly;
    private MyOnPageChangedListener onPageChangedListener;


    //自定义ViewPager的标题;
    private ArrayList <String>list = new ArrayList<String>();
    private String[]a =new String[]{"第一页","第二页","第三页","第四页","第五页","第六页","第七页","第八页","第九页","第十页"};
    private List<MyFragment> fragmentList = new ArrayList<MyFragment>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        init();
    }

    private void init() {
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        mly = (MyLinearLayout) findViewById(R.id.myLinearLayout);
        onPageChangedListener=new MyOnPageChangedListener(mly);
        initList();
        getFragmentList();
        getTabTitleList();
        viewPager.setAdapter(adapter);
        viewPager.setOnPageChangeListener(onPageChangedListener);

//为自定义View绑定监听事件
        setonLinerTitleClickListener(mly);
    }

    private void initList(){
        for(int i=0;i<a.length;i++){
            list.add(a[i]);
        }
    }
    private void getTabTitleList() {
        mly.createTextView( list);
    }

    private void getFragmentList() {
        for (int i = 0; i < list.size(); i++) {
            fragmentList.add(MyFragment.getnewInstance((String) list.get(i)));
        }
    }

    //ViewPager的适配器
    private FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public android.support.v4.app.Fragment getItem(int position) {

            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }
    };

    private int currentPosition;

//为自定义中的TextView绑定监听事件
    private void setonLinerTitleClickListener(final MyLinearLayout ly){
            for( int i=0;i<ly.getChildCount();i++){
                currentPosition=i;
              final TextView tv= (TextView) ly.getChildAt(currentPosition);
                tv.setOnClickListener(new View.OnClickListener() {

                    @Override
                    public void onClick(View view) {
                        Log.d("onclick", currentPosition + "");
                 
                        viewPager.setCurrentItem(ly.a.get(tv));
                    }
                });

            }

    }

}

//该类为我们的标题栏的自定义View
public class MyLinearLayout extends LinearLayout {

    public MyLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        //自定义属性:
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyLinearLayout);
        title_visible_count = array.getInteger(R.styleable.MyLinearLayout_linear_my_view_count, 0);
        //获取屏幕的宽和高
        screenInfo = new GetScreenInfo(context);
        getHeight = screenInfo.getScreenHeight();
        getWidth = screenInfo.getScreenWidth();
        initPaintAndLine();
    }

    private GetScreenInfo screenInfo;
    private float layoutWidth, layoutHeight;
    public static int title_visible_count;

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      /*  重写onMeasure()方法是为了能适配不同大小的机型，如果我们不重写该方法，在4.0英寸的手机上和5.5英
      寸的手机上都使用同一个height，那给用户的感觉肯定是不舒服的，所以我们能通过该方法实现一点简单的适配
      功能，当然如果你刚开始学习自定义View，那你可以不用重写该方法，直接在xml中的height值写成固定值就可以了。
     */
        Log.d("zt", "onmeasure");
        int getWidthpx, widthMode, getHeightpx, heightMode;
        getWidthpx = MeasureSpec.getSize(widthMeasureSpec);
        widthMode = MeasureSpec.getMode(widthMeasureSpec);
        getHeightpx = MeasureSpec.getSize(heightMeasureSpec);
        heightMode = MeasureSpec.getMode(heightMeasureSpec);

       /* 该出Mode一共有3中，EXACTLY，AT_MOST,UNSPECIFIED;其中当我们在xml中设置了width或者height为match_parent或者某个
        固定值时，那么这个Mode就是EXACTLY，如果设置成wrap_content的话，那么这个Mode就是AT_MOST, UNSPECIFIED是什么我也不太清楚，
        如果你用过这个值，可以告诉留言告诉我啊！哈哈！*/
        if (widthMode == MeasureSpec.EXACTLY) {
            //当xml中width被设置成了固定的值或者设置成match_parent那么我们就直接用这个值
            layoutWidth = getWidthpx;
        } else {
            //否则我们就使用getScreenSize()方法中获得的屏幕的宽度。
            layoutWidth = getWidth;
        }
        if (heightMode == MeasureSpec.EXACTLY) {
            layoutHeight = getHeightpx;
        } else {
            //如果xml中没有定义高度，那么我们就让标题栏占屏幕的1/14，这样大概差不多比较合适，当然，你可以自己改变这个值。
            layoutHeight = getHeight / 15;
        }
        setMeasuredDimension((int) layoutWidth, (int) layoutHeight);
    }


    private float getHeight, getWidth;
<span style="white-space:pre">	</span>//建立一个集合，用来为每个TextView指定一个int值，用来在点击事件中调用，获得当前的position；
    public Map<TextView,Integer> a=new HashMap<TextView,Integer>();
    private int textViewPosition;
    private TextView getTextView(String name) {
        //因为在新闻的标题栏里，有很多很多标题，可能多达20个，我们不可能在布局文件里一直添加吧，所以就直接动态生成TextView.
        TextView tv = new TextView(getContext());
        Log.d("zt", "getTextView");
        a.put(tv,textViewPosition++);
        LinearLayout.LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        //根据自定义属性中的控制显示title数量的值，来动态改变width的值，使得显示的数量和定义的相符合。
        lp.width = (int) (getWidth / title_visible_count);
        lp.gravity = Gravity.CENTER;
        tv.setText(name + "");
        tv.setGravity(Gravity.CENTER);
        tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 15);
        tv.setTextColor(Color.GRAY);
        tv.setLayoutParams(lp);
        return tv;
    }

    private int count;

    //该自定义View中暴露出来的方法，让外界调用
    public void createTextView(ArrayList list) {
        if (list != null && list.size() > 0) {
            this.removeAllViews();
            count = list.size();
            for (int i = 0; i < list.size(); i++) {
                MyLinearLayout.this.addView(getTextView(list.get(i) + ""));
            }
        }
    }

    //10.2
    private Paint paint;
    private float mLineWidth;
    private float lineEndX;
    private float lineStartX;
    private int currentPositon;
    private void initPaintAndLine() {
        paint = new Paint();
        paint.setStrokeWidth(4);
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        //  mLineWidth=  (getWidth/title_visible_count*2/3);
        mLineWidth = getWidth / (title_visible_count * 2);
        lineEndX = (int) (mLineWidth + mLineWidth);
        lineStartX = (getWidth / title_visible_count - mLineWidth) / 2.0f;
    }

    private MyLinearChangedListener myLinearChangeListener;

    public void setOnMyLiChangListener(MyLinearChangedListener my) {
        myLinearChangeListener = my;
    }

  

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawLine(lineStartX, getMeasuredHeight(), lineEndX, getMeasuredHeight(), paint);
        Log.d("zt", "onDraw");
    }

    private float titleWidth;
    //暴露该方法让外界调用，来动态改变标题底部的红色的线，以及标题的颜色
    public void lineScroll(int position, float offset) {

        titleWidth = getWidth / title_visible_count;

   <span style="white-space:pre">	</span>//通过这个判断，实现底端红线的动画效果。
        if ((offset * getWidth) < (getWidth / 2)) {
            lineEndX = mLineWidth + titleWidth * offset * 2.0f + titleWidth * position + titleWidth * 1.0f / 4.0f;
        } else {
            lineStartX = lineEndX - (1.0f - offset) * 2.0f * titleWidth - mLineWidth;
        }
        Log.d("hehe", lineEndX - lineStartX + "");
        setTitleBackGround(position);
        invalidate();
        linearScroll(position, offset);
    }
    //实现自定义View的滚动，通过这个判断控制在什么位置开始滚动，什么位置停止滚动

    private void linearScroll(int position,float offset){
        currentPositon=position;
        float titleWidth=getWidth/title_visible_count;
        if(position>=(title_visible_count/2)&&offset>0&&getChildCount()>title_visible_count&&position<=5){
                this.scrollTo((int) ((position-(title_visible_count-4))*titleWidth+(titleWidth*offset)),0);
        }
    }
//设置标题的字体颜色。
    private void setTitleBackGround(int position) {
      for(int i=0;i<getChildCount();i++){
          TextView tv= (TextView) getChildAt(i);
          tv.setTextColor(Color.GRAY);
      }
        TextView view= (TextView) getChildAt(position);
        view.setTextColor(Color.RED);
    }


}

怎么样？在昨天简陋的基础上，今天完善了不少，但是如果你真正按这样写，然后进行实际操作，你会发现有些显示与预期的有很大的差别，如以下：

1：在滑动界面时，底端的红线可能出现长短变化，在点击标题实现跳转时，更加明显，容易出现长短的误差更加明显，但是目前我还不知道怎么解决，等我知道了我会继续更新，

PS：如同上面我的描述，如果你知道原因，希望能教教我，告诉我是什么原因了啊，共同进步嘛！

下面我会继续更新该博客哦！请等待！