Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡
《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选项卡底部滑块动态滑动过渡的更多相关文章
- Android ViewPager+TabHost实现首页导航
今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性: 先上效果图,如下: 代码里面有注释,就 ...
- 【Android 应用开发】Android - TabHost 选项卡功能用法详解
TabHost效果图 : 源码下载地址 : http://download.csdn.net/detail/han1202012/6845105 . 作者 :万境绝尘 转载请注明出处 ...
- Android - TabHost 选项卡功能用法详解
TabHost效果图 : 源码下载地址 : http://download.csdn.net/detail/han1202012/6845105 . 作者 :万境绝尘 转载请注明出处 ...
- Android Tabhost置于底部
方法一: <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id=&qu ...
- TabTopAutoLayout【自定义顶部选项卡区域(带下划线)(动态选项卡数据且可滑动)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果 ...
- TabTopAutoTextSizeLayout【自定义文字字号区域(动态选项卡数据且可滑动)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现可滑动效果.[实际情况中建议使用RecyclerView] 对<TabTo ...
- TabHost选项卡的实现(二):使用Fragment实现
在上一篇博客<TabHost选项卡的实现(一):使用TabActivity实现>中,讲解了如何使用TabActivity创建管理选项卡,但是,通过TabActivity创建选项卡的方式已经 ...
- Android ViewPager使用详解
这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等.那如 ...
- 【Android 界面效果21】Android ViewPager使用详解
这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等.那如 ...
随机推荐
- 树状数组 || POJ 2352 Stars
Astronomers often examine star maps where stars are represented by points on a plane and each star h ...
- 线段树、KMP、HASH模板
线段树 #include<cstdio> using namespace std; int n,p,a,b,m,x,y,ans; struct node { int l,r,w,f; }t ...
- Gameia
F - Gameia HDU - 6105 Alice and Bob are playing a game called 'Gameia ? Gameia !'. The game goes l ...
- java(List或Array数组)求交集、并集、差集, 泛型工具类
业务需要求不同类型的交集.并集.差集为避免代码冗余编写工具类. 注:list 转数组需传入数组,如果将原数组传入将会改变原数组的值,同时泛型数组又不可以实例化,解决方案:Arrays.copyOf(n ...
- H5在ios弹窗状态下调起输入法后关闭输入法页面元素错位解决办法
最近开发移动端,有个需求:点击退款弹出文本框和发送短信按钮,输入手机号码和验证码确定退款. 发现安卓手机没毛病,但是在ios手机上点击文本框调起输入法,此时点击完成或者关闭输入法就无法正常操作了,肉眼 ...
- Java学习之集合框架的迭代器--Iteratorjk及ListItertor接口
通常情况下,你会希望遍历一个集合中的元素.例如,显示集合中的每个元素.一般遍历数组都是采用for循环或者增强for,这两个方法也可以用在集合框架,但是还有一种方法是采用迭代器遍历集合框架,它是一个对象 ...
- Coreldraw绘制标准波浪线
Coreldraw中如何绘制标准波浪线? 先画一根直线,单击工具栏中的“互动式工具组”,选择“互动式变形工具”, 再在弹出的属性栏中选择“拉链变形”,在幅度和频率中分别输入波形的波峰 到波底的值.波浪 ...
- luogu4093 [HEOI2016/TJOI2016]序列
因为一个变化只会变化一个值,所以 \(dp[i]=max(dp[j])+1,j<i,maxval_j \leq a[i], a[j] \leq minval_i\) 发现跟二维数点问题挺像,树状 ...
- 大数据学习——hive基本操作
1 建表 create table student(id int,name string ,age int) row format delimitedfields terminated by ','; ...
- C++中的左移、右移运算
移位运算包含“逻辑移位”(logical shift)和“算术移位”(arithmetic shift). 逻辑移位:移出去的位丢弃,空缺位(vacant bit)用 0 填充. 算术移位:移出去的位 ...