android配合viewpager实现可滑动的标签栏示例分享

代码如下:

package com.example.playtabtest.view;

import com.example.playtabtest.R;

import android.app.Activity;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class SyncHorizontalScrollView extends HorizontalScrollView {

private View view;
 private ImageView leftImage;
 private ImageView rightImage;
 private int windowWitdh = 0;
 private Activity mContext;
 private RadioGroup rg_nav_content;
 private ImageView iv_nav_indicator;
 private LayoutInflater mInflater;
 private int indicatorWidth;// 每个标签所占的宽度
 private int currentIndicatorLeft = 0;// 当前所在标签页面的位移
 private ViewPager mViewPager;//与本view相关联的viewpager

public SyncHorizontalScrollView(Context context) {
  super(context);
  // TODO Auto-generated constructor stub
 }

public SyncHorizontalScrollView(Context context, AttributeSet attrs) {
  super(context, attrs);
  // TODO Auto-generated constructor stub
 }

/**
  *
  * @param mViewPager与本view关联的viewpager
  * @param leftImage左箭头
  * @param rightImage右箭头
  * @param tabTitle 标签数组,对应各个标签的名称
  * @param count一页显示的标签数
  * @param context
  */
 public void setSomeParam(ViewPager mViewPager, ImageView leftImage,
   ImageView rightImage, String[] tabTitle, int count, Activity context) {
  this.mContext = context;
  this.mViewPager = mViewPager;
  mInflater = LayoutInflater.from(context);
  this.view = mInflater.inflate(R.layout.sync_hsv_item, null);
  this.addView(view);
  this.leftImage = leftImage;
  this.rightImage = rightImage;
  DisplayMetrics dm = new DisplayMetrics();
  context.getWindowManager().getDefaultDisplay().getMetrics(dm);
  windowWitdh = dm.widthPixels;
  indicatorWidth = windowWitdh / count;
  init(tabTitle);
  this.invalidate();
 }

private void init(String[] tabTitle) {
  rg_nav_content = (RadioGroup) view.findViewById(R.id.rg_nav_content);
  iv_nav_indicator = (ImageView) view.findViewById(R.id.iv_nav_indicator);
  initIndicatorWidth();
  initNavigationHSV(tabTitle);
  setListener();
 }

// 初始化滑动下标的宽
 private void initIndicatorWidth() {
  ViewGroup.LayoutParams cursor_Params = iv_nav_indicator
    .getLayoutParams();
  cursor_Params.width = indicatorWidth;
  iv_nav_indicator.setLayoutParams(cursor_Params);
 }

// 添加顶部标签
 private void initNavigationHSV(String[] tabTitle) {
  rg_nav_content.removeAllViews();
  for (int i = 0; i < tabTitle.length; i++) {
   RadioButton rb = (RadioButton) mInflater.inflate(
     R.layout.nav_radiogroup_item, null);
   rb.setId(i);
   rb.setText(tabTitle[i]);
   rb.setLayoutParams(new LayoutParams(indicatorWidth,
     LayoutParams.MATCH_PARENT));
   rg_nav_content.addView(rb);
  }

}

private void setListener() {
  rg_nav_content
    .setOnCheckedChangeListener(new OnCheckedChangeListener() {
     @Override
     public void onCheckedChanged(RadioGroup group, int checkedId) {
      if (rg_nav_content.getChildAt(checkedId) != null) {
       TranslateAnimation animation = new TranslateAnimation(
         currentIndicatorLeft,
         ((RadioButton) rg_nav_content
           .getChildAt(checkedId)).getLeft(),
         0f, 0f);
       animation.setInterpolator(new LinearInterpolator());
       animation.setDuration(100);
       animation.setFillAfter(true);

// 执行位移动画
       iv_nav_indicator.startAnimation(animation);
       mViewPager.setCurrentItem(checkedId); // ViewPager
                 // 跟随一起 切换
       // 记录当前 下标的距最左侧的 距离
       currentIndicatorLeft = ((RadioButton) rg_nav_content
         .getChildAt(checkedId)).getLeft();
       smoothScrollTo(
         (checkedId > 1 ? ((RadioButton) rg_nav_content
           .getChildAt(checkedId)).getLeft()
           : 0)
           - ((RadioButton) rg_nav_content
             .getChildAt(2)).getLeft(),
         0);
      }
     }
    });
 }

/**
  * 模拟点击事件,供外部调用
  * @param position
  */
 public void performLabelClick(int position) {
  if (rg_nav_content != null && rg_nav_content.getChildCount() > position) {
   ((RadioButton) rg_nav_content.getChildAt(position)).performClick();
  }
 }

// 显示和隐藏左右两边的箭头
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  super.onScrollChanged(l, t, oldl, oldt);
  if (!mContext.isFinishing() && view != null && rightImage != null
    && leftImage != null) {
   if (view.getWidth() <= windowWitdh) {
    leftImage.setVisibility(View.GONE);
    rightImage.setVisibility(View.GONE);
   } else {
    if (l == 0) {
     leftImage.setVisibility(View.GONE);
     rightImage.setVisibility(View.VISIBLE);
    } else if (view.getWidth() - l == windowWitdh) {
     leftImage.setVisibility(View.VISIBLE);
     rightImage.setVisibility(View.GONE);
    } else {
     leftImage.setVisibility(View.VISIBLE);
     rightImage.setVisibility(View.VISIBLE);
    }
   }
  }
 }
}

代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
        <RelativeLayout
                android:id="@+id/rl_nav"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="#5AB0EB" >

