ViewPagerIndicator替换成三角形指示器

前言:自己在做项目的时候需要做一个如下效果的界面的切换,自己去结合以前的,和找了一点资源

一丶首先上效果图如下:

代码如下:

MainActivity

package com.pry.demo;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import com.example.demo_zhy_mms_miui.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.view.Window;/** * @author Administrator * 这是主界面 */public class MainActivity extends FragmentActivity{private List<Fragment> mTabContents = new ArrayList<Fragment>();private FragmentPagerAdapter mAdapter;private ViewPager mViewPager;private List<String> mDatas = Arrays.asList("我的帐号", "金币明细", "绑金明细");private ViewPagerIndicator mIndicator;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.vp_indicator);initView();initDatas();//设置Tab上的标题mIndicator.setTabItemTitles(mDatas);//设置适配器mViewPager.setAdapter(mAdapter);//设置关联的ViewPagermIndicator.setViewPager(mViewPager,0);}/** * 初始化数据 */private void initDatas(){for (String data : mDatas){VpSimpleFragment fragment = VpSimpleFragment.newInstance(data);mTabContents.add(fragment);}mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()){@Overridepublic int getCount(){return mTabContents.size();}@Overridepublic Fragment getItem(int position){return mTabContents.get(position);}};}/** * 初始化控件 */private void initView(){mViewPager = (ViewPager) findViewById(R.id.id_vp);mIndicator = (ViewPagerIndicator) findViewById(R.id.id_indicator);}}

ViewPagerIndicator

