ViewPagerIndicator+ViewPager

原创 2018年04月17日 16:24:47


ViewPagerIndicator

public class ViewPagerIndicator extends LinearLayout {

    //画笔
    private Paint mPaint;
    //用来画一条线
    private Path mPath;
    //绘制线的宽度
    private int mLineWidth;
    //线的初始位置
    private int mInitTranslationX;
    //移动位置
    private int mTranslationX;
    //子控件
    private View mChildView;

    public ViewPagerIndicator(Context context) {
        super(context,null);
    }

    public ViewPagerIndicator(Context context, AttributeSet attrs) {

        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#ffba00"));
        mPaint.setStrokeWidth(3);
        mPaint.setStyle(Paint.Style.STROKE);
    }

    //完成布局后获取子控件
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mChildView = getChildAt(0);
    }
    //在onSizeChanged中获取宽和初始位置,并根据位置初始化线
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mTranslationX = 0;
        mLineWidth = mChildView.getMeasuredWidth();
        mInitTranslationX = (w/getChildCount()-mLineWidth)/2;

        initLine();
    }
    //初始化线
    private void initLine(){
        mPath = new Path();
        mPath.moveTo(0,0);
        mPath.lineTo(mLineWidth,0);

    }
    //绘制线
    @Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.save();
        //移动到该坐标后开始绘制
        canvas.translate(mInitTranslationX + mTranslationX,getHeight());
        canvas.drawPath(mPath,mPaint);
        canvas.restore();
        super.dispatchDraw(canvas);
    }

    ////在viewpager的onPageScrolled监听方法中调用此方法。viewPager滑动时mTranslationX的距离跟着变化,实现线的滑动,position,offset由onPageScrolled传值
    public void scroll(int position ,float offset){
        int tabWidth = getWidth()/getChildCount();
        mTranslationX =(int) (tabWidth * offset +tabWidth * position);
        //请求重绘,调用dispatchDraw方法
        invalidate();
    }
}

Activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.myfragmentlayout.MainActivity">

  <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/store_fl"
        >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="#FF6143"
            />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:id="@+id/store_top"
                >
                <ImageView
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:background="@mipmap/back"
                     android:layout_centerVertical="true"
                    />
                <EditText
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@null"
                     android:layout_centerInParent="true"
                    android:hint="请选择该店铺的商品"
                    android:textSize="14sp"
                    />
                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_alignParentRight="true"
                    android:src="@mipmap/detaile_share"
                    />
            </RelativeLayout>

             <RelativeLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_gravity="bottom"
                 android:layout_alignBottom="@id/store_fl"
                 android:layout_marginBottom="10dp"
                 android:layout_marginLeft="10dp"
                 android:layout_marginRight="10dp"
                 >
                 <ImageView
                     android:id="@+id/store_img"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:src="@mipmap/ic_launcher"
                     />
                 <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_toRightOf="@id/store_img"
                     android:orientation="vertical"
                     android:layout_alignBottom="@id/store_img"
                      android:layout_marginLeft="10dp"
                     >
                     <TextView
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:text="sdfsd"
                         android:textColor="#EFEFEF"
                         android:textSize="20sp"
                         />
                      <TextView
                          android:layout_marginTop="8dp"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:textColor="#EFEFEF"
                          android:text="sdfsdf"
                          android:textSize="14sp"
                          />
                 </LinearLayout>
                 <ImageView
                     android:layout_width="50dp"
                     android:layout_height="20dp"
                     android:src="@mipmap/ic_launcher"
                     android:layout_alignBottom="@id/store_img"
                     android:layout_alignParentRight="true"
                     />
             </RelativeLayout>
    </FrameLayout>
     <com.example.myfragmentlayout.ViewPagerIndicator
         android:id="@+id/store_indicator"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:paddingTop="10dp"
         android:paddingBottom="10dp"
         android:orientation="horizontal"
         >
          <TextView
              android:id="@+id/store_all"
              android:layout_width="0dp"
              android:layout_weight="1"
              android:layout_height="wrap_content"
              android:clickable="true"
              android:gravity="center"
              android:onClick="onClick"
             android:text="综合"

             />
          <TextView
              android:id="@+id/store_new"
              android:layout_width="0dp"
              android:layout_weight="1"
              android:layout_height="wrap_content"
              android:clickable="true"
              android:gravity="center"
              android:onClick="onClick"
             android:text="新品"

             />
          <TextView
              android:id="@+id/store_sales"
              android:layout_width="0dp"
              android:layout_weight="1"
              android:layout_height="wrap_content"
              android:clickable="true"
              android:gravity="center"
              android:onClick="onClick"
             android:text="销量"

             />

             <TextView
              android:id="@+id/store_prece"
                 android:layout_width="0dp"
                 android:layout_weight="1"
                 android:layout_height="wrap_content"
                 android:clickable="true"
                 android:gravity="center"
                 android:onClick="onClick"
              android:text="价格"
               />
     </com.example.myfragmentlayout.ViewPagerIndicator>
    <android.support.v4.view.ViewPager
        android:id="@+id/store_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff">
    </android.support.v4.view.ViewPager>
</LinearLayout>

MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    
    private TextView storeAll;
    private TextView storeNew;
    private TextView storeSales;
    private TextView storePrice;
    private ViewPager storePager;
    private ViewPagerIndicator storeIndicator;

    private List<Fragment> mFragmentList;
    private FragmentPagerAdapter orderPickingAdapter;
    private ViewPager.OnPageChangeListener onPageChangeListener;
    //当前选中的indicator
    private TextView currentItem;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        init();
        storePager.setAdapter(orderPickingAdapter);
        storePager.addOnPageChangeListener(onPageChangeListener);
        storePager.setCurrentItem(0);
        currentItem = storeAll;
        currentItem.setTextColor(Color.parseColor("#ffba00"));
        //自定义适配器


    }

    private void init() {
        storeAll = findViewById(R.id.store_all);
        storeNew = findViewById(R.id.store_new);
        storeSales = findViewById(R.id.store_sales);
        storePrice = findViewById(R.id.store_prece);
        storePager = findViewById(R.id.store_pager);
        storeIndicator = findViewById(R.id.store_indicator);
        storeAll.setOnClickListener(this);
        storeNew.setOnClickListener(this);
        storeSales.setOnClickListener(this);
        storePrice.setOnClickListener(this);
        mFragmentList = new ArrayList<>();
        StoreAllFragment storeAllFragment = new StoreAllFragment();
        mFragmentList.add(storeAllFragment);
        mFragmentList.add(new StoreNewFragment());
        mFragmentList.add(new StoreSaleFragment());
        mFragmentList.add(new StorePriceFrament());

        orderPickingAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return mFragmentList.size();
            }

            @Override
            public Fragment getItem(int i) {
                return mFragmentList.get(i);
            }
        };
        //设置ViewPager监听事件
        onPageChangeListener = new ViewPager.OnPageChangeListener() {
            //滑动时,indicator下面的横线跟着滑动
            @Override
            public void onPageScrolled(int i, float v, int i1) {
                storeIndicator.scroll(i, v);
            }

            //选中监听,改变indicator文字颜色
            @Override
            public void onPageSelected(int i) {
                switch (i) {
                    case 0:
                        if (currentItem == storeAll)
                            return;
                        storeAll.setTextColor(Color.parseColor("#ffba00"));
                        currentItem.setTextColor(Color.parseColor("#646464"));
                        currentItem = storeAll;
                        break;
                    case 1:
                        if (currentItem == storeNew)
                            return;
                        storeNew.setTextColor(Color.parseColor("#ffba00"));
                        currentItem.setTextColor(Color.parseColor("#646464"));
                        currentItem = storeNew;
                        break;
                    case 2:
                        if (currentItem == storeSales)
                            return;
                        storeSales.setTextColor(Color.parseColor("#ffba00"));
                        currentItem.setTextColor(Color.parseColor("#646464"));
                        currentItem = storeSales;
                        break;
                    case 3:
                        if (currentItem == storePrice)
                            return;
                        storePrice.setTextColor(Color.parseColor("#ffba00"));
                        currentItem.setTextColor(Color.parseColor("#646464"));
                        currentItem = storePrice;
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }

        };

    }


    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.store_all:
                storePager.setCurrentItem(0);
                break;
            case R.id.store_new:
                Toast.makeText(this,"动啊",Toast.LENGTH_SHORT).show();
                storePager.setCurrentItem(1);
                break;
            case R.id.store_sales:
                storePager.setCurrentItem(2);
                break;
            case R.id.store_prece:
                storePager.setCurrentItem(3);
                break;
        }
    }
}

viewpagerindicator+UnderlinePageIndicator+ viewpage切换

摘自:http://www.cnblogs.com/java-g/p/4587999.html
  • longyehua
  • longyehua
  • 2015-11-26 12:26:01
  • 690

ViewPagerIndicator的简单使用

  • 2016年12月08日 17:24
  • 790KB
  • 下载

ViewPagerIndicator与ViewPager实现Tab

Android Studio 导入viewpagerindector最简单的方法: 根build.gradle下加maven那一行 allprojects {     r...
  • DuanLiuchang
  • DuanLiuchang
  • 2016-06-05 12:31:50
  • 796

Android ViewPager+ViewPagerIndicator制作引导页

ViewPager+ViewPagerIndicator
  • bruce_qiwei
  • bruce_qiwei
  • 2016-12-04 11:06:50
  • 450

ViewPagerIndicator+viewpager指示器详解

前几天学习了ViewPager作为引导页和Tab的使用方法。后来也有根据不同的使用情况改用Fragment作为Tab的情况,以及ViewPager结合FragmentPagerAdapter的使用。今...
  • xiangzhihong8
  • xiangzhihong8
  • 2016-02-23 14:53:04
  • 3282

ViewPagerIndicator+ViewPager实现Tab源码

  • 2016年12月11日 16:12
  • 28.48MB
  • 下载

ViewPagerIndicator+viewpager的简单使用,不需要导入Library包

ViewPagerIndicator作为一款分页指标小部件兼容ViewPager,封装上做得非常不错,目前已为众多知名应用所使用。 ViewPagerIndicator+viewpager实现如下效...
  • DickyQie
  • DickyQie
  • 2016-12-08 17:57:24
  • 278

Android 打造万能的ViewPagerIndicator 指示器

/**稀土掘金,时光不老**/ 大家好,又是项目中用到的小功能,拿来和大家分享交流一下,如有不足之处,请多多指教哈。O(∩_∩)O哈哈~ 1. 概述。 ViewPager的指示器相信大家都做过了,有...
  • wujainEW
  • wujainEW
  • 2016-04-05 19:01:00
  • 4910

多种多样的App主界面Tab实现方法——利用ViewPagerIndicator+ViewPager实现Tab

利用ViewPagerIndicator+ViewPager实现Tab
  • qq_22804827
  • qq_22804827
  • 2016-03-12 10:24:49
  • 420
收藏助手
不良信息举报
您举报文章:ViewPagerIndicator+ViewPager
举报原因:
原因补充:

(最多只允许输入30个字)