自定义Android页签TabIndicator

最新推荐文章于 2024-08-29 14:57:56 发布

yanglei0917

最新推荐文章于 2024-08-29 14:57:56 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/yanglei0917/article/details/52472698

版权

现在很多应用都带有页签，随着手势滑动来切换视图。下面我们来自定义一个页签来实现

首先，看一下自定义属性，attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="MyIndicator">
        <attr name="Indicator_color" format="color" />
    </declare-styleable>

</resources>

接下来就是自定义的View了这里我们自定义了LinearLayout，

package com.example.tabindicator.view;

import com.example.tabindicator.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.LinearLayout;

public class MyIndicator extends LinearLayout {
   private Paint mPaint; // 画指示符的paint
   private int mTop; // 指示符的top
   private int mLeft; // 指示符的left
   private int mWidth; // 指示符的width
   private int mHeight = 5; // 指示符的高度，固定了
   private int mColor; // 指示符的颜色
   private int mChildCount; // 子item的个数，用于计算指示符的宽度

   public MyIndicator(Context context) {
       this(context, null);
   }

   public MyIndicator(Context context, AttributeSet attrs) {
       this(context, attrs, 0);
   }

   public MyIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
       setBackgroundColor(Color.TRANSPARENT); // 必须设置背景，否则onDraw不执行
       // 获取自定义属性指示符的颜色
       TypedArray ta = context.obtainStyledAttributes(attrs,
               R.styleable.MyIndicator, 0, 0);
       mColor = ta.getColor(R.styleable.MyIndicator_Indicator_color, 0X0000FF);
       ta.recycle();
       // 初始化paint
       mPaint = new Paint();
       mPaint.setColor(mColor);
       mPaint.setAntiAlias(true);

   }

   @Override
   protected void onFinishInflate() {
       super.onFinishInflate();
       // 获取子item的个数
       mChildCount = getChildCount();
   }

   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       super.onMeasure(widthMeasureSpec, heightMeasureSpec);
       // 测量高度，即指示符顶部位置
       mTop = getMeasuredHeight();
       // 获取测量的总宽度
       int width = getMeasuredWidth();
       // 获取测量的高度重新定义
       int height = mTop + mHeight;
       // 指示符的宽度为总宽度/item的数量
       mWidth = width / mChildCount;
       setMeasuredDimension(width, height);
   }

   /**
   * 指示符滚动
   *
   * @param position
   *            当前位置
   * @param offset
   *            偏移量0~1
   */
   public void scroll(int position, float offset) {
       mLeft = (int) ((position + offset) * mWidth);
       // 重新绘制view树
       invalidate();
   }

   @Override
   protected void onDraw(Canvas canvas) {
       // 画出一个矩形
       Rect rect = new Rect(mLeft, mTop, mLeft + mWidth, mTop + mHeight);
       canvas.drawRect(rect, mPaint);
       super.onDraw(canvas);
   }
}

然后我们看一下布局文件

最后我们看一下MainActivity.java

package com.example.tabindicator;

import java.util.ArrayList;

import com.example.tabindicator.view.MyIndicator;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener {

   private MyIndicator indicator;
   private TextView mTabOne;
   private TextView mTabTwo;
   private TextView mTabThree;
   private TextView mTabFour;
   private TextView mTabFive;
   private ViewPager mContainer;
   private ArrayList<TextView> views = new ArrayList<TextView>(5);

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       indicator = (MyIndicator) findViewById(R.id.indicator);
       mContainer = (ViewPager) findViewById(R.id.container);

       mTabOne = (TextView) findViewById(R.id.tab_one);
       mTabTwo = (TextView) findViewById(R.id.tab_two);
       mTabThree = (TextView) findViewById(R.id.tab_three);
       mTabFour = (TextView) findViewById(R.id.tab_four);
       mTabFive=(TextView) findViewById(R.id.tab_five);
       mTabOne.setOnClickListener(this);
       mTabTwo.setOnClickListener(this);
       mTabThree.setOnClickListener(this);
       mTabFour.setOnClickListener(this);
       mTabFive.setOnClickListener(this);
       initView();
       mContainer.setAdapter(new PagerAdapter() {

           @Override
           public boolean isViewFromObject(View arg0, Object arg1) {
               return arg0 == arg1;
           }

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

           @Override
           public Object instantiateItem(ViewGroup container, int position) {
               View view = views.get(position);
               container.addView(view);
               return view;
           }

           @Override
           public void destroyItem(ViewGroup container, int position,
                   Object object) {
               container.removeView(views.get(position));
           }
       });
       mContainer.setOnPageChangeListener(new OnPageChangeListener() {

           @Override
           public void onPageSelected(int arg0) {

           }

           @Override
           public void onPageScrolled(int position, float positionOffset,
                   int positionOffsetPixels) {
               indicator.scroll(position, positionOffset);
           }

           @Override
           public void onPageScrollStateChanged(int arg0) {

           }
       });
   }

   private void initView() {
       for (int i = 0; i < 5; i++) {
           TextView textView = new TextView(getApplicationContext());
           textView.setText("我是Tab" + i);
           views.add(textView);
       }
   }

   @Override
   public void onClick(View v) {
       switch (v.getId()) {
       case R.id.tab_one:
           mContainer.setCurrentItem(0);
           break;
       case R.id.tab_two:
           mContainer.setCurrentItem(1);
           break;
       case R.id.tab_three:
           mContainer.setCurrentItem(2);
           break;
       case R.id.tab_four:
           mContainer.setCurrentItem(3);
           break;
       case R.id.tab_five:
           mContainer.setCurrentItem(4);
           break;
       }
   }

}