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：如同上面我的描述，如果你知道原因，希望能教教我，告诉我是什么原因了啊![大笑]()
，共同进步嘛！
，共同进步嘛！下面我会继续更新该博客哦！请等待！
作者：zhangtao19931104 发表于2016/10/3 16:13:50 原文链接
阅读：116 评论：0 查看评论