admin管理员组文章数量:1564184
运行效果
在编写代码之前,先看看最终运行效果:
代码编写
首先自定义一个控件,名叫ViewPagerIndicate,继承HorizontalScrollView,实现View.OnClickListener接口监听,代码如下:package com.example.viewpagerindicate.view;
import java.util.ArrayList;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.view.View.OnClickListener;
public class ViewPagerIndicate extends HorizontalScrollView implements OnClickListener {
private Context mContext;
private LayoutInflater mInflater;
private ViewPager mViewPager;
//onMeasure是否准备完成
private boolean isMeasureOk;
//是否可以绘制下划线
private boolean isDrawOK;
//HorizontalScrollView只能有1个子View(这里用线性布局)
private LinearLayout mWapper;
//标签
private ArrayList<TextView> mTextViews;
//标签正常颜色和高亮颜色
private int mTextNormalColor, mTextHighlightColor;
//总宽度
private int mTotalWidth;
//1个标签的宽和高
private int mTabWidth, mTabHeight;
private Paint mPaint;
//下划线的位置
private float mTranslateX;
public ViewPagerIndicate(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
mInflater = LayoutInflater.from(context);
mPaint = new Paint();
isMeasureOk = isDrawOK = false;
}
/**
* 重置下划线的粗细和颜色
* @param size 下划线粗细
* @param color 下划线颜色
*/
public void resetUnderline(int size, int color) {
mPaint.setStrokeWidth((int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, size, mContext.getResources().getDisplayMetrics()));
mPaint.setColor(color);
}
/**
* 重置标签的布局样式、标题和颜色
* @param tabId 布局样式id
* @param titles 标题集合
* @param colors 颜色集合
*/
public void resetText(int tabId, String[] titles, int[] colors) {
mTextNormalColor = colors[0];
mTextHighlightColor = colors[1];
mTextViews = new ArrayList<TextView>();
for (int i = 0; i < titles.length; i++) {
TextView tv = (TextView) mInflater.inflate(tabId, null);
tv.setText(titles[i]);
tv.setTag(i);
tv.setOnClickListener(this);
mTextViews.add(tv);
}
setTextHighlight(0);
}
/**
* 高亮对应位置的标签颜色
* @param pos 对应位置
*/
private void setTextHighlight(int pos) {
for (int i = 0; i < mTextViews.size(); i++) {
if (i == pos)
mTextViews.get(pos).setTextColor(mTextHighlightColor);
else
mTextViews.get(i).setTextColor(mTextNormalColor);
}
}
/**
* 之所以设置此方法,主要是用于网络获取数据,而不是使用静态文本;
* 当网络请求成功,手动调用该方法完成初始化
*/
public void setOk() {
isMeasureOk = true;
isDrawOK = true;
requestLayout();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//必须放在super.onMeasure的前面,否则后面无法获得子View的宽高
if (isMeasureOk) {
removeAllViews();
mWapper = new LinearLayout(mContext);
for (TextView tv : mTextViews) {
mWapper.addView(tv);
}
addView(mWapper);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (isMeasureOk) {
if (mTextViews.size() > 0) {
mTotalWidth = getMeasuredWidth();
TextView tv = (TextView) mWapper.getChildAt(0);
mTabWidth = tv.getMeasuredWidth();
mTabHeight = tv.getMeasuredHeight();
}
isMeasureOk = false;
}
}
/**
* 设置下划线的位置
* @param pos ViewPager对应的索引位置
* @param posOffset ViewPager滑动百分比
*/
private void drawUnderline(int pos, float posOffset) {
mTranslateX = pos * mTabWidth + posOffset * mTabWidth;
invalidate();
}
/**
* 设置下划线的位置
* @param pos ViewPager对应的索引位置
*/
private void drawUnderline(int pos) {
mTranslateX = pos * mTabWidth;
invalidate();
}
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (isDrawOK) {
//改变下划线的位置
canvas.translate(mTranslateX, 0);
//绘制下划线
canvas.drawLine(0, mTabHeight, mTabWidth, mTabHeight, mPaint);
}
}
/**
* 重置ViewPager
*/
public void resetViewPager(ViewPager viewPager) {
mViewPager = viewPager;
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
/*ViewPager某项被选中*/
@Override
public void onPageSelected(int position) {
//高亮该项文字
setTextHighlight(position);
}
/*ViewPager从某项滑动到另一项*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
drawUnderline(position, positionOffset);
//实现标签与下划线一起滚动的效果
scrollTo((int) ((position + positionOffset - 1) * mTabWidth), 0);
}
@Override
public void onPageScrollStateChanged(int arg0) {}
});
}
/**
* 标签点击事件监听
*/
@Override
public void onClick(View v) {
int pos = (Integer) v.getTag();
//让当前标签总是显示在第二个位置
smoothScrollTo((pos - 1) * mTabWidth, 0);
drawUnderline(pos);
mViewPager.setCurrentItem(pos, false);
}
}
MainActivity代码如下:
package com.example.viewpagerindicate;
import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
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.viewpagerindicate.view.ViewPagerIndicate;
public class MainActivity extends Activity {
private ViewPager mViewPager;
private ViewPagerIndicate mIndicate;
private int[] mTextColors = {0xFFA0A0A0, 0xFF000000};
private int mUnderlineColor = 0xFF168EFF;
private String[] mTitles = new String[] {
"要闻", "奥运", "视频", "娱乐", "体育", "NBA",
"财经", "汽车", "科技", "社会", "军事", "国际",
"时尚", "文化", "游戏", "图片", "数码", "星座",
"电影", "教育", "美容", "动漫", "理财", "民生"};
private ArrayList<TextView> mTextViews;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViewPgaer();
initViewPagerIndicate();
}
private void initViewPgaer() {
mTextViews = new ArrayList<TextView>();
for (int i = 0; i < mTitles.length; i++) {
TextView tv = new TextView(this);
tv.setGravity(Gravity.CENTER);
tv.setText(mTitles[i]);
mTextViews.add(tv);
}
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mViewPager.setAdapter(new PagerAdapter() {
@Override
public Object instantiateItem(ViewGroup container, int position) {
TextView tv = mTextViews.get(position);
container.addView(tv);
return tv;
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
container.removeView(mTextViews.get(position));
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public int getCount() {
return mTextViews.size();
}
});
}
private void initViewPagerIndicate() {
mIndicate = (ViewPagerIndicate) findViewById(R.id.indicate);
//设置标签样式、文本和颜色
mIndicate.resetText(R.layout.layout_text_indicate, mTitles, mTextColors);
//设置下划线粗细和颜色
mIndicate.resetUnderline(4, mUnderlineColor);
//设置ViewPager
mIndicate.resetViewPager(mViewPager);
//设置初始化完成
mIndicate.setOk();
}
}
编写布局
activity_main.xml代码如下:<LinearLayout xmlns:android="http://schemas.android/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<com.example.viewpagerindicate.view.ViewPagerIndicate
android:id="@+id/indicate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none" >
</com.example.viewpagerindicate.view.ViewPagerIndicate>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="2dp"
android:background="#D5D5D5" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
layout_text_indicate.xml代码如下:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:paddingTop="15dp"
android:textSize="16sp" >
</TextView>
本文标签: 史上网易新闻客户端效果ViewPagerIndicate
版权声明:本文标题:史上最简的ViewPagerIndicate,高仿网易新闻客户端效果 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727248528a1104936.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论