《Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡》

之前基于github上的第三方开源控件ViewPagerIndicator的UnderlinePageIndicator(原文链接:http://blog.csdn.net/zhangphil/article/details/44752213)。自己写了一个底部带有滑块、且当ViewPager页面切换时候选项卡也随之对应切换,且滑块也随之对应动态滑动效果得控件。但写的太过于紧耦合。不利于复用。所以如今重构了代码。重写了代码,把这些效果做成了一个自定制的松耦合控件:TabLinearLayout,该控件能够在未来的项目中直接拿出使用。

控件效果图如图所看到的:

測试用的MainActivity.java:

package zhangphil.view;

import java.util.ArrayList;

import zhangphil.underline.R;

import com.viewpagerindicator.UnderlinePageIndicator;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle; /**
* 基于第三方开源控件ViewPagerIndicator的UnderlinePageIndicator。自己写的一个在选项卡底部有衬线的滑动控件。
* 控件效果图如图所看到的。 这里面有一个特别的效果是:头部的选项卡在ViewPager切换过程中。底部的滑块也随之动态渐渐滑动过渡。
*
* */ public class MainActivity extends ActionBarActivity { private TabLinearLayout mTabLinearLayout;
private ArrayList<Fragment> mArryList;
private ViewPager mPager; // 未被选中的选项卡字体颜色
private int COLOR_NORMAL = Color.DKGRAY; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); mArryList = new ArrayList<Fragment>();
// 初始化5个Fragment作为測试。
for (int i = 0; i < 5; i++) {
TestFragment f = (TestFragment) TestFragment.newInstance();
f.id = i;
mArryList.add(f);
} PagerAdapter mAdapter = new MyFragmentAdapter(
getSupportFragmentManager()); mPager = (ViewPager) findViewById(R.id.pager);
mPager.setAdapter(mAdapter); UnderlinePageIndicator mIndicator = (UnderlinePageIndicator) findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
mIndicator.setFades(false);
mIndicator.setSelectedColor(0xff33B5E5); mTabLinearLayout = (TabLinearLayout) findViewById(R.id.tab_LinearLayout); ArrayAdapter mTabLinearLayoutAdapter = new MyTabLinearLayoutAdapter(
this, -1);
mTabLinearLayout.initialization(mPager, mTabLinearLayoutAdapter,
mIndicator);
} private class MyTabLinearLayoutAdapter extends ArrayAdapter {
private Context context; public MyTabLinearLayoutAdapter(Context context, int resource) {
super(context, resource);
this.context = context;
} @Override
public int getCount() {
return mArryList.size();
} // 在这里只返回一个TextView作为选项卡的View。
// 此处能够返回更丰富的View。
@Override
public View getView(int position, View convertView, ViewGroup parent) { TextView v = new TextView(context);
v.setGravity(Gravity.CENTER);
v.setText("选项卡" + position);
v.setTextColor(COLOR_NORMAL); return v;
}
} // 只用于測试的Fragment。用一个id标识。
private static class TestFragment extends Fragment { public int id; public static Fragment newInstance() {
return new TestFragment();
} public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) { TextView v = new TextView(getActivity());
v.setGravity(Gravity.CENTER);
v.setTextSize(50f);
v.setText("Fragment: " + id); return v;
}
} private class MyFragmentAdapter extends FragmentPagerAdapter { public MyFragmentAdapter(FragmentManager fm) {
super(fm);
} @Override
public Fragment getItem(int position) {
return mArryList.get(position);
} @Override
public int getCount() {
return mArryList.size();
}
}
}

MainActivity.java须要的activity_main.xml布局文件:

<?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" > <zhangphil.view.TabLinearLayout
android:id="@+id/tab_LinearLayout"
android:layout_width="match_parent"
android:layout_height="30dip"
android:orientation="horizontal" /> <com.viewpagerindicator.UnderlinePageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="7px" /> <View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#33B5E5" /> <android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" /> </LinearLayout>

自己重写的TabLinearLayout.java:

package zhangphil.view;

import com.viewpagerindicator.PageIndicator;