package com.pry.demo;import java.util.List;import com.example.demo_zhy_mms_miui.R;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.CornerPathEffect;import android.graphics.Paint;import android.graphics.Paint.Style;import android.graphics.Path;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.Log;import android.util.TypedValue;import android.view.Gravity;import android.view.View;import android.view.WindowManager;import android.widget.LinearLayout;import android.widget.TextView;/** * @author Administrator * 指示器界面页签 */public class ViewPagerIndicator extends LinearLayout{/** * 绘制三角形的画笔 */private Paint mPaint;/** * path构成一个三角形 */private Path mPath;/** * 三角形的宽度 */private int mTriangleWidth;/** * 三角形的高度 */private int mTriangleHeight;/** * 三角形的宽度为单个Tab的1/6 */private static final float RADIO_TRIANGEL = 1.0f / 6;/** * 三角形的最大宽度 */private final int DIMENSION_TRIANGEL_WIDTH = (int) (getScreenWidth() / 3 * RADIO_TRIANGEL);/** * 初始时，三角形指示器的偏移量 */private int mInitTranslationX;/** * 手指滑动时的偏移量 */private float mTranslationX;/** * 默认的Tab数量 */private static final int COUNT_DEFAULT_TAB = 3;/** * tab数量 */private int mTabVisibleCount = COUNT_DEFAULT_TAB;/** * tab上的内容 */private List<String> mTabTitles;/** * 与之绑定的ViewPager */public ViewPager mViewPager;/** * 标题正常时的颜色 */private static final int COLOR_TEXT_NORMAL = 0x77FFFFFF;/** * 标题选中时的颜色 */private static final int COLOR_TEXT_HIGHLIGHTCOLOR = 0xFFFFFFFF;public ViewPagerIndicator(Context context){this(context, null);}public ViewPagerIndicator(Context context, AttributeSet attrs){super(context, attrs);// 获得自定义属性，tab的数量TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.ViewPagerIndicator);mTabVisibleCount = a.getInt(R.styleable.ViewPagerIndicator_item_count,COUNT_DEFAULT_TAB);if (mTabVisibleCount < 0)mTabVisibleCount = COUNT_DEFAULT_TAB;a.recycle();// 初始化画笔mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setColor(Color.parseColor("#ffffffff"));mPaint.setStyle(Style.FILL);mPaint.setPathEffect(new CornerPathEffect(3));}/** * 绘制指示器 */@Overrideprotected void dispatchDraw(Canvas canvas){canvas.save();// 画笔平移到正确的位置canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 1);canvas.drawPath(mPath, mPaint);canvas.restore();super.dispatchDraw(canvas);}/** * 初始化三角形的宽度 */@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh){super.onSizeChanged(w, h, oldw, oldh);mTriangleWidth = (int) (w / mTabVisibleCount * RADIO_TRIANGEL);// 1/6 of widthmTriangleWidth = Math.min(DIMENSION_TRIANGEL_WIDTH, mTriangleWidth);// 初始化三角形initTriangle();// 初始时的偏移量mInitTranslationX = getWidth() / mTabVisibleCount / 2 - mTriangleWidth/ 2;}/** * 设置可见的tab的数量 *  * @param count */public void setVisibleTabCount(int count){this.mTabVisibleCount = count;}/** * 设置tab的标题内容 可选，可以自己在布局文件中写死 *  * @param datas */public void setTabItemTitles(List<String> datas){// 如果传入的list有值，则移除布局文件中设置的viewif (datas != null && datas.size() > 0){this.removeAllViews();this.mTabTitles = datas;for (String title : mTabTitles){// 添加viewaddView(generateTextView(title));}// 设置item的click事件setItemClickEvent();}}/** * 对外的ViewPager的回调接口 *  * @author zhy *  */public interface PageChangeListener{public void onPageScrolled(int position, float positionOffset,int positionOffsetPixels);public void onPageSelected(int position);public void onPageScrollStateChanged(int state);}// 对外的ViewPager的回调接口private PageChangeListener onPageChangeListener;// 对外的ViewPager的回调接口的设置public void setOnPageChangeListener(PageChangeListener pageChangeListener){this.onPageChangeListener = pageChangeListener;}// 设置关联的ViewPagerpublic void setViewPager(ViewPager mViewPager, int pos){this.mViewPager = mViewPager;mViewPager.setOnPageChangeListener(new OnPageChangeListener(){@Overridepublic void onPageSelected(int position){// 设置字体颜色高亮resetTextViewColor();highLightTextView(position);// 回调if (onPageChangeListener != null){onPageChangeListener.onPageSelected(position);}}@Overridepublic void onPageScrolled(int position, float positionOffset,int positionOffsetPixels){// 滚动scroll(position, positionOffset);// 回调if (onPageChangeListener != null){onPageChangeListener.onPageScrolled(position,positionOffset, positionOffsetPixels);}}@Overridepublic void onPageScrollStateChanged(int state){// 回调if (onPageChangeListener != null){onPageChangeListener.onPageScrollStateChanged(state);}}});// 设置当前页mViewPager.setCurrentItem(pos);// 高亮highLightTextView(pos);}/** * 高亮文本 *  * @param position */protected void highLightTextView(int position){View view = getChildAt(position);if (view instanceof TextView){((TextView) view).setTextColor(COLOR_TEXT_HIGHLIGHTCOLOR);}}/** * 重置文本颜色 */private void resetTextViewColor(){for (int i = 0; i < getChildCount(); i++){View view = getChildAt(i);if (view instanceof TextView){((TextView) view).setTextColor(COLOR_TEXT_NORMAL);}}}/** * 设置点击事件 */public void setItemClickEvent(){int cCount = getChildCount();for (int i = 0; i < cCount; i++){final int j = i;View view = getChildAt(i);view.setOnClickListener(new OnClickListener(){@Overridepublic void onClick(View v){mViewPager.setCurrentItem(j);}});}}/** * 根据标题生成我们的TextView *  * @param text * @return */private TextView generateTextView(String text){TextView tv = new TextView(getContext());LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);lp.width = getScreenWidth() / mTabVisibleCount;tv.setGravity(Gravity.CENTER);tv.setTextColor(COLOR_TEXT_NORMAL);tv.setText(text);tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);tv.setLayoutParams(lp);return tv;}/** * 初始化三角形指示器 */private void initTriangle(){mPath = new Path();mTriangleHeight = (int) (mTriangleWidth /  Math.sqrt(3));mPath.moveTo(0, 0);mPath.lineTo(mTriangleWidth, 0);mPath.lineTo(mTriangleWidth / 2, -mTriangleHeight);mPath.close();}/** * 指示器跟随手指滚动，以及容器滚动 *  * @param position * @param offset */public void scroll(int position, float offset){/** * <pre> *  0-1:position=0 ;1-0:postion=0; * </pre> */// 不断改变偏移量，invalidatemTranslationX = getWidth() / mTabVisibleCount * (position + offset);int tabWidth = getScreenWidth() / mTabVisibleCount;// 容器滚动，当移动到倒数最后一个的时候，开始滚动if (offset > 0 && position >= (mTabVisibleCount - 2)&& getChildCount() > mTabVisibleCount){if (mTabVisibleCount != 1){this.scrollTo((position - (mTabVisibleCount - 2)) * tabWidth+ (int) (tabWidth * offset), 0);} else// 为count为1时 的特殊处理{this.scrollTo(position * tabWidth + (int) (tabWidth * offset), 0);}}invalidate();}/** * 设置布局中view的一些必要属性；如果设置了setTabTitles，布局中view则无效 */@Overrideprotected void onFinishInflate(){Log.e("TAG", "onFinishInflate");super.onFinishInflate();int cCount = getChildCount();if (cCount == 0)return;for (int i = 0; i < cCount; i++){View view = getChildAt(i);LinearLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams();lp.weight = 0;lp.width = getScreenWidth() / mTabVisibleCount;view.setLayoutParams(lp);}// 设置点击事件setItemClickEvent();}/** * 获得屏幕的宽度 *  * @return */public int getScreenWidth(){WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);DisplayMetrics outMetrics = new DisplayMetrics();wm.getDefaultDisplay().getMetrics(outMetrics);return outMetrics.widthPixels;}}

VpSimpleFragment

<pre name="code" class="java">package com.pry.demo;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * @author Administrator * ViewPager的Fragment */public class VpSimpleFragment extends Fragment{public static final String BUNDLE_TITLE = "title";private String mTitle = "DefaultValue";@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){Bundle arguments = getArguments();if (arguments != null){mTitle = arguments.getString(BUNDLE_TITLE);}TextView tv = new TextView(getActivity());tv.setText(mTitle);tv.setGravity(Gravity.CENTER);return tv;}/** * 定义newFragment静态方法 * @param title * @return */public static VpSimpleFragment newInstance(String title){Bundle bundle = new Bundle();bundle.putString(BUNDLE_TITLE, title);VpSimpleFragment fragment = new VpSimpleFragment();fragment.setArguments(bundle);return fragment;}}

vp_indicator.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:zhy="http://schemas.android.com/apk/res/com.example.demo_zhy_mms_miui"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#ffffffff"    android:orientation="vertical" >    <com.pry.demo.ViewPagerIndicator        android:id="@+id/id_indicator"        android:layout_width="match_parent"        android:layout_height="45dp"        android:background="@drawable/title_bar_bg_one_row"        android:orientation="horizontal"        zhy:item_count="3" >        <TextView            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="短信1"            android:textColor="#CCFFFFFF"            android:textSize="16sp" />        <TextView            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="收藏2"            android:textColor="#CCFFFFFF"            android:textSize="16sp" />        <TextView            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="推荐3"            android:textColor="#CCFFFFFF"            android:textSize="16sp" />        <TextView            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="推荐4"            android:textColor="#CCFFFFFF"            android:textSize="16sp" />        <TextView            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="推荐5"            android:textColor="#CCFFFFFF"            android:textSize="16sp" />        <TextView            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="推荐6"            android:textColor="#CCFFFFFF"            android:textSize="16sp" />        <TextView            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="推荐7"            android:textColor="#CCFFFFFF"            android:textSize="16sp" />    </com.pry.demo.ViewPagerIndicator>    <android.support.v4.view.ViewPager        android:id="@+id/id_vp"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </android.support.v4.view.ViewPager></LinearLayout>

attr.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <attr name="item_count" format="integer"></attr>    <declare-styleable name="ViewPagerIndicator">        <attr name="item_count" />    </declare-styleable></resources>