<RadioGroup
                    android:id="@+id/rg_nav_content"
                    android:layout_width="fill_parent"
                    android:layout_height="38dip"
                    android:layout_alignParentTop="true"
                    android:background="#F2F2F2"
                    android:orientation="horizontal" >
                </RadioGroup>

<ImageView
                    android:id="@+id/iv_nav_indicator"
                    android:layout_width="1dip"
                    android:layout_height="5dip"
                    android:layout_alignParentBottom="true"
                    android:background="#5AB0EB"
                    android:contentDescription="@string/nav_desc"
                    android:scaleType="matrix" />
            </RelativeLayout>

</LinearLayout>

代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="fill_parent"
    android:background="#F2F2F2"
    android:button="@null"
    android:checked="true"
    android:gravity="center"
    android:text=""
    android:textColor="@drawable/rb_blue_bg"
    android:textSize="14.0dip" />

(0)

相关推荐

  • 自定义RadioButton和ViewPager实现TabHost带滑动的页卡效果

    在工作中又很多需求都不是android系统自带的控件可以达到效果的,内置的TabHost就是,只能达到简单的效果 ,所以这个时候就要自定义控件来达到效果:这个效果就是: 使用自定义RadioButton和ViewPager实现TabHost带滑动的页卡效果. 这篇文章技术含量一般,大家别见笑.源码我以测试,在底部可下载.好了先上效果图: 以下是实现步骤:        1.准备自定义RadioButton控件的样式图片等,就是准备配置文件: (1). 在项目的values文件夹里面创建 attr

  • Android编程实现ViewPager多页面滑动切换及动画效果的方法

    本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法.分享给大家供大家参考,具体如下: 一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了,接下来我们就来实现它. 二.在开始前,我们先要认识一个控件,ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 这个附加包是and

  • Android中ViewPager带来的滑动卡顿问题解决要点解析

    问题说明: 当SwipeRefreshLayout中放置了ViewPager控件,两者的滑动会相互冲突.具体表现为ViewPager的左右滑动不顺畅,容易被SwipeRefreshLayout拦截(即出现刷新的View). 问题原因: ViewPager本身是处理了滚动事件的冲突,它在横向滑动时会调用requestDisallowInterceptTouchEvent()方法使父控件不拦截当前的Touch事件序列.但是SwipeRefreshLayout的requestDisallowInter

  • Android App中使用ViewPager+Fragment实现滑动切换效果

    在android应用中,多屏滑动是一种很常见的风格,没有采用viewpager的代码实现会很长,如果采用ViewPager,代码就会短很多,但是使用ViewPager也有弊端:需要导入android-support-v4.jar.细节无法控制.不过现在情况已经不一样了,android-support-v4中提供了很多实用的功能,以至于现在新建一个android工程默认都会导入这个jar包.那我们就也采用viewpager来做滑动吧.另外一个概念就是Fragment和FragmentActivit

  • Android开发之使用ViewPager实现图片左右滑动切换效果

    Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android ViewPager无限循环实现底部小圆点动态滑动

    页面拖动到最后一页 再向下滑动回复到 第一页,第一页向前滑动回到 最后一页 同时,底部红色小圆点随着页面的滑动距离比例随时改变位置 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas

  • 使用ViewPager实现左右循环滑动及滑动跳转

    前面一篇文章实现了使用ViewPager实现高仿launcher拖动效果 ,后来很多朋友问能不能实现左右循环滑动效果和引导页面.今天实现了左右滑动,至于在最后一页滑动跳转,这个也做了但是效果不是太好,也希望有实现的朋友能够分享下.在最后一页添加一张图片单击跳转,这个认为很简单大家自己添加个图片,点击后跳转就OK. 这篇是在实现了使用ViewPager实现高仿launcher拖动效果的基础上做了一些小的修改,可以参照前面的.废话不多说了,直接上代码吧! 首先看一些layout下的xml 复制代码

  • Android App中ViewPager所带来的滑动冲突问题解决方法

    叙述 滑动冲突可以说是日常开发中比较常见的一类问题,也是比较让人头疼的一类问题,尤其是在使用第三方框架的时候,两个原本完美的控件,组合在一起之后,忽然发现整个世界都不好了. 关于滑动冲突 滑动冲突分类: 滑动冲突,总的来说就是两类. 1.同方向滑动冲突 比如ScrollView嵌套ListView,或者是ScrollView嵌套自己 2.不同方向滑动冲突 比如ScrollView嵌套ViewPager,或者是ViewPager嵌套ScrollView,这种情况其实很典型.现在大部分应用最外层都是

  • Android使用ViewPager实现屏幕滑动效果

    使用ViewPager实现屏幕滑动 从一个完整的屏幕移动到另一个屏幕的过程被称为屏幕滑动,在安装向导.幻灯片中应用广泛.下面介绍如何利用Android Support库的ViewPager来实现屏幕滑动. 创建View 创建一个在之后作为fragment的内容的布局文件,下面的例子中包含一个Textview,用来展示一些文字. <!-- fragment_screen_slide_page.xml --> <ScrollView xmlns:android="http://sc

  • Android利用ViewPager实现滑动广告板实例源码

    •android-support-v4.jar,这是谷歌官方给我们提供的一个兼容低版本Android设备的软件包,里面包囊了只有在Android3.0以上可以使用的api.而ViewPager就是其中之一,利用它我们可以做很多事情,从最简单的导航,到页面切换菜单等等. •ViewPager的功能就是可以使视图滑动,就像Lanucher左右滑动那样. •本Demo向大家演示ViewPager的使用,并在用户未滑动View时,每隔5s钟自动切换到下一个View(循环切换),而当用户有Touch到Vi

随机推荐