import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.TextView; public class TabLinearLayout extends LinearLayout { private int COLOR_NORMAL = Color.DKGRAY;
private ArrayAdapter mAtapter;
private ViewPager mPager;
private TabLinearLayoutListener mTabLinearLayoutListener; public TabLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
} public TabLinearLayout(Context context) {
super(context);
} public void initialization(ViewPager mPager, ArrayAdapter mAtapter,
PageIndicator mPageIndicator) {
this.mAtapter = mAtapter;
this.mPager = mPager; mPageIndicator
.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override
public void onPageSelected(int pos) {
setCurrentItem(pos); if (mTabLinearLayoutListener != null)
mTabLinearLayoutListener.onTab(pos);
} @Override
public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override
public void onPageScrollStateChanged(int arg0) { }
}); // 加入选项卡
addIndicators(); // 初始化,第0项被选中
setIndicatorViewSelected(0);
} public void initialization(ViewPager mPager, ArrayAdapter mAtapter,
PageIndicator mPageIndicator,
TabLinearLayoutListener mTabLinearLayoutListener) { this.mTabLinearLayoutListener = mTabLinearLayoutListener; initialization(mPager, mAtapter, mPageIndicator);
} // 加入Tab选项卡
private void addIndicators() {
for (int i = 0; i < mAtapter.getCount(); i++) {
View v = mAtapter.getView(i, null, null);
addIndicatorItem(v, i);
}
} // 在这里设置被选中时候选项卡变化的效果
private void setIndicatorViewSelected(int pos) {
for (int i = 0; i < super.getChildCount(); i++) {
if (i == pos) {
View v = super.getChildAt(i);
TextView tv = (TextView) v;
// Android Holo 样式的蓝色
tv.setTextColor(0xff33B5E5);
} else {
View v = super.getChildAt(i);
TextView tv = (TextView) v;
tv.setTextColor(COLOR_NORMAL);
}
}
} // 在线性布局里面依次加入一个View,为加入的View加入事件。
private void addIndicatorItem(View view, final int index) {
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.MATCH_PARENT, 1);
super.addView(view, index, params);
view.setOnClickListener(new View.OnClickListener() { @Override
public void onClick(View v) { // 当用户点击该View时候,设置ViewPager正确而Pager Item
if (mTabLinearLayoutListener != null)
mTabLinearLayoutListener.onTab(v, index); // 设置ViewPager的显示项。 mPager.setCurrentItem(index, true);
setCurrentItem(index);
}
});
} // 设置当前LinearLayout的pos项子view被选中。 public void setCurrentItem(int pos) {
setIndicatorViewSelected(pos);
} // 一个接口。当用户点击选项卡时候,方法被回调。 public interface TabLinearLayoutListener {
public void onTab(View v, int pos); public void onTab(int pos);
}
}

Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡的更多相关文章

  1. Android ViewPager+TabHost实现首页导航

    今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性: 先上效果图,如下: 代码里面有注释,就 ...

  2. 【Android 应用开发】Android - TabHost 选项卡功能用法详解

    TabHost效果图 : 源码下载地址 : http://download.csdn.net/detail/han1202012/6845105        . 作者 :万境绝尘  转载请注明出处  ...

  3. Android - TabHost 选项卡功能用法详解

    TabHost效果图 : 源码下载地址 : http://download.csdn.net/detail/han1202012/6845105        . 作者 :万境绝尘  转载请注明出处  ...

  4. Android Tabhost置于底部

    方法一: <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id=&qu ...

  5. TabTopAutoLayout【自定义顶部选项卡区域(带下划线)(动态选项卡数据且可滑动)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果 ...

  6. TabTopAutoTextSizeLayout【自定义文字字号区域(动态选项卡数据且可滑动)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现可滑动效果.[实际情况中建议使用RecyclerView] 对<TabTo ...

  7. TabHost选项卡的实现(二):使用Fragment实现

    在上一篇博客<TabHost选项卡的实现(一):使用TabActivity实现>中,讲解了如何使用TabActivity创建管理选项卡,但是,通过TabActivity创建选项卡的方式已经 ...

  8. Android ViewPager使用详解

    这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等.那如 ...

  9. 【Android 界面效果21】Android ViewPager使用详解

    这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等.那如 ...

随机推荐

  1. PHP23 AJAX分页

    模型代码设计 以留言信息管理为例. 获取根据条件查询记录总数和分页数据. <?php namespace application\admin\models; use core\mybase\Mo ...

  2. 解决SimpleDateFormat线程安全问题

    package com.tanlu.user.util; import java.text.DateFormat; import java.text.ParseException; import ja ...

  3. windows本机域名配置

    路径: C:\Windows\System32\drivers\etc打开hosts文件如下: # Copyright (c) - Microsoft Corp. # # This is a samp ...

  4. 部署安装lnmp

    链接:http://pan.baidu.com/s/1skMSgDv 密码:h8rn 此安装包可在阿里云所有linux系统上部署安装.此安装包包含的软件及版本为:nginx:1.0.15.1.2.5. ...

  5. POJ 3259 Wormholes(负权环路)

    题意: 农夫约翰农场里发现了很多虫洞,他是个超级冒险迷,想利用虫洞回到过去,看再回来的时候能不能看到没有离开之前的自己,农场里有N块地,M条路连接着两块地,W个虫洞,连接两块地的路是双向的,而虫洞是单 ...

  6. div添加滚动条

  7. Android渐变GradientDrawable叠加组合环ring

     Android渐变GradientDrawable叠加组合环ring 写一个Android环形shape之间的叠加组合形成新图像的例子.代码: <?xml version="1. ...

  8. Linux基础之重定向|grep

    重定向 >    :覆盖输出>>    :追加输出 2>    :重定向错误输出2>>    : 追加方式 &>    : 重定向标准输出或者错误输出 ...

  9. [USACO10FEB]慢下来Slowing down

    线段树  树的dfs序 来自   洛谷 P1982   的翻译 by  GeneralLiu 来自 jzyz 的翻译 %mzx 线段树  dfs序 数据结构的应用 “数据结构 是先有需求 再有应用” ...

  10. HDU1272 迷宫通路数

    Problem Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该 ...